【実践】バイブコーディングとは？Google AI Studioで中学生がお絵かきアプリを作ってみた！
「プログラミングって難しそう…」
そんなイメージを持っている保護者の方、多いのではないでしょうか？
実は今、コードを一切書かなくてもアプリが作れる時代が来ています。
今回は、IT講師の私が中学生の生徒さんと一緒に、話題の「バイブコーディング」を実践してみました。使ったのはGoogleの無料ツール「AI Studio」。結論から言うと、アイデアを入力するだけで、スマホでも動くアプリが完成しました！
この記事では、バイブコーディングとは何か、そして実際にどうやってアプリを作ったのかを、初心者の方にも分かりやすく解説します。
バイブコーディングとは？
バイブコーディング（Vibe Coding）とは、AIに「こんなアプリが欲しい」と自然言語で伝えるだけで、AIがコードを自動生成してくれる新しいプログラミング手法です。
従来のプログラミングとの違い
| 項目 | 従来のプログラミング | バイブコーディング |
|---|---|---|
| 必要なスキル | プログラミング言語の知識 | 日本語で説明する力 |
| 開発時間 | 数時間〜数日 | 数分〜数十分 |
| エラー対応 | 自分でデバッグ | AIに「動かない」と伝えるだけ |
| ハードル | 高い | 非常に低い |
つまり、「プログラミングの知識がなくても、アイデアさえあればアプリが作れる」のがバイブコーディングの最大の魅力です。
なぜ今、注目されているのか？
2024年後半から、GoogleのGeminiやOpenAIのChatGPTといった超高性能で仕事でもつかえるレベルのAIがだれでも無料で使えるようになりました。特にGoogleの「AI Studio」は、生成したコードをそのままブラウザで動かせる機能があり、バイブコーディング入門に最適なツールとして注目を集めています。
実践！中学生とお絵かきアプリを作ってみた
使ったツール
今回使ったのはGoogle AI Studio（無料）です。
Googleアカウントがあれば大人であれば誰でもすぐに使い始められます。
ステップ1：アイデアを入力するだけ！
中学1年生のAくん（仮名）に、「どんなアプリを作りたい？」と聞いたところ、こんな答えが返ってきました。
「お絵かきができるアプリがいい！色を変えたり、消しゴムで消したりできるやつ」
さっそく、Google AI Studioに次のプロンプトを入力しました。
中学生向けにお絵かきアプリを作って
たったこれだけです。
ステップ2：AIが即座にコードを生成！
すると、Gemini（GoogleのAI）が数秒で完全なHTMLとJavaScriptのコードを生成してくれました。
AI Studioには「プレビュー機能」があり、生成されたコードをその場で動かすことができます。ボタンを押すと…
画面にキャンバスが表示され、マウスで線が描けるようになりました！
Aくんは「えっ、もう動くの！？」と目を丸くしていました。
ステップ3：欲しい機能をAIに追加依頼
最初のアプリはシンプルな黒い線しか描けなかったので、Aくんに「もっと何か欲しい機能ある？」と聞きました。
Aくんのリクエスト：
- 色を変えられるようにしたい
- 線の太さを変えたい
- 全部消すボタンが欲しい
- 背景色も変えたい
これをそのままAIに伝えます。
以下の機能を追加してください：
- カラーパレットで色を選べる
- 線の太さを調整できるスライダー
- 全消去ボタン
- 背景色を変更できるボタン
AIは数秒で機能を追加したコードを返してくれました。
ステップ4：エラーもAIに相談してデバッグ
途中、「消しゴム機能」を追加した際に、うまく消えない不具合が発生しました。
従来なら「どこが間違っているんだろう…」とコードとにらめっこですが、バイブコーディングなら違います。
消しゴムがうまく動きません。背景色と同じ色で描画するように修正してください。
このように問題を日本語で伝えるだけで、AIが修正コードを提案してくれます。Aくんも「これなら自分でもできる！」と自信を持った様子でした。
完成したアプリの機能
最終的に、以下の機能を持つお絵かきアプリが完成しました。
- ✅ 自由に線を描けるキャンバス
- ✅ 12色から選べるカラーパレット
- ✅ 線の太さを1〜50pxで調整可能
- ✅ 消しゴム機能（背景色で上書き）
- ✅ 全消去ボタンでリセット
- ✅ 背景色を白・黒・パステルカラーに変更
- ✅ 描いた絵をPNG画像として保存
所要時間はわずか30分。しかも、Aくんはテキストプログラミングは未経験です。
スマホ・iPadでも動いた！
Google AI Studioで生成したアプリは、URLをシェアするだけでスマホやiPadでも動作します。
Aくんは完成したアプリのURLをQRコードに変換し、教室のiPadで読み込んでお絵かきを始めました。自分の作ったアプリがiPadでも動くことに感動し、「もっとこういう機能が欲しい！」と目を輝かせながら、次々と新しいアイディアをAIに指示していました。
ポイント：インストール不要！
従来のアプリ開発では、完成したアプリを配布するのに「App Store申請」や「APKファイルのインストール」といった複雑な作業が必要でした。
しかし、Google AI Studioで作ったWebアプリは、URLを共有するだけでブラウザ上で動作します。これはバイブコーディングの大きなメリットです。
バイブコーディングで身につく力
「コードを書かないなら、学びにならないのでは？」
そう思う方もいるかもしれません。しかし、バイブコーディングでは以下のような21世紀型スキルが自然と身につきます。
1. 言語化力（説明する力）
AIに正確に意図を伝えるには、「何をしたいのか」を明確に言葉にする必要があります。これは社会に出てからも役立つコミュニケーション能力の基礎です。
2. 問題解決力
うまくいかなかったとき、「何が問題なのか」を分析し、AIに質問する。この試行錯誤のプロセスこそが、本当のプログラミング的思考です。
3. 創造力
「こんな機能があったら面白い」と想像し、それを形にする。バイブコーディングはアイデアをカタチにするハードルを劇的に下げてくれるので、創造力を発揮しやすい環境が整います。
まとめ：バイブコーディングは「未来のプログラミング教育」
今回の実践で分かったことをまとめます。
| 項目 | 結果 |
|---|---|
| 使用ツール | Google AI Studio（無料） |
| 所要時間 | 約30分 |
| プログラミング経験 | 不要（中1・未経験でもOK） |
| 完成物 | 多機能お絵かきアプリ |
| 動作環境 | PC・スマホ・iPad（ブラウザのみ） |
バイブコーディングは、「プログラミングの入口」として最適です。
まずはAIと一緒にアプリを作る楽しさを体験し、そこから「どうやって動いているんだろう？」と興味を持ったら、本格的なプログラミング学習に進む。この流れが、これからの子供たちにとって最も自然な学び方になるのではないでしょうか。
保護者の方へ
お子さんと一緒にGoogle AI Studioで「オリジナルアプリ」を作ってみませんか？ 「こんなゲームが欲しい」「こんな便利ツールがあったら」という日常の会話が、そのままプログラミング体験になります。
関連記事