iamyashwanthreddy/Anti-slop-website-design

アンチスロップWebデザイン

AIが生成するWebサイトの多くが似通って見えるのは、モデルが未確定の選択をすべて統計的に最も一般的な答えで埋めてしまうからです。Interフォント、インディゴからパープルへのグラデーション、rounded-2xlでソフトシャドウを持つカード、中央揃えのヒーローセクションとピルバッジ、Lucideアイコンを備えた3つのフィーチャーカード。それぞれ単体では問題ありませんが、それらが一緒になると「誰も何も決めてない」と読み手に感じさせ、訪問者は即座にそれを察知します。

プロのデザイナーは、ルールで禁止されているからといってこれらの要素を避けるのではありません。彼らは対象（ビジネス、コンテンツ、オーディエンス）から出発し、すべての選択をそこから導き出すからです。あなたの仕事も同じように進めることです。以下の禁止リストは方法ではなく、安全装置です。

プロセス

1. コードの前にデザインブリーフを書く

これに数文を費やしてください。自分の思考プロセスで、またはスコープが大きい場合はユーザーに表示して行います。以下の項目を埋めてください。

• 主題: それは何か、誰のためのものか、そのページでユーザーは何をする必要があるか？
• 個性: この主題に固有の3つの形容詞。「モダン、クリーン、スタイリッシュ」は何にでも当てはまるのでカウントしません。古本屋なら「埃っぽい、温かみのある、少しオタクっぽい」、研究室なら「臨床的、落ち着いた、正確な」のようにします。
• 実世界の参考: ページが参考にする物理的または歴史的なデザインの伝統。例：鉄道の時刻表、1970年代のスイスポスター、種子のパッケージ、博物館の壁のラベル、ハードウェアカタログ、新聞の一面、ジン、レストランのメニュー、フィールドノート、古いソフトウェアマニュアル、レコードスリーブ。主題から選び、毎回同じものをデフォルトにしないでください。
• パレット: 3～5個の実際の16進数カラーコードと、それらがどこから来たか（製品の素材、ブランド、写真、上記の参考）。
• ニッチとタイプ: ニッチ（パン屋、法律事務所、開発ツール、ジム、結婚式…）を指定し、references/fonts-by-niche.mdからそのニッチの行のフォントを、3つの形容詞に合うものを選び、なぜ合うかを一行で書いてください（「Alfa Slab One: 醸造所の壁に描かれたペイントサインのように見える」）。その一文が書けなければ、まだ選べていません。
• 一つの特徴的なディテール: このサイトだけに属する、記憶に残る単一の仕掛け。例：手書きの黒板のように設定された価格、法的文書のような余白のセクション番号、方眼紙のような罫線グリッド、フルブリードでトリミングなしで使用された写真。

ユーザーがすでにブランド、色、フォント、参考を指定している場合は、それらを優先します。その周りにブリーフを構築してください。

2. コンテンツから外側に向かって構築する

• 入手可能な場合は実際のコンテンツを使用します。ない場合は、この主題に対してもっともらしく、具体的なプレースホルダーコピー（実際にありそうな製品名、現実味のある数字、信頼できる住所）を書き、汎用的なマーケティングの埋め草は避けます。
• コンテンツにレイアウトを決定させます。メニューにはカラムとリーダードットが必要です。ポートフォリオには大きな画像と最小限の装飾が必要です。ドキュメントサイトにはサイドバーと密度の高いテキストが必要です。すべての主題を同じランディングページテンプレートに流し込まないでください。
• セクション構成を変化させます。実際のサイトには、長いテキストセクションが一つ、密度の高いテーブルが一つ、グリッドを破る画像が一つあります。「見出し＋サブ見出し＋3つのカード」を8回繰り返したりはしません。

3. 引き渡す前に監査する

出力をreferences/slop-catalog.mdと照らし合わせてチェックしてください（セッションでこのスキルを初めて使用するときに読んでください。完全なリストと理由、代替案が記載されています）。プロジェクトがディスク上にあり、Nodeが利用可能な場合は、スキャナーも実行します。

node <skill-path>/scripts/slop-check.js <file-or-folder>

