ドロワースライド — 動きの伝え方辞典

drawer / side panel slide

ドロワースライド

画面の横からナビパネルが滑り込む、モバイルナビの定番UI。パネルはtranslateXのみで動かし、背景のオーバーレイのフェードを同じ時間で連動させる。left/rightプロパティのアニメーションで作ると途端に重くなる。

01 — Demo video

Play live →

02 — Prompt template

サイドナビに drawer slide を実装してください。

- パネルは画面の {{direction}} 側に position: fixed で配置し、transform: translateX で画面外(105%ぶん外側)から0へ {{duration}}s で滑り込ませる
- easingは cubic-bezier(0.22, 1, 0.36, 1) のような減速の効いたease-outを使う
- 背景のオーバーレイは同じ {{duration}}s で opacity 0→1 にフェードさせ、クリックで閉じられるようにする
- 閉じるときはパネルを画面外へ戻しつつ、オーバーレイを同時にフェードアウトする
- 動かすのは transform と opacity のみ。left / right プロパティをアニメーションしない(リフローさせない)
- 表示中は背面のスクロールを固定し、Escキーでも閉じられるようにする
- prefers-reduced-motion 時はスライドをやめ、フェードのみ(または即時)で開閉する

サイドナビに drawer slide を実装してください。

- パネルは画面の {{direction}} 側に position: fixed で配置し、transform: translateX で画面外(105%ぶん外側)から0へ {{duration}}s で滑り込ませる
- easingは cubic-bezier(0.22, 1, 0.36, 1) のような減速の効いたease-outを使う
- 背景のオーバーレイは同じ {{duration}}s で opacity 0→1 にフェードさせ、クリックで閉じられるようにする
- 閉じるときはパネルを画面外へ戻しつつ、オーバーレイを同時にフェードアウトする
- 動かすのは transform と opacity のみ。left / right プロパティをアニメーションしない(リフローさせない)
- 表示中は背面のスクロールを固定し、Escキーでも閉じられるようにする
- prefers-reduced-motion 時はスライドをやめ、フェードのみ(または即時)で開閉する

サイドナビに drawer slide を実装してください。

- パネルは画面の {{direction}} 側に position: fixed で配置し、transform: translateX で画面外(105%ぶん外側)から0へ {{duration}}s で滑り込ませる
- easingは cubic-bezier(0.22, 1, 0.36, 1) のような減速の効いたease-outを使う
- 背景のオーバーレイは同じ {{duration}}s で opacity 0→1 にフェードさせ、クリックで閉じられるようにする
- 閉じるときはパネルを画面外へ戻しつつ、オーバーレイを同時にフェードアウトする
- 動かすのは transform と opacity のみ。left / right プロパティをアニメーションしない(リフローさせない)
- 表示中は背面のスクロールを固定し、Escキーでも閉じられるようにする
- prefers-reduced-motion 時はスライドをやめ、フェードのみ(または即時)で開閉する

03 — Params

duration(スライド時間 s) — 範囲 0.2〜0.8 / 初期 0.35
0.3〜0.4sが目安。モバイルで何度も開閉するUIなので、0.5sを超えると操作のテンポを削ぐ。
direction(スライド方向) — 選択: left / right（初期: left）
滑り込んでくる側。ナビはleft、カート・設定パネルはrightが通例。

04 — Vocab

ドロワー — 引き出しのように横から出てくるパネルの総称。オフキャンバスメニューとも呼ぶ。
translateX(-105%) — 隠すときは100%ではなくわずかに余分に逃がす。box-shadowや境界線が画面端に1pxだけ残るのを防ぐ。
オーバーレイ連動 — パネルのスライドと黒幕のフェードを同じdurationで揃えること。ここがずれると急に安っぽくなる。
スワイプディスミス — パネルを指で押し戻して閉じるモバイルの作法。実装コストは上がるがネイティブアプリの操作感に近づく。

05 — NG → OK examples

言い方: 「「横からスライドするメニューを作って」」

なぜNG: leftプロパティのtransitionで毎フレームレイアウト計算が走る実装や、オーバーレイなしでパネルだけが出てくる実装が返ってきやすい。開いている間に背景がスクロールできてしまう抜けも定番。

言い方: 「「drawer slideを実装。パネルはtranslateX(-105%)→0を0.35s cubic-bezier(0.22,1,0.36,1)、オーバーレイは同durationでフェード連動、クリックで閉じる。transform/opacityのみ、スクロールロックとEsc対応も」」

なぜOK: パネルとオーバーレイの連動・easing・閉じ操作まで指定できている。「105%」の一言でbox-shadowが画面端に残る細かい事故も防げる。