antislop-ui

antislop-ui

Anti Slop：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 のみ大きく角丸にすれば意図的に見えますが、すべての要素を同じ角丸にするとデフォルトに見えます。

柔らかすぎるシャドウ

• Tell： すべてのコンポーネントに大きなシャドウを付け、ページ全体を浮いているように見せる。
• Why： すべてが浮き上がっていると、浮き上がりは何も伝えなくなります。ページは地面の感覚を失い、ありきたりな柔らかさになります。
• Fix： シャドウは高さを示すマーカーとしてのみ使い、その理由を記録します（R-12）。ほとんどの要素は平坦に配置し、ページから浮かせる必要がある 1～2 個の要素だけにシャドウを付けます。

あらゆる場所での光彩

• Tell： カード、ボタン、アイコン、バッジ、背景、境界線に同時に光彩を付ける。
• Why： 光彩は注意を増幅するものです。あらゆる場所に使えば何も増幅できず、「AI が作った」ように見える最速の方法の 1 つです。
• Fix： 光彩はフォーカスを示すアクセントとして、重要な要素の最大 1～2 個に限定します（R-13）。それ以外はすべてマットにします。

背景のグリッド

• 見分け方： コンテンツの背後に、格子、設計図の線、方眼紙、ドットグリッド、または細い反復線があります。
• 理由： 実質的な工夫をせずに、平坦なページを「技術的」に見せるための定番の手法です。意図のないテクスチャとして受け取られます。
• 改善策： テクスチャやパターンは、製品のアイデンティティを本当に支える場合にのみ使い、その理由を記録します（R-07）。既成のグリッドよりも、独自のアイデンティティモチーフ（コア Part 3）を優先してください。

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

• 見分け方： ブランドへの配慮もなく、「テック」らしく見えるというだけで、ページ全体が暗くなっています。
• 理由： ダークモードは選択するものであり、デフォルトではありません。強制すると、製品に役立てるのではなく、流行に追随している印象になります。
• 改善策： ブランドアイデンティティ、製品の種類、対象ユーザーに基づいてテーマを選びます（R-21）。開発者向けツールやクリエイティブツールにはダークモードを採用する正当な理由がありますが、コンテンツを重視する製品では通常そうではありません。テーマを固定する強い理由がなければ、機能するライト／ダーク切り替えを実装してください。

パレットの色が多すぎる

• 見分け方： 明確なデザインシステムがないまま、1ページに5～7色が使われています。
• 理由： 色がばらばらのパレットには階層がありません。どの要素にもどんな色でも使える状態では、何も際立ちません。
• 改善策： 使用するパレットを、基本色2～3色とアクセントカラー1色に制限し（R-29）、基本色のうち1色をニュートラルなベースカラーにします。抑制することで、アクセントが際立ちます。

アクセントカラーの多用

• 見分け方： ボタン、アイコン、バッジ、リンク、線、背景、グローに、一度に同じアクセントカラーを使っています。
• 理由： アクセントカラーは、あらゆる場所に使われた瞬間にアクセントではなくなります。ただの色のひとつになり、デザインの焦点が失われます。
• 改善策： アクセントカラーは重要な場面だけに使います（意図的に選んだアクセント1色、コア Part 3）。アクセントがないと無機質になり、あらゆる場所にあると雑然とします。重要な場所を1つか2つ選んでください。

無機質なデフォルト

• 見分け方： 単色の白またはほぼ白の背景、細いグレーの境界線、小さな角丸、テクスチャなし、汎用フォント、アイデンティティなしです。
• 理由： これは方向性を定めずに過剰にふるいにかけた結果の「無難な」仕上がりです。雑然とはしていませんが、デザインとも言えません。本来デザインがあるべき場所が空白になっています。
• 改善策： これはフィルターの問題ではなく、方向性の問題です。DESIGN.md を追加するか、デザインの読み取り（コア Part 3）を解決してから、活気のダイヤルを上げてください。禁止事項を増やしても解決しません。目的を明確にし、活気を加えてください。

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

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

