📌この記事のポイント
- 授業資料をもとにその場で即席クイズアプリを作成
- ChatGPT×Canva AIで、Vibe Coding体験
- かわいい犬（？）つきアプリを学生にシェアして活用
🧠Vibe Codingとは？
「コードを書く人」ではなく、「コードの”雰囲気”を操る人」になる。
Vibe Codingは、専門的なコーディング知識がなくても、生成AIの力を借りて“ちょっと便利”なものをサクッとつくってみる実践スタイル。
授業の中でも、「今この場でこんなアプリがあれば…」をその場で実現する、新しい授業デザインの可能性を感じさせます。
例えば、学生に何か演習をさせていたけど、ペースが学生によって異なるために、待ち時間ができてしまう人がいる。そんなときに即席で作ったアプリに取り組んでもらえば、待ち時間を有効活用し、モチベーションを維持することができます。
実際にやってみた｜即席クイズアプリづくり
授業テーマは「視覚障害・聴覚障害の理解」。
以下のような手順で、たった10分でクイズアプリを生成して、学生に使ってもらいました。
🪜手順
① ChatGPT
▶授業で使う資料（Wordファイル）をChatGPTに添付
▶「この資料から4択問題を20問つくって」と指示
ファイルに基づいて、15問の4択クイズを作成してください。必要に応じて質問してください。
♯条件
・ファイルの内容をしっかり学習した人であれば、特段調べなくてもよく読めば正解できる問題にしてください。
・問題文と選択肢をみただけで解答できてしまうような問題は絶対に避けてください。
・すべての問題が異なる内容になるようにしてください。
♯出力
・問題、正解、解説の完全なセットにしてください。
・表にはしないで、箇条書きで示してください。▶さらに、以下のプロンプトで、Canva AIのコーディングでそのままコピペできるプロンプトを作るよう依頼
→ 出力されたプロンプトはそのまま使える完全版！
これらの問題をすべて使って、Canva AIのコード生成で、クイズアプリを作りたいので、そのためのプロンプトを作ってください。
♯条件
・問題はランダムな順番で出てくるものとし、画面を表示するたびに、選択肢の順番もランダムにかわるようにしてください。つまり、場所を覚えていれば正解できるようにはしないでください。
・ライフは５つ（５回まで間違えてOK）とし、赤色の♡５つで表現してください。１問間違えるたびに、ライフが１つなくなるものとします。
・全問正解するか、ライフがすべてなくなったら、フィードバックを出力してください。フィードバックは何問正解だったとか、ユーザーの気持ちを盛りあげるようなメッセージを伝えるものとしてください。
・かわいい犬のイラストをつけてください。問題に正解したら、犬が喜ぶイラストになり、不正解なら犬が落ち込むイラストに変わるようにしてください。
・スマホの縦画面でスクロールしなくても全体が見れるようにしてください。また、画面拡大しなくても十分読めるような見やすい文字サイズにしてください。
・問題などを省略せず、すべて入れ込んだ完全版のプロンプトにしてください。日本語のプロンプトにしてください。② Canva AI（コーディング機能を使用）
- Canvaホーム画面で「Canva AI」→プロンプト入力欄で「コードを生成」で、上記プロンプトで出力されたCanva AI用プロンプトをそのままペースト
- 数分待つと、アプリ画面が自動生成される
- 表示された画面で「デザインに使用する」で、例えば「Webサイト」などにする
- そのままだとスマホなどでみたときに画面が小さすぎるので、サイズを調整する（なるべく文字がよくみえるとともに、アプリの画面がはみ出さないようにする）
- 「共有」→「公開閲覧リンク」で、みんなが閲覧できるリンクを作成する
③ 完成
以下が完成したアプリです。
ちなみに、ChatGPTを使わずに、最初からCanvaだけで作成することも可能だと思います。
しかし、Canva AIのコーディング機能では、ファイルを添付することができないし、資料から問題作成をするのは、ChatGPTが得意そうなので、まずはChatGPTで問題生成してから、Canvaでコーディングという手順にしました。
🎨生成結果の感想
- 「かわいい犬を出して」と頼んだら、確かに犬が出てきた…でもなにか変（笑）
- スマホで見るには、文字サイズの調整がもう一工夫必要そう
- でも、授業内で即席で使う分には十分！
- そのまま「デザインに使用する」ボタンから、QRコードで配布→即実施できた
💡Canva AIの特徴と注意点
- アプリ作成から公開まで、とにかく簡単
- 学生はCanvaにログインしなくてもOK
- URLとQRコードの共有で、すぐ使えるのが便利
ただし…
- 自分の好きな画像を自由に入れたり、細かいレイアウトの制御は苦手
- 高度な制御やデータ連携をしたい場合は、Google AI StudioやWindsurfの方が適しているかも
📱こんな活用ができる！
- 教科書や資料をそのままクイズ化して理解の確認に
- 学生自身に「クイズを作らせる」活動にも応用可能
- 保育・教育・福祉など、“感覚的な理解”が必要な分野こそ、即時フィードバックつきアプリは有効！
🧩まとめ
Vibe Codingでやってみた「10分クイズアプリ」づくり。
事前準備ナシでも、ChatGPTとCanva AIの力を借りれば、
今この場で必要な教材をその場で作ることができる時代です。
「犬かわいい！」から始まって、しっかり学びにもつながりました。
「学生が自分でクイズを作って共有する」活動にも広げていくとおもしろいかも。生成AIと授業デザインの可能性、まだまだ広がりそうです。
コメント