AI活用によるアプリケーション開発実践①
Day 10 で掴んだ「アプリ開発の地図」を、今日は実際に歩いてみる回です。
AIにコードを書かせて"画面"を作る段階から卒業し、API（AIの脳みそ）と通信して動く"アプリケーション"を生成・公開する体験をします。
本日の研修ねらい
AIでアプリケーションの基本構造とUIを生成する手法を体験し、開発の基礎プロセスを習得する
Day 10 で学んだ「アプリ開発の地図」を、今日は実際に歩いてみる回です。AIにコードを書かせてただの"画面"を作る段階から卒業し、API（AIの脳みそ）と通信して動く"アプリケーション"を生成・公開するプロセスを体験します。
💭 「前までのWeb制作と何が違うの？」への回答
Day 10 までで作ってきたのは、情報を"見せる"ためのホームページ（＝ポスターやパンフレットのような静的なWeb制作）でした。
Day 11 から作るのは、ユーザーの入力に反応して計算・通信・返答する"動くシステム"（＝電卓やチャットボットのような動的なWebアプリ開発）です。
今日の真のテーマは、「ただの画面から卒業し、AI（API）と通信して動くアプリを生成・公開する」体験を積むこと。
Web制作 vs アプリ開発 の違い
ここを押さえれば、今日の動画・ツール紹介がすっと入ってきます。
| Web制作（Day 7〜10） | アプリ開発（Day 11〜） | |
|---|---|---|
| ひと言で | 📄 見せるだけのポスター | ⚙️ 動くシステム |
| 例え | 会社案内のパンフレット | 電卓・チャットボット・予約フォーム |
| ユーザーは | 読む・見る・リンクをクリック | 入力 → 結果を受け取る |
| 裏側の技術 | HTML / CSS（見た目だけ） | API連携（AIの脳みそを借りる） |
| データ | 固定（書いた通りのまま） | リアルタイムに変化する |
AI Studio で"アプリを生成"
Google AI Studio の Build 機能 と APIキー の仕組みを掴みます（動画2本）。
Stitch / GenSpark で"スマホアプリ化"
UIコンポーネント生成から、話すだけで iOS / Android アプリをリリースできる時代までを体験（動画2本）。
課題制作 → Padlet シェア
自分の業務に役立つ1作を作り、Day 13 成果発表の第二稿として Padlet に投稿します。
🧪 今日のツール：Google AI Studio
今日の主役は Google AI Studio。ただAIとチャットするだけのツールではなく、AIの"脳みそ"をあなたのアプリに組み込める 開発基盤です。
「APIキー」という言葉がたくさん出てきますが、"AIの脳みそを借りるための鍵"と覚えておけばOK。
※ Cloud Run は 90日間有効な $300 クレジットあり。クレカ登録が必要です。
動画（前半）— 2本
サムネイルをクリックすると、このページ内で再生が始まります（Facadeパターン）。
動画①で学べること（3つのポイント）
- 1 AI Studioとは — Geminiの高性能AIモデルを無料でテスト・操作できる開発者向けコンソール
- 2 APIキーとは — あなたのアプリとGoogleのAI頭脳を繋ぐ「鍵（パスワード）」。これがないとアプリは空っぽの箱のまま
- 3 裏側の仕組み — ChatGPTもGeminiも、裏ではAPIキーを使ってAIサーバーに質問を投げて答えを受け取っている
動画②で学べること（3つのポイント）
- 1 Build機能 — AI Studioに搭載された「日本語で指示→即アプリ生成」の神機能。コーディング知識ゼロでOK
- 2 実演トップ5 — 動画内で業務効率化アプリを5つ、プロンプトから完成までノーカットで実演
- 3 常識の崩壊 — 「アプリ開発＝難しいプログラミング言語」という思い込みが完全に覆る体験
🔑 APIキー＝"AIの脳みそを借りてくる鍵"
難しい仕組みは覚えなくてOK。「鍵を使って、Google の賢いAIに質問して、答えを受け取っている」というイメージだけ掴めれば十分です。
ユーザーの質問・入力を受け取る"入れ物"
鍵を使って Google の AI 基盤へ問い合わせ
アプリがユーザーに結果を表示
💡 あなたのアプリ＝頭脳を持たない入れ物。APIキーでGoogleの頭脳を借りて賢くなる。
⚠️ APIキーは絶対に他人に見せない
GitHub公開やSNS投稿で漏れると、第三者に使われて高額請求が発生します。管理方法は動画内で解説されています。
🚀 プログラミング知識ゼロで"スマホアプリ"まで出せる時代
後半は、さらに革命的な2つのツールを紹介します。Stitch で"UIコンポーネント"を生成し、GenSpark で"話すだけで iOS / Android アプリをリリース" できる——という体験です。
「作りたいもののイメージを言葉で伝えられればアプリが作れる時代」が、もうすでに来ています。
動画（後半）— 2本
サムネイルをクリックすると、このページ内で再生が始まります（Facadeパターン）。
動画③で学べること
- 1 Stitchに「こんな画面を作って」とテキストで指示するだけでUIデザインが生成される
- 2 生成されたデザインは画像ではなくそのまま動くコードとして出力される
- 3 デザイン→開発の「翻訳作業」がゼロになり、アイデアから即プロトタイプが完成
動画④で学べること
- 1 GenSparkに「英単語帳アプリを作って」と話しかけるだけでスマホアプリが構築される
- 2 スワイプ操作・正答率トラッキングなど本格的な機能が会話だけで実装される
- 3 iOS / Android 両対応でストア公開レベルまで到達可能
ツールの進化マップ — 何がどこまでできる？
Webアプリを
自動生成
API連携で
AIの頭脳を搭載
UIデザインを
即コード化
スマホアプリ
まで自動生成
 Stitch