• 見分け方： ヒーロー、サブタイトル、CTA 2つ、スクリーンショット、機能グリッド、お客様の声、FAQ、CTA、フッターが、毎回この順番で並んでいます。
• 理由： この順番はトレーニングデータでよく使われるデフォルトであり、製品のストーリーに沿ったものではありません。コンテンツが必要としているからではなく、テンプレートに含まれているからセクションが配置されています。
• 改善策： 実際のコンテンツのニーズに合わせて構成を作ります（R-05、C-3）。お客様の声がない製品なら、お客様の声のセクションは不要です。セクションの順序は製品のストーリーに沿って決めてください。RHYTHM ダイヤルに合わせます。値が3なら、セクションに目に見える変化をつけてください。

コピー＆ペーストされた機能カード

• 見分け方： すべての機能カードで、サイズ、高さ、アイコン、レイアウト、パディングが同じです。
• 理由： 均一なカードはコンテンツの差を平坦化します。どの機能もアイコン付きのカードにすると、重要な機能もそうでない機能も同じように見えてしまいます。
• 改善策： コンテンツの階層を反映した変化をつけ、その理由を記録します（R-14）。すべての機能をカードにする必要はありません。主力機能には全幅のレイアウトを使い、補助的な機能はリストにするとよいでしょう。

Bento Grid

• 見分け方： サイズの異なるカードをモザイク状に並べたセクションです。一部のカードは2列または2行にまたがり、タイル状のダッシュボードのように空間を埋めます。
• 理由： ここ数年の「アプリ風」ランディングページの定番レイアウトであり、製品について何も伝えません。どのセクションもBento Gridにできるなら、それは選択ではなくテンプレートです。
• 改善策： コンテンツに異なるサイズで見せる要素が実際にある場合に限り、Bento Gridを使います（R-05）。すべてのセルがほぼ同じ大きさなら、シンプルなグリッドやリストのほうが適切です。セクションの間に変化をつけるかどうかは、RHYTHMダイヤルで決めます。

均一な間隔

• 見分け方： すべてのセクションで、パディング、マージン、間隔が同じです。
• 理由： リズムはツールですが、間隔の値が一つだけでは、それが失われます。セクション同士の関係がなくなり、ページ全体が平坦な帯のように見えます。
• 改善策： 余白を構造として使い（コア Part 3）、RHYTHMダイヤルに合わせて変化をつけます。間隔のスケールを決めたら、異なるレベルを使って区切りやつながりを表現します。均一なリズムを使うのは、ダイヤルがそう示している場合に限ります（R-05）。

「仕組み」の説明は常に3ステップ

• 見分け方： 丸いアイコン＋番号の1、2、3＋短いテキストで、常に3ステップ、常に同じ形です。
• 理由： 製品の実際のプロセスが、きれいに3ステップのリストに収まることはほとんどありません。プロセスをテンプレートの形に押し込んでおり、その逆ではありません。
• 改善策： 実際のプロセスに即した形で示します（R-05）。丸いアイコン付きの3ステップが本当にプロセスに合っていれば問題ありません。そうでなければ、2ステップや5ステップを含め、実際のワークフローに合った形を使います。

「導入企業」ロゴバー

• 見分け方： ヒーローのすぐ下に、ありきたりな企業ロゴを並べています。
• 理由： これは裏付けのない信頼性の主張です。ありきたりなロゴを使い、実際の顧客名も利用実績の証拠もありません。
• 改善策： 実在し、確認可能なロゴだけを表示します（R-18、R-36、C-5）。まだそのような顧客がいないなら、ロゴバーを捏造してはいけません。ありきたりなソーシャルプルーフより、実際のソーシャルプルーフのほうが常に効果的です。

「一番人気」の料金カード

• 見分け方： 中央の料金プランが必ずカプセル型のバッジで強調されています。
• 理由： 定番のパターンであるため、選択とは言えません。どの料金セクションも同じことをしていれば、強調されたプランは何も意味しなくなります。
• 改善策： 製品の目標に実際に合ったプランを強調し、その理由を書きます（R-31）。強調する価値のあるプランがなければ、どれも強調しません。
• 3列も見分けるポイントです： 実際の構成にかかわらず、料金プランを3段階で表示し、中央を強調します。この形は定番であり、選択とは言えません（R-05）。製品の実際のプラン数に合わせ、製品に合ったものを強調します。

