no-ai-design-slop

デザインの安易な選択をなくす

受動的なデザイン品質ゲートとして機能します。プロダクトの方向性、個性、有用な選択を維持しながら、ありきたりなデフォルト設定やデザイン上の問題が積み重なる前に見つけます。

基本的な判断基準

安易なデザインは、色、フォント、グラデーション、カード、アニメーションのことではありません。プロダクトのために選ぶのではなく、反射的に選んだ結果です。

次の項目のいくつかに当てはまる場合、その選択は疑ってかかりましょう。

• 無関係な別のプロダクトにそのまま貼り付けられる
• 生成デザインで見慣れたパターンを繰り返している
• その場のデザインシステムや周辺のセクションと矛盾している
• 有用な情報、状態、アクション、階層、ブランドの意味を何も伝えていない
• コンテンツと競合する、信頼を損なう、またはインターフェースを使いにくくしている

AI が成果物を作ったかどうかを推測せず、目に見える結果を評価してください。

受動的に適用する

該当するすべてのデザインタスクで、次の手順に従います。

1. 方向性を決める前に、ローカルの指示、トークン、DESIGN.md、スクリーンショット、参考資料、既存のコンポーネントを確認します。
2. プロダクト、対象ユーザー、主要なタスク、主要なアクション、コンテンツの階層、画面の視覚的な主題を特定します。
3. ユーザーから再設計を依頼されていない限り、確立された判断を維持します。
4. 実装中にセクション、コンポーネント、エフェクト、状態を追加するたびに、以下の簡易チェックを実施します。
5. 関連するビューポートで表示し、ソースだけでなく実際のインターフェースを確認します。
6. 作業によって生じた、または明らかになった最も重大な問題を取り除くか修正します。

範囲の狭い編集では、タスクをサイト全体の監査に広げないでください。依頼された画面を修正し、新たな安易なデザインを持ち込まないようにします。ページ全体、再設計、安易なデザインの見直し、詳細なレビューの場合は、ARTICLE.md を読み、該当するカタログのセクションを使用します。

ユーザーが正式なレビューだけを依頼した場合は、別の audit-ai-design-slop ワークフローを使用し、成果物は編集しないでください。

デザインの原則

コンテキストから始める

• プロダクトのコンテンツ、実際の制約、参考資料、ローカルのシステムを根拠に、プロンプトとデザインを組み立てます。
• 参考資料から階層、テンポ、コントラスト、素材感、インタラクションの原則を抽出します。アイデンティティ、レイアウト、アセット、コピーを模倣しないでください。
• システムがない場合は、仕上げに取りかかる前に簡潔なシステムを定義します。文字の役割、スペーシングのリズム、配色、角丸、境界線、影、画像、アイコン、動きを含めます。

一貫したアイデアを一つ選ぶ

• 各ビューポートには焦点を一つ、各フローには明確な主要アクションを一つ設けます。
• タイポグラフィ、メディア、色、素材感、動きを同じ視覚的な主題に沿わせます。
• 関連性のないエフェクトをいくつも使うより、意図して作り込んだ印象的な演出を一つ選びます。
• コントラストと非対称性を意図的に使います。すっきりさせるために個性を消さないでください。

関係性を見えるようにする

• コンテナよりも近接性を活用します。関連する項目は、関連しない項目より近くに配置します。
• ラベルよりも階層を活用します。ピル、見出し上の短いラベル、数字、キャプションに頼るより、サイズ、太さ、配置、コントラストで伝えます。
• インターフェースに実際のレイヤーモデルがある場合に限り、奥行きを使います。
• 繰り返し使うコンポーネントは、便利なテンプレートではなく、実際に繰り返し登場するコンテンツの種類を表現させます。

プロダクトらしさを反映する

• デフォルトのランディングページ構成ではなく、プロダクトのストーリー、購入までの流れ、利用フローに沿ってセクションを選びます。
• 実際のプロダクトの動作、有用なスクリーンショット、または誠実なプレースホルダーを表示します。証拠を捏造しないでください。
• 画像やアイコンは対象に合わせてアートディレクションを行います。ありきたりなストック素材、意味のない抽象的な SVG、デフォルトのアイコンタイルは、プロダクトらしさの代わりにはなりません。
• 外部から取り入れたパターンは、現在のタイポグラフィ、配色、形状の表現、情報密度に合わせて調整します。

