このページの中身

動きの設計

その動きが何を説明しているのかを言えないなら、動かしません。動きの役目は3つしかありません。

動きが果たす3つの役割と、スタッガーによる順次表示を示した図
図を大きく見る
図の中身を文字で読む
  • 動きは装飾ではなく説明。何を説明しているかを言えないなら、動かさない。
  • 1. どこへ行ったかを繋ぐ
  • 一覧の1件　詳細の見出し
  • 同じ要素が育ったと分かれば、画面が切り替わったと感じない
  • 2. 原因と結果を結ぶ
  • 保存する　保存しました
  • 押した位置から出てくれば、　その操作の結果だと分かる
  • 無関係な場所に唐突に出すと、読み手は原因を探す
  • 3. 見るべき場所を指す
  • 動いているものは1つだけ。
  • 2つ以上が同時に動くと、どちらも見られない
  • スタッガー＝開始時刻を少しずつずらす
  • 同時（1枚の面に見える）　40〜60msずつ遅らせる（順序が読める）
  • 項目が多いほど最後の要素の待ち時間が伸びる。
  • 10件を超えるなら、ずらし幅を詰めるか
  • 上位の数件だけに掛ける。
  • 0ms　0ms　0ms　50　100　150
  • スクロール量に画面が追従する演出は、読み手から速度の制御を奪う。長い文章では特に嫌われる。

ひと目で#

その動きが何を説明しているかを言えないなら、動かさない。

マイクロインタラクション
1つの操作に返す小さな反応。押した手応え、切り替わりの確認
状態遷移
前の状態と次の状態をつないで、同じものだと分からせる
出入りのアニメーション
現れる方向と消える方向で、そのものの居場所を示す
スタッガー
始まる時刻をずらして、順序と件数を伝える
コレオグラフィ
複数の要素の動きを組み立てて、視線の順番を作る
パララックス
前景と背景を違う速さで動かして、奥行きを作る

動きが果たすのは3つだけ#

役割具体例
位置をつなぐ一覧の項目が広がって詳細になる
因果を示す押したボタンの位置から通知が出る
注意を向ける見てほしい1か所だけが動く

使い分け#

こういうときやること
押した反応を返したい100ms前後の小さな変化。色か影か縮小
メニューを開く開くきっかけになった要素を起点に広がる
一覧を表示する上のほうの数件だけスタッガー。全件にはかけない
削除する隙間が詰まるところまで見せる
読み物のページ動かさない。スクロールの主導権を渡す

件数が待ち時間を決める#

1枚ごとの設計が同じでも、何枚に時差をかけるかで合計は変わります。1枚240ms・時差60msで12件に順番をつけると、最後の1枚が止まるのは900ms後です。

12件全部に時差をつけた場合と、先頭3件で止めた場合の、最後の1枚が止まるまでの時間を比べた図
図を大きく見る
図の中身を文字で読む
  • ✕ 一覧の全件に時差をつける　○ 先頭の数件で止める
  • 12件 × 60ms。1枚の入場は 240ms　時差は最初の3件だけ
  • 4件目からは時差をかけない。
  • 画面の外にあるものは動かさない
  • 600ms
  • 最後の1枚は 360ms で止まる
  • 600ms を超えると待ち時間
  • 最後の1枚が止まるのは 900ms 後
  • 時間 240ms・時差 60ms のとき。1枚ごとの設計が同じでも、件数が合計の待ち時間を決める。

時差をかけるのは、最初の画面に見える数件までにします。画面の外にあるものは、そもそも動かす必要がありません。

よく使う3種（フェード入場・アコーディオン開閉・トースト出現）の完成コードは よく使う動き3種 にまとめました。

間違えやすいところ#

直す例#

架空の案件を1つ例にとります。どこを見て、何をどう直すかを書きます。

不動産サイトの物件一覧です。「もっと見る」で12件が足され、12件すべてに60msずつの時差が付いています。1枚の入場は240msなので、最後の1枚が止まるのは900ms後です。押した人は、増えた分を上から順に眺めるのではなく、いちばん下まで一気にスクロールします。動きは、その人が見ていない場所で終わります。

時差をかけるのは先頭の3枚までにします。4枚目からは遅延を付けず、同時に出します。合計は360msに縮み、「増えたのはここから」という説明は残ります。

もう1つ、動く対象を「今回足された分」に限ります。既に読んだ12件まで動き直すと、どこまで読んだかを見失います。

確認する#

使えるパターン#

このページで扱う語#

このページで扱う語を並べる本文では太字3 語

語の名前から引くなら用語索引へ。

モーションデザイン
画面上の動きを設計すること。装飾ではなく、変化を理解させるための手段。
キネティックタイポグラフィ
文字そのものを動かし、意味や感情を動きで表現する手法。
スクロールテリング
スクロールの進行に合わせて内容が展開していく、物語型の表現。

この話が要る場面#

このページが答えになる、現場の困り事です。困り事の側から探すと、同じ場所に着きます。

動きを入れるべきか迷う

その動きが何を説明しているのかを一言で言えないなら、入れない。

一言で説明できなければ入れない

一覧を順番に出したい

40〜60msずつ遅らせる。ただし上位の数件だけ。全件に掛けると最後の要素の待ち時間が伸びる。

このコードで動いている見本です

複数の要素を同時に動かすと散らかる

動くものは1つに絞る。2つ以上が同時に動くと、どちらも見られない。

動くものは1つ。他は opacity だけ

この場面のほかの困り事と、そのまま貼れる部品は動かすにまとめてある。逆引きには全188件。

入場を組み立てる#

この値は作業台で決められます。和文の予約ページに載せて、幅と明暗を替えて確かめてから CSS を持ち帰る: 動きの曲線と時間

カード3枚の入場を、時間・移動距離・時差の3つで設計します。再生で実物のカード列が動き、生成した CSS には動きを減らす設定への対応まで含まれます。

最後のカードが止まるまで 360ms

概要

最初に現れます

料金

二番目に続きます

事例

三番目に続きます

一覧の全件に時差をかけず、最初の画面に見える数件で止めます。

:root { --ease-out: cubic-bezier(0.16, 1, 0.3, 1); }

@keyframes card-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.card { animation: card-in 240ms var(--ease-out) backwards; }
.card:nth-child(2) { animation-delay: 60ms; }
.card:nth-child(3) { animation-delay: 120ms; }

@media (prefers-reduced-motion: reduce) {
  .card { animation: none; }
}

この道具は JavaScript で動きます。無効の場合は、下の既定値のコードをそのまま使ってください。

出典#

関連#

この資料は、Webサイトを作るときに引くためのものです。 何のために作ったか。作っているのは AK²Lab。