バイブコーディングの精度と効率をアップする方法【6月28日】

おはようございます、うぃるです。

昨日は、バンコクのシェアハウスに住んでいる佐野くんとご飯を食べたあと、ぼくの家でAIコーディングについて話していました。

彼はもともとプログラミング経験がなかったそうですが、今やClaude CodeやCursorなどをフル活用して、アプリ開発をしています。

（※App Storeのアプリ申請までしていました。マジで実行力がすごい。）

ただ、話を聞いていると、細かい調整がうまくいかないとのこと。

この「細かい調整の難しさ」は、AI時代だからこそ見過ごされがちな課題だと思います。今日はその話を共有します。

バイブコーディングの壁

AIがコードを書いてくれる時代になったことで、誰でも簡単に開発が始められるようになりました。

「このページをこう変えて」や「このボタンの色を変えて」など、自然言語で指示すれば、ある程度は形になります。

まさにバイブス（ノリ）でコーディング、いわゆる“バイブコーディング”の時代です。

ただ、佐野くんの話にもあった通り、細かい修正が思うようにいかない場面が出てくるのも事実です。

なぜAIが意図をうまくくみ取ってくれないのか

これはぼくもよく経験するのですが、

「このボタンの色を緑に変えて」

みたいな感じでAIに下記のように自然言語で頼んでも、こちらの意図と違う編集をしてしまうことがあります。

その理由はシンプルで、指示が曖昧すぎるからです。

どのボタンを、どういう条件で、どんな風に変えてほしいのか。このあたりの情報が曖昧だと、AIも正確には動けません。

でも、HTMLやCSSの基本的な構造を理解していれば、こうした指示も明確に出せるようになります。

例えば

「class名”btn-primary”のボタンが、赤背景（background-color: red;）になっているので、これを緑に変えてください」

このように具体的に伝えれば、AIはかなり高い精度で対応してくれます。

「読める」ことがAI開発の基礎になる

最近はノーコードやローコードツールが普及して、コードを“書けなくても”何かを作れる時代になりました。

でも、「コードを読める」という力は大事だと感じています。

書けなくても、読めれば十分

プログラミングを一から勉強する必要はありません。むしろ、書くのはAIに任せればいいと思っています。

ただし、”AIが出力したコードを読んで理解できる”という状態にはなっておいた方がいいです。

HTMLやCSSの基本構造を理解していれば、「どの部分がどう表示されているのか」「どのスタイルが適用されているのか」といったことがすぐにわかります。

そうすれば、「この部分をこう直したい」というピンポイントの指示が可能になり、結果としてAIとの連携精度が格段に上がります。

デベロッパーツールが使えると最強

たとえば、Google Chromeの「検証ツール（DevTools）」を使えば、Webページの中で特定のボタンやテキストにどんなCSSが適用されているかを一瞬で確認できます。

このツールと最低限のHTML/CSSの知識があれば、AIへの指示の質がグッと向上します。

というか大抵の細かい調整ってバックエンドよりもフロントのデザイン面が多いですからね。

まずは1時間だけ、学んでみよう

いきなり本格的に学ぶ必要はありません。

YouTubeで「HTML CSS 初心者」などと検索して、1時間くらいのチュートリアル動画を1本見てみることです。

それだけでも、最低限の「読む力」は身につきますし、あとは必要なときにその都度ググれば問題ありません。

タグのすべての意味を覚える必要もありません。「なんとなく構造がわかる」「どこを見ればいいかわかる」だけで、実用的です。

補足：スクリーンショット＋一言でAIに伝える方法も

もうひとつ便利な方法として、スクリーンショットを使うというやり方もあります。

たとえば「このボタンの色を変えたい」というとき、その部分のスクショをAIに投げて、「ここを緑にしてほしい」と伝えるだけでも、かなり精度高く修正してくれます。

さらにいえば、デベロッパーツールのコードすらスクショしてもいいかも。

とにもかくにも、ピンポイントで情報を与える工夫がめっちゃ大切です。

---

数年前からノーコードツールが盛り上がってきたことで、「HTMLやCSSなんて触らなくても作れる」時代になりました。

だからこそ逆に、このあたりの基礎が抜け落ちている人も多いんじゃないかと思います。

そして、ここをちょっと補うだけで、バイブコーディングの精度と効率が一気に向上します。

ぼく自身も、今取り組んでいる案件でAIコーディングを活用していますが、やっぱり「読めること」の重要性を改めて実感しています。

ぜひ、このタイミングで一度HTMLとCSSなど基礎の基礎に触れてみてください。1時間でも十分変わります。

よい休日を。

それでは、また明日。