AI製サイトが似たり寄ったりになる理由と、そこから抜け出す方法
プロンプトで作ったウェブサイトの多くは、同じ見た目に行き着く。
紫のグラデーション。角の丸い大きなカード。中央に置かれた見出し。
どのSaaS企業にも使えそうなアイコンの並び。この画一性は、好みの偏りから生まれたものではない。言語モデルの仕組みから出てくる、数学的な性質だ。
「見栄えよく作って」と頼むと、何が起きるのか。モデルは、学習したデータの統計的な中心に向かって出力を整える。
これまでに何千ものランディングページを見てきていて、「よいデザイン」の最も一般的な答えは、そのすべての例の中央値になる。中央値は、定義上、ありふれたものだ。
この記事のポイント
- ありふれた出力は統計的な平均化の結果であり、ツール自体の限界ではない
- パターンを破るのは、うまいプロンプトではなく、前もって決めておく制約だ
- 生成エンジンよりも、仕様の出来のほうが結果を左右する
意図して作られたように読めるサイトは、まれにある。そうしたサイトがこのパターンを破れたのは、形容詞や熱意を増やすような、いわゆるプロンプトの工夫のおかげではない。
モデルが自分では思いつけない、上流の判断があったからだ。吟味した書体の組み合わせ。
抑えた配色。情報の密度、余白、トーンについての確かな考え方。
バイブコーディングで作ったサイトとテンプレートを分けるのは、制約があるかどうかだ。モデルの出力を1通りに縛る制約ではない。選択肢の幅を、すべての選択に意図が残る範囲まで絞る制約のことだ。
この捉え直しが大事なのは、結果を左右する場所が変わるからだ。結果は、生成ツールの性能よりも、渡す仕様の質に左右される。プロンプトの腕を磨いても、あいまいな依頼書は救えない。
明快で長持ちするデザインシステムがあれば、ごく普通のモデルでも成果を出せる。仕事の中心は上流に移る。制約そのものを設計する作業だ。
最初のプロンプトを書く前に、制約を決めておく
バイブコーディングの要は、デザインの判断を先に仕様へまとめ、毎回のセッションに添えることだ。これは従来の意味でのデザインドキュメントではない。
閉じた語彙だ。モデルが決めてよいこと。
すでに決まっていること。その線引きを書いたものになる。
土台になるのはトークンのセットだ。中身は次のとおり。
- 余白のスケール：マージン、パディング、すき間を決める段階的な数列（例：4px、8px、12px、16px、24px、32px、48px、64px）。余白はすべてこの中から選ぶ。
- 文字サイズの階層：フォントサイズ、太さ、行の高さの組み。通常は4〜6段階（ヒーロー、見出し、小見出し、本文、小さい文字、キャプション）。各段階は固定で、ページごとに交渉しない。
- 色の役割：任意の色を並べたパレットではない。意味と色の対応表だ。主要な操作。補助的な操作。背景。罫線。明るい背景と暗い背景の上の文字。無効状態。この対応表があれば、「なんとなくしっくりくる」からと新しい色を足したくなる誘惑がなくなる。
- 角丸と影：角丸（なし、4px、8px、12px）と影の深さ（なし、弱い、中、強い）の明確なルール。ここがそろっていても誰も気づかない。ずれたときに初めて目につく。
参考資料は、好みを具体的なものに結びつける。「モダン」「ミニマル」「親しみやすい」といった形容詞で伝えるより、気に入ったサイトを2〜4つ、あるいはブランドの資料を見せるほうがいい。
言葉で説明せず、見せる。モデルは、あいまいな言葉を解釈するより、視覚的な例からパターンを読み取るほうがずっと確実だ。
トレードオフは現実にある。制約が少なすぎると、ありふれた中心に落ちる。モデルは空白を学習データで埋めるが、それはインターネットの中央値だ。
逆に多すぎると、出力がもろくなる。修正のたびにモデルと衝突するからだ。実際に落ち着く先は、コンパクトなルール集になる。
階層、余白、避けることを明確に書き、毎回のセッションに無理なく添えられる形にする。
仕様には次の内容を入れる。
- 絶対にしないこと：面取りの縁、自動再生の動画、1ページで4種類以上の文字サイズ、など。
- 必ずすること：本文は左揃え、余白スケールを使う、コントラスト比を確認する、など。
- 例外の扱い：グリッドを崩してよい場面、独自の色を使ってよい場面、新しい部品を足してよい場面。
最も効くデザインシステムは、機械にも読めるものだ。人間のデザイナーが読めるトークンのセットは、言語モデルも確実に適用できる。
デザインシステムを、後から作る説明書ではなく、生成の入力として扱う。この発想の転換が要になる。
一貫性も欠かせない。どのページも、同じサイトに属しているように感じられるべきだ。すべての画面を人の目で確認しなくても、それを実現できるのが仕様だ。
作り手の意図を感じるサイトと、既製の部品を寄せ集めたように見えるサイトを分ける差は、ここにある。
モデルが再利用できる部品の層をつくる
デザインされて見えるサイトは、一貫性に支えられている。モデルは、見えているもの、理解できるものを再利用する。
しかし共通の参照先がなければ、ページを重ねるごとにずれていく。パディングが少し変わり、罫線が変わり、見出しのサイズがばらつき、色がずれていく。
やがてサイトは、1つのものとして作られたのではなく、別々のプロジェクトを寄せ集めたように見えてくる。
この節のポイント
- 小さな再利用部品のセットを早めに定義し、モデルには新しいマークアップを書かせず、組み立てさせる。
- 各部品について、寸法、書体、色、レスポンシブな挙動、アクセシビリティのルールを決める。
- 部品ライブラリは、ページを生成するたびにモデルが参照できる場所に置く。
対処法は、少数の、方針の明確な部品を用意して、それを使うようモデルに指示することだ。ページごとに新しいマークアップを書かせるのをやめる。道具箱を渡して、既存の部品を組み合わせさせる。
典型的な部品セットは次のとおり。
- ボタン：主要、補助、第3の3種類。状態（通常、ホバー、押下、無効）も含む。パディング、角丸、文字サイズ、色の基準は1か所にまとめる。
- カード：内側の余白、影、罫線をそろえた容器。お客様の声、機能紹介、事例に使う。
- ナビゲーション：ヘッダー、フッター、サイドバー。構造を固定し、ロゴを左に置くか中央に置くかをモデルに決めさせない。
- セクション：ヒーロー、機能のグリッド、お客様の声のカルーセル、行動を促すブロック。それぞれ、内側のリズムと余白を決めておく。
- 文章ブロック：見出しと本文、あるいは見出しと小見出しと本文。要素の間隔を固定し、モデルが新しいすき間を作らないようにする。
指示の出し方も、部品そのものと同じくらい大切だ。
「機能を紹介する魅力的なカードを書いて」ではなく、「Cardの部品を使い、アイコン、見出し、2行の本文を入れる。見出しはHeading 3、本文はBody、アイコンは32pxにする」と伝える。
これで、確率に任せた生成が、組み立て作業に変わる。モデルは選んでいるのではない。すでに決まった部品を組み合わせているだけだ。
バイブコーディングのサイトが最もつまずきやすいのは、組み合わせの段階だ。余白も太さも少しずつ違う5種類のボタンがあるサイトは、色が美しくても雑に見える。
一貫した4種類のボタンがあるサイトは、色がありふれていても、デザインされて見える。
各部品の仕様には、次の項目を入れる。
- 寸法と余白：パディング、マージン、要素間のすき間。
- 書体：フォント、サイズ、太さ、行の高さ。
- 色とコントラスト：背景、文字、罫線、ホバー時の状態。
- レスポンシブな挙動：小さな画面で、積み重なるか、折り返すか。
- アクセシビリティ：フォーカスの状態、aria属性のラベル、キーボードでの操作。
この資料は、生成中にモデルが参照できる場所に置く。ページを依頼するたびに、部品ライブラリへのリンクを添える。
勝手に作り出すモデルと、決まりを当てはめるモデル。その分かれ目はここにある。
図8：コンポーネント定義の構造と属性体系
書体、余白、リズム：質の高さが宿る場所
あるウェブサイトを見て「プロっぽい」と感じるとき、その理由はうまく言葉にできないことが多い。その感覚は、いくつかの具体的な選択から来ている。
そろった文字サイズ、規則的な余白、ぴたりと合った揃え、抑えた配色。地味なこれらの細部は、装飾的な効果よりもずっと大きな働きをする。
この節のポイント
- 一定の比率から文字サイズを導くモジュラースケールは、迷いをなくし、見出しから本文、キャプションまで調和をつくる。
- 行の高さ、1行の長さ、余白のリズムといった目に見えない要素が、読みやすさと印象を決める。これらは好みではなく、研究に裏づけられた基準に従う。
- 色、太さ、動きを抑えると、意図が伝わる。ルールなしに選択肢を増やすと、混沌になる。
文字サイズが秩序をつくる仕組み
書体は土台だ。モジュラースケールとは、数学的な比率から導いたフォントサイズの数列のこと。これがあると、ページ全体に調和が生まれる。
基準を16px、比率を1.25にすると、スケールは16、20、25、31、39、49になる。見出しも本文もキャプションも、この数列だけから選ぶ。
これで、「ここは18px、あちらは19pxのほうが少しいい感じがする」という誘惑がなくなる。細かな最適化よりも、一貫性のほうが力を持つ。 スケールが規律を保つ。
太さの幅も同じくらい大切だ。太さは2〜3種類に絞る。レギュラー（400）、ミディアム（500）、ボールド（700）。
変化をつけたくても、細字（300）や極太（900）は避ける。
階層はサイズと色でつくり、太さには頼らない。太さを4種類使うサイトは散らかって見え、2種類のサイトは意図的に見える。
文章を読みやすくする目に見えない決まり
行の高さと1行の長さは、崩れて初めて存在に気づく。本文の行の高さ（行間の空きと1行の文字の高さの比）は、1.5が標準だ。1行の長さは、50〜75文字に収める。
長すぎる行は目を疲れさせる。短すぎる行は窮屈に感じる。この数字は、意見ではなく、何十年にもわたる文字組みの研究から来ている。
両方をデザインシステムに明記し、レビューのときに確かめる。
リズムとしての余白
余白は、繰り返しによって秩序をつくる。一定の縦のリズム、つまり4pxか8pxのベースラインのグリッドがあれば、すべてのマージンとパディングはその倍数になる。
要素どうしの関係がそろっているので、実際に関連しているように感じられる。名前をつけられなくても、目は秩序を感じ取る。
余白のスケールは、次のような関係を決める。
- セクションのマージン：大きな内容のかたまりの間の、いちばん広いすき間。
- コンテナのパディング：カードやパネルの内側の、中くらいのすき間。
- 要素の間隔：コンテナの中の項目どうしの、小さなすき間。
- 行間と字間：文章の中の、いちばん狭いすき間。
セクション間が64pxなら、コンテナのパディングは24px、要素の間隔は12px、といった具合になる。これらは適当な数字ではない。釣り合いを生み、ページにまとまりを与える比率だ。
規律としての色とコントラスト
色を抑えることの価値は、見過ごされがちだ。5色を使うサイトは、混沌として見える。主要な操作用に1色、文字用に1色、それにアクセント1色の計2〜3色なら、デザインされて見える。
アクセントは控えめに使う。ボタン、ホバー時の状態、強調の箇所など。ページ全体にばらまかない。
文字と背景のコントラストは、WCAGのAA基準を満たす必要がある。通常の文字は4.5:1、大きな文字は3:1だ。これは任意ではない。
読めるか読めないかの分かれ目になる。レビューのときに確かめる。
やりすぎない動きと画像
効果を足したくなる衝動が、まとまりを崩しやすいのは、動きと画像だ。スクロールに合わせた控えめなフェードインがあるサイトは、洗練されて見える。
パララックス、バウンス、回転を詰め込んだサイトは、古びて見える。
動きには目的がなければならない。 視線を導く、操作を確認する、状態の切り替えをなめらかにする。飾りのために使わない。
画像は、スタイルと扱いをそろえる。角が丸い画像とそうでない画像が混在すると、違和感が出る。
全幅の画像と枠内に収めた画像が混ざると、ページがちぐはぐになる。扱い方を仕様に書き、どこでも同じように適用する。
ツールよりも仕様が大事な理由
洗練は、足し算ではなく引き算と規律から生まれる。デザイン用のモデルやツールは、指示がなければこの性質を出してくれない。仕様は明示的でなければならない。
余白のスケールはこれだけ。色はこれだけ。動きの扱いはこれだけ。
モデルの仕事は、ルールを解釈することではなく、当てはめることだ。
レビューのループ：見た目の批評で差を埋める
生成は、作業の半分でしかない。残りの半分は評価だ。1回の生成で完成するサイトはまれだ。
モデルは、与えられた制約の中で妥当な選択をしている。
しかし妥当であることと、正しいことは同じではない。
レビューのループは、視覚的で具体的でなければならない。 生成されたページのスクリーンショットを撮り、仕様と見比べる。確かめるのは次の点だ。
- 余白の一貫性：セクション間のすき間はそろっているか。カード内側のパディングは、ほかのコンテナのパディングと合っているか。
- 文字の階層：見出しは本文よりはっきり大きいか。本文はキャプションよりはっきり大きいか。
- 色の使い方：色は一貫して使われているか。アクセントカラーは控えめか。
- 揃え：要素はグリッドに沿っているか。左端はそろっているか。
- コントラスト：文字は読めるか。色のコントラストは十分か。
具体的なフィードバックは、確実な修正につながる。漠然とした不満は、手戻りを生む。
「しっくりこない」ではなく、「見出しと本文のすき間が、上のセクション間のすき間より大きい。同じ幅まで狭めてほしい」と伝える。そうすれば、モデルはピンポイントで直せる。
レスポンシブな挙動も、同じループの一部だ。1つの画面幅でしか成り立たないデザインは、完成していない。
320px、768px、1440pxでページを確認する。レイアウトは自然に組み変わるか。
タップする部分は44px以上あるか。小さな画面でも文字は読めるか。
アクセシビリティの確認もここに入る。キーボードだけでページを操作できるか。フォームの入力欄にはラベルがあるか。
画像には説明があるか。
スクリーンリーダーで使えるか。これらは後回しにしてよいものではない。デザインの一部だ。
依頼した変更と、実際に行われた変更の一覧を残しておく。これが次のページの参照資料になる。
モデルが同じ間違いを2度したなら、仕様が十分に明確でなかったということだ。仕様を見直す。
並べて比べるのは効果が大きい。今のバージョンを、参考にしたいサイト、前のバージョン、スケッチなどの隣に置いて見せる。
モデルは、違いを見て取り、調整できることが多い。「もっとよくして」と言うより、「このカードを、このスクリーンショットのカードに近づけて」と言うほうが効く。
目指すのは完璧ではない。まとまりだ。どのページも同じサイトに属していると感じられ、選択がでたらめではなく意図的に見え、見る人が名前をつけられなくても秩序を感じ取れるサイト。
それでも人の目が必要なこと、そしてデザインの仕事はどう変わるか
このやり方は、審美眼、優先順位づけ、判断力の代わりにはならない。それらを増幅するものだ。品質の上限は、そうした判断がどれだけ制約に落とし込まれているかで決まる。
この流れで働くデザイナーは、すべての画面を描いているわけではない。システムとルールをつくり、批評をする。
サイトが何を強調し、どんな印象を与え、何を一貫させるのか。そうした大きな判断を下し、それをモデルが適用できる仕様に翻訳している。
これは、従来のデザインとは違う技能だ。意図を明確にする力がいる。
例外を重ねるのではなく、ルールとして言葉にする力がいる。細部をいちいちいじりたくなる誘惑に耐える規律もいる。
それでも、この技能はほかのAIツールを使うとき、デザインシステムを運用するとき、デザインチームを率いるときに、そのまま生きてくる。
ありふれた見た目が、初期状態だ。どのモデルも、放っておけば学習データの中央値を出力する。だから、際立っていることが希少な資源になる。
デザインされて見えるサイトとは、何を避け、何を強調し、何を繰り返すかについて、誰かが意図をもって選んだサイトだ。
つまり、ブランドレベルの判断は、重要度が下がるどころか上がる。見た目の独自性で勝負するなら、モデルがそれを生み出してくれるとは期待できない。
こちらから与えなければならない。抑えた配色。特定の書体の組み合わせ。
密度と余白についての考え方。こうしたものが入力になって初めて、作り手の存在を感じさせる出力が生まれる。
このやり方は、チームにも問いを投げかける。モデルがページを生成するなら、デザイナーの役割は何か。
答えは、デザイナーの役割が上流にあるということだ。仕様の管理者であり、審美眼の審判役だ。
「いや、面取りの縁は使わない」「そう、コントラスト比は必ず確認する」と言う人だ。
スクリーンショットを見て「リズムが崩れている。余白を詰めよう」と指摘する人だ。モデルを信頼できる状態にするシステムを築く人でもある。
これは、すべての画面を描くより楽な仕事ではない。違う種類の仕事であり、規模を広げられる仕事だ。
仕様が固まれば、モデルは何十ページでも生成でき、そのすべてにまとまりが出る。デザイナーの労力は、個々のページに散らばらず、仕様に先にまとめて投じられる。
これからのデザインの仕事で問われるのは、「AIはデザイナーを置き換えるか」ではない。「デザイナーはAIと働くことを学ぶのか、それとも、学んだ人に置き換えられるのか」だ。
力を発揮するのは、ツールの出来は渡す制約の質で決まると理解し、ページごとにツールと格闘する代わりに、制約をつくることに力を注ぐデザイナーだろう。
いまからできること
見た目が平凡なAI生成サイトと、意図を感じるサイトの差は、作らせる前にモデルをどれだけ縛るかで決まる。
まず、デザインシステムを文章で定義する。そのうえで、生成のたびにそれを参照させよう。
では、具体的に何をすればいいのか。
- 先にトークンの仕組みを決める：プロンプトを書く前に、余白の目盛り、文字サイズの段階、色の役割、部品の一覧を定める。モデルが読める形に書き出しておく。文書でも、スタイルガイドでも、構造化したリストでもよい。ぼんやりした指示からは、平凡な結果しか出てこない。
- 参考例を集める：目指す雰囲気に近い既存のサイトやデザインシステムを2〜4つ探し、モデルに見せる。言葉で説明するより、実物を見せたほうが伝わる。
- 小さな部品集を作る：ボタン、カード、セクション、文字ブロックの仕様をまとめる。モデルが迷わず、余計な飾りも足さずに使えるよう、ルールははっきり書く。
- 出力を目で確かめる：生成された画面のスクリーンショットを撮り、仕様と見比べる。直してほしい点は具体的に伝える。「何か違う」ではなく、「このボタンは余白のルールと合っていない」と書く。その指摘を、次の生成に渡す。
- 仕様を唯一の基準にする：デザインシステムは、モデルが何度でも参照できる形で保管する。解釈し直す出発点ではなく、ただ一つの正本として扱う。
ちょっと立ち止まって
生成ツールを使うと、つい「もっと」と頼みたくなる。ページも、パターンも、機能も、もっと速く。
けれども、まとまりのある結果を生むのは、その逆の姿勢だ。頼む量は減らし、そのぶん丁寧に決める。
作り手の存在を感じるサイトでは、見た目の選択がすべて何かの役に立っている。その意図は、モデルに与えた自由からではなく、自分が引いた線から生まれる。
あなたはAIに何かを作らせるとき、「何をしてほしいか」と同じ熱心さで、「何をしてはいけないか」を決めているだろうか。
図2：言語モデルの統計的収束と制約による出力の分岐
図4：モジュール型スペーシングスケールの体系構造。4pxを基本単位とした8段階のスケール値が、倍数関係によって統一されたデザインシステムを形成し、UIコンポーネント間の一貫性と予測可能性を確保する。
図5：タイプランプの階層と属性マッピング
図6：セマンティックカラーロールのマッピング体系