このハンズオンでは、Google AI Studioの左側にある Build タブを使って、プロンプトだけで右側にアプリが生成される流れを体験します。

• Build タブの基本画面（左: 指示、右: アプリ表示）を理解する
• プロンプトから動くアプリを生成する
• 指示を調整してアプリの見た目とふるまいを改善する

• Googleアカウント
• インターネット接続
• 最新版のブラウザ（Chrome推奨）

1. Google AI Studio にアクセスします。
2. Googleアカウントでログインします。
3. 初回表示時は利用規約を確認して進みます。

1. 画面左のメニューから Build を選択します。
2. レイアウトが「左: 指示入力」「右: アプリプレビュー」になっていることを確認します。
3. 左側の入力欄に、作りたいアプリの内容を文章で書きます。

以下のプロンプトを左側の入力欄に貼り付け、実行ボタン（Generate/Runなど）を押してください。

高校生向けの学習用ミニアプリを作ってください。
要件:
- タイトルは「英単語クイズ」
- 4択問題を1問表示する
- 回答後に正解/不正解を表示する
- 配色は見やすいシンプルなデザインにする

観察ポイント

• 右側にアプリが表示されるか
• 指示した要件（タイトル、4択、判定表示）が反映されているか
• 画面レイアウトや配色が見やすいか

次のように要件を追加して、もう一度実行してください。

高校生向けの学習用ミニアプリを作ってください。
要件:
- タイトルは「英単語クイズ」
- 4択問題を3問にする
- 1問ごとに「次へ」ボタンを表示する
- 最後にスコア（3問中何問正解か）を表示する
- スマホ画面でも見やすいレイアウトにする

• アプリの種類を明確に書く（例: クイズ、ToDo、計算機）
• 必須要件を箇条書きで指定する（機能、画面、表示項目）
• 対象端末を指定する（PC向け、スマホ向け）
• デザイン条件を入れる（色、余白、フォントサイズ）

次のいずれかを試し、右側のアプリがどう変わるか確認しましょう。

1. 対象を「小学生向け」に変える
2. 「ダークモード対応」を追加する
3. 「結果画面に励ましメッセージを表示」を追加する

Build タブでは、左側で要件を文章化し、右側でアプリとしてすぐ確認できるため、試行錯誤がしやすいのが特徴です。

最初は最小限の要件で作り、必要な機能を1つずつ追加していくと、意図したアプリに近づけやすくなります。