基本
作り方は、毎回同じ4ステップ
最初に覚える
この帳の使い方はシンプル。その回のプロンプトをコピー→（ ）を自分の言葉に置きかえ→Geminiに送る→出てきたコードを保存して開く。これだけです。
- STEP 1｜Gemini を開く：gemini.google.com に大学アカウントでログイン → その回のプロンプトを貼り、（ ）を埋めて送信
- STEP 2｜コードを全部コピー：出てきたHTMLコードの右上のコピーボタンで全文をコピー（途中で切れていたら「続きを出して」）
- STEP 3｜メモ帳に貼って保存：メモ帳（Windowsなら「メモ帳」アプリ）に貼り、「名前を付けて保存」→ ファイルの種類を「すべてのファイル」に変え、ファイル名は回ごとに変える（第1回 app.html／第2回 habit.html など。英字で、末尾を必ず .html に。前と同じ名前にすると、前の回のアプリに上書きされて消える）・文字コードは UTF-8。保存先は OneDrive（大学アカウント。家のPCからも開ける／教室のPCはデスクトップに置くと再起動で消える）
- STEP 4｜ダブルクリックで開く：保存したファイルを開くとブラウザで自分のアプリが動く。自分のPCで開く（うまくいかない時は隣の人と一緒に）
🆘 動かない・真っ白・途中で切れた→ 慌てず「制作お助けカード」のつまずき対処へ。「エラーが出ました。直したコードの全文をもう一度出してください」で大体直ります。
プログラミングの知識はいりません。
必要なのは「何を作りたいか」をことばにする力だけ。
⚠️ 共通の注意：①個人情報（本名のフルネーム・成績など）はプロンプトに入れない（ニックネームでOK） ②学校アカウントなので回数の心配はほぼ不要（1回の実習でプロンプト1〜3回が目安） ③提出は毎回「動いた画面のスクリーンショット＋工夫した点ひとこと」を manaba へ（先生の指示に従う）。
第1回
自己紹介カード ― 記念すべき第1号
今日は手順に慣れる回
🎯 完成条件：ブラウザに自分の名前と目標が表示されたら成功。それ以上は求めません。
今日書く「半年後の自分への手紙」の中身を、そのまま動くカードにしてみよう。自分のことばがアプリになる感覚を、初日に体験する回。
HTML と CSS と JavaScript を 1つのファイルにまとめた「自己紹介カード」のWebページを作ってください。
・名前：（ ）
・半年後の目標：（ ）（今日の手紙に書いた1文を、そのまま入れてください）
・好きなもの：（ ）
条件：
- 説明や解説は書かないでください。コードだけを、1つのコードブロックで出してください。
- <!DOCTYPE html> から </html> まで、1つのファイルで完結させてください。
- 外部のCSSやJavaScriptは読み込まないでください（インターネットに繋がっていなくても開けるようにするため）。
- 日本語が文字化けしないように <meta charset="utf-8"> を必ず入れてください。
- スマートフォンでも見やすいように、文字は大きめにしてください。
- カードは画面の中央に置き、角を丸く、影をつけて、青系の配色にしてください。
- 「半年後の目標」の文字をクリックすると、はげましのメッセージが1つ表示されるようにしてください。
コピーしました ✓
💪 +αチャレンジ：目標を3つにして、それぞれに合ったはげましが出るようにしてもらおう。2つ目・3つ目の目標は自分で考えて（ ）に書き、追加でこう送る：「目標を3つにします。2つ目は「（ ）」、3つ目は「（ ）」です。それぞれの目標をクリックすると、その目標に合ったはげましのメッセージが出るようにしてください。」（目標を書かずに頼むと、AIが勝手に目標を作ってしまいます）。
第2回
英語学習の習慣カウンター
テーマ：習慣化
🎯 完成条件：「今日やった！」を押すと合計日数が増え、ブラウザを閉じても消えないこと。
授業で決めた「いつ・どこで」（もし〜したら、英語を〜する）を、毎日目にする道具にする。1日あいても合計日数は減らない＝1日サボっても習慣は崩れない。
英語学習の習慣カウンターを、1つのHTMLファイルで作ってください。
・画面の上に私の目標「（ ）」を表示する
・その下に私の決めごと「もし（ ）したら、英語を（ ）する」を表示する
・「今日やった！」ボタンを押すと、今日の分が記録される
・「連続日数」と「これまでの合計日数」を大きく表示する
・同じ日に2回押しても1日分だけ数える
・1日あいても合計日数は減らさない。連続日数だけ1からやり直しにする（責めるメッセージは出さない）
・目標と決めごとは、画面の「編集」ボタンで後から書きかえられるようにする（書きかえた内容も保存する）
・記録は localStorage に保存して、ブラウザを閉じても消えないようにする
説明は書かずに、コードは1ファイル完結で、全文を出してください。
コピーしました ✓
💪 +αチャレンジ：目標「（ ）日」までの進み具合をバーで表示してもらおう。
第3回
翻訳くらべビューア
テーマ：翻訳アプリ
🎯 完成条件：英語の例文2つを自分で訳したあと、「AIの訳を見る」でAIの訳が横に並んで表示されること。
今日の授業で比べた「自分の訳 vs AIの訳」を、練習できる道具にする。先に自分で訳してからAIの訳を見ると、違いがよく見える。
英語を日本語に訳す練習ページを、1つのHTMLファイルで作ってください。
・見出しは「翻訳くらべ」
・英語の例文を2つ表示する。例文はあなたが考える（大学生向け・日常の話題・1文15語くらい・少し訳しにくい言い回しを1つ入れる）
・それぞれの例文の下に、自分の日本語訳を書く欄を置く
・「AIの訳を見る」ボタンを押すと、あなたが考えた自然な日本語訳が、自分の訳の横に並んで表示される（押すまでは隠しておく）
・スマホでは上下に並んでOK
コードは1ファイル完結で、全文を出してください。
コピーしました ✓
💪 +αチャレンジ：例文の話題を自分の好きなもの（推し・旅行・バイトなど）に変えて、もう2つ足してもらおう。
第4回
ディクテーション
テーマ：聞き取り（文法の直感）
🎯 完成条件：「▶ 聞く」で英文が読み上げられ、書いて「答え合わせ」を押すと、合っている単語が緑、違う単語が赤で出ること。
第3回のディクテーションを、毎日1分でできる道具にする。聞き取れない音は、文法の直感が助けてくれる。保存名は dictation.html。
英語のディクテーション（聞き取り書き取り）練習アプリを、1つのHTMLファイルで作ってください。
・見出しは「ディクテーション」
・英文を5つ用意する。英文はあなたが考える（大学生向け・日常の話題・1文8〜12語）
・英文は最初は画面に出さない
・「▶ 聞く」ボタンで、いまの英文を英語の声で読み上げる（ブラウザの読み上げ機能を使う。何度でも聞ける。速さは「ふつう」「ゆっくり」を選べる）
・聞いた英文を書く欄と「答え合わせ」ボタンを置く。押すと正解の英文を出し、合っている単語は緑、違う単語と抜けた単語は赤で示す（大文字・小文字と . , は区別しない）
・「次の文へ」ボタンで次の英文へ。最後に「5文中○文、全部正解」と出す
・スマホでも使える大きさにする
コードは1ファイル完結で、全文を出してください。
コピーしました ✓
💪 +αチャレンジ：英文の話題を自分の好きなもの（推し・旅行・バイトなど）に変えてもらおう。
第5回
指示の実験場 ― 単語クイズを2回作る
テーマ：自然言語とプログラミング言語
🎯 完成条件：①と②の2つのクイズを見比べて、違いを1行で言えたらゴール。②のクイズは quiz.html で保存して、復習に使う。
今日は特別ルール：同じお願いを「曖昧な言い方」と「具体的な言い方」で2回作らせて比べる実験。AIにとって曖昧さが何を意味するか、体でわかる回。単語は物語No.3『The Missing Fried Chicken』から。
実験①：まず曖昧な指示で
英単語のクイズを作って。
コピーしました ✓
実験②：次に具体的な指示で（新しいチャットで）
1つのHTMLファイルで、英単語の4択クイズを作ってください。
・単語は次の10個：sizzle, vanish, suspect, guilty, tongs, coworker, wipe, freeze, neatly, exact
・1問ずつ出す。英単語を大きく表示し、日本語の意味を4つの中から選ぶ
・選んだら、正解は緑、まちがいは赤で知らせ、正しい意味と、その単語を使った短い英語の例文を出す
・「次へ」ボタンで次の問題へ。出す順番は毎回ばらばらにする
・最後に「10問中○問正解」と、まちがえた単語の一覧を出し、「まちがえた単語だけもう一度」ボタンを置く
・スマホでも見やすいように、文字とボタンを大きくする
コードは1ファイル完結で、全文を出してください。
コピーしました ✓
💪 +αチャレンジ：10個の単語を、自分が覚えたい単語（TOEIC・物語・授業の単語など）に入れかえてもらおう。
📝 manabaに書くこと：①と②のクイズはどう違った？ ①で、AIが自分で決めてしまったことは何？（例：単語の数、問題の形、答え合わせのしかた）
第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回続けたきみは、もう「作れる人」です。