これにより、よくある兆候（グラデーション、グローシャドウ、多用されるフォント、キラキラ絵文字、バズワード的なコピー）がファイルと行番号とともにフラグされます。すべてのヒットが間違っているわけではありません。天気図の中のグラデーションや、ユーザーが明示的にリクエストしたフォントは問題ありません。各ヒットを修正するか、理由をつけて意図的に残してください。

クイック禁止リスト

これらは最も顕著な兆候です。ユーザーから要求された場合や、ブランドが本当に必要とする場合を除き、避けてください。完全なリストはカタログにあります。

色

• 背景、ボタン、境界線、テキストにおける紫/バイオレット/インディゴ/青/ピンクのグラデーション
• 見出しのグラデーションテキスト（background-clip: text）
• ほぼ黒の背景に対するネオンアクセント（エレクトリックシアン、マゼンタ、アシッドライム）
• ヒーローの背後にあるぼかし処理された色付きの「オーブ」、オーロラ、メッシュグラデーションのブロブ
• Tailwindのデフォルトパレット（indigo-600、slate-900、violet-500）をそのままブランドカラーとして使用すること

サーフェスとエフェクト

• 色付きのグローシャドウ（box-shadow: 0 0 40px rgba(139,92,246,.5)）や、すべてにshadow-2xlを使用すること
• グラスモーフィズム：半透明の白い塗りつぶしとborder-white/10を伴うbackdrop-blur
• すべての要素が個別の角丸カードに入っており、どこでも同じ大きな半径（rounded-2xl/3xl）
• 放射状のフェードマスクを伴うドットまたはグリッドの背景パターン
• アニメーションするグラデーションボーダー、シャイマースイープ、「ビーム」ライン、スポットライトがカーソルを追従するエフェクト
• ホバー時にすべてのカードが浮き上がる（translateY(-4px) + より大きなシャドウ）

タイポグラフィ

• Inter、Poppins、Montserrat、Plus Jakarta Sans、DM Sans、Outfit、Sora、Manrope、Space Grotesk、Geist、Instrument Serifを反射的に選ぶこと。これらは良いフォントですが、理由もなく選ぶことが問題です。
• ニッチに合わないフォント、またはそのニッチの明らかなクリシェ（references/fonts-by-niche.mdを参照）
• 一言だけグラデーションまたはイタリックのセリフ体になっているヒーローの見出し（「Build faster」）
• すべてのセクション見出しの上にある、小さな大文字でワイドトラッキングされた「アイブロー」ラベル
• すべてを中央揃えにすること

レイアウト

• テンプレート：スティッキーナビ → 中央揃えのヒーロー（「✨ New」ピルバッジ付き） → 2つのボタン → 「Trusted by」グレースケールロゴ → アイコン付き3アップフィーチャーカード → 統計バンド → 5つ星の testimonial カード → 3段階価格（中央が強調） → FAQアコーディオン → グラデーションCTAバナー → 4カラムフッター
• フィーチャーを表示するデフォルトの方法としてのベントーグリッド
• 傾けられ、遠近法で変形された偽のダッシュボードスクリーンショット

コンテンツとコピー

• アイコンや箇条書きとしての絵文字（🚀 ✨ ⚡ 💡 🔥）、および「AI」に関するものへのキラキラアイコン
• 「Unlock the power of」、「Supercharge」、「Elevate」、「Seamless」、「Effortless」、「Revolutionize」、「Next-generation」、「all-in-one platform」、「built for the future」、「take X to the next level」
• トリコロンのスローガン：「Fast. Simple. Powerful.」
• 捏造された統計（10k+ users、99.9% uptime）や偽の testimonial（「Sarah J., CEO at TechCorp」）

モーション

• すべての要素にスクロールに応じたフェードイン、順次遅延
• 浮遊/上下動する要素、タイプライター風見出し、カウントアップ数字

代わりにすべきこと