|
GenSpark | |
|---|---|---|
| ひと言で | AIに画面デザインを作らせる | AIにスマホアプリを丸ごと作らせる |
| 入力 | 「こんな画面が欲しい」とテキスト入力 | 「こんなアプリが欲しい」と会話 |
| 出力 | 綺麗なUI部品＋そのまま使えるコード | iOS / Android 対応のスマホアプリ |
| 動画内の実例 | テキスト指示だけでアプリ画面を自動生成 | 「英単語帳アプリ」を会話だけで構築（正答率トラッキング付き） |
| すごい点 | デザイン→コード変換の手間がゼロ | プログラミング知識ゼロでストア公開レベル |
🌟 知識ゼロでもアプリが世に出せる時代
Bolt.new（Webアプリ）→ AI Studio（API連携アプリ）→ Stitch + GenSpark（スマホアプリ）。
この3層で、「作りたい！」がプログラミング知識なしで全て形になります。
TODAY's MISSION
今日までに学んだAIツールを総動員して、自分の業務に役立つ1作を作り、Padlet に第二稿を投稿しましょう。
🎯 実習：自分の業務に役立つ"動くもの"を1つ作る
集大成アウトプット（第二稿）
Day 10 で学んだツール群（Manus / Bolt.new / Cursor / NotebookLM / Gemini Canvas / Antigravity / Dify）に、今日の AI Studio / Stitch / GenSpark を加えた中から、自分の業務に役立つ「アプリ」または「Webサイト」を作成しましょう。
Day 13 の成果発表に向けた第二稿を出すのが今日のゴール。Day 10 で投稿したものをブラッシュアップするのでもOKです。
📖 必読：Web公開ガイドライン
公開前に1枚で要点把握
作ったものを公開する前に、社内向け／社外向けの公開ルール・セキュリティの注意点が1枚にまとまった資料を必ず目を通してください。
📌 作ったものはここにシェア
【DX】社員教育とAIコース 課題シェアボード（Padlet）
※ Day 10 で投稿した方は、今日はそのブラッシュアップ版（第二稿）を投稿してください。
今日のミッションリスト
-
STEP 01: Web制作とアプリ開発の違いを自分の言葉で説明できる
「見せる／動かす・通信する」「パンフレット／電卓・チャットボット」など、例え話で他人に説明できればチェック。
-
STEP 02: APIキー＝「AIの脳みそを借りる鍵」と理解した
自分のアプリ → APIキー → Google の AI → 答えを返す、という3ステップの流れがイメージできればOK。
-
STEP 03: AI Studio の Build 機能でアプリが生成される流れを見た
実際に触るのが理想ですが、動画の中で流れを確認しただけでもチェックOK。
-
STEP 04: Stitch / GenSpark が「UI → アプリ → スマホリリース」まで繋がると認識した
「知識ゼロでもアプリが世に出せる時代」の感覚を掴めればチェック。
-
STEP 05: Padlet に作品を1つ投稿した（Day 13 成果発表の第二稿）
Day 10 投稿のブラッシュアップでもOK。Padlet に第二稿を出したら今日は100点満点です。
次のステップ（Day 12）
次回 Day 12 では、今日作った"動くもの"をさらに磨き上げる実践②に進みます。今日掴んだ「API × アプリ」の感覚が、そのまま次回のベースになります。