サイドピーク

Side peek

別名: サイドピーク、Side peek、Side sheet、Detail panel、Preview pane

生態(さわってみる)

一言定義

一覧を表示したまま画面右側に詳細パネルをせり出させ、一覧の文脈を保ったまま個々の項目を確認できるUI。

分類

使う場面

  • 一覧の並び順や周辺項目を見失わずに、個々の項目の詳細を素早く確認・編集したいとき
  • URLにアイテムIDを載せて、詳細ページへの直接リンクを共有したいとき

避ける場面

  • 詳細を確認したら一覧に戻らず別作業に専念させたいとき(→ページ遷移やモーダル)
  • 一覧と詳細を対等な2ペインとして常時並べておきたいとき(→スプリットビュー)

近縁種との比較

「サイドピーク」はNotionが広めた呼称で、一覧を画面に残したまま右側に詳細パネルをせり出させる表示形式を指す。同じ役割を指す語としてMaterial Design 3のSide sheet、汎用的なDetail panelPreview paneなどが並立するが、本図鑑では急速に普及したNotion発の呼称「サイドピーク」を見出し名に採用する。ドロワーも画面端からスライドするオーバーレイ点は共通するが、ドロワーは主にナビゲーションや設定パネルに使われ、開くと一覧の文脈そのものを覆い隠すことが多いのに対し、サイドピークは一覧の並びを見せ続けたまま詳細だけを重ねて表示する点で異なる。スプリットビューとは一覧+詳細という構成が似ているが、スプリットビューが2ペインを常時固定表示するレイアウトであるのに対し、サイドピークは必要なときだけオーバーレイとしてせり出す一時的な表示という違いがある。なお本サイト自身の詳細表示(カードクリックで開くダイアログ)もモーダル+ページ併用型であり、一覧の上に重ねて詳細を見せるという点でサイドピークの近い親戚と言える。

実例リンク

アクセシビリティ

role
パネルはrole="region"にaria-labelledbyを付け、開いたらパネル見出しへフォーカスを移す。背面の一覧を完全に無効化しない点でモーダルのrole="dialog"とは異なる
キーボード操作
Escまたは×ボタンで閉じ、一覧の該当項目へフォーカスを戻す。一覧項目はTab/矢印キーで移動できる
補足
URLのハッシュ等で開いている項目を表せるようにすると、詳細への直接リンクを共有できる(本図鑑のデモも#item-3のようなハッシュ更新で再現している)