製品のないデモ

• 見分け方： ページで製品を売り込んでいるのに、実際に動作する様子を見せていません。実際のデモも、利用規約も、プライバシーポリシーもなく、約束ばかりです。
• 理由： 製品のふりをしたデモです。どの主張にも裏付けとなるものがなく、法的ページがないことから、実在するものがまだ何もないと静かに伝わってしまいます。
• 改善策： 実際に動作する製品を見せるか、まだリリースされていないことを正直に伝えます（R-38、C-5）。ページで登録や支払いを求めるなら、利用規約とプライバシーポリシーが必要です。説得力のあるデモより、正直な「近日公開」のほうがよいでしょう。

4列テンプレートのフッター

• 見分け方： 変化のない「製品／会社／リソース／法務」の列があります。
• 理由： サイトにそれだけのリンクグループがあるからではなく、テンプレートに列があるから存在しています。
• 改善策： 製品から実際にリンクする内容に合わせてフッターを構成します（R-05）。リンクを4列に分けて中身を半分しか埋めないより、1列にまとめたほうが便利な場合もあります。

セクションのリズムが均一

• 兆候： すべてのセクションが、中央揃えのタイトル＋サブタイトル＋同一のカードグリッドで構成され、変化がありません。
• 理由： 構成が同じだとセクションの違いがぼやけ、ページが単調で平坦に感じられます。
• 改善策： RHYTHM ダイヤル（R-05）で構成に変化をつけます。テキスト中心のセクションとビジュアル中心のセクション、非対称レイアウトと対称レイアウトを交互に配置します。すべてのセクションが同じテンプレートに従うページは、テンプレートで作られたページです。

装飾要素

汎用的なAIアイコン

• 兆候： 機能アイコンに、きらめき、星、魔法、稲妻、ダイヤモンド、立方体、ロボット、AIオーブを使っています。
• 理由： これらのグリフは「AI製品」の汎用的な語彙です。具体的な機能について何も伝えません。
• 改善策： コンテンツに本当に関連するアイコンを使い、グリフが汎用的な場合は、その関連性を明記します（R-04）。適切なアイコンがなければ、何も使いません。機能のラベルが役割を果たします。

Lucide アイコン

• 兆候： すべてのアイコンが同じ細い線と丸みのある角を持つライブラリ（Lucide または見た目を模倣したもの）から選ばれているため、すべてが見分けのつかない同じ印象です。
• 理由： 標準のアイコンライブラリをひとつ使うと、AIサイトのアイコンがどれも同じになり、製品について何も伝えなくなります。グリフ自体は関連性があるかもしれませんが、ライブラリ特有の均一な見た目が兆候です。
• 改善策： アイコンセットは見た目の選択であり、初期設定ではありません（R-04）。まず関連性を基準にアイコンを選び、次にライブラリの線の太さやスタイルが製品の個性に合うかを判断します。よく似たアイコンでも、セットを判断して選んだのであれば、自分たちらしさを表現できます。単にインポートしただけではいけません。

装飾としての絵文字

• 兆候： コピー、見出し、バッジ、ボタンに絵文字をそのまま散りばめています。見出しに🚀、各機能の箇条書きの横に✅、CTAに🔥、グラフのタイトルの上に📈といった使い方です。
• 理由： 絵文字は「これは書かれたのではなく、生成されたものだ」と示す、最も目立つ略記です。UIではコンテンツと注目を奪い合い、製品の語り口を、他のあらゆるAIサイトと同じ陽気な既定のトーンに平坦化します。
• 改善策： UIテキストから絵文字を取り除きます。概念を示す印が必要なら、実際に関連するアイコンを使って理由を明記するか（R-04）、印を何も使いません。意味はコピーで伝わります。絵文字は何も加えません。

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

• 兆候： ほぼすべてのボタンに、装飾だけを目的として → または ↗ を配置しています。
• 理由： 矢印がシグナルではなくパターンになります。すべてのCTAに矢印があると、どの矢印も具体的な行き先を示さなくなります。
• 改善策： 矢印はボタンの標準的な見せ方ではありません（R-08）。方向を示すことで本当に役立つアクションに限って使い、サイズのバランスを取り、目的を明記します。

