coastdigitalgroup/coastai-skills

分割画面レイアウトシステム

目的

分割画面レイアウトシステムは、デュアルパネルのウェブページを標準化されたレスポンシブかつアクセシブルな設計フレームワークで構築します。分割画面デザインはビューポートを水平または垂直の2つのゾーンに分割し、通常はビジュアル/メディアパネル（ブランドイラスト、ビデオ、インタラクティブプロダクトキャンバス、証言スポットライト）とインタラクティブ/コンテンツパネル（認証フォーム、オンボーディングステップ、バリュープロポジションのナラティブ、機能設定画面）を組み合わせます。

効果的な分割画面インターフェースをデザインするには、空間比率のバランス、2つのパネル間の等しいまたは意図的な視覚的階層の確保、ダブルスクロールバーのバグがない独立したパネルスクロールの管理、非対称の背景色テーマ間のハイコントラストな遷移、およびWCAG 2.1 AAに準拠した論理的な読解順序とフォーカス管理を維持するレスポンシブなモバイルスタッキングの実装が必要です。

ユースケース

• 認証・ゲートウェイインターフェース（ログイン/サインアップ）: 一方のパネルにインタラクティブなサインインまたは登録フォームを配置し、隣接するパネルにインパクトのあるブランドアート、顧客の声、または製品の特徴を紹介します。
• プロダクトランディングページのヒーローセクション: 左のパネルに高いコンバージョン率を持つヘッドラインとプライマリCTAを配置し、右のパネルにインタラクティブな3Dモデル、アプリケーションUIプレビュー、またはビデオデモを表示します。
• オンボーディング・マルチステップウィザードフロー: 片側にステップガイド、進捗インジケーター、プレビュー表示を配置し、もう片側にアクティブなフォーム入力フィールドを組み合わせます。
• 比較・デュアル機能ショーケース: 2つの対照的な製品、プラン階層、または「Before vs. After」の変遷を、独立した視覚的階層で並べて表示します。
• イベント・ウェビナー登録ページ: スピーカーのプロフィールやスケジュールアジェンダを、固定された登録フォームとともに構造化します。

使用すべきでない場合

• マルチレコードアプリケーションダッシュボード: アクティブなレコードワークスペース横での継続的なリストナビゲーションが必要な生産性ソフトウェア（例：メール受信ボックス、CRMヘルプデスク）には、master-detail-layout-system を使用してください。
• 複雑なマルチカラムアプリレイアウト: 永続的な垂直サイドバーナビゲーション、トップコマンドバー、ウィジェットグリッドが必要なSaaSダッシュボードには、dashboard-layout-system または sidebar-navigation-system を使用してください。
• 高密度データグリッド: 複数の行と列にわたる構造化された表形式データには、data-table-ui-system または responsive-grid-system を使用してください。
• シングルカラムのエディトリアル記事: 妨げられることのない垂直方向の読書を目的とした長文テキストドキュメントやブログ投稿には、article-layout-system または section-composition-system を使用してください。

入力

1. 分割比率と空間意図: 優先される比率（50/50のバランス分割、60/40のヒーロー集中分割、または40/60のフォーム集中分割）。
2. パネルロールの割り当て: パネルA（ビジュアル/メディア/ブランドパネル）とパネルB（インタラクティブ/フォーム/コンテンツパネル）の目的を定義します。
3. サーフェスとテーマのペアリングトークン: accessible-color-system および dark-theme-design-system からのサーフェスカラーとテーマ（例：ダークブランドアートパネルとライトフォームパネルの組み合わせ、または両方のライトサーフェス）。
4. メディアとコンテンツ密度アセット: 埋め込むビジュアルアセット（画像、SVG、ビデオキャンバス、プロダクトモックアップ）とフォーム/コンテンツスキーマ。

出力

1. デュアルパネルキャンバス仕様: デスクトップ分割比率のCSSグリッドレイアウト定義、コンテナの高さ保持（100vh / 100%）、およびスムーズなパネル境界。
2. メディア格納と背景コントラストルール: 画像スケーリング（object-fit: cover）、背景グラデーション、視覚的重みの分散、可読性オーバーレイのCSSルール。
3. レスポンシブスタッキングとモバイルフローモデル: 水平のサイドバイサイドパネルを垂直の積み重ね行に変換し、DOMの読解順序と優先コンテンツの可視性を維持するレスポンシブブレークポイントルール。
4. アクセシブルなARIAとキーボードフォーカスの設計図: ARIAランドマーク領域の定義（role="region" またはセマンティックな <main> / <aside>）、見出し階層ルール、WCAG AAフォーカスインジケーターの管理。

---

ワークフロー

1. ビューポートコンテナとパネルジオメトリの確立

外側の分割画面ラッパーを構築し、不要なブラウザスクロールバーを防ぐためにレイアウト境界を設定します。

