コードが書けなくても大丈夫。AIと4行プロンプトで作る「点字学習ゲーム」

📖 はじめに

「バイブコーディング」という言葉を聞いたことがあるでしょうか。
コードを1行ずつ書くのではなく、「こんなアプリを作りたい」とAIに伝え、対話しながら一緒に形にしていくやり方です。

この記事は、視覚障害のある子どもを支援している先生、支援員、保護者の方向けに書いています。
特別支援学校でも、通常学級でも使える考え方です。

この記事を読むと、プログラミングができなくても

1. AIにどうお願いすればいいか

2. 子どもの個人情報を守りながらアプリを作るポイント

3. 実際に授業で使える「点字学習ゲーム」のプロンプト例

この3つがイメージできるようになります。

今回の題材は、視覚障害のある子ども向けの「点字学習ゲーム」です。
GeminiやCopilotなど、無料で使えるAIツールを使い、ファイル1つで動く小さなゲームを作るイメージで読んでみてください。

まずお伝えしたいポイントは3つです。

1. ファイル1つで動く（インターネット接続なしでOK）

2. 外にデータを送らない

3. 子どもの個人情報を最初から守る設計にする

📁 なぜ「ファイル1つで完結」にこだわるのか

教育現場で使うアプリには、特別な配慮が必要です。

子どもの名前、好きなもの、見え方の情報。
これらは、すべて立派な個人情報です。

よくあるウェブアプリは、インターネットを通じてどこかのコンピュータにデータを送ります。
これはとても便利ですが、「手紙を郵便局に預ける」ようなものです。
届くまでの間に、誰かに見られるリスクがあります。

一方、ファイル1つで動くアプリは、「自分の机の引き出しにしまう」ようなイメージです。
データはパソコンの中だけにとどまり、外には出ていきません。
だから、漏れる心配をぐっと減らすことができます。

🔄 バイブコーディングの基本的な進め方

バイブコーディングで大事なのは、最初から完璧な指示を書くことではありません。

1. まずは短い一言でお願いする

2. AIが出してきたものを動かしてみる

3. 気づいたことを伝えて、少しずつ直していく

このサイクルを回しながら、アプリを育てていきます。

たとえば、こんな会話のイメージです。

人間
「点字を覚えるゲームを作って。小学生向けで、キーボードだけで遊べるようにして。
ファイル1つで動くようにして。インターネットには一切つながないで。」

AI
「わかりました。小学生向けの点字学習ゲームを、HTMLファイル1つで動く形で作成します。
まずは簡単なクイズ形式のゲームを用意します。」

人間
「ありがとう。ゲームが少し長いから、3分くらいで終わる短さにして。
間違えたときの言葉を、もっとやさしい表現にしてほしい。」

このように、「出てきたものを見て、気づいたことをそのまま伝える」が基本です。

🔒 安全対策は「あとから」ではなく「最初から」

教育現場で使うアプリでは、子どもの名前や好きなものは立派な個人情報です。
「できあがってから安全対策を足す」のではなく、「最初のプロンプトに必ず含める」が大切です。

最低限、次の2つは最初のお願いに必ず入れてください。

1. ファイル1つで動くようにして

2. インターネットには一切つながないで

この2行があるだけで、「個人情報が外に送られる」タイプの設計をほぼ避けることができます。

📝 3段階のプロンプト

レベル1：まずはこれだけ

次の4行だけで、AIはちゃんと動き出します。

点字を覚えるゲームを作って。
小学生向けで、キーボードだけで遊べるようにして。
ファイル1つで動くようにして。
インターネットには一切つながないで。

たった4行です。
最初から完璧を目指す必要はありません。
出てきたものを見て、「ここが違う」「これを足して」と、後から伝えれば大丈夫です。

レベル2：慣れてきたら「こうしてほしい」を足す

レベル1の4行に、少しずつ「使ってみて気づいたこと」を足していきます。

点字を覚えるゲームを作って。
小学生向けで、キーボードだけで遊べるようにして。
ファイル1つで動くようにして。
インターネットには一切つながないで。

追加でお願いしたいこと：
- 間違えても「ちがうよ」じゃなくて「おしいね、もう一回」みたいなやさしい言葉にして。
- 3分くらいで終わる長さにして。
- 電車が好きな子向けに、電車のテーマで作って。
- 名前や好きなものの情報は、ブラウザを閉じたら消えるようにして。

このように、「子どもと一緒に使ってみて分かったこと」を、プロンプトにどんどん追加していきます。

レベル3：こだわりたい人向け

対話を重ねると、「ここはこだわりたい」というポイントが見えてきます。

たとえば次のような要望です。

1. スクリーンリーダーで確実に読み上げできるようにしてほしい

2. 子どもごとに難易度を変えられるようにしたい

3. 見え方に合わせてコントラストを調整できるようにしたい

こうした要望をまとめてAIに渡すと、より完成度の高いゲームが提案されます。
そのときに使える「詳細な要件定義テンプレート」は、この記事の後半に応用編として載せてあります。