色： ニュートラルカラーから始めますが、純粋な#fffやTailwindのスレートではなく、温度感を与えます（暖かい紙#f4efe6、クールグレー#e8eaec、インク#1b1a17）。アクセントカラーを1つ追加し、リンク、プライマリアクション、1～2箇所のハイライトに控えめに使用します。主題から引き出します：陶芸スタジオならテラコッタ、交通アプリならシグナルオレンジ、薬局ならボトルグリーン。フラットな塗りを使用します。グラデーションが本当に適切な場合（空、ヒートマップ）は、控えめにし、意味に結びつけます。

タイポグラフィ： フォントはニッチに基づいて選び、決してランダムや習慣で選びません。そのビジネスが看板、メニュー、ラベル、レターヘッドに何を印刷するのがもっともらしいかを尋ね、一致するタイプを見つけます。醸造所と法律事務所が偶然同じ書体を共有することは決してあってはなりません。選択する前にreferences/fonts-by-niche.mdを読んでください。約40のニッチを、それぞれ複数の選択肢、AIが各ニッチで手を伸ばすクリシェ（ゲームならOrbitron、ラグジュアリーならPlayfair、ジムならBebas + Montserrat）、およびヒンディー語やタミル語などの非ラテン文字用のフォントを含めてカバーしています。システムフォントスタック（system-ui, -apple-system, "Segoe UI", sans-serif）は、ツールやダッシュボードには正当な選択肢です。1ファミリーで十分なことがよくあります。多くても2つです。サイズ、ウェイト、スペーシングで階層を構築し、本文は読みやすい文字数（約60～75文字）で左揃えにします。

サーフェス： 影ではなく、余白、罫線（濃いめのニュートラルで1px solid）、背景の変化で要素を分離します。影を使用する場合は、小さく、ニュートラルで、実際の光のようにオフセットさせます（0 1px 2px rgb(0 0 0 / .08)）。半径は意図的に選びます：エディトリアルや工業的には0、ほとんどのUIには2～6px、完全な丸はピルとアバターのみ。すべてにコンテナが必要なわけではありません。

レイアウト： 非対称性を使用します：広いテキストカラムと狭いサイドノート、グリッドからはみ出す画像、左揃えのヒーロー。密度をコンテンツに合わせます。価格はプレーンなテーブルにできます。フィーチャーはカードではなく、文章のリストにできます。主題に必要ないセクションは省きます。パン屋のサイトに統計バンドは必要ありません。

インタラクション： リンクには下線を引きます。ホバー状態は色または下線を変更し、位置は変えません。ボタンには明確な押下/フォーカス状態を設けます。モーションは何かを説明する場合（メニューが開く、状態が変わる）にのみ使用し、prefers-reduced-motionを尊重します。

画像： 実際のものの実際の写真は、どんなイラストよりも優れています。それがない場合は、ストックの3Dブロブ、アイソメトリックな人々、AIアートではなく、正直なプレースホルダー（「写真： 店頭、朝の光」とラベル付けされたニュートラルなボックス）を使用します。シンプルな図、地図、製品ショット、タイプのみの構成は、すべて人間が作ったものとして読まれます。

コピー： そのものの所有者がカウンターで使うような平易な言葉で、何をするかを具体的に述べます。「Fresh sourdough every morning from 7, closed Mondays」は「Experience artisanal excellence.」に勝ります。統計をでっち上げるよりは、何も書かない方がましです。

あるクリシェを別のクリシェに置き換えない

あるデフォルトが禁止されると、次にありきたりな答えが新しいデフォルトになります：Interの代わりにSpace Grotesk、紫の代わりにティール、すべてのサイトに太い黒い境界線と黄色いハイライトを付けた「ブルータリズム」。あなたがデザインした異なる2つの主題が似通って見えるなら、それはブリーフではなくテンプレートから作業していることになります。ステップ1に戻り、主題にもっと強く押させるようにしてください。

ユーザーが「スロップ」な見た目を望む場合

一部のユーザーは光沢のあるSaaSの見た目を望んだり、ブランドが実際に紫とグラデーションだったりします。明示的な指示とブランドガイドラインに従ってください。それらがこのスキルをオーバーライドします。それでも、自由が利く範囲で抑制を適用できます：5つのグラデーションではなく1つ、バズワードではなく実際のコピー、意図的なフォントの組み合わせ。