• ビューポートの高さ保持: 全画面体験（認証ページやランディングヒーローなど）では、メインコンテナを display: grid; min-height: 100vh; width: 100%; overflow: hidden; に設定します。
• デスクトップのカラム比率:
  • 50/50 バランス分割: grid-template-columns: 1fr 1fr; (同等の価値提案や認証ページに最適)。
  • 60/40 フィーチャー分割: grid-template-columns: 3fr 2fr; (インタラクティブな製品プレビューに広いスペースを与えます)。
  • 40/60 フォーム集中分割: grid-template-columns: 2fr 3fr; (ブランドコンテキストを維持しながら、マルチフィールドフォームの入力を優先します)。
• 独立したパネル格納: 各パネルがオーバーフローを適切に処理（overflow-y: auto; height: 100%;）し、1つの長いパネルがビューポート全体を引き伸ばしたり、ダブルスクロールバーを引き起こしたりしないようにします。

2. ビジュアル＆メディアパネル（パネルA）の策定

ビジュアルパネルは、即座のブランドエンゲージメントと感情的な共鳴を生み出します。

• 背景のレイヤリングとコントラスト: パネルAがダークブランドカラーや写真を使用する場合、内部のタイポグラフィがWCAG AAコントラスト（≥4.5:1）を満たしていることを確認します。
• メディアのスケーリングとフレーミング: アートワークや製品モックアップを、厳格なサイズ制御（width: 100%; height: 100%; object-fit: cover; または object-fit: contain;）を持つコンテナ要素でラップします。
• 装飾的 vs 情報的ビジュアル:
  • 画像が純粋に装飾的な場合は、alt="" と aria-hidden="true" を適用します。
  • 画像にテキストや製品スクリーンショットが含まれている場合は、説明的な alt テキストまたはペアになったキャプションタイポグラフィを提供します。

3. インタラクティブ＆コンテンツパネル（パネルB）の策定

インタラクティブパネルは、ユーザーアクション（フォーム入力、コンバージョンクリック、読み取り）を促進します。

• コンテンツの配置とパディング: display: flex; flex-direction: column; justify-content: center; align-items: center; padding: clamp(2rem, 5vw, 4rem); を使用して、パネルB内でコンテンツを垂直方向に中央揃えにします。
• フォーム幅の固定: フォーム要素の最大幅を読みやすい測定値（max-width: 440px; width: 100%;）に制限し、超ワイドスクリーンで入力フィールドが不快なほど広くならないようにします。
• タッチターゲットと入力階層: プライマリボタン、フォーム入力、リンクを button-and-action-system および form-design-system を使用して標準化し、タッチビューポートで少なくとも 44x44px のタップターゲットを確保します。

4. レスポンシブモバイルスタッキングと優先順位フローの設定

モバイルビューポート（通常 < 768px または < 1024px）では、サイドバイサイドのパネルは窮屈で読みにくくなります。

• ブレークポイントでのスタッキング移行: grid-template-columns をシングルカラムレイアウト（grid-template-columns: 1fr; min-height: auto; overflow: visible;）に切り替えます。
• DOM順序 vs ビジュアルスタッキングの優先順位:
  • 認証・フォームページ: インタラクティブフォーム（パネルB）が主要なユーザー目標です。パネルBをDOMの先頭に配置することで、モバイルユーザーが長いマーケティングアートワークをスクロールすることなく、すぐに入力フィールドを表示できるようにします。CSSの order または自然なDOM配置を使用します。
  • ヒーロー＆ショーケースページ: ナラティブヘッドライン（パネルB）を最初に配置し、次にプロダクトビジュアル（パネルA）を配置します。
• メディア高さの削減: モバイルのスタックビューでは、ビジュアルパネルの高さを（max-height: 280px または aspect-ratio: 16/9）に減らし、モバイル画面全体を占領しないようにします。

5. キーボードフォーカスとARIAランドマークの実装

• セマンティック構造とランドマーク:
  • プライマリコンテンツ/フォームパネルを <main> または role="main" でラップします。
  • ビジュアル/ブランドプレゼンテーションパネルを <aside aria-label="Product Showcase"> または <section aria-label="Brand Highlights"> でラップします。
• 読み取りとフォーカスの順序: DOMのタブ順序が、視覚的なレイアウトに一致して左から右（モバイルでは上から下）に自然に流れ、混乱するtabindexジャンプ（tabindex="0" または自然なフォーカス）がないことを確認します。
• テーマ境界を越えたフォーカスリング: フォーカスリングが、ダークなビジュアルパネルとライトなフォームパネルの両方に対して3:1のコントラストを維持することを確認します（outline: 2px solid var(--focus-ring); outline-offset: 2px;）。

---

決定ルール

