§10-01
Dashboard widget grid (drag-resize)
ウィジェットをドラッグで並べ替え、大きさを変える。
利用者が自分の関心に合わせて画面を組み替えられる。見たい指標が人や役割で異なるダッシュボードや管理画面に向く。
実装のポイント配置はウィジェット ID と x・y・幅・高さの配列でデータ化して保存し、ドラッグ中はプレースホルダを出して衝突を解決する。キーボードでの移動手段も用意する。
- 状態管理
§10
レイアウト・配置
Layout
- Patterns
- 13
- Demos
- 13
§10-02
Kanban board
列ごとにカードを並べ、ドラッグで状態を動かす。
作業の進み具合を列の位置で見せる。タスクが決まった段階を経て進む案件や採用、開発の管理に向く。
実装のポイントカードの移動は列 ID と並び順を持つデータ更新として扱い、サーバー反映は楽観更新にする。HTML5 DnD はタッチで動かないため、ポインターイベントかキーボード代替が必要。
- ジェスチャー
- 状態管理
§10-03
カレンダー (week/month/day)
予定を週・月・日の切替で表示する。
予定の密度や空き時間を日付の並びで把握できる。月で全体を見渡し、週や日で詳細を確認するなど粒度を変えられる。
実装のポイント月表示は 1 日の曜日から前月分の空きを埋め、複数日の予定は週の行ごとに分割して描く。日付計算はタイムゾーンを固定して行う。
- 状態管理
§10-04
Timeline / gantt view
タスクの期間を横棒で並べて日程を示す。
タスクの開始と終了を横棒で並べ、重なりや前後関係を見渡せる。期間が複数週にまたがる計画で、遅れがどこに波及するか確認したいときに使う。
実装のポイントタスクは開始日と期間で持ち、grid-template-columns の列位置に変換して配置する。依存関係の線と今日の位置を重ね、列幅が狭いときは横スクロールにする。
- CSS のみ
- チャート
§10-05
テーブル (sortable/filter/group)
並び替えや絞り込み、グループ化ができる表を示す。
多数の行から目的の項目を見つけ、比較できる。管理画面の一覧や売上明細など、列が多く件数も多いデータを扱うときに使う。
実装のポイントソート・フィルタは元データを変えず派生値として計算し、状態は URL に持つと共有できる。並び替え中の列見出しには aria-sort を付ける。
- 状態管理
§10-08
Split view (resizable)
左右のペインの境界をドラッグして幅を変える。
2 つの内容を並べて見比べ、必要に応じて片方を広げられる。エディタとプレビューや一覧と詳細のように、同時に見たい組み合わせに向く。
実装のポイントドラッグは Pointer Events と setPointerCapture で境界外でも追従させる。分割バーは role=separator と aria-valuenow を付け、矢印キーでも動かす。
- ジェスチャー
- 状態管理
§10-09
Focus mode / zen mode
本文以外の UI を隠して作業に集中できる画面にする。
書く・読むといった一つの作業に没頭できる。エディタや読書画面で、メニューや通知が気を散らすと感じる利用者向けに用意する。
実装のポイント隠す UI は DOM から消さず状態クラスで切り替えると、戻したときにスクロール位置や入力が残る。解除のショートカット(Esc など)を必ず用意する。
- 状態管理
§10-10
サイドピーク (slide-over)
一覧を残したまま詳細を右から重ねて開く。
一覧を離れずに項目の詳細を確認する。多くの項目を順に見るときに、ページ遷移で位置を失う問題に効く。
実装のポイント一覧の文脈を保ったまま詳細を出すため、開いた項目を URL に反映して直接リンクできるようにする。閉じたら元の行にフォーカスを戻す。
- 状態管理
§10-12
ボトムシート (mobile)
画面下部からせり上がるパネルで操作を示す。
画面の下から操作や詳細を出し、元の画面を見失わずに済む。モバイルで選択肢の提示や補足入力など、短い操作を挟みたいときに使う。
実装のポイント下からのシートは safe-area-inset-bottom を考慮し、ドラッグで閉じる操作とボタンの両方を用意する。危険な操作は色だけでなく位置も離す。
- ジェスチャー
§10-13
ピーク preview (hover カード)
リンクに重ねると内容の要約カードを表示する。
ページを移動せずにリンク先やユーザーの概要を確かめられる。参照リンクが多いドキュメントや、プロフィールが頻出する SNS に向く。
実装のポイント表示と非表示に少し遅延を入れて誤発火を防ぎ、カード上へのポインター移動では閉じないようにする。hover できない端末向けにフォーカスや長押しでも出す。
- 状態管理