no-ai-slop

AI っぽさをなくす

AI やテンプレートで構築された UI には、見分けがつく共通の「兆候」があります。根本原因は常に同じです。均一さと、よく考えられていないデフォルト設定です。1 つのフォント、1 つのアクセントカラー、1 つのカード、1 つの中央揃えテンプレートをあらゆるものに適用しています。以下の 2 つのレイヤーを適用して、意図的にデザインされたように見える UI を作りましょう。

使い方

• UI を生成する場合 → 常にレイヤー 1 と、現在有効なレイヤー 2 のスタイルを適用します。
• UI をレビューする場合 → レイヤー 1 に照らして確認し、該当する箇所をすべて修正します（セルフチェックを使います）。
• 完全版のリファレンス：TELLS.md（9 カテゴリーにわたる約 100 の兆候）。このファイルは、厳選された常時適用する項目です。

レイヤー 1 - あらゆる UI に共通する避けるべき兆候

フォントと文字組み

• デフォルトのフォントは使わないでください。Inter、Geist、「Space Grotesk + Instrument-Serif-italic + Inter」の組み合わせは避けます。個性のある書体を選び、見出し用と本文用でしっかりとコントラストをつけます。
• 見出しの色は単色にします。グラデーションで文字をクリップするのは避けます。
• 文字の太さに明確な階層をつけます。ページ内で最も太い文字に font-semibold や font-medium だけを使うのは避けます。
• 見出しは自然に折り返します。手動の <br>、すべての要素への text-balance の適用、4 行にわたる見出し、最後に 1 語だけ残る見出しは避けます。短くまとめます（約 5～9 語）。
• 左揃えの本文やサブタイトルはコンテナのコンテンツ幅いっぱいに配置します。最大幅を制限するのは中央揃えのテキストだけにします。細い幅の列を浮かせるのは避けます。
• 見出しとボタンにはセンテンスケースを使います。見出しの上に、文字間隔を広げた小見出しやキッカー（ピル、罫線＋大文字、文字間隔を広げた大文字）を置くのは避けます。主役は見出しです。
• 価格や統計値には tabular-nums を使います。本文で文字間隔を負にするのは避けます。

色と背景

• デフォルトのプライマリカラーに indigo/violet-600 を使わないでください。「VibeCode purple」の #8B5CF6 や、紫から青（またはアンバーからピンク）へのグラデーションも避けます。
• デフォルトの背景色にクリーム色や #faf8f4 を使わないでください。ドットグリッド、メッシュ状の blob、オーロラ、スポットライトの背景も避けます。デフォルトでグラスモーフィズムを使うのも避けます。
• 本文のテキストはコントラストを高くします（明るい背景ではほぼ黒、暗い背景では slate-200 以上）。本文に gray-400/500 は使いません。WCAG AA に準拠していることを確認します。
• 意図を持ったアクセントカラーを 1 色選びます（反射的に青や紫を選ばないこと）。控えめに使い、段階的な色の濃淡を用意します。Tailwind のステータスカラーをそのまま使わず、デフォルトの青いフォーカスリングも避けます。
• 常にダークテーマにするのは避けます。全体を均一な柔らかい影でまとめるのも避け、境界線やコントラストに加えて、実際の段階的なエレベーションを使います。

レイアウト

• デフォルトの中央揃えヒーロー（小見出し / H1 / サブ見出し / 同じサイズのボタン 2 つ / スクリーンショット）は避けます。非対称のグリッドと、主役となる CTA を 1 つ使います。
• 定番のセクション順や、3 列をすべて同じ比重にする発想を崩します。配置、列の比重、間隔のリズムに変化をつけます。
• アイコン付きカードを並べただけの「機能のごった煮」は避けます。幅の広い 4 列フッターや、ヒーローを反復した CTA バンドも、必然性がなければ使いません。

コンポーネント

• shadcn のデフォルトカード（rounded-xl border shadow-sm）を何にでも使い回さないでください。片側だけ色のついた境界線も、すべてを「ソフトな SaaS」風の rounded-2xl と柔らかい影にするのも避けます。一貫した角丸とエレベーションのシステムを明確に決めます。
• ヒーローにピル型のバッジを置かないでください。プライマリボタンとゴーストボタンを並べた「Get Started / Learn More」の組み合わせや、グラデーションボタンも避けます。
• 3 段階の料金プランで「Most Popular」を強調するために scale-105 を使う定番の手法は避けます。カウントアップする統計値や、比較表で緑のチェックと赤い X を丸で囲む表現も避けます。

画像とアイコン

• テキストとグラデーションだけで済ませず、実際の画像を使います。まず製品のスクリーンショットを検討し、写真には Unsplash/Pexels を使います。3D blob、メッシュ状の「アート」、デュオトーン、グラデーション上に傾けて配置したブラウザーのモックアップ、モデル生成の人物・ロゴ・グラフは避けます。
• アイコンには定評のあるライブラリ（Heroicons、Lucide、Phosphor、Hugeicons、Tabler）を使います。モデル生成の SVG は使いません。アイコンは控えめに使い、機能ごとに角丸四角形の中へアイコンを 1 つずつ配置するのは避けます。アイコンの代わりに絵文字を使わず、AI を表すためにキラキラを使うのも避けます。