レイアウト分割比率とユースケースマッピング

ページタイプ	デスクトップ分割比率	モバイルスタック順序	推奨パネルロール
ログイン/サインアップ認証	50 / 50 分割	フォーム上部、メディア下部	パネルA: ブランドアート/お客様の声; パネルB: ログインフォーム (<main>)
プロダクトヒーローセクション	60 / 40 分割	コピー上部、メディア下部	パネルA: コピー＆CTA (<main>); パネルB: インタラクティブアプリキャンバス
オンボーディングウィザード	40 / 60 分割	ステップ上部、入力下部	パネルA: ステップチェックリスト/プレビュー; パネルB: アクティブフォームフィールド
デュアル比較	50 / 50 分割	オプションA上部、オプションB下部	パネルA: ティアA / Before; パネルB: ティアB / After

非対称背景コントラストガイドライン

• ダークビジュアルパネル + ライトフォームパネル: 各パネルに独立したCSSカスタムプロパティ（--pane-bg、--pane-text、--pane-border）を設定します。分割境界を越えてテキストの色を継承しないでください。
• 分割区切り線: 両方のライトまたは両方のダークの分割では、パネル間の視覚的な分離を確立するために、微妙な1pxの境界線（border-right: 1px solid var(--border-subtle)）を挿入します。

---

制約

• アクセシビリティ（WCAG 2.1 AA）:
  • SC 1.4.3 コントラスト（最小）: 両方のパネルのテキストは、それぞれの背景に対して少なくとも 4.5:1 のコントラスト比を満たす必要があります。
  • SC 1.3.2 意味のあるシーケンス: 視覚的なタブ順序とスクリーンリーダーの読み上げ順序は、ページの論理的な優先順位（認証ページではインタラクティブフォームが最初、ヒーローページではバリュープロポジションのヘッドラインが最初）と一致する必要があります。
  • SC 2.4.7 フォーカスの可視性: フォーカスされた入力フィールドとボタンには、パネルのサーフェスカラーに対して≥3:1のコントラストを持つ、クリップされていないフォーカスインジケーターが必要です。
  • SC 2.5.8 ターゲットサイズ: すべてのインタラクティブトリガーは、最小タップターゲット（最低24x24px、タッチ操作には44x44px推奨）を満たしている必要があります。
• レイアウトシフトとオーバーフローの防止: 全画面デスクトップ分割レイアウトでは、メインラッパーに overflow: hidden を、個々のスクロール可能なパネル内に overflow-y: auto を使用して、ウィンドウレベルのレイアウトスラッシングとダブルスクロールバーを排除する必要があります。
• タイポグラフィの行長: 両方のパネルのテキストの横幅は、快適な読みやすさを維持するために、1行あたり 45～75文字（ch 単位）の範囲内に収める必要があります。

---

一般的な失敗パターン

• ダブルスクロールバートラップ: 子要素に height: 100vh を設定したままコンテナのオーバーフローをロックしないと、ブラウザウィンドウと子パネルの両方に独立した垂直スクロールバーが表示されます。
• モバイルでのプライマリコンテンツの隠蔽: モバイルのDOM順序で巨大なビジュアルアートパネルをログインフォームの前に配置すると、モバイルユーザーはユーザー名フィールドに到達するために600pxのマーケティング画像をスクロールする必要があります。
• アート上の未チェックのテキストオーバーロード: 詳細な背景写真の上に、暗いグラデーションオーバーレイ（rgba(0,0,0,0.6)）なしでテキストを直接レンダリングすると、テキストが読めなくなり、WCAG AAコントラストに失敗します。
• 境界のないフォーム入力の伸張: 50/50分割デスクトップビューでフォームフィールドが800px幅にわたって伸張することを許容すると、扱いにくいタッチターゲットと視覚的な歪みが生じます。
• 不均等な視覚的重み: 一方のパネルが圧倒的に暗く彩度が高く、隣接するパネルが小さなテキストの無地の白である場合、視覚的な不均衡と高い目の疲れを引き起こします。

---

検証基準

• ビューポートの格納により、デスクトップ分割比率（50/50 または 60/40）がウィンドウのダブルスクロールバーなしでクリーンに管理される。
• レスポンシブモバイルブレークポイント（<768px）で、パネルがシングルカラムにスタックされ、メディア要素に適切な高さ制約が適用される。
• DOMの読み取り順序がプライマリタスク（モバイルログイン画面では認証フォームが最初など）を優先する。
• ダークとライトの両方の分割パネル上のテキストコントラストがWCAG AA（≥4.5:1比）を満たす。
• インタラクティブな入力とボタンが、制限された幅（max-width: 440px）と≥44x44pxのタッチターゲットを持つ。
• セマンティックなARIAランドマーク（<main>、<aside>、role="region"）が2つのパネルを適切に区別する。