ショートカット一覧
「?」ボタン（または ? キー）でキーボードショートカット一覧のオーバーレイを表示。kbd 風のキー表示で見やすく整理する。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- ショートカットが多いエディタ・管理画面
- ? キーの慣習を採るツール
- 機能を覚えさせたいオンボーディング後の画面
- 避ける場面
- ショートカットが 3 つ以下のアプリ
- 入力欄が主体で ? が本文に頻出する画面
- 構成要素
- 開くボタン
- オーバーレイ
- パネル見出し
- 閉じるボタン
- セクション
- キー表示
- 持っている状態
- 通常
- ホバー
- キーボード
? キー（入力欄にフォーカス中は除く）またはボタンで開き、閉じるボタンへフォーカス。Tab は一覧内に留まり、Esc・閉じるで閉じて開くボタンへ戻る
- 支援技術
role=dialog＋aria-modal＋aria-label。開閉ボタンに aria-label。キーは kbd 要素で表示。開くと閉じるボタンへ、閉じると開くボタンへフォーカスを移す。本文は overflow で縦スクロール可
- 動き
ボタンの背景 150ms。パネルの出現はアニメ無し
デザインの要点
- キーは kbd 要素で 1 つずつ枠に入れ、+ で繋ぐ。「⌘S」と続けて書くと修飾キーの区別が読めない
- ? キーは入力欄にフォーカスがある間は奪わない。本文に「?」を打つたびに一覧が開く事故を防ぐ
- セクション見出し（編集／ナビゲーション／その他）で 9 件を 3 つに割る。並べるだけだと探せない
- 開いたら閉じるボタンへフォーカスし、閉じたら開くボタンへ戻す。Esc も効かせる
実装メモ
プレビューは枠内に収めるため、オーバーレイを position:absolute（ステージ基準）で実装しています。実際のページで画面全体に重ねるときは position:fixed に変え、body 直下など高い階層へ置いてください。
コード（コピーして使えます）
<div class="sh-stage" id="sh-stage">
<div class="sh-app">
<p class="sh-app-title">エディタ</p>
<p class="sh-app-hint">? キーまたはボタンでショートカット一覧を表示</p>
<button class="sh-open-btn" id="sh-open-btn" aria-label="ショートカット一覧を開く">? ショートカット</button>
</div>
<div class="sh-overlay hidden" id="sh-overlay" role="dialog" aria-modal="true" aria-label="キーボードショートカット">
<div class="sh-panel">
<div class="sh-panel-header">
<span class="sh-panel-title">キーボードショートカット</span>
<button class="sh-close-btn" id="sh-close-btn" aria-label="閉じる">✕</button>
</div>
<div class="sh-body" id="sh-body"></div>
</div>
</div>
</div>