【完成品を直すな】AIにWebサイトを作らせる前に「パーツ一覧」を出させたら、修正地獄が消えた

見出し画像はAIで生成しました。プロンプトはこちら

AIにWebサイトを作ってもらった。出力を見て、「ここ直して」「ここも違う」。気づいたら修正指示だけで1時間。この経験、ありませんか。

問題はAIの性能ではありません。あなたの「頼む順番」です。

修正指示だけで1時間が消える

AIでWebサイトを作る流れは、だいたいこうなります。

「こんなサイトを作って」と頼む。出力を見る。ボタンの色が気になる。「青をもう少し濃くして」。

直ってきた。でも今度は見出しとのバランスが崩れた。「見出しも調整して」。直った。でもカードの余白が……。

1つ直すと、別の箇所が気になる。直してもらうたびに、また別の箇所が崩れる。修正が修正を呼ぶループです。

これは「あなたの指示が悪い」のでも「AIが使えない」のでもありません。完成品を後から直すというアプローチ自体に、構造的な無理があるんです。

【先着100名限定ウェビナー】
笑っちゃうほど簡単な Claude Code入門

noteメンバーシップに参加すると600本以上の記事が読み放題です。

書籍「AIでゼロからデザイン」好評発売中

お問い合わせ先（セミナー登壇・書籍化など）

完成品を直すのが非効率な理由

レゴで城を作ったとします。完成した城を眺めて、「この窓の形が気に入らない」と言う。

窓を外して差し替えようとすると、壁ごと崩れる。壁を直すと、今度は屋根との接合が合わなくなる。

Webサイトもまったく同じ構造です。

ボタン、見出し、カード、ナビゲーション、フッター。これらのパーツが組み合わさって1つのページになっている。パーツ同士は余白や色やサイズで関係し合っています。

完成ページ上で1箇所を直すと、周囲との関係が変わります。

ボタンの色を変えれば、背景との比率が変わる。見出しのサイズを変えれば、本文との距離感が変わる。AIは言われた箇所を直しますが、周囲との調和までは自動で保ってくれません。

だから、直しても直しても「なんか微妙」が消えない。原因は個々のパーツではなく、パーツ同士の関係が整っていないことにあります。

パーツ一覧を先に出させる

私がやったのは、アプローチの順番を変えることでした。

Claude Codeにこう頼みました。「このWebサイトのコンポーネントライブラリを作成して」

コンポーネントライブラリとは、サイトで使うパーツを1ページに並べたカタログです。ボタン、入力欄、カード、見出し、ナビゲーション。すべてのパーツが一覧で表示されます。

この一覧を見た瞬間、今まで気づかなかった問題が一気に見えました。

同じ役割なのにデザインが違う。

「詳しく見る」ボタンと「もっと見る」ボタン。機能は同じなのに、片方は角丸で片方は四角。色も微妙に違う。完成ページ上では見落としていたのに、横に並べると一目瞭然です。

色にルールがない。

青系が3種類、グレーが5種類。どれも微妙に違うけど、意図的な使い分けではない。AIが生成するたびに少しずつ異なる色を選んだ結果、こうなっていました。

余白がバラバラ。

あるカードは上下24px、別のカードは16px。個別に見ると気にならないのに、並べると統一感のなさが目立ちます。

これが「なんか微妙」の正体です。

1つ1つは些細なズレでも、積み重なるとサイト全体が素人っぽくなる。完成ページをいくら眺めても見えなかった原因が、パーツを並べるだけで見えました。

パーツ一覧上で修正すれば、そのパーツを使っているすべてのページに反映されます。ボタンの色を1箇所直せば、サイト全体のボタンが統一される。余白のルールを決めれば、どのページも同じリズムになる。

修正の数が激減します。ボタンは1種類直せばいい。カードも1種類。パーツの数だけ直せば、ページが何十枚あっても全部整います。

Webサイトがまだない時こそ効く

「うちはまだサイトがないから関係ない」と思うかもしれません。実はゼロから作る時こそ、この順番が効きます。

いきなり「カフェのWebサイトを作って」と頼むと、AIは1ページ丸ごと出力します。ボタンの形、色、余白、フォント。AIがその場で全部を同時に決めます。結果として、パーツ間のルールが曖昧なまま完成品ができあがる。ここから修正地獄が始まります。

順番を変えます。

AIはページではなく、パーツのカタログを出力します。この時点で確認できます。ボタンの角丸は好みか。色の組み合わせは狙い通りか。見出しの大きさは読みやすいか。

パーツ単位なので、修正指示も的確に伝わります。「ボタンの角丸をもう少し大きく」「この色はもう少し明るく」。完成ページと違って、修正しても他が崩れません。

パーツに納得してから「このパーツ一覧を使って、トップページを作って」と頼む。最初から統一感のあるページが出てきます。

完成品を壊しながら直すのか。パーツを確認してから組み上げるのか。同じAIを使っていても、順番だけでこれだけ結果が変わります。

AIとの相性が抜群に良い理由

このアプローチがAI相手に特に効く理由は3つあります。

指示が具体的になる。

「サイト全体の雰囲気をもう少し洗練させて」。こういう指示は、AIにとって解釈の幅が広すぎます。

でもパーツ単位なら「ボタンの角丸を8pxに統一して、色は#2563EBに揃えて」と言える。指示が自然と具体的になるので、AIの出力精度が上がります。

比較と判断がしやすい。

パーツが横に並んでいるので、「この2つは統一すべきか、使い分けるべきか」がすぐ判断できます。完成ページの中から似たパーツを探し出して見比べるのとは、効率がまるで違います。

品質が積み上がる。

一度整えたパーツ一覧は、次にページを追加する時にも使えます。「このパーツ一覧を使って、会社概要ページを作って」と頼めば、最初から統一されたページが生成される。毎回ゼロから直す必要がなくなります。

今日からやれる3ステップ

ステップ1：パーツ一覧を出させる。

既存サイトがあるなら「このサイトのコンポーネントライブラリを作って」と頼む。

新規なら「〇〇用のパーツ一覧を作って」と頼む。URLやコードを渡すとより正確になります。

ステップ2：パーツを見比べて、ルールを決める。

一覧を見て、統一すべきもの、使い分けるもの、不要なものを仕分けます。ボタンは何種類必要か。

色は何色使うか。ここは人間が判断する仕事です。AIにはできません。

ステップ3：整えたパーツ一覧を渡して、ページを生成する。

「このパーツ一覧を使ってページを作って」と頼みます。パーツの品質が保証されているので、組み合わせた結果も自然と整います。

レゴの品質から上げていく

AIが作ったWebサイトに「なんか違う」と感じた時。その原因はサイト全体ではなく、パーツにあります。

完成したレゴに文句を言っても、城は良くなりません。使うレゴの品質から上げていく。この順番を変えるだけで、AIとのWeb制作は驚くほどスムーズになります。

まずは1つ。「パーツ一覧を作って」と頼んでみてください。あなたのサイトの「なんか微妙」の正体が、きっと見えてきます。

【先着100名限定ウェビナー】
笑っちゃうほど簡単な Claude Code入門

noteメンバーシップに参加すると600本以上の記事が読み放題です。

書籍「AIでゼロからデザイン」好評発売中

NewsPicksで記事・サムネイル・グラフ・広告生成フローを解説しました。

過去の登壇実績はこちら

デザイン添削・キャリア相談（MENTA）

法人向けAI研修のご相談

お問い合わせ先（セミナー登壇・書籍化など）