ダッシュボードレイアウトシステム

ダッシュボードレイアウトシステム は何をしますか？

目的

ダッシュボードレイアウトシステムは、ビューポート固定・マルチペインのWebインターフェース（アプリケーションシェルまたはワークスペースと呼ばれることが多い）のための体系的な設計方法論を提供します。単一のスクロールコンテナ内を無限に流れる標準的なドキュメントベースのページとは異なり、ダッシュボードシェルはメインビューポートの高さを正確に 100vh（または 100dvh）に固定し、ワークスペースを明確な機能ゾーンに分割します。

体系的なアプローチにより、「スクロール内スクロール」のロックアップ、ビューポートのラバーバンディング、パネル折りたたみ時のレイアウトシフト、重なり合うダイアログのフォーカストラップなど、一般的な空間的な摩擦点を解決します。これにより、美的なビジュアルデザインと技術的なCSS封じ込めの間のギャップを埋め、まとまりのある、高機能で、アクセシブルなワークスペースを実現します。

ユースケース

• B2B SaaS コアワークスペース: サイドバー、フィルター、リストコントロール、コンテンツ詳細パネルの同時表示を必要とするWebプラットフォーム。
• データ分析ダッシュボード: ライブデータ、メトリクス、チャート、コントロールサイドバーを統一的に表示する、高密度なマルチパネルグリッド。
• 管理・運用パネル: 固定のアクションヘッダーとコンテキスト詳細ドロワーを広範なデータグリッドの隣に必要とする、大規模な運用ソフトウェア。
• リッチコンテンツ編集インターフェース: 中央のキャンバスまたはリッチテキストワークスペース（CMSエディター、メールビルダー、デザインキャンバスツールなど）の両側に、折りたたみ可能なフォーマット/プロパティサイドドロワーを配置するレイアウト。

使用すべきでない場面

• マーケティングおよびランディングページ: ストーリーテリングとCTA（コールトゥアクション）に最適化された線形の垂直スクロールジャーニーが必要な場合。代わりに hero-design-system と section-composition-system を使用してください。
• 編集記事およびブログ記事: 読者が単一の線形テキストフローによる標準的なネイティブブラウザスクロールを期待する場合。代わりに article-layout-system と table-of-contents-system を使用してください。
• Eコマース商品一覧ページ (PLP): 継続的な商品スキャンには、無限スクロールまたは標準的なページネーションレイアウトの方が適している場合。
• シンプルなユーティリティツール: マルチペインレイアウトシェルの恩恵を受けない単一入力ユーティリティ（例：シンプルなファイルコンバーターや画像リサイザー）。

入力

1. ワークスペースペインインベントリ: アプリケーションに必要な空間領域のリスト（例：サイドバーナビゲーション、トップバーワークスペースアクション、中央コンテンツワークスペース、右プロパティドロワー）。
2. インタラクティブコントロールレイアウト: 折りたたみ可能なパネル、リサイズ可能なペイン、トリガーエリアの仕様。
3. タイポグラフィ＆スペーシングトークン: クリーンな配置グリッドを確立するための、流動的なタイポグラフィと相対的なスペーシングシステム（fluid-spacing-system および fluid-typography-system）。
4. ターゲットブレークポイント: パネルの折りたたみ、レールの縮小、モバイルドロワーの遷移を決定するための、responsive-grid-system からのデバイスレイアウト定義。

出力

1. ビューポート封じ込め設計図: 親要素の寸法を 100dvh に固定し、スクロールを特定のサブコンテナに分離するHTMLおよびCSSグリッド/フレックスボックスの空間仕様。
2. ペイン構成仕様: ナビゲーション、ユーティリティヘッダー、ワークスペースを区切る、視覚的な定義、幅の制約、境界線。
3. 遷移とモーションモデル: スムーズでシフトのない折りたたみ可能なパネル遷移のための、ハードウェアアクセラレーションされたCSSアニメーションガイドライン（transform、opacity）。
4. レスポンシブ折りたたみルール: デスクトップ、タブレット、モバイルのビューポート範囲にわたるレイアウト適応を詳細に記述した仕様。
5. アクセシビリティランドマークマップ: 定義されたARIAロール領域とキーボードナビゲーションフローパラメータ。

ワークフロー

1. ビューポートロックとスクロール封じ込めの確立

メインブラウザのビューポートをロックして、ページ全体のスクロールとラバーバンディングを防ぎます。すべてのレイアウトコンポーネントはこの固定ビューポートコンテナ内に収まる必要があり、スクロールは厳密に分離されたコンテンツペインに委任する必要があります：

