Vibe３ AIと話してアプリを作ろう！効果音パッドアプリ作成体験
今日は「バイブコーディング」に挑戦します！
難しいプログラミングの言葉（コード）は一切キーボードで打ちません。AIに「日本語でお願いするだけ」で、君だけのオリジナルアプリを作ってみましょう！
🛠️ 準備：２つの画面を開こう
１）AIの画面（お願いをする場所）
または
２）エディタの画面（アプリを動かす場所）
W3Schools
画面が左右に分かれていて、上に緑色の「Run」ボタンがあるページです。
ステップ１：まずは「おみくじアプリ」を作ろう！
さっそくAIに最初の「お願い（プロンプト）」をしてみましょう。
１）下の文章をコピーして、AIのチャット欄に貼り付けて送信してください。
| スマホで動くような、おしゃれでポップな「効果音パッド（サンプラー）アプリ」を作りたいです。 画面に4つの大きなボタンを配置し、それぞれのボタンを押すと、ブラウザの機能（Web Audio APIなど、外部の音声ファイルを使わない方法）を使って、異なる楽しい音（ピコピコ音、太鼓のような音、レーザー音など）が鳴るようにしてください。 また、ボタンを押した瞬間はボタンの色が変わり、視覚的にも反応がわかるようにしてください。 ※重要：HTML、CSS、JavaScriptのコードは、すべて1つのHTMLファイルにまとめて出力してください。 |
２）コードの終端</html>を確認して、コードエリアの右上にある
ボタンを押します。
３）エディタ（W3Schools）の左側の画面にある文字をすべて消して、コピーしたコードを貼り付けます。
４）画面上の緑色の「Run」ボタンを押します！
５）右側の画面にアプリが表示されたら成功です！ボタンを押して遊んでみましょう。
🚀 ステップ２：自分好みに「バイブス」を上げよう！（アレンジ）
ここからが本番です！完成したアプリをもっと面白くするために、AIと会話して改造していきましょう。AIへの追加のお願いは、短い言葉でOKです。
| ボタンを8個に増やして、「ドレミファソラシド」が鳴るミニピアノにして！ |
| ボタンを押したときに、画面の背景がランダムなネオンカラーに激しくピカピカ点滅するクラブ風のエフェクトを追加して！ |
| ボタンに「猫」「宇宙人」「爆発」という文字を書いて、それぞれそれっぽい音色（音の高さや長さ）に変更して！ |
🔄 アレンジのやり方
- AIにアレンジのお願いを送信する。
- 新しく作ってくれたコードを「コピー」する。
- エディタの左側のコードをすべて消して、新しく「貼り付け」る。
- 「Run」を押して変化を確認！
🆘 もしエラーが出たら？（トラブルシューティング）
バイブコーディングでは、動かなくなることもよくあります。焦らなくて大丈夫！
自分で直そうとせず、AIに直してもらいましょう。
-
ボタンを押しても何も起きないとき
→ AIに「ボタンを押しても動きません。直したコードをもう一度出してください」と伝える。 -
デザインが変になったとき
→ AIに「文字がはみ出てしまいました。スマホ画面に収まるように修正して」と伝える。 -
よくわからなくなったとき
→ 「最初のおみくじアプリの状態に戻して！」とお願いすれば、元通りにしてくれます。