AIっぽさは「全部が主役」から来る。配色より先に、強調を1つに絞る5つの修正をする
大きな見出し・大きなアイコン・影付きカード・背景グラデーションが全部そろうと、何を見ればいいか分からなくなる。装飾を禁止するのではなく、理由のない装飾を減らす。
どんな問題を解決するか / いつ使うか
AIが作ったLP・資料・UIが「なんとなくAIっぽい」とき、色やフォントを替えても直らないことが多い。原因は個々の装飾ではなく、すべてを同じ強さで強調していること。修正指示を「もっとおしゃれに」から具体的な言葉に変えたいときに使う。
やり方:まず直す5つ
- 最初に読ませるものを1つ決める。
- 関係する情報は近づけ、話題が変わるところは余白を広げる。
- フォントの種類を増やす前に、サイズと太さで強弱をつける。
- 色に「見出し」「補足」「行動」などの役割を持たせる。
- 意味を説明できない枠・影・アイコンは減らす。
AIへの修正指示の例(投稿の文をもとに要約)
text
一番伝えたいのは〇〇です。それが最初に目に入るよう、見出し・本文・補足の強弱をつけてください。
関連する情報は余白でまとめ、意味のない枠・影・アイコンは減らしてください。文言は変えないでください。「文言は変えないで」を入れておくと、見た目の修正のついでに文章まで書き換えられるのを防げる。
注意点
- 角丸やグラデーションそのものを禁止する必要はない。残すかどうかは「説明できる理由があるか」で決める。
- 投稿者は、Codexが何も言わなくても見出し前後の飾り記号(いわゆる「チョンチョン」)を消してくれた例を挙げ、これもAIっぽさの元の1つだとしている。
- 関連:「もっと目立たせて」は、主役・余白・比較の具体修正に言い換える、バイブコーディングしたサイトは、taste-skill v2 で「AIっぽさの印」を幅ごとに洗い出してから直す。同じ投稿者は、近接・類似などの知覚の原理12個を「デザインの見本+AIへの指示」付きでまとめた図解も出している(例:「見出しと説明は近づけ、次の話題との余白を広くして」)。