AIにコーディングを任せる「Vibeコーディング」、とても便利ですよね。
でも、デザインの細かい調整になると「なんか違うな……」と思うこと、ありませんか？
今回は、AIにレイアウトの修正を依頼する際、一発で思い通りの結果を出すためのテクニックを紹介します。
「なんかいい感じで」の調整から脱する
とある日のこと……。
カテゴリのボタンが真っ白になってしまいました。
なんかこう……いい感じに。フロントマターのパラメータを弄ったり、カテゴリページのレイアウトを変えていた時のことです。ビルドテンプレートをAIが触った時に、なんか悪い感じにしてしまったみたいですね。
だから修正を依頼しました。
開発者ツールから修正箇所の要素を取得する
AIにチャットで修正をお願いするなら、「記事カードのカテゴリ欄が白になっているので、元のカテゴリ別に色を変えた状態にして」と伝えるのもひとつです。
これでも伝わるんですが、ぶっちゃけ効率的ではありません。
こういう時は、ブラウザの「F12（開発者ツール）」を使って、 修正したい要素（element）を直接指定 したほうがすんなりいきます。
修正箇所を反転して右クリックから「検証」
ブラウザの開発者ツールを開くには「F12」のショートカットキーが便利です。もしくは、ブラウザ上で右クリックすると出てくるメニューから「検証」を選択します。
修正したい箇所を選択してから起動すると、ソース上で該当箇所がハイライトされるのでわかりやすいです。左にある「…」をクリックして「Copy→Copy element」を選択しましょう。
クリップボードに修正するべきソースが入ります。これをチャット欄に入れて、修正の指示を加えます。
| |
これで実行した結果がこちら。
ちゃんとカテゴリごとに色が変更されました。グラデーションにしろとは一言も言ってないんですが、「まぁ前回よりいいか」ということで解決です。
カテゴリページに妙な白ボックスが誕生している件
すると、また別の仕事を増やされてしまいました……。
なんやお前。感じからして、もともとサムネイル（cover）を表示していた部分を、白抜き背景ボックスにしてしまい、画像を別に配置しているせいのようです。テンプレートのどこを弄ったらこんなことになるんでしょうか。
まぁ、修正の仕方は先ほどと同じです。白抜きボックスはいらないので、入れ替えたい要素を指定してサムネイルと入れ替えます。
| |
AIコーディングは要素指定で劇的スピードアップ
今回はウェブサイトの事例でしたが、バイブコーディングでのアプリ作成でも同じことが言えます。
AIは「コードの最適化」は得意でも、 デザイン面（特にUI）の解釈はかなりアバウト です。プログラムの世界の数値と、人間がディスプレイ越しで見ている世界は違いますからね。
例えば「文字間隔」や「画像配置」などは、ピクセルや％で設定可能です。でも「もうちょい右で」とか「BのテキストはAより少し離して」みたいな指示をすると、人間の感覚とだいぶズレた結果を出してくることが多いんです。
デザインの微調整は自分で数値を弄るのが最速
この程度のちょっとしたズレなら、エディターから 該当部分の数値を自分で弄るだけで済む話 だったりします。
プログラム言語をまったく知らなくても、AIコーディングで誰でもアプリやウェブサイトを作ることはできる時代になりました。ただ、こうした細かいデザイン変更をするには、コードの構造自体を少しでもいじれる方がいいし、意味を理解しているほうが修正作業も圧倒的に早くなります。
「生成AI使えます」「バイブコーディングできます」という人でも、現場で使えるプロprグラマーに敵わないと言われるのは、こうした「細かい修正をAIに的確に指示するための場所」がわからないから、余計に時間がかかってしまうケースが多いからです。
バイブコーディングは「1を10にする」のは得意ですが、0からは0.7くらいしか作れないんですよね。 残りの0.3を埋めるのは、やはり人間の「視点」と「的確な指示」 だと思います。
みなさんもぜひ、開発者ツールを味方につけて、AIへの指示出しをレベルアップさせてみてください。