ai-slop

対象範囲：マーケティングサイト、製品インターフェース、ダッシュボード、ポートフォリオ、エディトリアルページ、eコマースです。frontend-design を補完するもので、あちらのスキルがインターフェースを構築するのに対し、このスキルは成果物がありきたり（「AIスロップ」）なのか、製品に真に適したものなのかを判断するための詳細な評価基準です。

これは万能のスタイルガイドではありません。AI システムがよく使うというだけで、特定のビジュアルスタイルを禁じるものではありません。グラデーション、カードグリッド、セリフ体の見出し、ガラスのような表面、ダークテーマも、適切な場合があります。製品、オーディエンス、コンテンツ、インタラクション、ブランド上の必要性ではなく、反射的に使われているときに、スロップの兆候となります。

MUST／MUST NOT は受け入れに必須の要件です。SHOULD／SHOULD NOT は原則として守るルールであり、逸脱する場合は理由を明記する必要があります。MAY は任意で、状況に応じて適用します。

1. 基本定義

AIスロップとは、表面的にはそれらしく見えるものの、意図、根拠、具体性、一貫性、真実性、または製品への適合性が不十分な成果物です。 通常、以下のいずれか、または複数の形で現れます。

1. デフォルト頼み — 意図的な判断の代わりに、見慣れたモデルやテンプレートの反射的なパターンが使われています。
2. 置き換え可能 — 最小限の変更で、別の製品向けに名称を付け替えられます。
3. 根拠に欠ける — コンテンツ、主張、ビジュアル、機能が、ブリーフや証拠に裏付けられていません。
4. 一貫性がない — 洗練された要素が、ひとつの一貫したシステムを構成していません。
5. 目的のない装飾 — 効果が注意を引く一方で、階層、意味、状態、アクションを明確にしていません。
6. 価値より量を優先 — 余分なセクション、カード、コピーが、主に完成して見せるために存在しています。
7. レビュー不足 — 明らかなレスポンシブ対応、アクセシビリティ、事実関係、インタラクション上の欠陥が残っています。
8. 現在のAIの美学に過度に適合 — プロジェクトのニーズではなく、流行しているモデル出力の傾向に従っています。

AIが作成を支援したというだけで、成果物がスロップになるわけではありません。実際の製品やユーザーの状況に根ざし、意図的にアートディレクションされ、具体的で、事実に忠実で、一貫性とアクセシビリティを備え、編集とブラウザーでの検証が行われており、別の製品にそのまま転用しにくい成果物なら、AIの支援を受けていても優れたものになり得ます。人間が作った作品もスロップになり得ます。この分類が対象とするのは成果物であり、誰が作ったかの証明ではありません。

2. 2つの簡易テスト

• 置き換えテスト：製品名、ロゴ、アクセントカラーを入れ替えても、ページの80％が別の製品向けとして同じように自然に見えますか？ はい＝スロップのリスクが高い。いいえ＝製品と意味のある形で結び付いている可能性が高いです。
• 理由付けテスト：目立つ判断はすべて、以下のいずれかに少なくとも1つ答えられなければなりません。どのユーザーニーズに応えるのか、どの製品の真実を表すのか、どの階層を明確にするのか、どのブランド特性を体現するのか、どのインタラクション状態を伝えるのか、どの制約によって適切になったのか。答えが「モダンに見えるから」または「AIが提案したから」だけなら、スロップの候補です。

3. 評価項目（各項目を0～4点で評価：0＝優秀、1＝軽微、2＝目立つ、3＝重大、4＝ブロッキング）