色付きの左側ストライプ

• 兆候： カード、リストの行、セクション見出しの左端に、装飾として細い縦線を配置しています。
• 理由： ストライプは意味を加えずに色を加えます。カードを「デザインされた」見た目にする最も手軽な方法なので、あちこちに現れ、何も伝えません。
• 改善策： ストライプは装飾です。情報を伝える役割がなければ、取り除きます（R-01、R-31）。左端の線が実際の状態（アクティブ、警告、新着）を示すなら、それはシグナルです。デザインされたように見せるためだけにあるストライプは、単なる既定の装飾です。

AIのカプセル型バッジ

• 兆候： ピル型、細い枠線、光彩、小さな点、大文字表記で、「AI Powered」「ベータ版」「新着」などを表示しています。
• 理由： カプセル型＋光彩＋点の組み合わせは、「AIが作った、AIであることを示すもの」という自己言及的なバッジです。情報ではなくノイズを加えます。
• 改善策： バッジは機能上必要な場合に限り、必要な理由を明記して使います。また、組み合わせ全体をそのまま使ってはいけません（R-09）。実際のステータスラベルは問題ありませんが、装飾的な「AI Powered」のピルは不要です。

見出しの上にあるアイブロウバッジ

• 見分け方： H1のすぐ上にある、小さなピル型のラベルです。ドットや細い枠線が付いていることが多く、「Aplikasi Tagihan UKM」や「The platform for teams」といったカテゴリ名が入っていますが、その内容は下の見出しですでに伝えられています。
• 理由： バッジの内容が見出しと重複しているため、新しい情報を加えずに読む行数だけを増やしています。生成されたページでは毎回同じ場所に配置されるので、意図的な判断というよりテンプレートのように見えます。さらにドットが付いている場合、何の状態も示さないラベルにステータスインジケーターの表現を借用してしまいます。
• 改善策： バッジを削除し、見出しに伝えさせましょう。見出しにない情報がラベルに含まれているなら、装飾ではなくコンテンツとして読めるよう、見出しかサブ見出しに組み込みます。ファーストビューにバッジを置くなら、ほかのバッジと同様に文書化された理由が必要です（R-09）。バッジ内のドットには、示すべき実際の状態が必要です（R-31）。

装飾的なステータスドット

• 見分け方： 見出し、アイブロウ、ナビ項目、ラベルの横にある小さな色付きのドットです。通常は光ったり、ループ状に点滅したりしますが、何も示していません。何も稼働していないページで、ライブ配信中や録画中を示す視覚表現を借用しています。
• 理由： ドットは、その裏付けとなる情報がないまま注意を引きます。存在しない事実に対して、光彩と終わりのない点滅で二重に視線を引こうとしています。生成されたページではシステムの状態を示す表現が装飾として使われがちなため、AIらしく見えます。また、どのページでも同じ場所に同じドットが配置されます。
• 改善策： ドットは実際の状態（アクティブ、ライブ、録画中、警告）を示す必要があります。状態を示す場合はドットを1つだけ残し、光彩と終わりのない点滅は取り除きます（R-19）。何も示さないなら削除しましょう。見出しにインジケーターは必要ありません（R-31）。

ありきたりなAIタイポグラフィ

• 見分け方： 大きな等幅フォントの見出しや、文字間隔を極端に広げた大文字のラベルです（「HOW IT WORKS」、「FEATURES」など）。
• 理由： 美的な演出としての等幅フォントや、文字間隔を広げた大文字表記は、実際のタイポグラフィ上の工夫なしに「技術的でモダン」という印象を与えるための近道です。
• 改善策： モデルがデフォルトで選ぶ書体ではなく、ブランドの個性に合った書体を選び、その理由を記録しましょう（R-06）。タイポグラフィは読みやすさを高め、製品を反映する必要があります。トレンドよりも、選択理由のある書体を優先しましょう。
• デフォルト候補： サンセリフ体はInter、Geist、Space Grotesk、等幅フォントはGeist Mono、JetBrains Mono、Fira Codeです。いずれも禁止ではなく、ブランドに合う理由があれば適切な選択です。問題なのは、その書体が合っているからではなく、デフォルトだからという理由で使われていることです（R-06）。