• 親コンテナ（例：.app-shell）に width: 100vw と height: 100dvh（動的ビューポート高さ）を設定し、overflow: hidden を適用します。
• 2層のレイアウトグリッドを使用して .app-shell を分割します：
  • 第1層（外側グリッド）: 左サイドバーと右のコンテンツワークスペースを分離します。
  • 第2層（内側グリッド）: ワークスペースのトップバー/ヘッダーとスクロール可能なコンテンツキャンバスを分離します。
• スクロール可能なペインには、overflow-y: auto と -webkit-overflow-scrolling: touch を適用して、モバイルSafariでのスムーズな慣性スクロールを確保します。

2. ペインの視覚的アンカーと境界線の定義

明確な視覚的境界線を使用して、視覚的なノイズを追加せずに高密度なダッシュボードを整理します：

• 境界線による分離: 永続的に隣接するパネル間で重いシャドウの浮き上がりを避けます。代わりに、クリーンで低コントラストの1px境界線（例：1px solid var(--border-neutral-muted)）を使用してセクションを分割します。
• 背景コントラスト: 微妙な背景の色合いの違いを使用して、ナビゲーションをアクティブコンテンツから区別します。ナビゲーションサイドバーをわずかに暗いまたは明るい色合い（例：ニュートラルティント）に設定し、メインコンテンツワークスペースはクリーンなキャンバス白または深いダークサーフェスを利用します。
• スクロールシャドウ: スクロールコンテンツエリアには、上部と下部のエッジ境界に微妙な線形グラデーションのフェードオーバーレイを実装して、ユーザーに折り畳みの向こう側にさらにコンテンツがあることを視覚的に知らせます。

3. 折りたたみ可能なパネルのメカニズムを設計する

折りたたみ可能なパネル（サイドバーや右側の詳細ドロワーなど）は、累積レイアウトシフト（CLS）や視覚的なギクシャク感を生じさせることなく、スムーズに状態を変更する必要があります：

• 幅のトランジションを避ける: CSS width をアニメーション化すると、ブラウザがすべての子要素のレイアウトを毎フレーム再計算する必要があり、低フレームレートにつながります。
• トランスフォームを優先する: サイドドロワーを絶対配置またはキャンバス範囲外に配置し、CSS transform: translateX() とハードウェアアクセラレーションされたトランジションを組み合わせて可視性をアニメーション化します。
• コンテンツマスキング: ラッパーブロックに overflow: hidden を使用して、スライディングパネルが隣接するビューの背後にきれいにクリップされるようにします。

4. アクセシビリティランドマークのコード化と引き渡し

ダッシュボードレイアウトテンプレートは、スクリーンリーダーとキーボードユーザーのために構造化されたセマンティックなランドマーク階層を提供する必要があります：

• ランドマークの割り当て: すべてのペインが適切なHTML5セマンティックタグにマッピングされることを確認します：
  • グローバルナビゲーションサイドバー: <nav aria-label="メインナビゲーション">
  • ワークスペーストップバー/ヘッダー: <header>
  • 中央ワークスペース: <main>
  • プロパティ/コンテキストドロワー: <aside aria-label="プロパティとメタデータ">
• フォーカス管理: 折りたたみ可能なパネルが閉じられたら、プログラムによってフォーカスをそのパネルを閉じたトリガーボタンに移動します。モバイルドロワーが開かれたら、そのパネル内にキーボードタブフォーカスをトラップします。
• Inert属性: モーダルパネルまたはモバイルサイドドロワーがアクティブなときに、中央のメインパネルに HTML inert 属性をトグルし、キーボードユーザーが誤って表示画面のオーバーレイからタブ移動してしまうのを防ぎます。

5. レスポンシブ適応の計画（折りたたみルール）

ダッシュボードワークスペースを多様なデバイスにわたって優雅にスケーリングします：

• デスクトップ範囲（>1200px）: マルチペインレイアウトが完全に展開されます。左ナビゲーションサイドバー固定、ワークスペースヘッダー固定、中央キャンバス自動スクロール、右プロパティドロワー展開。
• タブレット範囲（768px-1200px）: 左ナビゲーションサイドバーをコンパクトな「レール」（アイコンのみ表示）に折りたたみます。右プロパティドロワーを、永続的なグリッド列から、アクションボタンによってトリガーされるオーバーレイシートに変更します。
• モバイル範囲（<768px）: サイドバーとプロパティドロワーの両方を完全にオーバーレイドロワーの背後に隠します。プライマリレイアウトは、ハンバーガーメニュートリガー、アクションボタン、および分離されたスクロール可能なコンテンツワークスペースを含むモバイルトップバーヘッダーで構成されるシングルカラムビューに簡素化されます。

決定ルール

シェル構造のためのグリッド vs フレックスボックス