• 製品への根拠と具体性 — 汎用的な価値提案、チェックリスト主導のセクション、作り上げた機能やペルソナ、製品と無関係な視覚的メタファー。根拠： 明確なユーザー、タスク、制約と、各セクションの追跡可能な理由を記した PRODUCT.md（または同等の文書）。改善： 根拠のないセクションを削除し、具体的なユーザータスクを中心に書き直します。
• 真実性と根拠（ブロッキング） — 架空の価格、指標、推薦文、ロゴ、引用、または利用できない機能があるように見せる操作。代わりに [NEEDS INPUT]、「価格はお問い合わせください」、またはサンプルデータと明記したものを使い、検証可能な主張の根拠一覧を保管し、架空のデモデータはデモデータと明示します。
• 情報設計とストーリー展開 — ヒーロー → ロゴ一覧 → カード → 指標 → 推薦文 → 料金 → FAQ という既定の構成、入れ替え可能なセクション順、冒頭に集中するスローガン。改善： 読者が抱く疑問を順序立てて定め、各セクションに固有の役割を持たせ、理解を深めないセクションは削除します。
• 構成とレイアウト — すべてを中央揃えにする、同一のカードを繰り返す、均一な余白、過剰なピル型要素、デスクトップ版をそのままモバイルで縦積みにする、中間幅で見出しがはみ出す。改善： コンテンツ主導のレイアウト、意図的な密度の変化、理由がある場合のみ崩す空間システムを採用し、実際のコンテンツを複数の幅でテストします。
• ビジュアルシステムの一貫性 — 統一されていない角丸や影、アイコンの線幅、セクションごとに無関係な表面処理、定義したトークンの未使用。根拠： 色、文字、間隔、角丸、エレベーション、モーションのセマンティックトークンを定義し、コンポーネントで実際に使用する DESIGN.md と、システムから外れる場合の例外を記した文書。改善： トークンを一貫して適用し、システムを崩す場合はその理由を記録します。
• 色とマテリアル — 説明のない紫／バイオレットの「テック系」グラデーション、暗い背景のシアンの輝き、目的のないグラデーション見出し文字、あらゆる場所へのグラスモーフィズム、カテゴリーの固定観念だけで選んだパレット。これらはどれも一律に禁止されるものではありませんが、繰り返し使われる場合、ブランドコンセプトに根拠がない場合、または反射的に選ばれた場合は指摘します。
• タイポグラフィ — どこでも使われる人気のデフォルト書体、あらゆる役割で同じウェイトパターン、「エディトリアル」な雰囲気を狙った大きすぎるディスプレイ書体、小さく字間を広げたアイブロウラベル、平坦な階層、モバイルで機能しないヒーローテキスト。改善： ブランドの属性と読みやすさの条件に基づいて書体を選び、役割別の文字トークンを定義し、長い単語、ローカライズ、ズームをテストします。
• コピーと語り口 — 「revolutionize／unlock／seamless／elevate」、「XだけでなくYも」、内容のない主張（「未来のために構築」）、単調なリズムと全角ダッシュ、「詳しく見る」という予測可能な遷移先のボタン。改善： 具体的な名詞と動詞を使い、製品が誰に何を、なぜ提供するのかを明示し、実証できない主張を取り除きます。
• 画像とアイコン — 製品の代わりに置かれた汎用的なグラデーションの塊、ライセンスのない外部直リンクのストック画像、人体や照明に一貫性のないAI生成画像、混在するアイコンファミリー。改善： 実際の製品画像、専用に制作したイラスト、実際のスクリーンショット、または事実に即したプレースホルダーを使います。アセットを生成する前に、アートディレクションのルールを定めます。
• モーションとインタラクション — スクロール時にすべての要素をフェード／上昇させる、無差別にバウンスするイージング、長い出現アニメーション、意味上の目的がない視差効果、動きを減らす設定を無視するアニメーション。改善： モーションの根拠を記し、少数のトークン化された時間とイージングのシステムを使い、キーボード、タッチ、動きを減らす設定、低パフォーマンスの各条件でテストします。
• ユーザビリティとアクセシビリティ（ブロッキングを示す兆候） — キーボードトラップ、フォーカス状態の欠如、不十分なコントラスト、ラベルのない操作部品、小さすぎるターゲット、ホバー時にしか表示されない情報、ズーム／リフローの不具合。基準：一般向けの公開コンテンツでは WCAG 2.2 AA に準拠します。
• レスポンシブ動作 — デスクトップのグリッドを区別のない縦積みにする、横方向のはみ出し、急激な文字サイズの変化、小さな画面でもコンテンツの優先順位を変えない。改善： デバイスの名称ではなくコンテンツが破綻する箇所を基準にブレークポイントを選び、狭い幅、中程度の幅、広い幅に加え、ズームもテストします。
• 機能の完全性 — 機能しないボタン／リンク、送信や状態表示ができないフォーム、見た目だけのタブ／メニュー／ダイアログ、読み込み中／空／エラー／無効状態の欠如。改善： エッジ状態も含め、要件に基づいたブラウザでのタスクテストを実施します。未完成の操作部品を完成済みとして見せてはいけません。
• 実装品質 — 回避可能なレイアウトシフト、最適化されていないアセット、静的コンテンツに対する過剰なクライアント側 JavaScript、場当たり的な CSS 値の繰り返し、不正なセマンティクス、コンソール／ハイドレーションエラー、装飾のために犠牲にされるパフォーマンス。
• 独自性とカテゴリーへの反射 — カテゴリーだけから配色、タイポグラフィ、ヒーロー、コンポーネントを推測できてしまいませんか（一次的な反射）？ 明白な決まり文句を避けたあと、結果が次の流行の代替案に移っただけではありませんか。たとえば、ダークパープルのグラスモーフィズムから、クリーム色のエディトリアルなセリフ体へ移るような場合です（二次的な反射）。デザインはカテゴリーから必然的に決まるのではなく、このプロジェクトにふさわしいと感じられるものであるべきです。

