このページの中身
モーション
動きは飾りではなく、変化を理解させるためのものです。説明できない動きは入れません。
図の中身を文字で読む
- モーションで決めること 動きで何を説明するか
- 先に決まっていること UI部品
- 何のために 動きの設計
- どう動かす 動きの基本
- 止める、軽くする 性能と配慮
- ここが効く先 実装 アクセシビリティ
このページから降りる#
この分野が答えになる場面#
全10件。ほかの分野もまとめて引くなら逆引きへ。
この分野が答えになる場面困り事から引く10 件
| こういうとき | 答え | いますぐ | 詳しくは |
|---|---|---|---|
| アニメーションの時間と曲線が決まらない | 画面に入るのは ease-out、出るのは ease-in で入りより短く。開閉や切り替えは200〜300ms。 | コードを開く | 動きの基本 |
| 動きが遅く感じる、または速すぎる | 移動距離に比例させる。距離が変わらないのに時間だけ長くすると、待たされていると感じる。 | コードを開く | 動きの基本 |
| トランジションとアニメーションのどちらを使うか | 状態が変わるきっかけがあるならトランジション。途中を指定したい、繰り返したいならアニメーション。 | コードを開く | 動きの基本 |
| 動きがカクつく | left や width を動かしている。transform と opacity に替える。 | コードを開く | 性能と配慮 |
| スクロールに合わせた演出が重い | scrollイベントで毎回DOMを読んでいる。CSSのスクロール駆動アニメーションかIntersectionObserverに替える。 | コードを開く | 性能と配慮 |
| will-change を付けたのに速くならない | 常時付けると層が増えてかえって重い。動く直前に付けて、終わったら外す。 | コードを開く | 性能と配慮 |
| 動きを入れるべきか迷う | その動きが何を説明しているのかを一言で言えないなら、入れない。 | /* 一言で説明できなければ入れない */ | 動きの設計 |
| 一覧を順番に出したい | 40〜60msずつ遅らせる。ただし上位の数件だけ。全件に掛けると最後の要素の待ち時間が伸びる。 | コードを開く | 動きの設計 |
| display: none に transition が効かない | display は補間できない。opacity と visibility を組み合わせるか、@starting-style を使う。 | コードを開く | 動きの基本 |
| 複数の要素を同時に動かすと散らかる | 動くものは1つに絞る。2つ以上が同時に動くと、どちらも見られない。 | /* 動くものは1つ。他は opacity だけ */ | 動きの設計 |
他の分野へ#
基礎 ／ タイポグラフィ ／ 色彩 ／ レイアウト ／ デザインシステム ／ UI部品 ／ UX・情報設計 ／ アクセシビリティ ／ 実装 ／ ブランディング ／ デザインスタイル ／ AIと制作 ／ SEO・公開と検索