AI っぽい UI デザインの特徴と避け方。
AI が作ったランディングページは一瞬で見抜かれます。紫のグラデーション、中央揃えのヒーロー、同じ形の 3 枚のカード。こうしたサインが現れるのは、ブリーフに余白があると、エージェントが最もよくあるパターンに頼るからです。それぞれの見分け方と、二度と出てこないようにエージェントに指示する方法を紹介します。
2026年11月6日 更新 · 約 8 分で読めます
AI が作った UI が似てしまう理由
コーディングエージェントは、ブリーフの空白をすべて、これまで見てきた中で最も無難でよくある選択で埋めます。「モダンなランディングページ」と頼めば、何千ものモダンなランディングページの平均が返ってきます。藍色のグラデーション、中央揃えの見出し、角丸のカードのグリッドです。どれか 1 つの選択が間違っているわけではありません。でも、全部そろうとテンプレートに見え、訪問者はそれに気づきます。
解決策は、もっと賢いモデルではありません。空白の少ないブリーフと、こうしたサインを意識して探すレビューの工程です。
12 のサイン
ビジュアルスタイル
- 紫から青へのグラデーション。 グラデーションのボタン、グラデーションの見出し、ヒーローの背後のぼんやりした紫の光。「テック系」の定番の見た目になったため、今では「誰も選んでいない」ことのサインになっています。
- 何にでも角丸とソフトな影。 カードもボタンも画像も、同じ大きな角丸と同じぼかしの影で、何も目立ちません。
- グラスモーフィズムとグロー。 暗い背景にすりガラスのパネルやネオンの輪郭線。階層を示すためではなく、飾りとして使われています。
- イラスト代わりの絵文字や汎用アイコン。 色付きの丸の中にキラキラ、ロケット、稲妻。本物のプロダクトのビジュアルの代わりに置かれています。
レイアウト
- 何でも中央揃え。 ヒーローも、セクションの見出しも、カードも、フッターも中央揃え。中央揃えの文章は流し読みしにくく、視線の流れもなくなります。
- 同じ形の機能カードが 3 枚。 アイコン、短いタイトル、あいまいな 1 文を、完璧なグリッドで 3 回繰り返したもの。
- 単調なリズム。 どのセクションも同じ高さ、同じ余白、同じ構成で、ページに強弱もテンポもありません。
タイポグラフィ
- フォント 1 つ、太さ 1 つ、コントラストなし。 似たサイズのサンセリフ 1 種類だけで、見出し、ラベル、本文の区別がつきません。
コピーとコンテンツ
- 中身のないコピー。 「〜の可能性を解き放つ」「シームレスな」「ワークフローを加速」、あるいは「速い。安全。シンプル。」のような見出し。どんなプロダクトにも当てはまってしまいます。
- あいまいな社会的証明。 ダミーのロゴの列の上に「10,000 以上のチームが導入」、そして「CEO・佐藤 K.」からの推薦の声。
- 同じことを繰り返すセクション。 機能、メリット、「選ばれる理由」が、同じ 3 つの主張を言葉を変えて繰り返しています。
- ストック画像。 プロダクトそのものではなく、抽象的な 3D の塊や汎用的なイラスト。
第二世代のサイン
エージェントが紫のグラデーションを避けるようになると、新しい初期値がその座を継ぎました。2026 年 11 月時点で、Anthropic の frontend-design スキルと Impeccable は、次のものも AI っぽさのサインとして指摘しています。
- クリーム色、セリフ体、テラコッタ。 温かみのあるオフホワイトのページ、セリフ体の見出し（1 語だけ斜体にすることが多い）、さびた赤やテラコッタのアクセント。紫のグラデーションに代わる「センスのいい」解決策でしたが、いまでは同じくらいありふれています。
- ほぼ黒の背景に、アクセント 1 色。 黒いページに、アシッドグリーンか朱色を 1 色だけ。
- アイブロウラベル。 すべての見出しの上にある、小さな全大文字のラベルやピル型のバッジ。
- 番号付きのセクションと等幅のラベル。 セクションの前に付く「01 / 02 / 03」と、コード用フォントで組んだデータのラベル。
- どこにでもあるヘアライン。 細い罫線と枠線で囲んだボックスのせいで、どのページも同じ新聞の紙面のように見えます。
- すべてのセクションのフェードイン。 必要かどうかに関係なく、スクロールするたびに同じスライドアップのアニメーション。
どんなリストも長くは最新でいられません。修正がそのまま次の初期値になるからです。長く効く解決策は、避けるべきもののリストではなく、プロダクトとその利用者から生まれる方向性です。
サインを出さないためのブリーフの書き方
ほとんどのサインは、エージェントが代わりに下してしまう判断を、ブリーフで先に決めておけば消えます。
- アートディレクションを言葉にする。 「温かくエディトリアルな雰囲気、明朝体の見出し、クリーム色の背景」と伝えればエージェントは視点を持てますが、「モダンでクリーン」では持てません。
- 実際の制約を決める。 ブランドカラー、アクセントカラー 1 色、フォント、角の半径。DESIGN.md ファイルに一度まとめれば、すべての画面に適用できます。
- 本物の内容を渡す。 実際のプロダクト名、数字、顧客の声、スクリーンショット。具体的な内容は、具体的なレイアウトを生みます。
- 参考を見せる。 気に入っているサイトのスクリーンショット 1 枚は、形容詞を並べた段落よりも多くを伝えます。
- 違う方向性を頼む。 意図的に違う 3 案があれば、どれがありきたりかが一目瞭然です。Codex で UI デザインする方法を参照してください。
次のプロンプトで、デザインを始める前に方向性を決められます。
デザインを始める前に、[プロダクト] のアートディレクションを 3 つ、はっきり違うものを提案してください。それぞれに、1 行で表した雰囲気、フォントの組み合わせ、アクセント 1 色を含む最大 4 色の配色、角の半径、そして中央揃えのヒーローではないレイアウトのアイデアを 1 つ入れてください。紫や青のグラデーション、グラスモーフィズム、絵文字のアイコン、3 枚カードの機能グリッドは避けてください。私が 1 つ選ぶまで待ってください。
すでにサインがあるページの直し方
このリストに照らして、エージェント自身に作品をチェックさせましょう。サインを名指しすれば、見つけるのは得意です。
このページに AI 生成に見えるサインがないかレビューしてください。対象は、紫や青のグラデーション、何にでも同じ角丸と影、グラスモーフィズムやグロー、絵文字や汎用アイコン、何でも中央揃え、同じ形の機能カード、単調なセクションのリズム、1 種類だけのフォントの太さ、中身のないフレーズ、あいまいな社会的証明、繰り返しになっているセクション、ストック画像です。見つかったものをそれぞれ場所とともに挙げ、最も目立つ 5 つを直し、それ以外はすべてそのままにしてください。
コピーは、たいてい別にもう一度手を入れる必要があります。中身のないフレーズは、見た目を直しても残るからです。
このページの見出しと機能説明をすべて書き直してください。どれも、ユーザーが何を得られるかを書き、私たちのプロダクトの具体的な情報か数字を 1 つ入れ、次の言葉は使わないでください：解き放つ、シームレス、加速、かんたん、パワフル、革新的、次世代。長さは今と同じくらいにしてください。
レイアウトについては次のとおりです。
機能セクションを、同じ形のカード 3 枚を使わないようにデザインし直してください。最も重要な機能には 2 倍のスペースを与え、各機能には HTML で描いた小さな UI のビジュアルを添え、テキストは左揃えにし、セクションのリズムに変化をつけて、ページにはっきりした見せ場を 1 つ作ってください。
役に立つスキル
デザインスキルは、主にこうした初期値に対抗するために存在しています。Taste Skill も Anthropic の frontend-design スキルも、テンプレート的な選択からエージェントを遠ざけます。Impeccable は、CI で実行できる 62 のルールのディテクターを加えます。それぞれの違いは Taste Skill・Impeccable・UI UX Pro Max の比較で、スキル全般は UI デザインにおすすめの Codex スキルで解説しています。
公開する前に比べる
サインは、別の案と並べるといちばんよく見えます。元のバージョンと修正したバージョンを、2 つのブラウザウィンドウかキャンバスに並べれば、ありきたりなほうは一目瞭然です。そのためにあるのが Codex Design です。Codex が作ったすべての方向性が、ライブ HTML としてほかの案の隣に表示されます。
よくある質問
サイトが AI 生成に見えるのは悪いことですか？
信頼を損ないます。訪問者はテンプレート的なページを手抜きだと受け取りますし、どんなプロダクトにも当てはまるページでは、あなたのプロダクトの説明になりません。具体的で意図のあるデザインなら、プロダクトをありのままの本物として見せられます。
Codex がこうしたパターンを出さないようにできますか？
ほとんどはできます。アートディレクションと制約を DESIGN.md か AGENTS.md に書き、デザインスキルをインストールし、最後に上のチェック用プロンプトを使いましょう。結果をレビューするのは、それでもあなたの仕事です。
グラデーションや角丸は常に間違いですか？
いいえ。意図があってブランドに合っていれば、どれも正しい選択になりえます。サインになるのは、誰も別の判断をしなかったせいで、それらを全部まとめて初期値のまま使っていることです。