偽のターミナルウィンドウ

• 見分け方： 信号機のようなドット、プロンプト行、入力中のコマンドを備えた、装飾されたターミナルウィンドウです。ヒーロー画像や機能紹介のビジュアルとして使われています。
• 理由： 「開発者向けツール」を表すありきたりな仮装です。ウィンドウは装飾であり、実際の製品はほとんどこのような見た目ではありません。本物のスクリーンショットの代わりに置かれた仮画像のように見えます。
• 改善策： 製品が本当にターミナルやCLIなら、実際に動作するスクリーンショットが証拠になります。それ以外の場合は、仮装ではなく製品の実際のUIを見せましょう（R-06、C-5）。美的な演出としての等幅フォントはすでにR-06で扱っています。偽のターミナルは、そのパターンをコンポーネントとして使ったものです。

製品と関係のないイラスト

• 見分け方： 製品との実際の関連性がないUndraw、Storyset、または汎用的な3Dの球体キャラクターです。
• 理由： 装飾的なイラストは、デザインされているのではなく、装飾されていると伝えてしまいます。コンテンツに役立つことなく、空間を埋めます。
• 改善策： イラストは製品と直接関連している必要があり、その関連性を記録しましょう（R-22）。関連性がない場合は、実際のスクリーンショットを使うか、イラストを使わないでください。

構造と流れ

リンク先のないナビゲーション

• 見分け方： 存在しないページやセクションへのリンクを含むナビゲーションバーです。
• 理由： リンク切れは約束を破ることになります。ユーザーがクリックした瞬間に信頼を損ないます。
• 改善策： ナビゲーション項目には、すべて実際の遷移先が必要です（R-24）。機能がまだ実装されていない場合は、項目を省くか、「近日公開」と明確に表示します。ナビゲーションバーには、実際に存在するコンテンツを反映させましょう。

非機能的なコントロール

• 見分け方： ボタンを押しても何も起きず、ドロップダウンが開かず、フォームを送信できません。
• 理由： ビジュアルは完成していますが、動作は未完成です。これがモックアップと製品の違いです。
• 修正方法： すべてのインタラクティブ要素に実際の動作を持たせるか、削除します（R-26）。要素に実際の遷移先を設定できない場合は、明確な // TODO と、ユーザーに見える「近日公開」ラベルを追加するか、リリースしないでください。

テンプレートを埋めるだけのセクション

• 見分け方： 「AI のランディングページにはどれもあるから」という理由でセクションがあり、コンテンツ上の必要性はありません。
• 理由： テンプレートのセクションは、目的のないコンテンツです。ページを長くし、焦点をぼかします。
• 修正方法： すべてのセクションに、製品のコンテンツに基づく存在意義を持たせてください（C-3）。テンプレートを埋めるだけのセクションは削除します。目的のあるセクションだけを少数配置したページのほうが、既定のセクションをすべて並べたページより優れています。

アプリとダッシュボード

上記のパターンはランディングページの形式です。ここではアプリ側に相当するもの、つまり画面がダッシュボード、管理パネル、またはログイン後のビューであるときにエージェントが選びがちな既定のパターンを紹介します。違反しているルールは同じで、新しいのは画面の形式だけです。

既定のダッシュボード構成

• 見分け方： 左側のサイドバー、上部バー、4つの統計カード、グラフ、テーブル。画面の目的を誰かが尋ねる前に選ばれ、請求書、患者、サーバーのどれを管理する画面でも同じ構成です。
• 理由： これはアプリにおけるランディングページのテンプレート問題です。画面が支援する作業からではなく、記憶から選ばれたレイアウトです。ラベルを入れ替えれば、どの製品にも当てはまります。
• 修正方法： 画面の役割と、その画面でユーザーが行う一つの判断を明確にしてから、それを中心に情報の階層を組み立ててください（C-3、R-20）。役割が「失敗したジョブを見つけて再試行する」なら、失敗したジョブこそがページの中心で、統計の行は補足情報です。ダッシュボードによくあるというだけで残っているセクションは削除します（C-3）。

