AIにコードを書いてもらうときの「良い指示」の作り方

AIに、

「このWebサイトをもっと見やすくして」

「この部分をいい感じに直して」

とお願いすると、驚くほど簡単にコードを書いてくれるようになりました。

私自身、Webサイトを制作するときにChatGPTやCodexなどのAIを使う機会がかなり増えています。

以前なら、実装方法を検索して、コードを書いて、エラーを調べて……と進めていた作業も、今ではAIと相談しながら進められます。

とても便利です。

ただ、使っているうちに感じたことがあります。

AIにコードを書いてもらうとき、「何を使うか」以上に「どう伝えるか」が大切だということです。

今回は、私がWeb制作でAIを使う中で意識するようになった「良い指示の作り方」についてまとめてみます。

「いい感じにして」では、AIも迷う

たとえば、

このページをもっとおしゃれにしてください。

とAIに伝えたとします。

人間同士でも、「おしゃれ」の定義は人によって違います。

シンプルなのか。

高級感があるのか。

親しみやすいのか。

余白を広くするのか。

色を変えるのか。

AIも同じです。

指示が曖昧であれば、AIは不足している情報を推測しながらコードを書きます。

その結果、

• そこは変えてほしくなかった
• レイアウトまで全部変わってしまった
• 確かにおしゃれだけど、サイトの雰囲気と違う

ということが起こります。

これは、AIの性能が悪いというよりも、AIが判断するための材料を十分に渡せていないことが原因の場合があります。

完成形だけでなく「条件」を伝える

AIにコードを書いてもらうとき、私は完成形だけを伝えるのではなく、

どんな条件の中で作ってほしいのか

をできるだけ伝えるようにしています。

たとえば、

スマートフォンで見たときに文字が小さいので修正してください。

だけではなく、

• PC版のレイアウトは変更しない
• スマートフォン表示だけ修正する
• 現在の色やフォントは維持する
• 見出しの文字サイズを少し小さくする
• 左右には16px以上の余白を確保する
• 既存のコンポーネント構成はできるだけ変更しない

といった条件まで伝えます。

すると、AIが勝手に判断しなければならない範囲が少なくなります。

私はこれを、

AIに自由を与えないための指示

というより、

AIが迷わず仕事をできるようにするための情報整理

だと考えています。

「変えてほしくないところ」も伝える

AIを使ったWeb制作で特に重要だと感じているのが、変更してほしくない部分を伝えることです。

人間に仕事を依頼するときも同じですが、

「ここを変更してください」

だけでは、

「では、その周辺も合わせて変更した方がよさそうですね」

という判断が起こります。

AIも、より良い結果を出そうとして周辺のコードまで変更することがあります。

そこで私は、変更する範囲をできるだけ明確にするようにしています。

たとえば、

お問い合わせボタンのデザインだけ変更してください。ヘッダー、ナビゲーション、背景色、文章、その他のレイアウトは変更しないでください。

という形です。

少し細かすぎるように感じるかもしれません。

でも、この一文を追加することで、意図しない変更を減らしやすくなります。

良い指示は「目的・現状・変更内容・制約」で考える

最近は、AIへの指示を大きく4つに分けて考えています。

1. 目的

まず、

なぜ変更したいのか

を伝えます。

たとえば、

スマートフォンでファーストビューを見たときに、何のサイトなのか分かりにくいため改善したい。

という内容です。

単に「文字を大きくして」と伝えるよりも、目的を伝えた方が、AIも何を改善するための変更なのか判断しやすくなります。

2. 現状

次に、

今どうなっているのか

を伝えます。

たとえば、

• PCでは問題ない
• スマートフォンでのみ崩れる
• ボタンが画面外にはみ出している
• タイトルが2行になっている

といった内容です。

スクリーンショットを見せられる環境なら、画像も一緒に渡します。

コードだけでは分かりにくい「見た目の問題」は、実際の画面を見てもらった方が伝えやすいことがあります。

3. 変更したい内容

ここで初めて、