動きに意味を持たせる

• 動きは、状態、因果関係、階層、連続性、空間的な変化の説明に使えます。
• ページがインタラクティブだと示すだけのためにアニメーションを使わないでください。
• 読みやすさと操作部品を安定させます。動きを抑える設定に対応し、動きのない状態でも完成された表示にします。

コンパクトな品質ゲート

選択を残す前に、次の点を確認してください。

• システム： 確立されたタイプ、色、間隔、角丸、アイコン、モーションの言語に沿っていますか？
• 階層： 装飾的なラベルがなくても、最も重要なコンテンツやアクションが明確ですか？
• 構成： 関連するすべてのビューポートで、整列、バランス、近接、重なり、ネガティブスペースが意図的に扱われていますか？
• タイポグラフィ： 役割が明確に分かれ、読みやすく、過度に広い字間や無理なディスプレイ表現を使わず、視覚的に整った字間になっていますか？
• 色と素材： それぞれのグラデーション、グロー、ガラスレイヤー、境界線、影、アクセントに明確な役割がありますか？
• プロダクトの真実性： 画像、コピー、指標、スクリーンショット、ロゴ、状態は具体的で誠実ですか？
• インタラクション： 必要に応じて、アクティブ、ホバー、フォーカス、読み込み、空、エラー、無効、選択済み、成功の各状態が用意されていますか？
• モーションとアクセシビリティ： モーションは役に立ち、パフォーマンスを保ち、入力を妨げず、視差効果の低減設定を尊重していますか？

削除テスト

疑わしい要素ごとに、次の手順を行ってください。

1. 選択状態、アイブロウ、放射状の光、入れ子のカード、アイコンタイル、マーキー、偽の実績、切り取られたポップオーバーなど、具体的なパターンとして正確に名前を付けます。
2. その要素が果たす役割を述べます。
3. 頭の中でその要素を削除します。意味、状態、アクション、階層、ブランドらしさが維持され、明瞭さが増すなら、削除してください。
4. 削除によって実質的な損失が生じる場合は、既存のシステムを使って必要最小限の修正を行います。
5. インターフェースに必要な場合に限り、代替要素を追加します。新たなエフェクトで埋め合わせないでください。

境界

• 手法を、それだけで粗雑なものと見なさないでください。
• 独特な選択を、流行の無難なテンプレートに置き換えないでください。
• タスクの作成者から許可されていない限り、新しいフォント、カラーパレット、レイアウト、コンポーネントライブラリ、アートディレクションを指定しないでください。
• すべてのコンテンツブロックをカードにしたり、すべての改善を装飾にしたりしないでください。
• 実証された損失を解消する場合を除き、整理の過程で新しいセクション、エフェクト、色、フォント、アセット、依存関係を追加しないでください。
• 珍しいという理由だけで、有用な情報密度、尖った表現、ユーモア、非対称性、表情豊かなモーションを削除しないでください。
• 顧客、指標、推薦文、受賞歴、評価、製品画面、アクティビティを捏造しないでください。

検証

完了する前に、次の点を確認してください。

• レンダリング結果を、ローカルのシステムおよび提供された参考資料と比較する
• 主要なフロー、関連する状態、レスポンシブのブレークポイントを確認する
• テキストが切れたり、重なったり、はみ出したり、コントラストが失われたりしていないことを確認する
• コントロールにラベルが付いており、アクセス可能で、安定して動作し、適切に応答することを確認する
• 残っている装飾レイヤーすべてに、正当な役割があることを確認する
• 結果が単に流行に寄せられただけでなく、このプロダクトにより即したものになっていることを確認する

デザインが改善された理由とともに、重要な削除や修正を報告してください。AI が作成したかどうかの推測や、一般的な数値による好みの評価は返さないでください。