作り物の数値を並べた統計カード

• 見分け方： 12,483／94.2%／$48.2K／1,204 と表示された4つのカードが並び、それぞれに「今週は +12%」という緑色の増減値が付いています。
• 理由： 数値は飾りであり、増減値はさらに問題です。裏付けとなる時系列データがないのに、傾向を主張しているからです。実際のダッシュボードでは重要な指標とそうでない指標があるため、4つのカードを同じように並べる時点で、情報の階層付けに失敗しています。
• 修正方法： 実際の数値を表示するか、何も表示しないでください（R-17、R-38）。カードを実データに接続するか、実在する一つの指標だけを表示します。比較期間が実在し、明示されている場合にのみ増減値を表示してください。画面がプロトタイプなら、ユーザーに見える場所で値がプレースホルダーであることを示します（R-38）。

内容のないアクティビティフィード

• 見分け方： 「Sarah Chen が2時間前にドキュメントを更新しました」という項目が、名前とアバターを入れ替えて繰り返し表示されています。
• 理由： 人もイベントも作り物です。別のレイアウトにしただけの推薦コメントセクションであり、中身のない製品を活気があるように見せています。
• 修正方法： フィードには実際のイベントを表示し、そうでなければリリースしないでください（R-18、R-38）。作り物のフィードより、正直な空の状態のほうがよく、ユーザーが最初に何をすればよいかも伝えられます（R-27）。

問いのないグラフ

• 見分け方： 空白が目立つという理由で配置された折れ線グラフやドーナツグラフ。タイトルは「概要」「パフォーマンス」のような一般的なもので、読み手が行動に移せる軸もありません。
• 理由： グラフは答えです。問いがなければ、単なる模様であり、文章よりも多くの注意を奪います。
• 修正方法： グラフを描く前に、グラフが答える問いを書き、その問いをタイトルにしてください（「過去24時間の時間帯別失敗ジョブ数」など）。文章のほうが適切に答えられるなら、文章を書いてください（C-3）。グラフの各セグメントは、隣接するセグメントに対しても3:1のコントラストが必要です（R-25）。

汎用的なテーブル列

• 見分け方： 実際の行の内容にかかわらず、「名前」「ステータス」「日付」「アクション」などが並び、すべての行に三点リーダーのメニューがあります。
• 理由： 列がデータではなく、テーブルコンポーネントを基準に決められています。ユーザーは次の行動を決める項目を探してスキャンしますが、その項目がありません。
• 修正方法： このテーブルでユーザーが行う判断を基準に列を選び、判断に必要な項目を前方に配置してください。行のメニューには実際に使えるアクションを入れ、何も起こさない項目は削除します（R-26）。

フィールドや列に入った埋め草データ

• 兆候： 空のフォームフィールドやテーブル列に、もっともらしく見える偽のデータが入っています。例：John Doe、[email protected]、"Let's build something"、誰にも属さない電話番号や日付。
• 理由： 作り物のコンテンツが実データのように見せかけられています。モックアップでは問題なく見えても、実際のユーザーが見ると破綻します。その名前は顧客ではなく、そのメールアドレスは見込み客ではなく、そのメッセージはキャッチフレーズです。画面が作られたのではなく、生成されたことを示す最も明らかな兆候です。
• 修正： 空のセルは空のままにするか、何を入力する欄なのかが明確にわかるプレースホルダーを使います。例：Your Name、[email protected]、Drop your message here...。値が必要な場合は [REAL DATA] を使います（R-23、R-38）。実データがあるときに入力します。「Let's build something」のような汎用的な埋め草の文言は、流行語を並べただけの中身のない文言であり、データ列には適しません（R-16）。

プレースホルダーの空状態と読み込み状態

• 兆候： イラスト付きの「データがありません」、単独のスピナー、または実データでは埋まらないレイアウトをまねた全ページのスケルトンが表示されています。
• 理由： R-27 では各状態が求められており、これらは形式上は状態を備えています。しかし、ユーザーには何も伝わりません。原因も、次の操作も、これが通常の状態なのかもわかりません。
• 修正： 空状態では、空である理由を伝え、データを表示するための操作をひとつ提示します（「まだジョブがありません。同期を実行すると、ここに結果が表示されます」）。読み込み状態では、何を読み込んでいるのかを伝えます。エラー状態では、何が失敗したのか、次に何をすればよいのかを伝えます（R-27）。初回実行時、フィルター適用後に結果がない場合、アクセス権が拒否された場合は、それぞれ異なる画面であり、表示も異なります。

