Vibe Coding 入門で最初につまずく3つのポイントと対処法
この記事について
Vibe Codingを始めたとき、いくつかの場面で思っていた結果が得られませんでした。この記事では、特に最初に経験した3つの問題について、「どういう状況で起きたか」「なぜそうなったか」「どう対処したか」を整理します。同じ状況に遭遇した方の参考になれば、という記録です。
問題1：指示が曖昧で、AIが想定外の実装をした
状況
「ヘッダーをかっこよくして」と指示したところ、AIはフォントを大きくし、背景色を濃い色に変え、アニメーション効果を追加しました。私が想定していたのは「余白を調整してすっきりさせる」ことだったので、結果は全く違うものになりました。
なぜそうなるか
AIは指示に含まれていない情報を補完して実装します。「かっこよく」という言葉には多くの解釈が可能で、AIはその中の一つを選んで実装します。どの解釈が正しいかをAIが事前に知る方法はないため、曖昧な指示ほど結果が指示者の意図から離れやすくなります。
対処法
指示に「状態」を含めるようにしました。「かっこよくして」ではなく「ヘッダーの上下の余白を現在の2倍にして、背景色は白のままにして、フォントサイズは変えないで」のように、変更する要素と変更しない要素を具体的に書きます。最初は指示が長くなりますが、結果が意図に近づくため、修正回数が減ります。
問題2：AIが生成したデザインが自分の意図と違った
状況
「シンプルで読みやすいデザインに変えて」と指示したところ、確かにシンプルになりましたが、情報が少なすぎて必要なナビゲーションが消えてしまいました。私が求めていたのは「見た目をすっきりさせる」ことで、「機能を減らす」ことではありませんでした。
なぜそうなるか
「シンプル」という言葉は、見た目のシンプルさと機能のシンプルさの両方を含みます。AIは指示の一方の意味で実装することがあります。また、「変えて」という指示は変更の範囲を限定していないため、AIが関連する要素を広く変更することがあります。
対処法
変更の対象と範囲を限定するようにしました。「サイドバーのデザインを変えて。ナビゲーションの項目はそのままにして、背景色と文字色だけを調整して」という形です。また、変更前に「何を変えて、何は変えないか」を自分の中で整理してから指示するようにしました。この整理をしないと、何をどう変えたいかをAIに正確に伝えられません。
問題3：作業が長くなるとAIに文脈が伝わらなくなった
状況
同じセッションで多くの修正を繰り返していたところ、あるタイミングから「ここは前に話した方針と逆のことをしている」と感じる実装が増えてきました。確認すると、AIは会話の初期に設定した方針を忘れたような回答をしていました。
なぜそうなるか
AIが一度に参照できる会話の量（コンテキストウィンドウ）には上限があります。会話が長くなると、初期の情報が参照されにくくなります。特に、「このサイトのデザイン方針は〇〇」「このページでは〇〇しない」といった暗黙の前提は、明示的に書いていなければAIは覚えていません。
対処法
重要な方針は定期的に再掲するようにしました。「このサイトはシンプルなデザインを維持する。ナビゲーションは増やさない」という前提を、作業の節目ごとに指示の冒頭に含めます。また、新しいセッションを始めるときは、必要な文脈を冒頭にまとめて伝えるようにしました。
まとめ
3つの問題に共通しているのは、「AIは指示された内容を実装するが、指示の背景にある意図は自動的には理解しない」という点です。
指示を具体的にすること、変更の範囲を限定すること、重要な前提を定期的に伝えること。この3点を意識するだけで、AIとのやりとりの精度は大きく変わります。