yonathan-boop/Claude: UIアンチスロップスキル

antislop-ui

アンチスロップ：AIコーディングエージェントのためのルール。UI & ビジュアルスキル

antislopシステムの一部。antislop.md（コア）と一緒に読んでください。このスキルはUI/ビジュアルの懸念事項（色、レイアウト、コンポーネント、装飾、構造フロー、動き）を深掘りします。コアルールを番号で参照し、重複や再ナンバリングは行いません。ウェブサイト、ウェブアプリ、または任意のインターフェースを構築・編集するタスクの際に読み込んでください。

このスキルの使い方

• UIまたはビジュアルワークのタスクの際は、必ずantislop.mdと一緒に読み込んでください。コアはメカニズム（目的テスト、3つのティア、デリバリーゲート）を保持し、このスキルはUI固有の深さを提供します。
• 各エントリは同じ構造を持ちます：Tell（兆候）（パターン）、Why（理由）（なぜスロップと読まれるか）、Fix（修正）（代わりに何をすべきか）、支配的なコアルール（R-XX）が引用されます。
• コアのデリバリーゲートはそのままゲートとして機能します。このファイル末尾の「UIスキルチェックリスト」は、それと併用するUI固有の補足です。

ビジュアルと色

一般的な青紫グラデーション

• Tell（兆候）： 青から紫、青からシアン、または紫からピンクへのグラデーションが主要な色使いとして使われる、または全ページに色のついたグローがある。
• Why（理由）： トレーニングデータで最も過剰に表現されている色使い。それは「ブランドアイデンティティがない」ことであり、「私たちのパレット」ではない。設計が一目でAI生成と分かる。
• Fix（修正）： DESIGN.mdまたは製品自身のアイデンティティからパレットを引き出す。グラデーションは、その理由を明記した上で（R-01）、階層機能としてのみ保持する。あるレベルと別のレベルを区別するグラデーションはクラフトだが、すべてのセクションに同じグラデーションを使うのはデフォルトだ。
• 同じデフォルトファミリー： 過激または虹色のグラデーション、紫と黒の配色、ネオンまたはパステルパレット、ヒーロー背後にぼかした放射状オーブ。これらはすべて、ブランド由来ではなくモデルのデフォルト由来の色使いという、同じ兆候が異なる服装をしているに過ぎない。目的なくデフォルトとして使用することはすべて禁止（R-01）。

過剰なグラスモーフィズム

• Tell（兆候）： ナビゲーションバー、カード、モーダル、サイドバーに同時にblur/backdrop-filterが適用されている。
• Why（理由）： ぼかしはテクスチャを取り除き、すべての面を同じ曇りガラスの層に置き、階層を平坦にする。すべての面がガラスの場合、前景は存在しない。
• Fix（修正）： グラスはアクセントとして扱い、特性としては扱わない。使用量の上限：最大1-2要素（R-10）。注意を必要とする面だけがグラスを得る; 他のすべてはソリッドのまま。

過剰なボーダー半径

• Tell（兆候）： すべての要素がピル型：ボタン、入力フィールド、カード、バッジ、モーダル。
• Why（理由）： 均一なピル形状は、「これは入力フィールド、これはカード」というビジュアル言語を消去する。半径は階層ツールではなく装飾になる。
• Fix（修正）： デザインシステムに小さな半径のセットを設定し、意図的に適用する（R-11）。主要なCTAに1つだけ大きな半径を使うのは意図的と読まれるが、すべての要素に同じ半径を使うのはデフォルトと読まれる。

過度にソフトなシャドウ

• Tell（兆候）： すべてのコンポーネントに大きなシャドウが付いており、ページ全体が浮いているように感じられる。
• Why（理由）： すべてが高い位置にある場合、高低は何も伝えない。ページは地面を失い、一般的な柔らかさになる。
• Fix（修正）： シャドウは高低マーカーとしてのみ使用し、その高低の理由を明記する（R-12）。ほとんどの要素は平らに配置し、1つか2つだけページから浮き上がる必要がある要素にシャドウを持たせる。

グロー氾濫