モーション

終わりのないパルスやループ

• 兆候： ユーザーの操作がないのに、要素がいつまでもパルス、バウンド、または浮遊しています。
• 理由： 絶え間ない動きはノイズです。コンテンツと注意を奪い合い、ユーザーが休めるように止まることもありません。
• 修正： モーションには明確な UX 上の目的が必要であり、その目的を文書化します（R-19）。アニメーションは特定の瞬間に注意を導くものであり、ループ再生するものではありません。MOTION ダイヤルが 1（ホバー状態のみ）の場合、終わりのないループは、宣言したダイヤル設定に反する FAIL です。

テンプレートのアニメーションを重ねすぎる

• 兆候： すべての要素に、Fade Up + Fade In + Floating + Scale + Bounce が同時に使われています。
• 理由： すべてが動くページには、注目の中心がありません。モーションが壁紙のようになってしまいます。
• 修正： モーションは目的に沿って、MOTION ダイヤルに合わせて演出します（R-19）。すべてを動かす必要はありません。ヒーロー部分は印象を伝え、補助要素は落ち着かせます。「シネマティック」とうたうページは実際に動き、「静的」とうたうページは動いてはいけません。

UI スキルチェックリスト

UI の作業を行う場合は、コアのデリバリーゲートとあわせて以下を実施します。すべての回答がはいである必要があります。

• カラーパレットはデフォルトのグラデーションセットではなく、DESIGN.md または文書化されたブランドアイデンティティに基づいていますか？（R-01、R-29）
• アクセントは重要な場面だけで使われ、すべての要素に広がっていませんか？（コア パート3、意図的なアクセントを1つ）
• 見出し、箇条書き、ボタンに装飾目的の絵文字が散りばめられていませんか？（R-04）
• セクションの構成は、1つのテンプレートを繰り返すのではなく、宣言された RHYTHM ダイヤルに応じて変化していますか？（R-05）
• レイアウトに、デフォルトの AI 風の形状、つまり弁当箱グリッドのモザイク、偽のターミナルウィンドウ、3列の料金表、意味のない左端の色付きストライプがありませんか？（R-05、R-01）
• H1 の上に、見出しですでに伝えているラベルを入れたピル型バッジがありませんか？（R-09）
• すべてのナビゲーション項目とインタラクティブ要素に、実際の遷移先または動作があるか、目に見える「近日公開」のラベルがありますか？（R-24、R-26）
• モーションは宣言された MOTION ダイヤルに従い、文書化された目的に沿っていて、無限に繰り返すループがありませんか？（R-19）
• グラス、グロー、シャドウ、角丸は、ページ全体のデフォルトではなく、それぞれの上限に沿って使用されていますか？（R-10、R-11、R-12、R-13）
• 色付きのドットやステータスランプはすべて実際の状態を示し、装飾的なグローや無限に続くパルスがありませんか？（R-13、R-19、R-31）
• アプリ画面では、サイドバー＋統計行＋グラフ＋テーブルというデフォルトの構成ではなく、その画面でユーザーが行う判断を中心にレイアウトが組まれていますか？（C-3、R-20）
• 数値、差分、フィード項目、テーブル行はすべて実データまたは明記されたプレースホルダーであり、架空の指標がありませんか？（R-17、R-18、R-38）
• 空のフォームフィールドやテーブルセルは空のままにするか、偽のデータ（John Doe、[email protected]）ではなく、適切なプレースホルダー（Your Name、[email protected]）を表示していますか？（R-23、R-38）
• 空、読み込み中、エラーの各状態では「データがありません」と表示するのではなく、原因と次のアクションを示していますか？（R-27）
• すべてのブレークポイント、テーマ、状態でページが適切に表示され、キーボードのみで操作できますか？（R-03、R-34、C-4）