COL-01
紫→青のグラデーション
linear-gradient(135deg,#667eea,#764ba2)
なぜ出るヒーローとボタンの「とりあえず華やか」担当。一度見たら全AIサイトで見える。
Cliché Catalog / vol.01
Claudeがつい手を伸ばす、ありきたりなデザイン
指示が曖昧だと、AIは無難で見たことのある方へ流れます。これはその「手癖」の標本集。 各項目に実物の表示サンプルを1点ずつ封入しました。——ちなみにこの見本帳自体は、収録したどの手癖も使っていません。
A
配色のクセ
Color
COL-02
Tailwind既定色そのまま
indigo-600 / slate-700 / emerald-500
indigo-600
slate-700
emerald-500
なぜ出るカスタムカラーを決めずに既定パレットへ直行。ブランドの顔が無くなる。
COL-03
グラデーション文字
background-clip:text; color:transparent
見出しテキスト
なぜ出る見出しを“キラッ”とさせたい衝動。装飾が意味より先に来ている合図。
COL-04
灰色地に白いカード
bg:#f9fafb + card:#fff
カード
なぜ出るTailwindの初期状態。安全だが、誰のサイトか分からなくなる地味さ。
B
レイアウトのクセ
Layout
LAY-01
中央寄せヒーロー
大見出し → 灰色サブ → ボタン2つ
大きな見出し
サブテキストがここに入ります
始める詳しく
なぜ出るランディングページの“初期テンプレ”。全部まんなか、全部おなじ。
LAY-02
3カラムの機能カード
必ず3つ・等幅・アイコン上＋太字＋灰色説明
なぜ出るなぜか毎回ぴったり3つ。中身でなく「3」という形に合わせている。
LAY-03
画像左／文章右の交互
section ごとに左右ジグザグ
なぜ出る“動きを出した気分”の常套手段。スクロールが予測どおりで退屈になる。
LAY-04
余白の盛りすぎ
py-20 / py-24 を全セクションに
本文はここだけ
なぜ出る「余白＝高級」の過剰解釈。情報が遠くなり、ただ長いページに。
LAY-05
最後にもう一度CTA
「さあ、始めよう」で締める定番ブロック
さあ、始めよう
無料で試す
なぜ出る締めの型が一個しかない。どのページも同じ言葉で終わる。
C
文字のクセ
Typography
TYP-01
Inter一択
font-family: Inter, system-ui
Aa Gg 123
The quick brown fox — default sans
なぜ出る無難で間違いない＝個性ゼロ。書体で性格を出す選択を放棄している。
TYP-02
特大の太字＋薄灰の補足
text-4xl font-bold + text-gray-500
特大の見出し
薄いグレーの補足テキストが続きます
なぜ出る強弱がこの一手しかない。サイズと色を落とすだけの単調な階層。
D
部品のクセ
Components
CMP-01
角丸＋ふんわり影
rounded-2xl + shadow-lg
ふんわり浮くカード
なぜ出る全部が“ふわっと浮く”。柔らかさが一律で、強弱も素材感も消える。
CMP-02
ホバーで浮く・拡大する
hover:-translate-y-1 / hover:scale-105
ホバーしてみて
なぜ出る“動かしとけば親切”の万能ホバー。どの要素も同じ反応で印象に残らない。
CMP-03
緑チェック ✓ の機能リスト
✓ 項目 ✓ 項目 ✓ 項目
- 機能A
- 機能B
- 機能C
なぜ出る「できること＝緑✓」の刷り込み。差別化すべき箇所が一番テンプレ化する。
CMP-04
巨大な統計数字
10,000+ / 99.9% / 24/7 を3つ並べる
10,000+ユーザー
99.9%稼働率
24/7サポート
なぜ出る権威づけの即席手段。多くは出典なしの“それっぽい数字”で信頼を演出。
CMP-05
証言カード
丸アバター ＋ 引用 ＋ 名前 ＋ 役職
「導入してから業務が一変しました。」
山田 太郎CEO, ○○株式会社
なぜ出る“社会的証明”の鋳型。中身が架空でも形だけで信頼っぽく見せられてしまう。
E
“今っぽさ”のクセ
Modern Tics
MOD-01
グラスモーフィズム
backdrop-filter:blur() ＋ 半透明の白
Frosted Glass
なぜ出る「モダンに見せたい」の最短ルート。意味より流行で貼られがち。
MOD-02
ダークモード＝ただの反転
bg-gray-900 / text-gray-100
ダークモード
ただ色を反転しただけ
なぜ出る設計でなく色の反転。コントラストや彩度の作り直しを飛ばしている。
F
AIっぽさの記号
AI Tells
AI-01
絵文字をアイコン代わりに
🚀 ✨ 🎯 💡
🚀 ✨ 🎯 💡
なぜ出るアイコンを用意せず絵文字で代用。OS差で見た目が割れ、統一感も崩れる。
AI-02
「Powered by AI」＋✨バッジ
✨ AI機能の合図はいつもスパークル
✨ Powered by AI
なぜ出る“AIです”の記号がワンパターン。新機能なのに既視感だけが残る。