Web Design Deslop（ウェブデザインスロップ除去）は何をしますか？

「AIスロップ」は、たった一つの悪い選択から生まれるものではありません。それは、何百万ものランディングページの平均値です。紫からピンクへのグラデーション、バッジピルと2つのボタンを中央に置いたヒーロー、アイコン付きの3枚の等サイズのフィーチャーカード、ほぼ黒の背景に浮かぶガラスカード、「Unlock seamless workflows（シームレスなワークフローを解放）」というコピー。それぞれは単体では問題ありません。しかし、それらが揃うと、どの会社のものでもあり得るページ、つまりどの会社のものでもないページが出来上がります。

このスキルは3つの役割を果たします:

監査 - 既存のページ、モックアップ、コードベースをチェックし、スロップの兆候と具体的な修正方法を報告します。
ガイド - 新しい構築時に、そもそもスロップが書き込まれないように導きます。
コピー書き換え - AIが生成したようなコピーを書き換えます。

監査や構築を行う際は、references/tells.md（ビジュアル、レイアウト、モーション、Tailwindの兆候とそれぞれの代替案）を必ず参照してください。ヘッドライン、サブヘッド、機能紹介、CTAを書いたりレビューしたりする際は、references/copy.mdを参照してください。

最も重要なテスト

スワップテスト。 ロゴと製品名を競合のものに置き換えてください。それでもページは成立しますか？もし成立するなら、それはどんなに洗練されていてもスロップです。デザインされたページは、このブランドだけが持つ素材（製品、人々、場所、プロセス、実際の数字、声）から構築されています。以下の判断はすべて、このテストの特殊なケースです。

2つの補助テスト:

目を細めてテスト。 目を細めて見てください。同じサイズの角丸長方形が等間隔で中央に縦に積み重なっているように見えるなら、そのレイアウトはテンプレートです。デザインされたページは凹凸のあるシルエットを持っています。あるセクションは広く、次は狭く、一つは非常に大きく、多くは小さい。
ソーステスト。 それぞれの決定はどこから来ましたか？「ブランドの素材から」は良い。「なぜならランディングページはそう見えるものだから」は兆候です。

モード1: 監査

ユーザーがURL、スクリーンショット、Figmaフレーム、コンポーネント、リポジトリを共有し、レビューを希望した場合、またはそれが一般的に見えると述べた場合に使用します。

まずすべてを読む。 コードの場合は、すべてのページ/セクションコンポーネントとTailwind設定またはグローバルCSSを読む。スクリーンショットの場合は、コメントを書く前にページ全体を見る。ヒーローだけを見てコメントしないこと。
スワップテストを実行し、判定結果を一文で述べる。 正直かつ具体的に：「これはどんなDevToolsスタートアップのホームページにもなり得る」という方が、スコアよりも役に立ちます。
兆候を悪い順にリストアップする。 それぞれについて：兆候、場所（ファイルと行、またはセクション名）、なぜ生成的に見えるか、修正方法。references/tells.mdから引用しますが、修正はこのページ専用に書き、汎用的な代替案は書かないでください。
保持すべきものを挙げる。 すべてのページには機能している部分があります。それを伝えてください。そうしないと、ユーザーはスロップと一緒にそれを捨ててしまうかもしれません。
最も効果の大きい3つの変更を与える。 通常は、タイポグラフィに関する決定1つ、レイアウトに関する決定1つ、コンテンツに関する決定1つです。ユーザーがこれだけを行えば、ページはすでに目を細めてテストに合格するはずです。

監査の出力形式:

## 判定
1～2文。スワップテストの結果。全体的に：テンプレート的 / 混在 / デザインされている。

## まずこれを修正
1. [兆候] / [場所] / [具体的な修正]
2. ...
3. ...

## その他、領域別
### タイポグラフィ  ### カラー  ### レイアウト  ### コンポーネント  ### モーション  ### コピー  ### コンテンツ/イメージ
（各領域の下に短いリスト。空の領域はスキップ）

## 保持
すでに良いものとその理由。

ユーザーが修正の適用を依頼した場合は、実際のファイルを編集してください。特に依頼がない限り、ページ全体をゼロから書き直さないでください。対象を絞った編集は、機能している部分を保持し、レビューも容易です。

モード2: スロップなく構築する

サイト、ページ、セクション、テンプレートを生成する際は常に使用します。順序が重要です。早期に行われる決定（コンセプト、タイポグラフィ、グリッド）はスロップを防ぎます。後から行われる決定（このグラデーションをあのグラデーションに交換する）は、それを隠すだけです。

マークアップを書く前に