🔁 「動かす→気づく→伝える」のサイクル

1. 出てきたものを動かしてみる

AIが生成したコードをコピーし、ファイルとして保存し、ブラウザで開いて動かしてみます。

簡単な手順の例です。

1. AIが出したコードをすべてコピーする

2. メモ帳などのテキストエディタを開いて貼り付ける

3. ファイル名を「braille_game.html」のようにして保存する

4. 保存したファイルをダブルクリックして、ブラウザで開く

動かしてみると、「ここが使いにくい」「これが足りない」が具体的に見えてきます。

2. 気づいたことをそのまま伝える

「キーボードで選択肢を選べない」
「文字が小さくて見づらい」
「ゲームが長すぎる」

このような気づきを、そのままAIに伝えます。
専門用語に言い換える必要はありません。

3. 繰り返す

1回で完璧にしようとせず、「動かす→気づく→伝える」を何度か繰り返します。
このサイクルを回すだけで、アプリは少しずつ磨かれていきます。

🛡️ 安全設計の考え方

「外に出さない」が基本

このアプリは、インターネットの向こう側にあるコンピュータには一切データを送りません。
たとえるなら、「教室の中だけで使うノート」のようなものです。
教室の外に持ち出さないから、他の人に見られる心配がありません。

使い終わったら消える設計

ブラウザには「メモ帳のような機能」があります。
ウェブサイトがちょっとした情報を残せるしくみで、ログイン状態などを覚えておくのに使われます。

今回のアプリでは、この機能を使いません。
ブラウザを閉じたら、子どもの名前も好きなものも、すべて消えるようにします。

「黒板に書いて、授業が終わったら消す」ようなイメージです。

ファイルの配り方

方法1：OneDriveやGoogleドライブに置く（おすすめ）

1. 学校のクラウドストレージにHTMLファイルを置く

2. リンクを共有する

3. アクセス権を設定して、クラスの子どもだけが開けるようにする

注意点があります。
Teamsに直接HTMLファイルを添付すると、テキストとして表示されてしまうことがあります。
Teamsで共有したい場合は、HTMLファイルをzipに圧縮してから添付してください。

方法2：USBメモリで配る

インターネット環境がない場合の選択肢です。
ただし、紛失や取り間違いのリスクがあります。

使う場合は、次のような工夫をおすすめします。

1. 名前シールを貼る

2. 手渡しで本人を確認して渡す

3. 回収するときも一人ずつ確認する

💡 バイブコーディングで大切なこと

1. 小さく始める

最初から完璧な指示を書こうとしないこと。
まずは4行のプロンプトで十分です。
足りない部分は、対話の中で少しずつ足していけば大丈夫です。

2. 動かしてみる

AIが出したコードは、そのまま眺めているだけでは分かりません。
とにかく一度動かしてみる。
動かしてみることで、初めて「ここがよいところ」「ここを直したい」が見えてきます。

3. 気づいたことをそのまま伝える

「ここが使いにくい」「これを足してほしい」と、感じたことをそのまま言葉にしてください。
専門用語は不要です。
先生や保護者としての「これは子どもには難しいな」という感覚こそが、いちばん大事なフィードバックです。

🎯 ここから応用編：詳細な要件定義テンプレート

ここから先は、レベル3まで進んで「もっと細かくこだわりたい」人向けのテンプレートです。
最初からこれをすべて使う必要はありません。
まずは、ここまでの内容と3段階のプロンプトだけで十分です。

より作り込んだ点字学習ゲームをAIと一緒に設計したくなったときに、ここから先をコピーして使ってみてください。

あなたは視覚障害教育とアクセシビリティに配慮したエンジニア兼UXデザイナーです。
これから、視覚障害がある児童生徒向けに「点字に興味と親しみをもたせるゲームアプリ」を、バイブコーディング前提で一緒に設計し、必要に応じて実装します。

【アプリの目的と対象】

対象は、視覚障害のある小学生から中学生です。
全盲、弱視、コントラスト低下、視野欠損など、見え方の違いがあります。

子どもたちは、それぞれパソコン操作スキルも異なります。
キーボード中心で操作する子、マウス操作が得意な子、方向キーとエンターキーのみが確実な子などさまざまです。

このアプリの第一の目的は「点字を完璧に覚えさせること」ではなく、「点字に対する興味や親しみ、肯定的な印象を持ってもらうこと」です。

第二の目的は、子ども一人ひとりの「好きなもの・興味のある出来事」と点字を結びつけて、学習への意欲と集中力を高めることです。

学習時間の目安は、1プレイあたり3〜5分程度で区切れるミニゲーム形式とします。

【機能要件】

1. 点字に関する簡単なゲームを実装してください。
   - 音声とテキストで示されたひらがなや言葉に対応する点字を、ゲーム内で「選ぶ」「当てる」「集める」などの形で扱う。
   - 正解・不正解よりも、「触れた」「選べた」ことに対してポジティブなフィードバックを返す。

