UIのコンテンツ階層

1）なぜ階層が必要なのか

• 3〜5秒で3つの質問に答えます：それは何ですか？→何が重要ですか？→何をすべきか？；
• インターフェイスを予測可能でスキャンしやすくする
• エラーを減らし、変換を増加させます。

原則：シグナル>ノイズ、シーケンス>多様性、コンテキスト>絶対ルール。

2）重要度レベルと構造

1.ナビゲーションコンテキスト（ブランド、セクション、パン粉/パン粉）。

2.H1-スクリーンターゲット（できるだけ短い、必要に応じて動詞）。

3.リード/字幕（1行の利益またはステータス）。

4.プライマリアクション（1-2キーのCTA）。

5.プライマリデータ（メインKPI、ファーストラインカード）。

6.セカンダリデータ（部品、フィルタ、補助テーブル）。

7.メタ/ヘルプ（ヒント、メモ、法的テキスト）。

ルール：1つの画面-1つのH1、 2つ以上のプライマリCTA。

3）タイポグラフィとリズム

フォントスケール：H1 28-32、 H2 22-24、 H3 18-20、本体14-16、マイクロ12（ウェブではpx/pt相当）。
線の間隔：1。3–1.体のための5、1。2–1.タイトルのための3。
インデントのリズム：ベースユニットの倍数（4/8 px）。Zagolovok↔blok： 16-24；段落：8-12。
コントラスト：WCAG AA最小；タイトルは常にcaptions/metaより対照的です。
色と重量：色-アクセント、代わりにサイズ/脂肪の「松葉杖」。

4）格子およびレイアウト

グリッド12列（デスクトップ）/4-6（モバイル）固定ガッター付き。
Visually first=first in DOM：スクリーンリーダーとSEOを支援します。
読み取り軸：左から右（LTR）または右から左（RTL）-信号の順序をミラーします。
「注意ゾーン」：左上/中央-タイトルとリード；「アクションバー」-それの近く/下。

5）視覚的優先順位信号

サイズと重量（タイポグラフィ）が主な信号です。
位置（上/左へ=LTRの方が重要）。
色（CTAのアクセント、ステータス-固定パレットに従って）。
図像（テキストサポートのみ）。
インデント/フレーム（「空気」が多いカードの方が重要です）。
ダイナミクス（刺激なしで注目を集めるために200ms ≤のアニメーション）。

6）進歩的な開示

• 折りたたみの上-コンテキスト、目的、プライマリアクションのみ。
• アコーディオン/タブセクションはセカンダリデータです。
• ドリルダウン：カード→パネル→モーダル。
• オーバーロードされた「ヘルプ」の代わりにインラインヒント。
• スケルトン/プレースホルダは、ロード中の構造を保持します。

7）典型的なスクリーンの階層

7.1ダッシュボード

上部のH1+タイムフィルタ。
KPIバー （3-5カード）-最初の行。
グラフ/テーブル-2行目、並べ替え/フィルタを並べます。
異常/アラート-カラム/テープを分離し、KPIと混合しないでください。

7.2カタログ/ロビー

H1+の速いフィルター/破片。
タイトルに近づくと、CTAはカードに「再生/購入」します。
タグ（new/top/jackpot）-名前に視覚的にセカンダリ。

7.3エンティティカード（ゲーム/アイテム）

ヒーローゾーン：名前（H1）、キー事実（RTP/ボラティリティ/レーティング）、 プライマリCTA。
詳細：説明/特性/フィードバックタブ。
メタデータ：ラベルと法的テキスト-下部にあります。

7.4つのフォーム/ウィザード

ステップヘッダー+短いリード（「2分、カードは廃止されません」）。
頻度/必須によるフィールドの順序。
CTAの右/下、サポートのアクション-リンクの下/左。
エラー-フィールドの横、簡単に、ケース上。

8）州の優先順位付け

• Norm→Load→Success/Empty→Error。
• 読み込み中-フレーム（スケルトン）を保持し、CTAはジャンプしません。
• エラー-H1が「何が起こったか」、CTA-「繰り返し/接触」に変更されました。

9）コンテンツトークンとデザインシステム

• 'フォント。見出しだよ。xl'、'フォント。ボディ。md'、'スペース。200'、'半径。MD'、'高度。SM'。
• テキストロール：'text。タイトル'、'text。リード'、'テキスト。セカンダリ'、'テキスト。meta'、'text。ヘルパーだよ'.
• カラーロール：'アクセント/ニュートラル/成功/警告/危険'+'レベル'（100-900）。
• コンポーネント：'KPI。カード/セクション。タイトル/インライン。ヘルプ/メタ。ライン'。

10）測定および質

• スキャンタイム（最初の意味のあるクリック/アクションの中央値）。
• Focus Order Errors（ユーザーが外観を「ミス」する回数）。
• CTA可視性％（クリックしたCTAと見たCTAの数）。
• INP/CLS（ロード時に階層は「ジャンプ」しないでください）。
• A/B：より大きいH1対より強い対照；上のチップフィルタとサイドパネルのチップフィルタ。

• 'first_focus_target'、 'primary_cta_exposed/clicked'、 'section_collapse_toggle'、 'help_showed'。

11） iGamingの実践（例）

カジノロビー：H1「ロビー」、「新しい/ライブ/ジャックポット/お気に入り」チップ、その後、タイル。各カードには名前、プロバイダアイコン、CTA 「Play」が含まれています。new/jackpotタグ-セカンダリ。
オペレータのダッシュボード：1行目-NGR/GGR/DAU/CR、 2行目-トレンドと異常、3行目-テーブル。
支払いステップ：H1「補充」、リード「手数料無し、即座に」、変換方法のリスト、上の最小メタテキスト。

12） Antipatterns

スクリーンの同じ強さの10のアクセント（「視覚的な叫び声」）。
テキストなしの画像/アイコンとしてタイトル（アクセシビリティと検索を破る）。
「小さな印刷での結果」、および巨大なバナーでの通知。
同じ視覚的な重量の主要なCTAの隣の補助リンク。
一貫性のない順序：今日「上からフィルター」、明日「左から」。

13）実装チェックリスト

1.スクリーンターゲット（H1+1-2プライマリアクション）を定義します。
2.レベルをマーク：プライマリ/セカンダリ/メタ；DSトークンへのピン。
3.タイポグラフィのスケールと基本的なインデントのリズムを収集します。
4.STA/ヘッダがジャンプしない状態（ブート/ブランク/エラー）をデバッグします。
5.3-5人で5分の「スキャンテスト」を実施します。あなたが気づいたもの、クリックした場所。
6.テレメトリー（露出CTA、スキャン時間、フォーカス順序）を接続します。
7.before/afterの例でガイドのパターンを修正しました。

14）ボトムライン

コンテンツ階層は「メインの大きなフォント」ではなく、タイポグラフィ、グリッド、色、インデントのリズム、DOMの順序、異なる状態の挙動などのソリューションのシステムです。各レベルに独自の役割と重量がある場合、インターフェイスは明確になり、迅速かつ予測可能になり、ユーザーは自分の行動に自信を持っています。