具体的にどこをどうしたいのか

を書きます。

たとえば、

• タイトルを1〜2行以内に収めたい
• ボタンを画面内に収めたい
• 写真を少し大きく見せたい
• 余白を増やしたい

といった内容です。

4. 制約

そして最後に、

変えてほしくない条件

を伝えます。

たとえば、

• PC版は変更しない
• 文章は変更しない
• ブランドカラーは変更しない
• 新しいライブラリは追加しない
• 既存の構造をできるだけ維持する

などです。

個人的には、この「制約」がかなり重要だと感じています。

AIへの指示は、ちょっとした「仕様書」になる

ここまで書くと、

「そんなに細かく指示を書くなら、自分でコードを書いた方が早いのでは？」

と思うかもしれません。

私も最初はそう思っていました。

でも実際には、指示を書いているうちに、自分自身が何を作りたいのか整理されていくというメリットがあります。

「このページをなんとなく良くしたい」

という状態から、

「スマートフォンでの視認性を改善したい」

「ブランドイメージは維持したい」

「ファーストビューだけ変更したい」

というところまで考えが整理されます。

つまり、AIへの指示を書くこと自体が、簡単な仕様書を作る作業になっています。

これはWeb制作に限らず、デザインでも同じだと思います。

大きな変更ほど、一度に全部やらせない

もう一つ意識しているのが、

大きな変更ほど分けて依頼する

ことです。

たとえばWebサイト全体をリニューアルするときに、

トップページを全部リニューアルしてください。

と一度に依頼すると、変更箇所が多くなります。

すると、問題が起きたときに、どの変更が原因だったのか分かりにくくなります。

そこで、

1. ヘッダー
2. ファーストビュー
3. コンテンツ部分
4. CTA
5. フッター

というように分けて進めます。

一つ変更したら確認する。

問題なければ次に進む。

AIを使うようになってから、むしろこの「小さく変更する」という考え方を以前より意識するようになりました。

AIに任せることと、自分で決めること

AIはコードを書くことがとても得意になっています。

「こういう見た目にしたい」と伝えれば、そのためのHTMLやCSS、JavaScriptなどを提案してくれます。

エラーが出れば、原因も一緒に考えてくれます。

でも、

「このサイトを見た人に何を感じてほしいのか」

「何を一番伝えたいのか」

「どこまで変更していいのか」

を決めるのは、今のところ人間の役割だと思っています。

AIがコードを書いてくれるようになったことで、

コードを書く力が必要なくなったというよりも、何を作るのかを考え、言葉にする力の重要性が上がった

ように感じています。

私がよく使う指示の形

最後に、私がAIにWeb制作をお願いするときの考え方を、簡単なテンプレートにしてみます。

目的

この変更によって何を改善したいのか。

現在の状態

今どんな問題が起きているのか。

変更してほしいこと

具体的にどこをどう変更したいのか。

変更してほしくないこと

維持したいデザイン、文章、機能、構造など。

確認してほしいこと

スマートフォン表示、レスポンシブ、エラー、既存機能への影響など。

たったこれだけでも、

「いい感じにしてください」

と伝えるより、AIとのやり取りはかなりスムーズになります。

AIを使うほど、「伝える力」が大切になる

AIの進化によって、Web制作のハードルは大きく下がっています。

以前なら専門的な知識が必要だったことも、AIと相談しながら形にできるようになりました。

これはとても面白い変化だと思っています。

一方で、AIができることが増えるほど、

何を作りたいのか。

なぜそうしたいのか。

どこまでAIに任せるのか。

を考えることが、より重要になっていく気がします。

AIに上手な命令を出す。

というより、

自分の頭の中にあるイメージを、AIが理解できる形に整理して渡す。

私はそんな感覚で、AIと一緒にWebサイトを作っています。

AIにコードを書いてもらう時代だからこそ、「コードを書く力」だけではなく、考えを整理して、相手に伝える力。

そんな力が、これからますます大切になっていくのかもしれません。