• Tell（兆候）： カード、ボタン、アイコン、バッジ、背景、ボーダーに同時にグローが適用されている。
• Why（理由）： グローは注意増幅器だ。あらゆる場所に適用されると何も増幅せず、「AI製」に見える最も速い方法の一つ。
• Fix（修正）： グローは、最大1-2つの重要な要素にフォーカスアクセントとして限定する（R-13）。他のすべてはマットのまま。

背景グリッド

• Tell（兆候）： コンテンツの背後にグリッド正方形、設計図線、方眼紙、ドットグリッド、または細かい繰り返し線がある。
• Why（理由）： 実際の作業なしにフラットなページを「テクニカル」に見せるデフォルトの方法だ。意図のないテクスチャとして読まれる。
• Fix（修正）： テクスチャやパターンは、製品のアイデンティティを真にサポートする場合にのみ、理由を明記して使用する（R-07）。実際のアイデンティティモチーフ（コアパート3）は、ストックグリッドに常に勝る。

理由のないダークモードデフォルト

• Tell（兆候）： 単に「テック」に見えるからという理由で、ブランド上の考慮なしにページ全体が暗い。
• Why（理由）： ダークは決定であり、デフォルトではない。強制することは、製品に奉仕するのではなくトレンドに従っていると読まれる。
• Fix（修正）： ブランドアイデンティティ、製品タイプ、オーディエンスからテーマを選ぶ（R-21）。デベロッパーツールやクリエイティブツールにはダークの正当な理由があるが、コンテンツファーストの製品には通常ない。固定テーマに強い理由がなければ、動作するライト/ダークトグルを構築する。

パレットの色が多すぎる

• Tell（兆候）： 明確なデザインシステムなしに、1ページに5～7の異なる色が使われている。
• Why（理由）： 散らばったパレットには階層がない。すべての要素が任意の色になり得る場合、区別がつかない。
• Fix（修正）： アクティブパレットを2-3のコアカラー + 1アクセントに制限し（R-29）、コアの1つをニュートラルベースにする。抑制こそがアクセントを際立たせる。

過剰なアクセントカラー

• Tell（兆候）： 1つのアクセントカラーがボタン、アイコン、バッジ、リンク、線、背景、グローに同時に使われている。
• Why（理由）： アクセントがどこにでもある瞬間、それはアクセントでなくなる。単なる別の色になり、デザインは焦点を失う。
• Fix（修正）： アクセントは重要な瞬間だけに属する（1つの意図的なアクセント、コアパート3）。アクセントゼロは無味乾燥; どこにでもアクセントはスロップ。それが重要となる1つか2つの場所を選ぶ。

無味乾燥なデフォルト

• Tell（兆候）： フラットな白またはほぼ白、細いグレーのボーダー、小さな半径、テクスチャなし、一般的なフォント、アイデンティティなし。
• Why（理由）： これは方向性なく過度にフィルタリングした結果の「安全な」結果だ。スロップではないが、デザインでもない: デザインがあるべき場所の空白だ。
• Fix（修正）： これはフィルター問題ではなく、方向性の問題だ。DESIGN.mdを追加するか、デザインレビュー（コアパート3）を解決し、活気のダイヤルを上げる。修正は決して禁止事項を増やすことではなく、目的を述べてエネルギーを加えることだ。

レイアウトとコンポーネント

単調なテンプレートレイアウト

• Tell（兆候）： ヒーロー、サブタイトル、2つのCTA、スクリーンショット、機能グリッド、お客様の声、FAQ、CTA、フッター、この順序で毎回。
• Why（理由）： この順序はトレーニングデータのデフォルトであり、製品のナラティブではない。セクションはコンテンツが必要だからではなく、テンプレートにあるから出現する。
• Fix（修正）： 実際のコンテンツニーズに基づいて構造を構築する（R-05、C-3）。製品にお客様の声がなければ、お客様の声セクションは存在しない。セクションの順序は製品のストーリーに従う。RHYTHMダイヤルに合わせる：3の場合、セクションは目に見えて変化する。

コピーペースト機能カード

• Tell（兆候）： すべての機能カードで同一のサイズ、高さ、アイコン、レイアウト、パディング。
• Why（理由）： 均一なカードはコンテンツを平坦にする。すべての機能がアイコン付きカードの場合、本当に重みのある機能とそうでない機能が同じに見える。
• Fix（修正）： コンテンツの階層を反映したバリエーションを作成し、その理由を明記する（R-14）。すべての機能がカードである必要はない。フラッグシップ機能は全幅処理に値し、補助的な機能はリストで十分かもしれない。