4. 複数シグナルによるルールと重大度

次のいずれかに該当する場合、結果をスロップと分類します。ブロッキングの問題が1つ存在する、3つ以上の評価軸でスコアが3となる、複数の表現要素（色＋タイポグラフィ＋レイアウト＋コピー）に同じパターンが繰り返されている、または2つのクイックテストがどちらも不合格となる。

• ブロッキング（納品前に必ず修正）：捏造された主張や事実、主要タスクの破綻、深刻なアクセシビリティ上の問題、誤解を招く操作要素、利用不能なレスポンシブ動作、公開上の主張を裏付ける証拠の欠如、法的リスクや安全上のリスクがあるコンテンツ。
• 重大（品質や独自性を大きく損なう）：ページ全体に及ぶテンプレート的なパターン、設計システムの一貫性の欠如、構成の反復、読みにくいタイポグラフィ、目的のないモーション、体験を支配するありきたりなコピー。
• 軽微（局所的な問題）：不要なピルが1つ、弱いラベルが1つ、一貫性のない角丸が1つ、長すぎる行が1つ、ありきたりなセクションが1つ。

5. 必須のプロジェクト成果物

• PRODUCT.md：製品／提供内容、対象ユーザー、主要な目的、重要なタスク、事実と仮定の区別、対象外の範囲、コンテンツの不足、アクセシビリティ目標、成功基準。
• DESIGN.md：アートディレクションを表す文、ブランド属性、避けるべき参照例、ビジュアルリファレンスから抽出した原則、カラーパレットと意味上の色の役割、タイポグラフィの役割、スペーシング／グリッドシステム、角丸／ボーダー／エレベーション／マテリアルのルール、画像の方針、モーションのルール、コンポーネントの語彙、レスポンシブの原則、意図的な例外。
• EVIDENCE.md：外部から検証可能な主張ごとに、主張の正確な内容、情報源、確信度、使用可能な表現、その主張が表示される場所を記載します。裏付けのない主張を公開してはなりません。

6. レビューパイプライン

自己レビューを1回行うだけでは不十分です。次の順序でチェックを通過させます。

1. 決定論的なソーススキャン — 裏付けのない数値や主張、禁止表現のパターン、トークンから外れた色やスペーシング、タイポグラフィの違反、アクセシビリティに配慮されていないセマンティクス、小さな操作対象、状態の不足、リンク切れ、コンソール／パフォーマンス上の欠陥。
2. ブラウザーでのタスクテスト — キーボード操作、フォーム／バリデーション、メニュー／ダイアログ、エラー／空の状態、モバイルナビゲーション、モーションの低減、現実的なコンテンツの長さ。
3. スクリーンショットレビュー — 狭いモバイル、幅広のモバイル／小型タブレット、ノートパソコン、ワイドデスクトップ、該当する場合は200％ズーム。階層、リズム、はみ出し、一貫性、製品との適合性を確認します。
4. ビジュアル評価 — 視覚能力を備えた評価者が、このルーブリックとブリーフに照らして各評価軸を採点します。根拠を表示領域と結び付け、確信度も示します。「AIっぽい」ことだけで品質が低いとは限りません。
5. ペア比較 — 候補と前のバージョン、候補とこのルーブリックを適用しないコントロールビルド、候補と別のアートディレクション案、または候補と関連するリファレンスを比較します。単独の「8/10」というスコアより、ペア比較による選好を優先します。
6. 人による承認 — これはこの製品のために作られたと感じられますか？ ありきたり、不誠実、または裏付けがないと感じられる点は何ですか？ 明日になっても覚えていそうなことは何ですか？ 有能なデザイナーなら、どの判断に異議を唱えるでしょうか？

7. 採点

