開閉UIのアニメーション設計

Transcript

1. フロントエンド技術共有会@紀尾井町 LODGE 17F 開閉UIのアニメーション設計 2026/07/03 ZOZOTOWN開発本部 開発2部　菊地宏之

2. 2 まず、動かさない アニメーションは、足す前に削る。 動きが価値になるのは、理解を助けるときだけである。 使う頻度が高い操作ほど、動かさない 繰り返すたびに動きを待つことになり、アニメーション自体が遅延になる キーボード操作では、待ち時間を増やさない 反応・位置関係・状態変化を伝えない動きは入れない

3. 3 開閉UIにアニメーションさせたときの違和感 開閉はときどき起きる操作であり、動かす価値はある。 ただ、タイミングを設計しないと違和感が残る。 外枠と中身が同時に動くと、読む場所が定まらない 外枠が終わるまで中身を待たせると、間延びして見える 開くときと同じ長さで閉じると、中身が長い時間残る

4. 4 デモを見てみる Before: 外枠と中身が同時に動く After: 開くときは外枠 → 中身 / 閉じるときは中身

   → 外枠 https://codepen.io/hiro0218/full/yygorRM

5. 5 反応、 読む場所、 完了 を分けて伝える 1 開く 外枠を先に広げる 2 閉じる

   中身を先に弱める

6. 6 Step 1 開く 操作への反応を先に返し、 読む場所を確保する 1 開く 外枠を先に広げる 2

   閉じる 中身を先に弱める

7. 7 開くときは、外枠で読む場所を先に確保する 中身を突然表示すると、ユーザーは読む場所を探す。 外枠を先に動かすと、操作への反応が返り、読む場所も先に分かる。 外枠 中身 外枠 <details> 見出し <summary>

   中身本文 先に動かす 反応と読む場所を示す 短くずらす 外枠が動き出した 直後に表示する

8. 8 開くときは、短くずらして重ねる 外枠はすぐ動かして、操作への反応を返す。 中身は外枠の動きが始まった直後に表示し、待たせずに視線を本文へ誘導する。 注意 同時に動かす 外枠 中身 視線が二つに分かれる 注意

   外枠が終わってから 表示する 外枠 中身 中身が表示されるまで 間が空く 推奨 短くずらして重ねる 外枠 中身 反応は先、中身は後 ※ 読む場所と操作への反応が十分伝わるなら、同時に動かしてもよい。

9. 9 Step 2 閉じる 中身を弱め、 完了を早く伝える 2 閉じる 中身を先に弱める 1

   開く 外枠を先に広げる

10. 10 閉じるときは、中身を先に弱める 閉じる操作では、本文を読み続けるより、閉じた状態へ戻ることを優先する。 中身を先に弱め（フェードアウトなど） 、弱め終わる前に、位置関係を追える範囲で 外枠を畳む。 1 中身を弱める → 2

    重ねて外枠を畳む → 3 閉じた状態

11. 11 閉じる時間は開くより短くする 開くときは、操作への反応をすぐ返しつつ、中身は短くずらして表示する。 閉じるときは、本文が不要になったため、完了を早く伝える。 開く 外枠 中身 閉じる 中身 外枠

    図は比率の例。実装では、閉じる状態へ戻ったことを追える範囲で短くする。 開始 完了 開始 完了

12. 12 まとめ 開閉UIのアニメーションは、 反応、読む場所、完了を分けて伝える 反応、読む場所、完了のどれも伝えない動きは入れない。 動かすなら、開くときは外枠を先に動かして反応と読む場所を伝え、 閉じるときは中身を先に弱めて完了を早く伝える。

13. ご清聴ありがとうございました