2. ユーザーごとに異なるプロファイルを受け取れる設計にしてください。
   - 視力情報や見え方の特徴。
   - PC操作スキルレベル。
   - 集中時間の目安（例：3分、5分）。
   - 好きなものや興味のあるテーマ（例：電車、サッカー、動物、音楽、ゲーム、料理など）。

3. プロファイルに合わせて次の点を自動調整できるようにしてください。
   - 操作方法のデフォルト（キーボード中心か、マウス中心かなど）。
   - 1プレイに必要なステップ数やゲームの長さ。
   - テキスト表示量とフォントサイズ、コントラスト。
   - ゲーム内で使うテーマやストーリー（その子の「好きなもの」を反映する）。

4. スクリーンリーダーでプレイできるように、次を必須とします。
   - すべての操作がキーボード操作だけで完結すること。
   - 画面内のボタンや選択肢に、明確で簡潔なラベルを持たせること。
   - フォーカス移動順が論理的であること（上から下、左から右など一貫した順序）。
   - 重要な情報は視覚のみではなく、テキストと音声読み上げで伝えられること。

5. 視覚的UIはシンプルかつコントラスト高めにしてください。

6. ゲームの流れは、次のような構造を基本としてください。
   - タイトルと、簡単でやさしい説明。
   - 練習ステップ（操作方法に慣れるための短い場面）。
   - 本編のミニゲーム（1回3〜5分程度）。
   - 終了時の振り返りメッセージ（「今日はここまで。よくがんばったね」など肯定的なフィードバック）。

【非機能要件】

1. 読み上げ環境での安定動作を重視してください。
   フォーカスの移動や画面遷移が急激すぎないようにし、ユーザーが状況を把握しやすいようにします。

2. エラーや例外が起きた場合には、ユーザーにやさしいテキストメッセージを表示し、スクリーンリーダーで読めるようにしてください。

3. 1回のプレイで子どもが疲れすぎないよう、インタラクションはシンプルにし、必要以上に多くの操作や情報を詰め込まないでください。

【アクセシビリティと配慮事項】

1. 各ボタンや操作要素には、役割と結果が明確なラベルを付けてください。

2. 「間違ったとき」に子どもが責められたと感じないようなメッセージ設計にしてください。
   例：「ちがうよ」ではなく、「おしいね、もう一回ためしてみよう」などの柔らかい表現を使う。

3. 点字の情報は、正確性を重視してください。

4. 個々の子どもの興味を反映したストーリーやテーマを使うときも、差別的・偏見的な表現は避けてください。

5. 集中力が切れやすい子もいるため、いつでも中断・終了しやすい設計にしてください。
   例えば、エスケープキーや特定のショートカットで安全に終了できるようにします。

【セキュリティ要件】

1. アプリは完全にローカルで動作させてください。ファイル1つで完結する設計とします。

2. インターネットへの通信は一切行わないでください。

3. ユーザーのプロファイル情報（名前、好きなもの、見え方など）は外部に送信せず、ローカルのみで扱ってください。

【開発の進め方】

1. まず、上記の要件をもとに、テキストベースでアプリの構造と画面遷移、ユーザー体験フローを分かりやすく説明してください。

2. 次に、ユーザープロファイルを入力として受け取り、難易度やテーマを変えられるような設計案を提示してください。

3. そのあとで、私が「実装フェーズに進んで」と指示したときに、HTML/CSS/JavaScriptのコードを段階的に生成してください。

4. 実装のたびに次のチェックを自動で行ってください。
   - キーボードだけで一通り操作できるか。
   - スクリーンリーダーが読めるラベルがついているか。
   - 子どもの興味をテーマに反映する余地が残っているか。
   - 子どもを責めないメッセージになっているか。

5. 実装コードを出すときは、必ず最初に「この部分は何をするコードか」を日本語で簡潔に説明してから、コードを提示してください。

では、まずはアプリの全体構造と画面遷移、ユーザー体験フローを提案してください。

✅ まとめ

バイブコーディングは、プログラミングの敷居を大きく下げてくれます。
「コードを書ける人だけの世界」だったものが、「AIにお願いできるなら一緒に作れる世界」に変わりつつあります。

大事なのは、最初から完璧を目指さないこと。
4行のプロンプトから始めて、動かして、気づいたことを伝える。
このサイクルを回すだけで、アプリは少しずつ形になっていきます。

ただし、安全対策だけは最初から入れてください。
子どもの個人情報を守る設計は、「あとで追加」ではなく「最初から必須」です。

ここまで読んだあなたは、もう「最初の4行」を書く準備ができています。
0から1がむずかしければ、まずは0.1から。

今日、このあと数分だけ時間をとって、最初の4行を書いてみてください。

点字学習ゲームでなくてもかまいません。
あなたの身近にいる子どもたちが楽しめそうなテーマを1つ選んで、AIに伝えてみてください。

バイブコーディングは、その最初の一言から始まります。

#バイブコーディング #AI #プログラミング #アクセシビリティ #教育