ChatGPTやClaudeに頼むと、それらしいサイトが3分でできるようになりました。ただ、できあがった画面をよく見ると、カードの縁の飾り線、頭文字だけのロゴ、紫のグラデーション。どこかで見た部品ばかり、ということが少なくありません。こうした「AIっぽさ」には、はっきりした共通パターンがあります。この記事では、見た瞬間に「AIが作ったな」と気づかれやすい手癖を、実物の比較画像つきで10個まとめました。あわせて、Claude CodeやCodexに読み込ませておくと生成の段階から量産型を避けられる方法も紹介します。
なぜ、AIが作るデザインは同じ顔になるのか
AIはデザインが下手なわけではなく、学習した膨大なデータの「統計的な平均」を返しています。世界中のサイトの平均、つまり「一番よくある形」を、一番安全な答えとして選んでいるわけです。
たとえば色。AIがよく使うデザイン部品集（Tailwind CSSなど）の標準色が青紫で、学習データも紫だらけなので、何も指定しなければ紫が出てきやすくなります。レイアウトも同じで、「今風にして」と頼むほど、いちばんよくある形が返ってきます。
結果として、どの会社のサイトも似た見た目になっていきます。最近は「AIっぽいデザイン」という言葉も聞くようになり、見分け方の記事まで出てくるようになりました。やっかいなのは、見る側の目も肥えてきたことでしょうか。取引先やお客さんが「ああ、AIで済ませたな」と感じたとき、伝わるのは先進性ではなく「手を抜いた」という印象のほうかもしれません。
それでは、特に頻出の10パターンを見ていきます。左が「✗ ありがち」、右が「✓ こうする」です。
01. カードの縁のアクセント線
まずは、いちばんよく見かけるものから。カードの左端に色つきの縦線、上辺に細いグラデーションの横線。AIは「大事そうな箱」を作るとき、反射的にこの飾り線を足してきます。線と色で階層を装っているだけで、伝わる情報は増えていません。丁寧に作られた実在のサイトを観察してみると、この線はほとんど見つからないはずです。
どう直すか。1pxの罫線、余白、文字の強弱。この3つで十分構造は作れます。目立たせたい数字や状態があるなら、飾り線ではなく文字の色と太さに語らせてみてください。
02. 頭文字ロゴ箱
サービス名の頭文字を1文字、グラデーションの角丸四角に入れて、ロゴのように使う。「賃」とだけ書かれた紫の四角、どこかで見たことはないでしょうか。ロゴを用意する手間を省いた、という信号として受け取られやすく、画面全体まで安く見えてしまいます。
どう直すか。テキストのサービス名だけで、じつは十分成立します。どうしてもマークが欲しければ、事業の実体に即した図案（工具、メーターなど）を単色のフラットで。頭文字を箱に入れるのは避けたいところです。
03. 飾りの英字ラベル（ALL CAPS）
日本語の見出しの上に、小さく「KEY FEATURES」「ABOUT US」「SCREEN 01」。日本語で読む人に伝わる情報はありません。それらしい雰囲気は出るのですが、その「それらしさ」自体が、もうどのサイトにもある飾りになってしまいました。1画面に溜まるほど、量産感も濃くなっていきます。
どう直すか。これは削るだけで大丈夫です。言うべきことがあるなら、日本語の見出しで。「主な機能」「会社について」と書けば、飾りではなく情報になります。
04. 紫のグラデーション（パープル問題）
色の話に移ります。背景もボタンも見出し文字も、紫から青へのグラデーション。冒頭で触れたとおりAIツールが初期設定で選びがちな色で、あまりに氾濫して「パープル問題」という呼び名までつきました。本人としては「かっこいい色」を選んだつもりでも、見る側には既視感が残りやすいようです。
どう直すか。まず自社のブランド色を1本決めて、それを主役にします。グラデーションには頼らず、ベタ塗りの面と細い罫線で画面の構造を作る。色数を絞るほど、かえって洗練されて見えてくると思います。
05. 中央寄せヒーローと、2つのボタン
画面のど真ん中に大きな見出し、その上に小さな丸いバッジ、下に「Get Started」と「Learn More」のボタンが2つ。「今風のサイトにして」と頼むと、いちばんよく返ってくる形です。構図そのものに意図がないので、社名を隠すとどこのサイトか分からなくなってしまいます。
どう直すか。左寄せで、自社にしか書けない言葉と実データ（実績の数字、実際の画面）を置いてみてください。ボタンは、押した先が具体的に想像できる1つだけで足ります。
06. 同型3カラムカードの反復
アイコン、見出し、短い説明文。同じ形のカードを3枚横に並べる。特徴紹介でもロール選択でも、AIはこの「機能カードの雛形」を繰り返し使いたがります。ただ、3つの内容の重要度が本当に同じことは、実際にはあまりありません。全部を同じ大きさで見せるほど、どれも大事に見えなくなっていきます。
どう直すか。いちばん伝えたいものを1つ、大きく立てる。残りは罫線と余白で控えめに従える。情報の優先度がそのまま画面の大小になっている状態を目指すと、自然と量産感が抜けていくはずです。
07. 影で浮かせて、ホバーで持ち上げる
カードの下にぼんやりした影を敷き、マウスを乗せるとさらに浮き上がる。この「浮遊感」もテンプレの典型といえます。特に業務システムやコーポレートサイトでは、浮ついた画面は「軽そう」「使えなさそう」という印象につながりがちです。
どう直すか。面は紙のようにフラットに、境界は1pxの罫線で。影を使うのは、実際に手前に重なる意味があるもの（開いたメニュー、ダイアログ）だけに絞ります。ホバーの反応も、罫線や背景の色が少し変わる程度で十分伝わります。
08. 色付きの角丸箱にアイコンを乗せる
淡い色を敷いた角丸の四角に、アイコンをちょこんと乗せる。AIダッシュボードの初期値そのもので、量産画面の目印になっています。「色を薄くしたから大丈夫」と思いたくなるのですが、パターンが同じなら、残念ながら同じに見えます。
どう直すか。アイコンは色地に乗せず、単色の線画をそのまま置く。そもそも意味を補っていないアイコンなら、外してしまうのがいちばんすっきりします。
09. 意味のない多色・パステル
「分析」「提案」「改善」「運用」。ただの項目名に、それぞれ違うパステルカラーのチップ。色には「何か意味の区別がありそうだ」と思わせる力があります。だからこそ、意味のない色分けは読み手に無駄な解読をさせてしまい、画面も安っぽく散らかっていきます。
どう直すか。白ベースに、ブランド色1本。色を使うのは意味があるとき（正常・注意・エラーなどの状態）だけに絞ります。並列の項目は素のテキストを罫線で区切れば、それだけで整うものです。
10. ダッシュ記号「——」でつなぐ文章
最後は文章の話です。「配って終わり——それが研修の…」のように、長いダッシュ記号で文をつなぐ。これは英語の文章記号で、AIが英語の癖のまま日本語を書いた痕跡といわれています。引用符に日本語の「」ではなく西洋式のダブルクオートが混ざるのも同類で、紫グラデと並ぶ確実な判定サインとして知られるようになりました。
どう直すか。句点で文を分ける。強調は「」を使う。そして公開前にダッシュ記号を検索して、残っていないか確かめる。文章の癖は自分では気づきにくいぶん、こうした機械的なチェックがよく効きます。
Claude Codeに読み込ませて、最初から避ける
ここまでの10個、「うちのサイトにもある」と思い当たったものがあるのではないでしょうか。ただ、これを人間のレビューだけで潰し続けるのはなかなか大変で、作るたびに同じ指摘を繰り返すことになりがちです。
そこで発想を変えます。Claude CodeやCodexのようなコーディングエージェントには、作業を始める前にプロジェクトの指示ファイルを読むという仕組みがあります。この禁じ手集をファイルにして渡しておくと、AIは生成の段階から量産型のパターンを避けるようになります。レビューで直すのではなく、最初から出させない、という考え方です。
手順は2つだけ。
- 規範ファイル
AI-DESIGN-GUARDRAILS.mdをプロジェクトの直下に置く - Claude Codeの指示ファイル
CLAUDE.mdに、次の1行を足す
UI・デザイン・コピーを書く前に AI-DESIGN-GUARDRAILS.md を読み、その禁じ手に違反しないこと。Codexを使っている場合は、AGENTS.md に同じ1行を足すだけです。以後、そのプロジェクトでのUI生成は自動でこの規範を通るようになります。飾り線も、頭文字ロゴも、英字の飾りラベルも、生成の時点で出てこなくなるはずです。
冒頭で「AIは統計的な平均を返す」と書きました。裏を返すと、AIは判断基準を渡されていないから平均になる、ともいえます。「AIに任せると量産型になる」のではなく、「基準を渡さずに任せると量産型になる」。私たちはそう考えています。
Claude Codeそのものをまだ使ったことがない方は、今日から使えるClaude Code｜自分の代わりにAIが作業するで始め方から紹介しています。
全55パターンの資料をメールでお届けします
この記事で紹介した10個は、実プロジェクトのレビューで蓄積してきた禁じ手集からの抜粋です。全体では、レイアウト・装飾・色・アイコン・文字組み・コピー・制作プロセスの7分野で55パターン。カードの角丸の限度、業務システムでやってはいけない装飾、コピーの文末の癖など、今回入りきらなかった45パターンも「✗ やりがち」と「✓ こうする」の組で収録しています。
Claude Code・Codexにそのまま読み込ませられる規範ファイル（Markdown）と、人が読むための実物デモつきPDFの一式です。下のフォームにご入力いただくと、そのアドレス宛にダウンロードリンクをお送りします。
お送りしました
宛に、ダウンロードリンクをお送りしました。メールをご確認ください。
- 数分たっても届かない場合は、迷惑メールフォルダをご確認ください
- それでも見当たらない場合は、アドレスを確認のうえ、もう一度お申し込みください
リンクの有効期限は7日間です。
まとめ：足すより、削る
10パターンを振り返ると、直し方はほとんど同じ方向を向いています。飾り線より、罫線と余白。グラデーションより、ベタ塗り。多色より、1色。英字ラベルより、削除。つまり「足すより、削る」。装飾ではなく情報の強弱で語る、という方向を意識するだけでも、画面は平均から一歩抜け出せるはずです。
AIのおかげで、「平均のデザイン」は誰でも3分で出せるようになりました。だからこそ、平均から一歩ずらす判断そのものに価値が移ってきているのだと思います。判断には、物差しが要ります。55パターンの禁じ手集が、あなたのプロジェクトの一本になればうれしいです。
この物差しで実際に組んだ画面は、ツール・事例の一覧に置いています。たとえば帳票発行システムや倉庫管理システムは、飾りを足さずに罫線と余白だけで情報の強弱を作った画面です。実物で見たほうが、ここまでの10項目は早く腑に落ちると思います。