ブランドの生の素材を見つける。 このビジネスは実際に何を持っていますか？実際のインターフェースを持つ製品、物理的な場所、素材、クラフトのプロセス、明確な視点を持つ創業者、データセット、名前を持つ顧客ベース。一つを選び、それをページの原動力にします。コーヒー焙煎業者のサイトは焙煎プロファイルを中心に構築できます。ディーラーのサイトはショールームのフロアを中心に。請求書作成アプリは実際の請求書を中心に。ユーザーから何も与えられなかった場合は、一つ質問するか、返信の冒頭で構築の前提となる仮定を述べてください。
レイアウトのアイデアを選び、セクションのリストを選ばない。 ページが行う構造的な動きを一つ決めます。スティッキー左カラム付きのエディトリアルな2カラム、フルブリードの画像リズム、高密度なインデックス/テーブルページ、巨大なヘッドライン一つと小さなサポートタイプ、製品の水平スクロール。そして、セクションはそこから自然に生まれさせます。決して「ヒーロー → ロゴ → 機能 → お客様の声 → 価格 → FAQ → CTA → フッター」から始めてはいけません。そのリストこそがスロップのテンプレートです。ページにこれらのセクションの一部が必要な場合でも、それらはこのページのように見えるべきであり、リストのように見えてはいけません。
カラーの前にタイポグラフィを設定する。 個性的なディスプレイフォントと、ボディ用の実用的なワークホースフォントを選びます。大きなジャンプのある実際のスケール（例：14 / 18 / 32 / 72 / 140）を設定し、Tailwindの緩やかな傾斜（text-4xlからtext-6xl）は使いません。配置を決めます。左揃えはデザインされたページのデフォルトであり、中央揃えは生成されたページのデフォルトです。
素材からパレットを導き出す。 1つか2つのブランドカラー、紙やインクのような背景色、そしてごく一部でのみ使われるアクセントカラー。グラデーションは禁止ではありませんが、何にも由来しないグラデーション（紫→ピンク、青→バイオレット）は、現在ウェブ上で最も強いAIの兆候です。

マークアップを書く際に

リズムに変化をつける。 すべてのセクションが py-24 max-w-7xl mx-auto であってはなりません。あるセクションはコンテナを突き破り、別のセクションは狭いメジャーに収め、さらに別のセクションはカードの代わりに極細線で区切られたリストにします。
カードやシャドウよりも線とスペースを優先する。 ヘアラインの境界線（border-b border-neutral-200）、余白、タイプサイズは、rounded-2xl shadow-lg のボックスよりも階層をうまく伝えます。カードは、それが実際に独立したオブジェクト（製品、プラン）である場合にのみ使用し、デフォルトのラッパーとして使用しないでください。
実際のコンテンツか、正直なプレースホルダーを使用する。 ブランドの素材から実際のヘッドラインを書きます。事実が不明な場合は、10,000人以上の幸せな顧客 と捏造する代わりに、{{TODO: 実際の数値}} と書きます。偽のロゴ、偽の5つ星の声、キリの良い統計値はコンテンツのスロップであり、セクションがないことよりも悪質です。
アイコンは少数、あるいはなし。 絵文字は決してアイコンではありません。機能リストの各行にlucideアイコンは必要ありません。アイコンを使用する場合は、一貫したセットにし、小さく、テキストに対して二次的にします。
理由のあるモーション。 すべての要素にスタッガーフェードアップを適用しないでください。コンテンツに関連した、意図的な1つか2つの動き（スクロールに応じて表示される製品画像、詳細を示すホバー効果）は、デザインされたものとして読まれます。デフォルトのトランジションは高速かつシンプルにします。
画像は抽象よりも具体的に。 3Dブロブ、グラデーションのオーブ、「机の上のノートパソコン」のストックフォトは禁止。実際のスクリーンショット、製品写真、地図、ドキュメント、素材のテクスチャ。どれも存在しない場合は、適切に設定されたタイポグラフィックブロックがプレースホルダー画像よりも優れています。
二次的なスロップにも注意する。 グラデーションスロップへの反動にも、独自のテンプレートが存在します。巨大なセリフ体、グレインオーバーレイ、(01) 番号付きセクション、すべて大文字のモノラルラベル、マーキー行、カーソル追従ブロブ、モノラルで「© 2026 — All rights reserved」。これらも同様に認識可能です。これらの動きは、ブランドに由来する場合にのみ使用し、「デザインされた」というシグナルとして使用しないでください。

引き渡す前に

自分の出力に対して、素早く監査を実行します。スワップテスト、目を細めてテスト、references/tells.md をスキャン。見つけたものを修正します。その後、ページがなぜそのように見えるのか（どの素材から構築されたか、レイアウトのアイデアは何か）をユーザーに1行か2行で伝えます。そうすることで、ユーザーはピクセルではなく決定を判断できます。

モード3: コピー

references/copy.mdを参照してください。短く言うと、生成されたコピーは抽象的で、形容詞が多く、対称的です。デザインされたコピーは具体的で、特異的で、不均一です。すべての主張を事実で置き換え、「seamless（シームレス）」を実際に起こることで、3つのセットを重要な一つのことで置き換えます。ヘッドラインは、ブランドの声で、顧客が使う言葉で、何であるか、何をするかを言うべきです。CTAは次に何が起こるかを伝えます（「焙煎を見る」「試乗を予約する」）のであって、「始める」ではありません。

キャリブレーション

すべてのパターンがすべてのコンテキストで間違っているわけではありません。3段階の価格表は、3つのプランがある製品にとっては正しいです。兆候は、何の根拠もなく中央のプランに「最も人気」バッジが付いていることです。チェックリストではなく、スワップテストで判断してください。
ユーザーが従来的で信頼性のあるレイアウト（銀行、クリニック、ディーラー）を望む場合もあります。Deslopは「奇妙にする」ことではありません。「特異的」にすることです。実際の素材から構築された従来の構造は合格です。汎用的なカードで満たされた実験的なレイアウトは不合格です。
ユーザーがデザイナーや開発者の場合は、コードや正確な値で修正を提供してください。そうでない場合は、平易な言葉で変更を説明し、修正を申し出てください。
お世辞を言わず、追い打ちもかけないでください。正直な判定一つ、ランク付けされたリスト、そして前進する道筋を提供してください。

Web Design Deslop（ウェブデザインスロップ除去）