基本
作り方は、毎回同じ4ステップ
最初に覚える
この帳の使い方はシンプル。その回のプロンプトをコピー→（ ）を自分の言葉に置きかえ→Geminiに送る→出てきたコードを保存して開く。これだけです。
- STEP 1｜Gemini を開く：gemini.google.com に大学アカウントでログイン → その回のプロンプトを貼り、（ ）を埋めて送信
- STEP 2｜コードを全部コピー：出てきたHTMLコードの右上のコピーボタンで全文をコピー（途中で切れていたら「続きを出して」）
- STEP 3｜メモ帳に貼って保存：メモ帳（Windowsなら「メモ帳」アプリ）に貼り、「名前を付けて保存」→ ファイル名を app.html（末尾を必ず .html に）・文字コードは UTF-8
- STEP 4｜ダブルクリックで開く：保存したファイルを開くとブラウザで自分のアプリが動く。スマホの人はペアの人のPCで一緒にやってOK
🆘 動かない・真っ白・途中で切れた→ 慌てず「制作お助けカード」のつまずき対処へ。「エラーが出ました。直したコードの全文をもう一度出してください」で大体直ります。
プログラミングの知識はいりません。
必要なのは「何を作りたいか」をことばにする力だけ。
⚠️ 共通の注意：①個人情報（本名のフルネーム・成績など）はプロンプトに入れない（ニックネームでOK） ②無料枠で足ります（1回の実習でプロンプト1〜3回） ③提出は毎回「動いた画面のスクリーンショット＋工夫した点ひとこと」を manaba へ（先生の指示に従う）。
第1回
自己紹介カード ― 記念すべき第1号
今日は手順に慣れる回
🎯 完成条件：ブラウザに自分のニックネームと目標が表示されたら成功。それ以上は求めません。
今日書く「半年後の自分への手紙」の中身を、そのまま動くカードにしてみよう。自分のことばがアプリになる感覚を、初日に体験する回。
英語学習の自己紹介カードを、1つのHTMLファイルで作ってください。スマホでも見やすい、やさしい色のデザインでお願いします。
表示する内容：
・ニックネーム：「（ ）」
・英語学習の目標：「（ ）」
・半年後になりたい姿：「（ ）」
さらにボタンを1つ置いて、押すと「未来の自分からのひとこと」＝「（ ）」が表示されるようにしてください。
コードは1ファイル完結で、全文を出してください。
コピーしました ✓
💪 +αチャレンジ：ボタンを押すたびにカードの背景色が変わるようにしてもらおう（「ボタンを押すたびに背景色も切り替えてください」と追加で送るだけ）。
第2回
英語学習ストリークカウンター
テーマ：習慣化
🎯 完成条件：「今日やった！」を押すと連続日数が増え、ブラウザを閉じても消えないこと。
③ミニ講座で学ぶ「小さくやって『できた』→やる気」の好循環を、自分の道具にする。記録が見えると、続く。
英語学習の連続日数カウンターを、1つのHTMLファイルで作ってください。
・「今日やった！」ボタンを押すと、連続日数が大きく表示される
・記録は localStorage に保存して、ブラウザを閉じても消えないようにする
・同じ日に2回押しても1日分だけ数える。1日あいたら0に戻る
・画面の上に私の目標「（ ）」を表示する
コードは1ファイル完結で、全文を出してください。
コピーしました ✓
💪 +αチャレンジ：目標「（ ）日」までの進み具合をバーで表示してもらおう。
第3回
翻訳くらべビューア
テーマ：翻訳アプリ
🎯 完成条件：自分の訳とAIの訳が左右に並んで表示されること。
今日の授業で比べた「自分の訳 vs AIの訳」を、並べて眺める道具を作る。並べると、違いが見える。
英文の翻訳を見比べるページを、1つのHTMLファイルで作ってください。
・入力欄が3つ：「元の英文」「訳A（自分の訳）」「訳B（AIの訳）」
・「比べる」ボタンを押すと、訳Aと訳Bが左右のカードに並んで表示される
・見出しは「翻訳くらべ」。スマホでは上下に並んでOK
コードは1ファイル完結で、全文を出してください。
コピーしました ✓
💪 +αチャレンジ：それぞれの訳の文字数も表示してもらおう（長さの違いも比較材料）。
第4回
文法直感クイズ
テーマ：チョムスキー×生成AI
🎯 完成条件：自作の5問が出題され、最後に正答数が出ること。
授業で試した「ありえる文／ありえない文」の直感を、クイズアプリにする。問題を自分で作るのがこの回の本体（出題者になると、文法直感が言語化される）。
英語の文法直感クイズを、1つのHTMLファイルで作ってください。
・文を1つずつ表示し、「ありえる文」「ありえない文」の2択ボタンで答える
・答えるとすぐ正解／不正解が表示され、次の問題へ進む
・最後に「5問中◯問正解」と表示する
・問題は次の5問です（文／正解の順）：
1.（ ）／（ ）
2.（ ）／（ ）
3.（ ）／（ ）
4.（ ）／（ ）
5.（ ）／（ ）
コードは1ファイル完結で、全文を出してください。
コピーしました ✓
💪 +αチャレンジ：間違えた問題だけ、最後にもう一度出題してもらおう。
第5回
指示の実験場 ― 曖昧 vs 具体的
テーマ：自然言語とプログラミング言語
🎯 完成条件：2つのプロンプトの結果を見比べて、違いを1行で言えたらゴール（アプリの出来は問わない）。
今日は特別ルール：同じお願いを「曖昧な言い方」と「具体的な言い方」で2回作らせて比べる実験。AIにとって曖昧さが何を意味するか、体でわかる回。
実験①：まず曖昧な指示で
ボタンがあるページを作って。押すと色が変わるようにして。
コピーしました ✓
実験②：次に具体的な指示で（新しいチャットで）
1つのHTMLファイルで、中央に大きなボタンが1つあるページを作ってください。
・ボタンの文字は「（ ）」
・押すたびに、ページの背景色が「（ ）」→「（ ）」→「（ ）」の順に切り替わり、また最初に戻る
・今何色モードかを、ボタンの下に文字でも表示する
コードは1ファイル完結で、全文を出してください。
コピーしました ✓
📝 manabaに書くこと：①と②の結果はどう違った？ AIは曖昧な部分をどう「勝手に補った」？（1〜2行）
第6回
シャドーイング・タイマー
テーマ：脳科学・メタ認知
🎯 完成条件：台本が表示され、30秒タイマーが動いて、★で自己評価できること。
「意識してできる」を「無意識でできる」に変える練習（自動化）を支える道具。★の自己評価は、まさにメタ認知の実践。
シャドーイング練習ページを、1つのHTMLファイルで作ってください。
・画面に英語の台本を大きく表示する。台本：「（今日の授業で使った英文などを貼る）」
・「スタート」ボタンで30秒のカウントダウンタイマーが動く
・タイマーが終わったら、「できた度」を★1〜★5のボタンで記録できる
・記録した★は画面の下に履歴として並んでいく
コードは1ファイル完結で、全文を出してください。
コピーしました ✓
💪 +αチャレンジ：★の履歴を localStorage に保存して、次に開いた時も残るようにしてもらおう。
第7回
エッセイ構成ビルダー（米式）
テーマ：論理①（米・仏）
🎯 完成条件：主張と理由を入れると、米式5段落のアウトラインに整形されること。
「主張が先・根拠が続く」アメリカ式エッセイの型を、型に流し込む道具にする。型が道具になると、型の意味がわかる。
英語エッセイの構成メモを作るページを、1つのHTMLファイルで作ってください。
・入力欄：「主張（Thesis）」「理由1」「理由2」「理由3」
・「アウトラインを作る」ボタンを押すと、アメリカ式の5段落構成に整形して表示する：
Introduction（主張を予告）→ Body 1〜3（理由を1つずつ）→ Conclusion（主張を再確認）
・各段落に、入力した内容がはまった形で表示される
コードは1ファイル完結で、全文を出してください。
コピーしました ✓
💪 +αチャレンジ：「フランス式（テーゼ→アンチテーゼ→ジンテーゼ）に切り替えるボタン」を足してもらおう（第8回への予告編）。
第8回
4つの型スイッチャー
テーマ：論理②（日・イラン）
🎯 完成条件：同じ主張が4カ国式の骨組みに切り替わって表示されること。
米・仏・日・イラン——同じ主張でも「良い文章」の組み立ては4通り。切り替えて眺めると、論理は文化の数だけあることが目に見える。
同じ主張を4つの文化の「論理の型」で表示するページを、1つのHTMLファイルで作ってください。
・主張の入力欄が1つ（例：「（ ）」）
・ボタンが4つ：「アメリカ式」「フランス式」「日本式」「イラン式」
・押した型の構成テンプレ（見出しの骨組み）に主張をはめて表示する：
アメリカ式＝主張→根拠→再主張／フランス式＝テーゼ→アンチテーゼ→ジンテーゼ／日本式＝体験・共感から入り主張は最後／イラン式＝権威ある言葉の引用から入る
・各型に1行の説明を添える
コードは1ファイル完結で、全文を出してください。
コピーしました ✓
💪 +αチャレンジ：自分が今週書いた文章を入れて、4つの型で読み比べてみよう。
第9回
不安の捉え直しカード
テーマ：メンタル
🎯 完成条件：ボタンを押すたびに、自作の捉え直しカードがランダムに1枚出ること。
不安は消せないが、言い換えることはできる（捉え直し）。効くのは他人の言葉より自分の言葉——だからペアの5組は自分で書く。それがこの回の本体。
英語学習の「不安の捉え直しカード」アプリを、1つのHTMLファイルで作ってください。
・「カードをめくる」ボタンを押すたびに、下の5組からランダムに1組がカード風に表示される（上段＝不安、下段＝捉え直し）
・ペアは次の5組です：
1. 「間違えたら恥ずかしい」→「間違いは脳が学んでいる証拠」
2. 「（ ）」→「（ ）」
3. 「（ ）」→「（ ）」
4. 「（ ）」→「（ ）」
5. 「（ ）」→「（ ）」
・やさしい、安心する色のデザインで
コードは1ファイル完結で、全文を出してください。
コピーしました ✓
💪 +αチャレンジ：カードがふわっと切り替わるアニメーションを付けてもらおう。
第10回
マイ学習ルーティン表
テーマ：生成AI活用
🎯 完成条件：曜日ごとにチェックでき、閉じても記録が残り、達成数が出ること。
③で完成させる「自分のAI学習ルーティン」を、毎週回すための管理表。第2回のストリークカウンターの発展形——半年間の集大成の道具。
1週間の英語学習ルーティン表を、1つのHTMLファイルで作ってください。
・月〜日の7行。それぞれの行に、私のその日のタスクを表示する：
月「（ ）」火「（ ）」水「（ ）」木「（ ）」金「（ ）」土「（ ）」日「（ ）」
・各行にチェックボックスがあり、できた日に印をつけられる
・チェックは localStorage に保存して、閉じても残る
・表の上に「今週の達成：◯/7」と大きく表示する
・「今週をリセット」ボタンも付ける
コードは1ファイル完結で、全文を出してください。
コピーしました ✓
💪 +αチャレンジ：達成数に応じて応援メッセージが変わるようにしてもらおう（0〜2／3〜5／6〜7で3段階）。
その先
第11回からは、自分のアプリへ
接続
ここまでで、きみは10個のアプリを作った経験者。第11回からは「作らされる」から「作りたいものを作る」へ切り替わります。
- 第11回：仕様の言語化を本格的に学び、自由制作の試作第1号を作る（→ 週11カード）
- 第12〜14回：グループで「英語学習＋身近な困りごと」アプリを制作・改善・発表（→ 制作お助けカードを手元に）
毎回の15分は、ぜんぶ最終発表への筋トレでした。
10回続けたきみは、もう「作れる人」です。