AIにWebサイトを作ってもらった。出力を見て、「ここ直して」「ここも違う」。気づいたら修正指示だけで1時間。この経験、ありませんか。 問題はAIの性能ではありません。あなたの「頼む順番」です。
AIでWebサイトを作る流れは、だいたいこうなります。 「こんなサイトを作って」と頼む。出力を見る。ボタンの色が気になる。「青をもう少し濃くして」。 直ってきた。でも今度は見出しとのバランスが崩れた。「見出しも調整して」。直った。でもカードの余白が……。 1つ直すと、別の箇所が気になる。直してもらうたびに、また別の箇所が崩れる。修正が修正を呼ぶループです。 これは「あなたの指示が悪い」のでも「AIが使えない」のでもありません。完成品を後から直すというアプローチ自体に、構造的な無理があるんです。
レゴで城を作ったとします。完成した城を眺めて、「この窓の形が気に入らない」と言う。 窓を外して差し替えようとすると、壁ごと崩れる。壁を直すと、今度は屋根との接合が合わなくなる。 Webサイトもまったく同じ構造です。 ボタン、見出し、カード、ナビゲーション、フッター。これらのパーツが組み合わさって1つのページになっている。パーツ同士は余白や色やサイズで関係し合っています。 完成ページ上で1箇所を直すと、周囲との関係が変わります。 ボタンの色を変えれば、背景との比率が変わる。見出しのサイズを変えれば、本文との距離感が変わる。AIは言われた箇所を直しますが、周囲との調和までは自動で保ってくれません。 だから、直しても直しても「なんか微妙」が消えない。原因は個々のパーツではなく、パーツ同士の関係が整っていないことにあります。
私がやったのは、アプローチの順番を変えることでした。 Claude Codeにこう頼みました。「このWebサイトのコンポーネントライブラリを作成して」 コンポーネントライブラリとは、サイトで使うパーツを1ページに並べたカタログです。ボタン、入力欄、カード、見出し、ナビゲーション。すべてのパーツが一覧で表示されます。 この一覧を見た瞬間、今まで気づかなかった問題が一気に見えました。
「詳しく見る」ボタンと「もっと見る」ボタン。機能は同じなのに、片方は角丸で片方は四角。色も微妙に違う。完成ページ上では見落としていたのに、横に並べると一目瞭然です。
青系が3種類、グレーが5種類。どれも微妙に違うけど、意図的な使い分けではない。AIが生成するたびに少しずつ異なる色を選んだ結果、こうなっていました。
あるカードは上下24px、別のカードは16px。個別に見ると気にならないのに、並べると統一感のなさが目立ちます。 これが「なんか微妙」の正体です。 1つ1つは些細なズレでも、積み重なるとサイト全体が素人っぽくなる。完成ページをいくら眺めても見えなかった原因が、パーツを並べるだけで見えました。 パーツ一覧上で修正すれば、そのパーツを使っているすべてのページに反映されます。ボタンの色を1箇所直せば、サイト全体のボタンが統一される。余白のルールを決めれば、どのページも同じリズムになる。 修正の数が激減します。ボタンは1種類直せばいい。カードも1種類。パーツの数だけ直せば、ページが何十枚あっても全部整います。
「うちはまだサイトがないから関係ない」と思うかもしれません。実はゼロから作る時こそ、この順番が効きます。 いきなり「カフェのWebサイトを作って」と頼むと、AIは1ページ丸ごと出力します。ボタンの形、色、余白、フォント。AIがその場で全部を同時に決めます。結果として、パーツ間のルールが曖昧なまま完成品ができあがる。ここから修正地獄が始まります。 順番を変えます。
「カフェのWebサイト用のパーツ一覧を作って。ナチュラルな雰囲気で、ベージュ系。ボタン、カード、見出し、ナビ、フッターを含めて」 AIはページではなく、パーツのカタログを出力します。この時点で確認できます。ボタンの角丸は好みか。色の組み合わせは狙い通りか。見出しの大きさは読みやすいか。 パーツ単位なので、修正指示も的確に伝わります。「ボタンの角丸をもう少し大きく」「この色はもう少し明るく」。完成ページと違って、修正しても他が崩れません。 パーツに納得してから「このパーツ一覧を使って、トップページを作って」と頼む。最初から統一感のあるページが出てきます。 完成品を壊しながら直すのか。パーツを確認してから組み上げるのか。同じAIを使っていても、順番だけでこれだけ結果が変わります。
このアプローチがAI相手に特に効く理由は3つあります。
「サイト全体の雰囲気をもう少し洗練させて」。こういう指示は、AIにとって解釈の幅が広すぎます。 でもパーツ単位なら「ボタンの角丸を8pxに統一して、色は#2563EBに揃えて」と言える。指示が自然と具体的になるので、AIの出力精度が上がります。
パーツが横に並んでいるので、「この2つは統一すべきか、使い分けるべきか」がすぐ判断できます。完成ページの中から似たパーツを探し出して見比べるのとは、効率がまるで違います。
一度整えたパーツ一覧は、次にページを追加する時にも使えます。「このパーツ一覧を使って、会社概要ページを作って」と頼めば、最初から統一されたページが生成される。毎回ゼロから直す必要がなくなります。
既存サイトがあるなら「このサイトのコンポーネントライブラリを作って」と頼む。 新規なら「〇〇用のパーツ一覧を作って」と頼む。URLやコードを渡すとより正確になります。
一覧を見て、統一すべきもの、使い分けるもの、不要なものを仕分けます。ボタンは何種類必要か。 色は何色使うか。ここは人間が判断する仕事です。AIにはできません。
「このパーツ一覧を使ってページを作って」と頼みます。パーツの品質が保証されているので、組み合わせた結果も自然と整います。
AIが作ったWebサイトに「なんか違う」と感じた時。その原因はサイト全体ではなく、パーツにあります。 完成したレゴに文句を言っても、城は良くなりません。使うレゴの品質から上げていく。この順番を変えるだけで、AIとのWeb制作は驚くほどスムーズになります。 まずは1つ。「パーツ一覧を作って」と頼んでみてください。あなたのサイトの「なんか微妙」の正体が、きっと見えてきます。