①
まず全体像：作り方は「3ステップの繰り返し」だけ
最初に読む
難しく考えなくて大丈夫。やることは、この3つをぐるぐる回すだけです。一発で完璧を狙わず、少しずつ育てます。
STEP 1
作らせる
やりたいことを日本語でGeminiに伝える。まずは一番大事な1機能だけ。
STEP 2
動かす
出てきたコードを保存して、ダブルクリックで開く。実際に触ってみる。
STEP 3
直す
直したい所・足したい機能を1つだけAIに追加でお願いする。→STEP2へ戻る。
この1→2→3をぐるぐる。1回に1つずつ足す・直すのがコツ。
②
いちばん大事：コードの保存のしかた
これで詰まる人が一番多い
AIが書いたコードは、正しく保存できないと動きません。次回に持ち越せないと制作が振り出しに戻ります。ここだけは丁寧に。
💬 Geminiの返答（イメージ図）── コードはこういう「箱」で出てくる
→コードの箱の右上あたりにあるコピーボタンを押すと、全文が一度にコピーされる（1行ずつ選ぶ必要なし）。※画面デザインは変わることがある。場所が違っても「コード全文をコピー」できればOK。
- AIが出したコードの右上のコピーボタンを押す（無ければ、先頭
<!doctype html> から末尾 </html> まで全部選んでコピー）
- メモ帳（Windows）やテキストエディット（Mac）を開いて貼りつける
- 「名前を付けて保存」→ ファイル名を
myapp.html のように、最後を .html にする（文字コードは UTF-8）
- できたファイルをダブルクリック。ブラウザで開いて動けば成功！
- ★動いたら、別の名前でもう1つ保存（例
myapp_ok1.html）。＝直して壊れた時に戻れる「セーブポイント」
- Googleドライブに上げておく（次回持参用）。指示文（プロンプト）もメモで一緒に保存――最悪ファイルが消えても、指示文があれば作り直せる
⚠️ うまくいかない時は「② コピー漏れ（先頭〜末尾）」「③ 拡張子が .html になっているか」をまず確認。それでもダメなら、下の ⑤つまずき対処 へ。
⚠️ Geminiの画面の中でアプリが動いて見えること（プレビュー機能）もある。それは確認用としては便利。でも必ずコードをコピーして .html ファイルでも保存すること——ファイルが手元に無いと、次回に持ち越せない。
③
コピペで始める：最初のプロンプト
STEP 1
下の型の ____ を自分たちのアプリに書きかえて、Geminiに送るだけ。最初は「1機能だけ」で頼むのが成功のコツです。
あなたはWeb開発者です。次の仕様で、HTML・CSS・JavaScriptを1つにまとめた「単一HTMLファイル」を作ってください。外部のライブラリは使わず、ファイルをダブルクリックしただけで動くようにしてください。
・誰が使う：____（例：英語が苦手な大学生）
・作りたいもの：____（例：英単語のフラッシュカード）
・まず必要な機能（1つだけ）：____（例：カードに単語を1枚表示する）
・見た目：____（例：スマホで見やすい、やさしい色、大きな文字）
まずは一番大事な1機能だけでOKです。コードは全文を1つのコードブロックにまとめて出してください。
コピーしました ✓
ポイント
欲張って機能を5個も6個も一度に頼むと、AIも間違えやすく、直す所も分からなくなります。「まず1つ動かす」→「1つずつ足す」が、遠回りに見えて一番速い道です。
④
1つずつ足していく（走行例：単語フラッシュカード）
STEP 3 を繰り返す
土台ができたら、機能を1回に1つずつ足していきます。追加のお願いは、いつもこの型でOK：
今のコードに、次の機能を1つだけ追加してください：____。
ほかの部分は変えず、コードは全文を1つのコードブロックで出してください。
コピーしました ✓
↓ フラッシュカードなら、たとえばこんな順で（____ に入れる中身の例）：
- 「次へ」ボタンを付ける
→「『次へ』ボタンを押すと次の単語カードに進むようにしてください」
- カードをめくれるようにする
→「カードをクリックすると、英語と日本語が切り替わるようにしてください」
- 単語を増やす・順番をシャッフル
→「単語を10個に増やして、開くたびに順番がランダムになるようにしてください」
- 見た目を整える
→「文字を大きく、中央に配置して、スマホでも見やすいやさしい配色にしてください」
- 記録・ゲーム性を足す（発展）
→「『覚えた／まだ』ボタンを付けて、覚えた数を画面に表示してください」
足すたびに必ず
1つ足したら保存して動作確認。動いたら別名で保存（セーブポイント）。この小刻みが、あとで「直したら壊れた」を防ぎます。良い学習アプリの条件＝①操作がシンプル ②すぐ反応が返る ③また使いたくなる工夫（記録・ゲーム性）。
⑤
つまずいた時：AIにこう言えばいい
困ったらここ
制作中のトラブルは「あるある」です。あわてず、下の言い方でAIに頼めばだいたい解決します。
コードが途中で切れた／全部出てこない
続きが途切れているだけ。そのまま 「続きを出してください」 か 「もう一度、全文を1つのコードブロックで出してください」
保存して開いたら、真っ白／表示が崩れる
まず確認：コードを先頭〜末尾まで全部コピーできている？ ファイル名の最後は .html になっている？ 直らなければ 「このコードが動きません。全文を、単一HTMLで書き直してください」
直したら、別の所が壊れた（デグレ）
あわてず、動いていた版（セーブポイント）に戻る。だから「1つ直す→確認→別名保存」を小刻みにするのが効きます。AIには 「今の動きは残したまま、○○だけ直してください」
AIが同じ間違いを繰り返す／指示が伝わらない
あいまいな指示はAIも察せません。「今こうなっている → こうしたい」を具体的に。「今は○○になっています。△△になるように直してください」（第5回でやった“具体的な指示”）
どこを直せばいいか、思いつかない
AI自身に相談してOK。「このアプリを初めて使う人が、迷いそうな所を3つ教えてください」と聞いて、出てきた中から直す所を選ぶ
⚠️ どのお願いも、直したあとはコードの全文をもう一度もらって保存し直すのを忘れずに。個人情報はアプリに入れないこと。
⑥
人に使ってもらって、良くする（第13回）
試用・改善
自分たちだけで見ていると気づかないことも、他の人が触ると一発で見えます。作って終わりでなく、使ってもらって良くする――これが4年ゼミの制作そのものです。
- 渡す前に、自分たちで最後まで1回触る。ちゃんと動く状態にしてから渡す
- もらった感想の直し方：Geminiに 「“○○という感想をもらいました。この点を直してください”」と伝える
- 全部は直さない。効果の大きい1〜2個から。時間内に全部は無理でOK、1つ良くなれば成功
- フィードバックを出す側も、「良かった点 → 気になった点 → 提案」の順で、具体的に（「使いにくい」でなく「ボタンの場所が分かりにくい」）
⑦
発表の準備（第14回）
3分で話す
最終回は発表会。各グループ3分。話すのは、この3点です。できれば実際にアプリを動かしてデモを見せましょう。
- ①どんな課題を解決するアプリ？ 誰の、どんな困りごとを解くのか
- ②工夫した機能 いちばん見てほしい所・こだわった所
- ③AIとのやりとりで面白かった／苦労したこと どう頼んだら、どう返ってきたか
デモが動かなくても大丈夫
本番でうまく動かないのも「制作あるある」。その時は口頭＋スクリーンショットで説明すればOK。完成度より、半年で「作る側」を体験したことが成果です。