Design Pattern

ドロワー

ドロワーは、画面の端からスライドして現れる補助パネルです。ナビゲーションや設定パネルとして便利ですが、モーダルに近い振る舞いになるため、フォーカス管理や Escape キー対応まで含めて設計する必要があります。

難易度: 上級カテゴリ: ナビゲーション

いつ使う / 使わない

使うべきとき

モバイルのナビゲーションや補助メニューを省スペースで提供したい場合
設定パネルやフィルター条件をメイン画面と分離して見せたい場合
一時的な補助 UI を表示し、閉じると元の画面に戻したい場合

使わないべきとき

常時表示してもよい主要ナビゲーションの場合
確認や警告など、より強い注意喚起が必要な場合 → ダイアログを使う
情報量が多すぎて独立ページにした方が分かりやすい場合

構造（Anatomy）

1 トリガーボタン（ドロワーを開く操作）

2 オーバーレイ背景（backdrop）

3 ドロワーパネル（スライドするコンテナ）

4 ヘッダー（タイトル + 閉じるボタン）

5 コンテンツ領域（ナビ、フォーム、情報など）

トリガー — ドロワーを開くボタン。開閉後のフォーカス復帰先になる
オーバーレイ — 背面コンテンツとの分離を示し、クリックで閉じる操作にも使える
パネル — 左右または下からスライドする本体領域
ヘッダー — タイトルと閉じるボタンを持ち、用途を明確にする
コンテンツ領域 — ナビゲーション、設定、補助フォームなどを配置する

HTML 構造

重要なポイント

ドロワー本体には role="dialog" とラベル付けを行い、支援技術に用途を伝える
閉じるボタンを常に用意し、視覚的にも明示する
開いたときは最初の操作対象かヘッダーへフォーカスを移す
閉じたときはトリガーボタンへフォーカスを戻す

CSS 実装

スタイル設計のポイント

transform と transition でスライドアニメーションを実装する
オーバーレイで背面とのレイヤー差を明確にする
幅や高さはビューポート基準で制御し、モバイルでの占有率を調整する
開いている間は背景スクロールを抑止する

キーボード操作

Enter / Space でトリガーを押して開く
Escape で閉じる
Tab でドロワー内のフォーカス可能要素を巡回する
閉じたらトリガーにフォーカスが戻る

ライブデモ

左ドロワー

左からスライドインするナビゲーションドロワーです。

右ドロワー

設定パネル向けの右ドロワーバリエーションです。

下ドロワー

モバイルで使いやすいボトムシート型の例です。

よくある間違い

フォーカストラップを実装しない

開いている間に背面へフォーカスが抜けると、キーボード操作が破綻します。

Escape キーで閉じられない

オーバーレイ系 UI では、キーボードによる終了手段を必ず提供する必要があります。

背面コンテンツが操作可能なまま

クリックやスクロールが背面に通ると、状態管理と体験の両方が不安定になります。

状態変化が急すぎる

スライドアニメーションやオーバーレイなしで突然表示すると、出現元が分かりにくくなります。