側面	CSSグリッドを使用する	CSSフレックスボックスを使用する
主軸	二次元（行と列の両方が動的/固定）。	一次元（線形の行スタックまたは列スタック）。
レイアウト目的	外枠構造（サイドバー列 + メインコンテンツ列）。	内部ヘッダーコンテンツの配置（ロゴ左 + アクション右）。
パネルの折りたたみ	サイドバー列が動的に正確に 0 幅に折りたたまれる場合。	子要素が自然に伸縮および折り返す必要がある場合。

スクロール管理: グローバルスクロール vs ペイン固有スクロール

• グローバルページスクロール（ダッシュボードでは使用しないでください）: ヘッダー、サイドバー、ダッシュボードフレーム全体が画面からスクロールアウトし、ユーザーはナビゲーションにアクセスするためにスクロールバックする必要があります。
• 分離されたペインスクロール（標準的なダッシュボードパターン）: 外側のフレームワーク（ヘッダー、レール、アクション）を画面の端に完全に固定したまま、データテーブル、チャートフィード、またはドキュメントエディターのみがビューポートセル内で独立してスクロールします。

制約

• 動的ビューポート高さ: 外側の親コンテナには、vh（100vh）ではなく、常に dvh 単位（100dvh）を使用します。モバイルブラウザでは、標準の vh 単位はブラウザのアドレスバーやナビゲーションコントロールの展開/収縮を考慮しないため、ダッシュボードの下部が画面外にクリップされる原因となります。
• フォーカスインジケーター: インタラクティブなパネルトリガーでは、フォーカスリングが非常に視認しやすいことを確認します。WCAG 2.2のコントラストルールを満たし、決して overflow: hidden コンテナの端によってクリップされてはなりません。
• ダブルスクロールバー禁止: コンテナのマージン、パディング、高さの境界が正確に計算されるように（CSS calc() またはFlex/Gridの自動制約を使用）、スクロールペインがネストされた二重スクロールバーを並べてトリガーしないようにします。
• タッチターゲット最小サイズ: リサイズ可能なパネル、サイドバー展開ボタン、タブトグルのハンドラーは、少なくとも 24x24px（WCAG 2.2 SC 2.5.8）のタッチターゲットを提供する必要があり、44x44px が推奨されます。

一般的な障害パターン

• アドレスバークリップ（モバイル）: モバイルで 100vh を使用すると、サイドバー下部のユーザープロファイルフッターやプライマリ送信ボタンがモバイルブラウザのアクションバーの後ろに隠れてしまいます。
• レイアウトのピクツキ: ナビゲーションメニューの width プロパティをアニメーション化すると、メインワークスペース内のカード、チャート、グリッドが折りたたみ遷移中に急速にジャンプして再レンダリングされます。
• スクロールトラップ / スクロールリーク: 開いているオーバーレイペイン内でスクロールイベントを分離できず、ユーザーがモバイルナビゲーションドロワーでスワイプしたときに、メインの背景コンテンツが下でスクロールしてしまいます。
• ラベル付けされていないスクロールコンテナ: 対応するロールやキーボードフォーカスパスなしでページコンテナに overflow: auto を追加すると、キーボードのみのユーザーがそのコンテナ内のデータをスクロールできなくなります。
• ダブルスクロールバーの混乱: 厳格な高さ制限なしにネストされたラッパーを作成すると、メインブラウザウィンドウと内部コンテナの両方に二重のスクロールバーが表示され、ナビゲーションが混乱します。

検証基準

• 外部レイアウトコンテナの高さが 100dvh（またはフォールバック 100vh）に固定され、メインドキュメントの overflow が hidden に設定されている。
• スクロール可能なデータリストやワークスペースと対話するときに、二重のスクロールバーが表示されない。
• デスクトップ、タブレット、モバイルの各範囲に対してレスポンシブ状態が定義されており、適切なドロワーとレールの変形が行われている。
• スライディングパネルとサイドバーは、ハードウェアアクセラレーションされたCSSプロパティ（transform: translateX()）を使用してアニメーション化されている。
• ワークスペースは適切なセマンティックHTML5ランドマーク（<nav>、<header>、<main>、<aside>）を利用している。
• モバイルでオーバーレイドロワーまたはパネルが開いているとき、背景要素が inert に設定されるか、キーボードフォーカスフローから非表示になる。
• パネルトリガー、トグル、ハンドラーのタッチターゲットが最小サイズ要件の24x24px（44px推奨）を満たしている。
• アクティブな最上層のオーバーレイシート内でスワイプ/スクロールしているときに、非アクティブな背景ペイン要素がスクロールしない（スクロールリーク防止）。