スプリットビュー

Split view

別名: スプリットビュー、2ペイン、マスター・ディテール、Split view、Master-detail

生態(さわってみる)

一言定義

画面を左右2ペインに分割し、一覧(マスター)と選択項目の詳細(ディテール)を常時並べて表示するレイアウト。

分類

使う場面

  • メールクライアントのように、一覧と詳細を行き来する頻度が高い作業を効率化したいとき
  • PC幅など画面が広く、2ペインを同時に表示する余白があるとき

避ける場面

  • モバイル幅で2ペインを並べる余白が確保できないとき(一覧⇄詳細の画面遷移に切り替える)
  • 一覧の文脈を保ったまま一時的に詳細だけ覗きたいとき(→サイドピーク)

近縁種との比較

サイドバーとはどちらも常時表示される固定レイアウトという点で似ているが、サイドバーがナビゲーション専用の帯であるのに対し、スプリットビューは一覧(マスター)と詳細(ディテール)という2種類のデータペインを並べ、選択操作に応じて詳細側の内容が切り替わる点で役割が異なる。サイドピークとは一覧+詳細という構成そのものは共通するが、サイドピークが必要なときだけ右側にオーバーレイとしてせり出す一時的な表示であるのに対し、スプリットビューは2ペインを常時固定表示するレイアウトである、という表示形態の違いがある。画面幅が確保できないモバイル環境では、スプリットビューは一覧⇄詳細の画面遷移に置き換わることが多い。

実例リンク

アクセシビリティ

role
2ペインはnav/main等のランドマークで区切る。区切り線(ディバイダー)はrole="separator"にaria-orientation="vertical"とaria-valuenow(%)を付ける
キーボード操作
ディバイダーをTabでフォーカス可能にし、←→キーで幅を調整できるようにする
補足
一覧側で選択中の項目にaria-currentを付け、詳細ペインとの対応関係を明示する