AI生成UIの「定型感」をなくす方法：典型的なAIの既定表現と要素削減チェックリスト
制約がなければ、ほぼすべての大規模モデルが一目で分かる「AIの既定顔」を書きます。大見出しの上にドット付きのピル型ラベルを浮かべ、淡色カードの中にさらに小さなカードを重ね、左に4pxの色付き縦線を添え、隅には「効率+128%」「精度99.98%」といった作り話の数字を置く構成です。この定型感をなくすには、発光エフェクトをさらに重ねるのではなく、機械的な習慣を一つずつ取り除く必要があります。
重要なポイント
- 頻出するAIの既定表現を見分けます。見出し上のピル（Eyebrow Pill）、左側の4pxの装飾バー、3層の角丸フレーム、すべて大文字で字間の広い英字の副題、架空の割合指標です。
- 枠線の代わりに整列と余白を使います。余白と字重ですでに階層が伝わる場所に、外枠や背景カードを追加しないようにします。
- すべての数字を実際の業務コンテキストに基づかせます。価格プラン、バッチ残数、実測の遅延ミリ秒などを使い、スペースを埋めるためのマーケティング数字をモデルに作らせません。
- Oil UIの可読性と要素削減のチェックリストを使い、100%と200%のスクリーンショットで余分な要素を一行ずつ確認します。
npx skills add oil-oil/oil-uiエージェントに導入すると、モデルは生成とレビューの段階で、AIの定型表現に対するチェックリストを自動で参照して要素を減らします。
「AIっぽさ」がすぐに表れる6つの頻出パターン
「AIの定型感」とは、特定の色が悪いということではありません。モデルが業務上の重心を理解できないときに、視覚的な複雑さを補うために機械的に繰り返す装飾コンポーネントの集まりです。次の6パターンを改めるだけで、ページの印象はぐっと落ち着きます。
| 頻出するAIの既定表現 | 不自然に見える理由 | Oil UIによる置き換えと削減 |
|---|---|---|
| 各セクションの見出しの上に角丸のピルを置く（Eyebrow Pill） | 1ページに十数個のピル型ラベルが並び、本来際立たせるべき重点がノイズに埋もれる | すっきりしたセクション見出しや番号から直接本題に入る。本当の状態を表すラベルは、全ページで多くても1か所に絞る |
| カードを入れ子にし、左に3～4pxのカラー縦罫線を追加する | 多重の罫線と内側余白で本文幅が狭くなり、画面全体が平行な枠線だらけになる | 外側の囲み枠をなくし、グリッドの整列、段落間の余白、1本の細い区切り線で情報を構成する |
| 青紫のネオングラデーション文字＋半透明のすりガラス調の発光背景 | 法律事務所、木工房、医療管理画面のどれにも同じサイバー配色を当てはめてしまう | カテゴリーの物理的な性質から色を選ぶ。木工房なら原木とリネン、鋳鐘工房なら暗い青銅、財務帳簿なら紙白と墨黒など |
| 「成長+240%」「稼働率99.9%」など根拠のない指標カードを作る | 数字に業務上の出典がないことが訪問者に伝わり、プロダクトへの信頼を損なう | 実際の意味を持つ業務データだけを表示する。三脚スツールの32 / 45 / 62cmの価格、月24脚のバッチ、APIの実際の呼び出し明細など |
| 同じ幅のカード3枚の上部に、円で囲んだ線のアイコンを置き、中身のない言葉を並べる | 「高速 / 安全 / スマート」の3枚カードは、AIテンプレートの典型的なパターン | 非対称なレイアウトにするか、書体テスターや料金切り替えなど、実際に操作できるコントロールを直接置く |
| 薄いグレーの背景に薄いグレーの小字を置く、または画面全体を字間の広い大文字表記にする | 遠目にはデザインらしく見えても、本文が小さくコントラストも不足し、実際に読むと疲れる | 本文のコントラストと読みやすい行長（1行55～75文字）を守り、文字サイズの階層に明確な差を付ける |
要素を減らす順序：まず罫線を取り、次に文字サイズと余白を整える
ギャラリーの「Fieldwork Type」（書体ファウンドリー）、「Atelier Volders · Grain & Tenon」（家具工房）、「TRACE」（香水EC）を開くと、角丸の影付きカードをほとんど使っていないのに、階層がはっきりしていることに気付きます。その理由は、3つの基本をしっかり押さえているからです。
- 主見出しと本文のサイズ差を付け、中間のサイズを減らす
- 1ページに明確な4種類の文字サイズ（主見出し、セクション見出し、本文、補助説明）があれば十分です。同じ画面に11px、12px、13px、14px、15pxという近いサイズを5種類も散らばらせないようにします。
- 罫線を半分以上削除し、構造が成り立つかを確かめる
- レビュー中にコンテナの外枠を外してみます。左揃えと上下の余白だけで、どの行が一つのグループか理解できるなら、その罫線は不要です。
- アイコンの装飾ではなく、コントロール自体に語らせる
- 「用途別にライセンスを購入可能」という文の横に盾のアイコンを描くより、Desktop、Web、Appの3つのライセンスチェックボックスを実際に置き、選択時に価格が変わるようにする方が有効です。
どんなタスクにも追加できる「AIの定型表現を減らす」プロンプト
Oil UIをインストールしてモデルにチェックリストを自動実行させるだけでなく、日々のプロンプトの末尾に次の制約を追加することもできます。
Oil UIの基準に沿ってこのページをデザイン・検査し、次の削減ルールを厳守してください。
1. 各見出しの上にピル型の小見出し（Eyebrow Pill）を重ねず、左側のカラー縦罫線や意味のない青紫の発光グラデーションを使わないでください。
2. 業務上の根拠がない増減率（+128%、99.9%など）や、中身のない「高速／スマート／安全」の3等分アイコンカードを作らないでください。
3. カードを何層にも入れ子にせず、グリッドの整列、文字サイズの対比、余白、最小限の区切り線で階層を作ってください。
4. 完了後に1440×900と390×844でスクリーンショットを撮り、取り除いても理解に影響しない装飾枠や罫線を一つずつ削除してください。npx skills add oil-oil/oil-ui で導入したOil UIと組み合わせると、より効果的です。
実際に動くギャラリー作品とプロンプト
1440pxまたは390pxのライブデモを開き、モデルとプロンプトが最終的なUIにどう表れたかを確認できます。
Fieldwork Type
独立系タイプファウンドリー
独立系タイプファウンドリーのWebサイト（1440×900を基準とし、幅390までレスポンシブ対応）。ファーストビューではフラッグシップ書体を主役にし、訪問者が任意のテキストを入力して、サイズ、ウェイト、字幅を調整できるようにする。その後には、ファミリーのウェイト表、文字セット、使用例と、用途（デスクトップ、Web、アプリ）別に選んでカートに追加できるライセンスを配置する。 タイプテスターとライセンス選択がこの作品の中核。入力に応じて組見本が変わり、オプションを選ぶたびにライセンス価格が更新されるようにする。ファーストビュー、テスターパネルを展開した状態、ライセンス選択をデザインする。
作品とプロンプトを見る →
Atelier Volders · 木目とほぞ
手作り家具工房のウェブサイト
ベルギー、ゲントの Korenlei 14 にある2人の木工工房 Atelier Volders のウェブサイト（1440×900を基準とし、幅390までレスポンシブ対応）。英語のインターフェースとする。工房が作るのは De Drievoet だけ。3年間自然乾燥させた木材から手作業で旋盤加工と楔留めをした三本脚の無垢オークスツールで、1ロット24脚を月に1回だけ生産する。 高さは3種類（32 cmの低い囲炉裏用スツール €240、45 cmのダイニング・デスク用スツール €270、トネリコのフットリング付き62 cmのカウンタースツール €310）、仕上げも3種類（石けん洗いの無垢オーク、燻蒸したダークオーク、煮沸亜麻仁油と蜜蝋）。訪問者は高さと仕上げをリアルタイムに切り替え、6週間の制作工程、裏面の焼き印によるロット刻印、土曜日の開放時間を見て、現在のロットからスツールを予約できる。製品写真は提供しない。
作品とプロンプトを見る →
Vesper
API使用量請求コンソール
AI・開発者ツールチーム向けに、API使用量の請求と顧客請求書のコンソールをデザインする。英語のインターフェースで、デスクトップのビューポートは1440×900とする。ユーザーはサブスクリプションプランとライブAPI使用量を管理し、現在の請求サイクルの未払い額と請求書の例外を確認し、ステータスや使用量のしきい値で顧客・請求書を絞り込み、レコードを開いて明細、支払いと Webhook のタイムライン、イベントペイロードを確認できる。支払いの再試行、クォータ調整、請求書のエクスポートを含める。 3つの主要状態を実装する：収益と使用量の傾向、顧客または請求書リスト、ライブフィルターを備えた日常のワークスペース。使用量の内訳、ステータスタイムライン、復旧アクションを備えた例外請求書の詳細ビュー。クイックコマンドパレット。オフラインで使える `index.html` を納品し、`shots/desktop.png`、`shots/state-1.png`、`shots/state-2.png` を1440×900、DPR=2で撮影する。
作品とプロンプトを見る →
TRACE
香水ブランドストア
ニッチな香水ブランドのオンラインストア。ストアのホームページと1種類の香水の詳細ページを構築する。
作品とプロンプトを見る →Oil UI Pro：AIの定型表現を網羅したチェックリストと200%拡大の削減レビュー
Oil UI Proには、詳細な「AIの既定表現の除去チェックリスト」「100% / 200%ズームの可読性チェックリスト」「一行ずつの要素削減手順」が含まれます。コンテキストを持たないサブエージェントがブラインドレビューで、残っていた定型要素も必ず検出します。
npx github:oil-oil/oil-cli install oil-ui-proよくある質問
プロンプトに「AIっぽくしないで」と書いても、モデルが3枚のカードを作ってしまうのはなぜですか？
モデルは「AIっぽさ」が具体的にどのCSSの書き方を指すのかを知らないためです。Oil UIのように、禁止事項を検査可能な特徴へ分解し（見出し上の角丸ピル、出典のない割合バッジ、3層の入れ子コンテナを禁止するなど）、明確な代替レイアウトを示して初めて、出力を変えられます。
カードを全く使わずに、異なるモジュールを区切るには？
4つの方法があります。1) 十分な上下余白（モジュール間は80～120px、モジュール内は16～24pxなど）、2) 全幅の背景色のわずかな階調差、3) 上部の1pxの細い横線と左列のセクション名、4) 左右非対称の2カラム（左に固定タイトル、右にコンテンツを縦展開）です。
ピル型ラベル（Badge / Pill）はどんなときに適していますか？
実際の業務状態を表し、他の状態と区別する必要があるときです。請求管理画面の「支払い失敗」「再試行待ち」や、工房のバッチの「4月分は残り3個」などが例です。セクション名を繰り返して見出しの上に置くだけなら、削除してください。
ページにAIの定型表現が残っているかを素早く確認するには？
ページを50%に縮小するか、文字をぼかして構造だけを見ます。同じ大きさの角丸ボックス、ピル型ラベル、左右対称の3列ブロックばかりが見えるなら、まだテンプレートに依存しています。ファーストビューの焦点、疎密のリズム、主次の対比がはっきり見えれば、レイアウトの骨格が立っています。