── AIに「わかる言葉」で翻訳するという考え方
こんにちは。
私は日々、バイブコーディングを使ってHTMLやCSSを調整しています。
とても便利な一方で、「簡単な修正のはずなのに、なぜか意図が伝わらない」という場面に何度も出会ってきました。
これはスキル不足というより、デザインを言語に変換する難しさに原因があります。
この記事では、バイブコーディングで起きがちな「伝わらない問題」と、その具体的な解決アプローチを整理します。
バイブコーディングでよく起きるすれ違い
HTMLやCSSを触っていると、こういう状況はよくあります。
ヘッダーに合わせたいサイドバーが、なぜか外にはみ出てしまっている。
やりたいことは単純で、「ヘッダーの中に収めたい」だけです。
頭の中には完成イメージがあります。
けれど、指示として出す言葉が少なすぎて、AIに別の解釈をされてしまう。
その結果、返ってくるデザインが、微妙にズレたものになる。
このズレは、実装の難しさではなく、意図の伝達不足から起きています。
「簡単な修正ほど伝わらない」理由
不思議なことに、複雑な実装よりも、簡単なレイアウト調整のほうが伝わらないことがあります。
理由はシンプルで、「前提を共有していない」からです。
自分の中では、
- どのdivを基準にしているか
- どの範囲をヘッダーと認識しているか
- どこまでを「中」と考えているか
がすでに決まっています。
しかし、その前提を言葉にしていないと、AIは別の構造を想定してしまう。
結果として、「言った通りにはなっているが、欲しい形ではない」状態が生まれます。
ラリーを重ねても解決しないとき
伝わらないと、自然とラリーが増えます。
「このdivを指定して」「ここをヘッダー内に入れて」「positionはこうして」と、言い方を変えながら試します。
それでも噛み合わないことがある。
この時点で問題なのは、指示の量ではなく、言語の質です。
デザインをそのまま言葉にするのは、人間にとっても難しい。
ましてや、構造を前提に理解するAI相手だと、その難易度はさらに上がります。
解決策は「AIのための言語化」を挟むこと
ここで有効なのが、別のAIを使って一度言語化するという方法です。
いきなりバイブコーディングに投げて、うまくいけばそれで問題ありません。
ただ、うまくいかないときは、工程を一段挟みます。
ChatGPTなどに対して、
- 自分がどう見せたいのか
- 何を基準に配置を考えているのか
- どこがズレていて、どう直したいのか
を、文章として整理してもらう。
その結果を、バイブコーディングに渡す。
これは「遠回り」に見えて、実際は最短ルートです。
バイブコーディング前にやるべきこと
考え方としてはシンプルです。
バイブコーディングのために、AIが理解しやすい言葉を用意する。
つまり、
- 人間の感覚 →
- 言語として整理 →
- 構造として解釈 →
- コードに反映
という流れを意識する。
AIを2段階で使うことで、「伝わらないラリー」を大幅に減らせます。
まとめ：問題はコーディングではなく言語化
バイブコーディングがうまくいかないとき、ついツールやAIの性能を疑いがちです。
しかし多くの場合、ズレの原因は「どう伝えたか」にあります。
デザインを言葉にするのが難しいと感じたら、無理にそのまま投げない。
一度、別のAIに翻訳させる。
この習慣だけで、バイブコーディングの精度は確実に上がります。
