視覚的な階層と優先度

1）視覚的階層とは

視覚的階層は、ユーザーの注意を分散し、ターゲットアクション（サインアップ、デポジット、ゲーム検索、フィルター、出力）へのパスを高速かつ紛争のないようにするインターフェースに重点を置いたシステムです。階層は、コントラスト、スケール、位置、色、情報密度、動き、およびホワイトスペースによって構築されます。

目標：「認知コスト」を削減し、必要な要素によって最初の意味のあるクリックのシェアを増やす。

2）事業への影響とKPI

• ターゲットCTA変換（登録、入金、お気に入りに追加）
• 価値への時間
• 混乱率
• バウンス、スクロールの深さとホールド

• FMC （First Meaningful Click）：ロード後にキーCTA ≤ N秒をクリックしたユーザーの％。
• TTV （Time to Value）：ログインからキー値までの時間（例：スロットを見つけて実行します）。
• 画面上のキーCTAのCTR：ホーム、カタログ、ゲームページ、ボックスオフィス。
• 一次/二次クリックの比率（注意の規律）。
• オファー/トーナメントでブロックするには、深さをスクロールします。

3）視覚階層の原則（コア）

1.コントラストとスケール：より重要-より大きく、より対照的。
2.位置と読み込み順序：top/leftと「first screen」が優先されます。
3.ホワイトスペース：空気=重要性。あまりにもタイト-優先順位が失われます。
4.色と彩度：カラーアクセント-「注意通貨」；彼女を救ってくれ。
5.フォームと図像：ボタンの形状、マーカー、ステータスアイコンは識別性を高めます。
6.動きおよびmicroanimation：まれな、短い、全体のアクセント；「フェア」は避けてください。
7.グループ化（gestalt）：近接性、類似性、閉鎖、アライメント、共通領域。
8.情報密度：クリティカルパスで-正しいものだけ、残りは「弱い」レイヤーにあります。

4）優先順位のマトリックス（P1-P4）

P1 （Critical-Primary）： 1画面あたり1-2 CTA/アイテム。大きいサイズ、明るい対照、固定位置。
P2（重要なサポート）：フィルタ、クイックタグ、セカンダリCTA。中程度のコントラスト、P1の隣。
P3（ヘルプ/コンテキスト）：ヒント、評価、ミニカード。落ち着いたスタイル、コンパクト。
P4（背景/参照）：ヘルプ、フッター、法的リンク。小さい対照およびサイズ。

ルール：1つの画面に1つ以上のP1。P1sが競争すると、彼らはもはやP1sではありません。

5）階層の層

グローバル：トップレベルのナビゲーション、グローバル検索、通知。
ページ：ヒーローブロック、H1/H2、キーバナー/オファー。
コンポーネント：ゲームカード、ボックスオフィスフォーム、トーナメントテーブル。
イントラコンポーネント：フィールド順序、署名、ステータス、マイクロヒント。

6）典型的なシナリオ（iGaming-fitting）

• P1：「アカウントを作成「/」ログイン「（大きなボタン、固定位置）。
• P2：ソーシャルログイン、「パスワードを表示」、パスワードポリシー。
• P3：リンク「パスワードをお忘れですか？「、セキュリティのヒント。

• P1： Top Up/Display+selectedメソッド。
• P2：量、速いプリセット、近くの料金/限度。
• P3：隠された詳しい方法記述、タイミング。

• P1：検索+キーフィルタ（プロバイダ、ボラティリティ、RTP、新規/ヒット）。
• P2：セグメント/タグ（Megaways、 Jackpot、 Buy Feature）。
• P3：二次ソート、カードバッジ（新規、ヒット、トーナメント）。

• P1：参加/賞品詳細。
• P2：リーダーボード（最初の5）、カウントダウンタイマー。
• P3：クリック/ターンルールを完了します。

7）タイポグラフィとグリッド

モジュラースケール：12-14（テキスト）、16（茎）、20-24（小見出し）、28-40 （H1/ヒーロー）。
基礎ライン：4/8pxステップ；縦のリズム=可読性。
線の長さ：テキストのための45-75文字；カードの説明のための20-40。
ライン・ツー・ライン：テキストで120-150％、タイトルで110-120％。

8）色および対照

テキストコントラスト：キーパス上のテキストのAAレベルのランドマークより低くはありません。
カラーロール：プライマリ（CTA）、アクセント（注意）、情報/成功/警告/危険（ステータス）。
暗いテーマ：境界やテキストのコントラストを強化し、広範な色面の飽和を減らすために。「ネオンの痛み」は避けてください。
要素の状態：default/hover/focus/active/disabled-は区別できます。

9）アクセントおよびボタン

主要なCTA：スクリーンごとの1つ、顕著な色/スケール、十分な分野（分タップ44 × 44px）。
二次/三次：滑らかなトーン、輪郭スタイル。
Spinner ≠ hierarchy： progressはフィードバックを与えますが、P1を中断するべきではありません。

10）注意力学および速度