ベントウグリッド

• Tell（兆候）： 異なるサイズのカードのモザイクで構成されたセクション。一部は2列または2行にまたがり、タイル状のダッシュボードのようにスペースを埋める。
• Why（理由）： ここ数年でデフォルトの「アプリ風」ランディングレイアウトなので、製品について何も伝えない。すべてのセクションがベントウになり得る場合、レイアウトは決定ではなくテンプレートだ。
• Fix（修正）： ベントウグリッドは、コンテンツに異なるサイズの要素を表示する正当なニーズがある場合のみ使用する（R-05）。すべてのセルがほぼ同じなら、シンプルなグリッドまたはリストの方が正直だ。RHYTHMダイヤルがセクションを変化させるかどうかを決定する。

均一なスペーシング

• Tell（兆候）： パディング、マージン、ギャップがすべてのセクションで同一。
• Why（理由）： リズムはツールであり、単一のスペーシング値はそれを取り除く。セクションは互いに関連しなくなり、ページは1つの平らな帯として読まれる。
• Fix（修正）： 空白を構造として使い（コアパート3）、RHYTHMダイヤルで変化させる。スペーシングスケールを確立し、異なるレベルを使用して区別と接続を行う。均一なリズムは、ダイヤルがそう指示する場合のみ意図的な選択である（R-05）。

「使い方」は常に3ステップ

• Tell（兆候）： 丸いアイコン + 数字1、2、3 + 短いテキスト、常に3ステップ、常に同じ形状。
• Why（理由）： 製品の実際のプロセスがきちんとした3ステップのリストであることは稀だ。テンプレートはプロセスをその形状に強制し、逆ではない。
• Fix（修正）： プロセスを実際のまま提示する（R-05）。それが本当にプロセスなら3ステップで丸いアイコンは問題ないが、そうでなければ実際のワークフローに合った形状を使う。2ステップでも5ステップでもよい。

「信頼されています」ロゴバー

• Tell（兆候）： ヒーローの直下に一般的な企業ロゴの列。
• Why（理由）： 証拠のない信頼の主張だ：一般的なロゴ、実際の顧客名なし、使用の証明なし。
• Fix（修正）： 実際の、検証可能なロゴのみを表示する（R-18、R-36、C-5）。製品にまだそのような顧客がいない場合、ロゴバーを偽造してはいけない。実際のソーシャルプルーフは、一般的なものに常に勝る。

「最も人気」価格カード

• Tell（兆候）： 中央の価格帯が常にカプセルバッジで強調表示される。
• Why（理由）： これはデフォルトのパターンであり、決定ではない。すべての価格セクションがそうする場合、強調された帯は意味を失う。
• Fix（修正）： 実際に製品の目標に奉仕する帯を強調し、その理由を書く（R-31）。強調に値する帯がない場合は、何も強調しない。
• 3列も兆候の一部だ： 実際の構造に関わらず価格が3段で表示され、中央が強調される。その形状はデフォルトなので、決定ではない（R-05）。製品が実際に持つ段数を使用し、奉仕するものを強調する。

製品のないデモ

• Tell（兆候）： ページは製品を売るが、それが動作しているところは決して示されない：実際のデモなし、利用規約なし、プライバシーポリシーなし、単なる約束。
• Why（理由）： それは製品の服を着たデモだ。すべての主張は背後に何もない信頼であり、法的ページの欠如は実際には何も存在しないという静かな兆候だ。
• Fix（修正）： 実際の製品が動作しているところを示すか、まだリリースされていないと正直に言う（R-38、C-5）。ページがサインアップや支払いを求める場合、利用規約とプライバシーポリシーが存在しなければならない。正直な「近日公開」は、説得力のあるデモに勝る。

4カラムテンプレートフッター

• Tell（兆候）： 製品 / 会社 / リソース / 法律のカラムにバリエーションなし。
• Why（理由）： カラムはテンプレートにあるから存在し、サイトにそれだけのリンクグループがあるからではない。
• Fix（修正）： 製品が実際にリンクするものに基づいてフッターを構成する（R-05）。1カラムのリンクリストは、半分空の4カラムよりも有用になり得る。

