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

記事版: https://zenn.dev/zozotech/articles/79c6e3cf401e55

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. ご清聴ありがとうございました