F-/Z-パターン：視線が通過すると予想されるP1を配置します。
Hick's Law： Less is Equal Faster-最初のステップオプションを短縮する。
Fittsの法則：大きくて近くにクリックするのが簡単です。重要な打撃区域を高めて下さい。
シリアルプロンプト：「テキストの壁」ではなく、手順で教えます。

11）ホーム画面/ランディングページ

ヒーローブロック：ショートオファー+シングルP 1。
ビジュアル「レイキ」：最初のスクロール（カテゴリ、新しいアイテム、トーナメント）に最大3-4セクション。
社会的証拠：プロバイダバッジ、「今週のヒット」-P2は、P1を中断しません。

12）ダッシュボードとテーブル

最初の画面：1-2キーのKPIが大きく、スパークライン+トレンドバッジ。
表：重要度による列の整列、キー列の「凍結」、密度スイッチ（コンパクト/標準）を使用します。
空の状態：次のステップ（P1ボタン+プロンプト）を説明します。

13）モバイルvsデスクトップ

モバイル：1つのP1は、スクロールラインの上に厳密にあります、タブバー≤ 5ポイント、フローティングCTAは、チェックアウト/プレイのために許容されます。
デスクトップ：容器の幅1200-1440px；行の長さを制限する「ストレッチ」P1を避けます。

14）ローカライズ、数字、RTL

ラインの長さ（ドイツ語/トルコ語）、異なる通貨とグレードを考慮してください。
RTL：グリッドとアクセントの順序をミラーしますが、P1の優位性を保持します。

15） A/Bおよび階層メトリクス

• P1サイズ/コントラストの12-16％増加→FMCおよびCTRの増加。
• フィルタ（P2）を検索に近づける→ゲーム検索TTVを減らす。
• キャッシュレジスタの最初のステップでのオプションの削減→上記の完了。

トラック：FMC （N秒）、CTR P1、ターゲットブロックへのスクロール深度、TTV、混乱率（エラー/リターン）、レイジークリック。

16）監査手順（チェックリスト）

1.各キー画面の名前P1-正確に1つありますか？
2.P2要素はP1をサポートしていますが、色/コントラストでは議論しませんか？
3.Path of Sight： P1は最初の3つの焦点を当てますか？
4.テキスト/ACTAのコントラストは明暗のテーマで十分ですか？
5.最低の打撃区域が会ったか？
6.ノイズ：変換を失うことなく20％の要素を削除できますか？
7.空の状態は行動につながる？
8.状態（ホバー/フォーカス/アクティブ）は区別可能でアクセス可能ですか？
9.P1はモバイルでスクロールせずに表示されますか？
10.メトリクスは接続されており、ファネルで読み取り可能ですか？

17）アンチパターン

1つの画面で2つ以上のプライマリ。
P1を重ねた「派手な」バナー。
灰色で灰色（コントラストが不十分）。
クリティカルパス上のテキストのないアイコン。
オーバーロードカード：6+バッジ、4行の説明。
ターゲットのないアニメーション（点滅/無限）。

18）設計システム： 優先順位の指定

トークン： '色。primary'、'color。アクセント'、'elevation。p1'、'半径。lg'、'space。8/12/16`.

寸法ロール：'btn。p1。lg'、'btn。p2。md'、'text。h1/h2/body'、'バッジ。ステータス'。
レイヤー/Zインデックス：コンテンツモジュールのP1ですが、システムモデルの下にあります。
States： Stateテーブルとexamples （screen-guide）。

19）優先順位付けアルゴリズム（擬似）

1.画面の目的（1文）を定義します。
2.P1 （1つの要素）、最も顕著として設計を割り当てて下さい。
3.P1の横/後にP2 （2-5要素）を形成します。
4.P3-P4を非表示/折りたたみます。
5.手頃な価格とモビリティチェックリストを完了します。
6.パスとtime-to-P1を確認します（≤ 3秒をクリックしてください）。
7.A/Bを起動し、FMC/TTV/CTRを観察します。

20）マイクロコピーとテキスト

H1見出し-短い、動詞/値： 「10秒で再生を開始します。」

CTA-アクションと結果：「分で補充」、「今すぐプレイ」。
ヒント-ケースでは、最大1行、専門用語なし。

21）階層タスクの受け入れ基準

単一のP1はスクリーンで定義されます；スクロールせずに見る（モバイル/デスクトップ）。
P1コントラストはガイドラインに対応します。寸法ヒットエリア≥ 44 × 44px。
P2はP1より視覚的に弱い（1-2コントラスト/スケールステップ）。
要素の状態は区別可能です。キーボードフォーカスのスタイルがあります。
FMC/TTV/CTR/Scroll Depthの接続された分析イベント。

22）短い要約（TL；DR）

階層は注意の規律です。1画面につき1つの明示的なP1、 P2によるサポート、少ないノイズ、十分なコントラストと読みやすいタイポグラフィ。チェックリストで自分自身をテストし、FMC/TTV/CTRを測定し、A/Bテストで仮説を確認します。