コピーと動き

• em ダッシュは使いません。スペースを入れたハイフンやピリオドを使います。内容のない言葉（elevate、unlock、supercharge、seamless）、大げさな言い回し（delve、tapestry、boasts）、三つ並べる言い回しの癖、「X だけでなく、Y です」、「あなたの X を変革する」「シンプルで透明な料金設定」といった表現も避けます。
• 具体的なコピーを使い、実際の数値や意外性のある数値を示し、実名で証拠を提示し、実際のアクションを表す CTA ラベルを付けます。「Get Started」は使いません。
• すべての要素にフェードインと上方向への移動を設定したり、均一な hover:scale-105、カウントアップ、マーキー、視差効果を安易に使ったりするのは避けます。動きは控えめに、意図を持って使い、prefers-reduced-motion に配慮します。

一貫性

• すべてのコンポーネントは、見た目も動作も同じにします。すべてのボタンでホバー／アクティブ／フォーカス状態を統一し、すべてのカードで境界線／シャドウ／角丸を統一し、すべてのリンクで同じスタイルを適用します。一貫性がないと（押せるボタンと、ホバーするだけのボタンが混在するなど）、雑で自動生成された印象になります。
• インタラクションとコンポーネントのスタイルは、それぞれ一度だけ（共通クラスまたはトークンとして）定義し、再利用します。インスタンスごとにユーティリティ文字列を再入力しないでください。それこそが、一貫性が崩れる原因です。
• 余白、角丸、シャドウ、色はすべて、ひとつのスケールから選び、全体で使用します。

レスポンシブ対応とモバイル対応（構築とテストの両方）

• モバイル対応を後回しにしないでください。すべてのレイアウトが幅約375pxで、横方向にはみ出すことなく動作する必要があります。
• モバイルでリンクを隠すナビゲーションには、必ずハンバーガーボタンと動作するモバイルメニューを実装します。AIはリンクを隠したままメニューを忘れがちです。絶対にそのまま公開しないでください。
• グリッドは1～2列に組み替え、タップ対象は44px以上に保ち、文字サイズは適切に縮小します。
• 完了とする前に、デスクトップだけでなく、実際にモバイル幅でテストしてください。

レイヤー2 - スタイルの方向性

方向性とは、選んだルックに合わせて（書体、色、レイアウト、サーフェス、動き）をどのように構築するかを定める積極的な仕様です。このオープンなベースには、以下のサンプル方向性がひとつ含まれています。ほかの方向性と、それぞれに対応する、AIが組み合わせて一貫したアウトプットを作るための構築済みコンポーネントを含むUI キットは、商用レイヤーです（プロジェクトの README を参照）。

エディトリアル・ボールド（サンプルの方向性）

• 書体： ディスプレイ書体 = Archivo 800-900、大きく、左揃え、字間は約-0.02em。本文 = Newsreader（セリフ体）、リードは18px／本文は17px、行の高さは約1.6。ラベル = Archivo、小さめ、ミディアム、文頭のみ大文字。
• 色： 紙 #ffffff、インク #14120f、セカンダリテキスト #44423d（高コントラスト）。アクセントカラーはひとつだけ：バーミリオン #e0402b。控えめに使用します（CTAひとつ、リンク、細い罫線）。
• レイアウト： 12列、非対称。ヒーロー = 左側に見出し＋全幅のサブタイトル＋CTA、右側に実際の画像を枠付きで配置します。ゆとりがあり、意図的な余白を設け、左揃えにします。
• サーフェス： 小さな角丸（4-6px）または四角形。1pxの細い境界線（インク約12%）。ドロップシャドウは使わず、境界線／コントラストで区切ります。
• 画像： 実際のスクリーンショット／写真を、すっきりした細い枠で囲みます。グラデーション／ぼかしは使いません。
• アイコン： Heroicons／Phosphorを控えめに使い、テキストと同じサイズでインライン配置します。
• 動き： 最小限にします。控えめなリビールを最大ひとつにし、動きを減らす設定にも対応します。
• ディテール： エディトリアルな構成にします。細い罫線、番号付きインデックス、明確な階層を取り入れ、価格にはtabular-numsを使用します。

セルフチェック（「はい」があれば修正）

デフォルトのフォント（Inter/Geist）？ グラデーションまたは紫色の要素？ クリーム色の背景、またはぼかし／グリッドの背景？ グレーの本文テキスト？ ヒーロー上のピル／小見出し？ アイコン付きカードのグリッド？ shadcnのデフォルトカード、またはすべてに柔らかいシャドウ？ エムダッシュ？ 位置がずれた／4行にわたる／<br>を使った見出し？ 幅の狭い、浮いたサブタイトル？ モデル生成または絵文字のアイコン？ 実際の画像がない？ あらゆる要素のフェードアップ？ ホバー／アクティブ状態に一貫性のないボタン？ ハンバーガーボタンとモバイルメニューがない？ 375pxで崩れる？ モバイルで未テスト？

参考資料

TELLS.md（全カタログ）。examples/aerolaunch-hero/（実際のヒーローに適用したサンプルの方向性）。