均一なセクションリズム

• Tell（兆候）： すべてのセクションが中央揃えのタイトル + サブタイトル + 同一のカードグリッドで、バリエーションがない。
• Why（理由）： 同一の構成はセクションをぼやけさせ、ページは繰り返しで平坦に感じられる。
• Fix（修正）： RHYTHMダイヤルで構成を変化させる（R-05）。テキスト主体とビジュアル主体のセクション、非対称と対称のレイアウトを交互に配置する。すべてのセクションが同じテンプレートに従うページは、テンプレートによってデザインされたページだ。

装飾要素

一般的なAIアイコン

• Tell（兆候）： スパークル、スター、マジック、稲妻、ダイヤモンド、キューブ、ロボット、またはAIオーブが機能アイコンとして使われる。
• Why（理由）： これらのグリフは「AI製品」の一般的な語彙だ。特定の機能について何も伝えない。
• Fix（修正）： コンテンツに真に関連するアイコンを使用し、グリフが一般的な場合はその関連性を明記する（R-04）。適切なアイコンが存在しない場合は、使用しない。機能ラベルが役割を果たす。

Lucideアイコン

• Tell（兆候）： すべてのアイコンが同じ細いストローク、丸みのある角のライブラリ（Lucideまたはそのビジュアルクローン）から来ており、すべてのアイコンが認識可能な1つの外観を共有する。
• Why（理由）： 単一のデフォルトアイコンライブラリは、すべてのAIサイトのアイコンを同一にし、アイコンは製品について何も伝えなくなる。グリフ自体は関連性があっても、均一なライブラリの外観が兆候だ。
• Fix（修正）： アイコンセットはデフォルトではなくビジュアルな選択だ（R-04）。まず関連性でアイコンを選ぶ; 次にライブラリの太さとストロークが製品のキャラクターに合うかどうかを決定する。「似ている」2つのアイコンでも、セットがインポートではなく決定であれば、あなたのものとして読まれる可能性がある。

装飾としての絵文字

• Tell（兆候）： コピー、見出し、バッジ、ボタンに散りばめられた文字通りの絵文字：見出しの🚀、すべての機能箇条書きの横の✅、CTAの🔥、チャートタイトルの上の📈。
• Why（理由）： 絵文字は「これは生成されたものであり、書かれたものではない」という最も騒がしい略記法だ。UIではコンテンツと注意を競い、製品の声を他のすべてのAIサイトと同じ陽気なデフォルトに平坦化する。
• Fix（修正）： UIテキストから絵文字を削除する。概念にマークが必要な場合、理由を明記した実際の関連アイコン（R-04）を使用するか、マークをまったく使わない。コピーが意味を運ぶ; 絵文字は何も追加しない。

すべてのボタンに小さな矢印

• Tell（兆候）： → または ↗ が純粋な装飾としてほとんどすべてのボタンに配置されている。
• Why（理由）： 矢印はパターンになり、シグナルではなくなる。すべてのCTAに矢印がある場合、どれも特定の場所を指さない。
• Fix（修正）： 矢印はボタンのデフォルトのアイデンティティではない（R-08）。方向の手がかりから真に利益を得るアクションのためにのみ、比例したサイズで保持し、目的を明記する。

色付き左ストライプ

• Tell（兆候）： カード、リスト行、またはセクションヘッダーの左端に細い色付きの縦棒が装飾として使われる。
• Why（理由）： ストライプは意味を追加せずに色を追加する。カードを「デザインされたように見せる」最も安価な方法なので、どこにでも現れ、何も言わない。
• Fix（修正）： ストライプは装飾だ; 情報を運ぶか、消えるべきだ（R-01、R-31）。実際の状態（アクティブ、警告、新規）をマークする左端はシグナルだ。デザインされているように見せるために存在するストライプはデフォルトだ。

AIカプセルバッジ

• Tell（兆候）： ピル形状、細いボーダー、グロー、小さなドット、大文字、「AI Powered」「Beta」「New」を含む。
• Why（理由）： カプセル+グロー+ドットの組み合わせは、「AIによって作られ、AIによって作られることについて」という自己言及的なバッジだ。