2つの結果を別々に記録し、1つの数値にまとめてはなりません。

• 公開準備状況（合格／不合格）：ブロッキングの欠陥、機能的なタスク、アクセシビリティ目標、根拠。ビジュアル面で際立つページでも、公開準備状況は不合格となる場合があります。
• スロップリスク（加重スコア0～100）：製品への即した内容15、誠実さ15、情報アーキテクチャ10、構成／レイアウト10、システムの一貫性10、コピー／声調8、タイポグラフィ7、色／マテリアル7、画像5、モーション5、レスポンシブ4、独自性4。0～14はリスク低、15～29は軽微な懸念、30～49はありきたりさが目立つ、50～69はスロップの特徴が顕著、70～100はスロップが支配的です。

8. 修正プロトコル

スロップが検出された場合は、失敗した評価軸を明示し、表示内容またはソースレベルの根拠を挙げ、原因がコンテキストの不足、モデルのパターン、実装の未完了、レビューの弱さのどれに当たるかを特定します。見栄えを整える前に裏付けのないコンテンツを削除し、症状だけでなくシステムやルールを修正します。その後、決定論的チェック／ブラウザーチェック／スクリーンショットチェックを再実行し、前のバージョンとのペア比較を行い、何をなぜ変更したかを記録します。

9. 過剰な修正を避ける

「AI っぽさをなくす」ことを、別の見覚えのある定番スタイルに置き換えてはいけません。ダークネオンをクリーム色のエディトリアル調に、サンセリフを巨大なイタリック体のセリフに、カードを根拠のない非対称レイアウトに、グラデーションをフラットなベージュに、洗練されたコピーを無理に奇をてらった表現に、標準的なレイアウトをスクロール上の仕掛けに、自動的に置き換えてはいけません。目標は、ある AI のデフォルトに似ないよう、別のデフォルトを採用することではありません。プロジェクトに即した判断をすることです。

10. 安定した原則と一時的なトレンド

ルーブリックが過去の陳腐な表現にとらわれ、明日のトレンドを見落とすことがないよう、ルールを 2 つの層に分けます。

• 安定（有効期限なし）：互換性／代替可能性、プロダクトとの整合性、真実性、一貫性、アクセシビリティ、機能の完全性、根拠、ステレオタイプからの差別化。
• 一時的（状況依存、有効期限必須）：各ルールに導入日と見直し日を設定します。例：dark-purple-cyan-glass-default（現在の LLM テック系プロダクトのデフォルト。ブランド上の根拠なしに使われている場合は指摘する）、または overused-default-fonts: Inter, Roboto, Geist, Plus Jakarta Sans, Space Grotesk（例外：等幅フォントの Roboto Mono、ディスプレイ用の Roboto Condensed）。見直し日に一時的なルールを再評価し、トレンドが薄れていれば削除し、そうでなければ更新します。一時的なルールを新たな予測可能なデフォルトにしてはいけません。トレンドを禁止した後、エージェントが次に流行している代替案を採用していないか確認します。

11. 完了の定義

ブロッキングとなる問題が残っていないこと。ブラウザーで主要なタスクが機能すること。主張に根拠があるか、明示的にラベル付けされていること。アクセシビリティの目標を満たしていること。スクリーンショットがレスポンシブ対応のレビューに合格していること。デザインに内部的な一貫性があること。重要な判断に文書化された根拠があること。置き換えテストで広範な互換性が明らかにならないこと。ペアワイズレビューで最終成果物が比較対象／以前のバージョンより高く評価されること。残っている既知の制約が文書化されていること。

12. 簡潔な指示（コンテキストが限られている場合に使用）

AI っぽい粗製品とは、表面上は洗練されていても、意図、根拠、具体性、一貫性、真実性、またはプロダクトとの適合性が不十分な出力です。スタイルだけを切り離して評価してはいけません。デフォルトの反射的な選択、置き換え可能性、裏付けのないコンテンツ、システムの不整合、装飾の過剰、未完成のインタラクション、未レビューの欠陥を検出します。重要な判断はすべて PRODUCT.md／DESIGN.md に基づかせ、EVIDENCE.md を通じて主張を検証し、実際のブラウザー操作とレスポンシブ対応のスクリーンショットをテストして、自己採点ではなくペアワイズレビューを行います。一般的なビジュアル表現でも、意図的で、一貫性があり、アクセシブルで、プロジェクトに即した根拠があれば問題ありません。