モーダルポップ — 動きの伝え方辞典

modal pop / dialog animation

モーダルポップ

背景のオーバーレイがフェードし、パネルがscale(0.96→1)+フェードで「ふわっと」現れるダイアログの定番演出。scaleの開始値はほんの数%引くだけで十分で、小さくしすぎると安っぽく飛び出してくる。閉じは開きより速くが鉄則。

01 — Demo video

Play live →

02 — Prompt template

ダイアログに modal pop(表示アニメーション)を実装してください。

- オーバーレイ(背景の黒幕)は opacity 0→1 のフェード、パネルは opacity 0→1 と transform: scale({{scaleFrom}}→1) を同時に {{duration}}s のease-outで再生する
- 閉じるときは同じ動きを逆再生し、時間は開きの6〜7割に短縮する
- 動かすのは transform と opacity のみ(top / margin で位置をアニメーションしない)
- 表示中は背面のスクロールを固定し、オーバーレイのクリックとEscキーで閉じられるようにする
- パネルに role="dialog" と aria-modal="true" を付け、フォーカスをモーダル内へ移す
- prefers-reduced-motion 時はscaleをやめ、短いフェードのみ(または即時)で開閉する

ダイアログに modal pop(表示アニメーション)を実装してください。

- オーバーレイ(背景の黒幕)は opacity 0→1 のフェード、パネルは opacity 0→1 と transform: scale({{scaleFrom}}→1) を同時に {{duration}}s のease-outで再生する
- 閉じるときは同じ動きを逆再生し、時間は開きの6〜7割に短縮する
- 動かすのは transform と opacity のみ(top / margin で位置をアニメーションしない)
- 表示中は背面のスクロールを固定し、オーバーレイのクリックとEscキーで閉じられるようにする
- パネルに role="dialog" と aria-modal="true" を付け、フォーカスをモーダル内へ移す
- prefers-reduced-motion 時はscaleをやめ、短いフェードのみ(または即時)で開閉する

ダイアログに modal pop(表示アニメーション)を実装してください。

- オーバーレイ(背景の黒幕)は opacity 0→1 のフェード、パネルは opacity 0→1 と transform: scale({{scaleFrom}}→1) を同時に {{duration}}s のease-outで再生する
- 閉じるときは同じ動きを逆再生し、時間は開きの6〜7割に短縮する
- 動かすのは transform と opacity のみ(top / margin で位置をアニメーションしない)
- 表示中は背面のスクロールを固定し、オーバーレイのクリックとEscキーで閉じられるようにする
- パネルに role="dialog" と aria-modal="true" を付け、フォーカスをモーダル内へ移す
- prefers-reduced-motion 時はscaleをやめ、短いフェードのみ(または即時)で開閉する

03 — Params

duration(表示時間 s) — 範囲 0.15〜0.6 / 初期 0.25
0.2〜0.3sが目安。モーダルは操作を中断させるUIなので、0.4sを超えると確実に遅く感じる。
scaleFrom(scaleの開始値) — 範囲 0.8〜1 / 初期 0.96
0.94〜0.97が上品。0.9を下回ると「飛び出してくる」印象になり、1.0だとフェードだけで存在感が弱い。

04 — Vocab

オーバーレイ(スクリム) — モーダル背面の半透明の黒幕。背景が操作不能であることを視覚的に伝え、クリックで閉じる受け皿にもなる。
transform-origin — scaleの基準点。通常は中央のままでよい。クリックした要素から開く演出では、その要素の位置に設定する。
逆再生の短縮 — 閉じは開きの6〜7割の時間で。「閉じたい」という意思には即応するのがUIアニメーションの原則。
フォーカストラップ — 表示中にTabフォーカスをモーダル内へ閉じ込めること。アニメーションと同じくらい重要な実装作法。

05 — NG → OK examples

言い方: 「「モーダルをふわっと表示して」」

なぜNG: 「ふわっと」の解釈が広く、scale(0.5)から飛び出す過剰な動きや、下から大きくせり上がる別物の演出が返ってくる。閉じるアニメーションが実装されず、CLOSEを押すとパッと消えるだけになりがち。

言い方: 「「modal popを実装。オーバーレイはフェード、パネルはscale(0.96→1)+フェードを0.25s ease-outで同時に。閉じは逆再生で0.15s。transform/opacityのみ、スクロールロックとEsc/オーバーレイクリックで閉じる対応も」」

なぜOK: scaleの開始値・開閉の時間差・閉じ操作まで指定できている。「0.96」という控えめな数値を渡すことが、過剰演出を防ぐ一番の保険になる。