第6章 人間は、動いたものを見てしまう
文章を読んでいるとき、画面の端で何かが動けば、ついそちらを見ることがあります。変化したものへ気づくことは、現実の世界では危険を避けるためにも役立ちます。しかし Web サイトでは、読む内容と関係のない広告や飾りにも目が向いてしまいます。
動きそのものが悪いわけではありません。「保存する」を押したあとに表示が変われば、操作が届いたと分かります。メニューが横から現れれば、閉じていた領域が開いたと理解しやすくなります。
大切なのは、何を伝えるための動きなのか、動きが終わったあとにも結果が残るかです。この章では、静止画だけでは分からない内容を、実際に動く図で説明します。
6.1 画面の端で動き始める通知
最初の図では、中央に記事があり、右端に通知の一部が見えています。通知は動きません。
次の図では、同じ通知がしばらく止まったあと、左へ一度だけ動きます。動く向きを示す矢印は、読者の視線ではありません。通知そのものの移動方向です。
この図が表しているのは、読者の目の動きではありません。「前から見えていたものが、途中で動き始める」という画面上の変化です。研究では、この変化を動きの開始と呼びます。
動き始めたものへ注意が向く場合はありますが、誰もが必ず通知を見るとは限りません。通知を見ても、内容まで読んだとは限りません。この記事が読みにくくなったかどうかも、この図だけでは分かりません。
それでも、本文と関係のない通知が何度も動けば、読んでいる場所から注意を離すきっかけが増えます。反対に、送信結果のように今すぐ知らせたい変化なら、注意を向けることが役立ちます。動きを考えるときは、「目立ったか」だけでなく、「今の目的に必要な変化か」を見ます。
6.2 動きの大きさは、速さだけでは決まらない
同じ 300 ミリ秒のアニメーションでも、小さなアイコンが数ピクセル動く場合と、画面全体が端から端まで動く場合では、見え方が違います。
動きの印象には、少なくとも次の違いが関係します。
- 画面のどれくらい広い部分が動くか
- どこからどこまで移動するか
- 何秒かけて動くか
- 一度で止まるか、何度も繰り返すか
- 自分の操作で始まったか、勝手に始まったか
「横移動は疲れる」「ゆっくりなら安全」のように、方向や速さだけで決めることはできません。小さく一度だけ起きる変化と、画面の広い範囲で繰り返す変化は、同じ横移動でも別の体験です。
体調によって、大きな拡大や画面全体の移動に不快感を覚える人もいます。確かめるために強い動きを我慢してもらう必要はありません。動きを減らす設定を尊重し、すぐ止められるようにし、動かない表示でも内容を読めるようにします。
6.3 自動で切り替わる大きな写真
次の文化祭サイトでは、大きな写真が自動で横へ切り替わります。図は少し静止したあとに一度切り替わり、その状態を繰り返します。
同じ場所で複数の内容を切り替える部品を、カルーセルと呼びます。自動切替では、いつ次へ進むかをサイト側が決めます。短い見出しなら読み終えられる人も、長い説明や拡大した文字では間に合わない人もいます。
切替を 5 秒から 10 秒へ延ばしても、読む速さをサイトが決める点は変わりません。自動で切り替えない、停止ボタンを置く、前後の内容を自分で選べるようにする、といった方法なら、読む時間を利用者が決められます。
この図では、開催日時を読むことと写真の切替に直接の関係がありません。広い写真を自動で動かす前に、静止した一枚でも目的を達成できないかを考えます。
6.4 読み込み中を示す光
次の図では、出演者カードの形をした灰色の面を、明るい帯が繰り返し横切ります。この仮の形をスケルトン表示と呼びます。読み込み後に入る画像や文章の位置を、先に示すための表示です。
灰色の形は、これから画像や文章が入る位置を予告できます。しかし、光を流しても、読み込みが何パーセント進んだかは分かりません。失敗して止まっていても、同じ動きを続けられてしまいます。
読み込みが長引くなら、「出演者を読み込んでいます」という言葉を添えます。失敗したら、動きを止めて「読み込めませんでした」と伝え、もう一度試す操作を用意します。意味を伝えるのは光ではなく、最終的な内容と状態を示す言葉です。
光がなくても灰色の形で配置を予告できるなら、動きを減らす設定では帯を止められます。読み込み中であることは、短い文章でも残せます。
6.5 メニューが開いたことをつなげる
次の図では、メニューボタンを押したあと、画面幅いっぱいのメニューが右から入ります。小さな通知よりも、動く面積が大きい例です。
この動きには、「閉じていた別の領域が開いた」と伝える役割があります。ただし、動きが状態そのものではありません。動き終わったあとにメニュー項目が見え、閉じるボタンがあり、後ろのページを誤って操作できないことが必要です。
動きを減らす設定では、短い色の変化だけで表示したり、すぐ開いた状態へ切り替えたりできます。途中の移動を省いても、開いている状態と閉じている状態を区別できれば、メニューの意味は残ります。
6.6 保存できたことを知らせる
最後は、「条件を保存する」を押したあとに通知が現れる例です。通知は右から入り、しばらく表示されたあとに消えます。
この動きは、直前に行った保存操作と関係があります。利用者へ知らせたいのは、通知が右から来たことではなく、保存できたことです。実際に意味を伝えているのは「条件を保存しました」という文章です。
通知が画面の外から長い距離を移動しなくても、同じ場所へ静かに表示すれば結果は伝えられます。
数秒で消える通知を見逃すこともあります。あとから開ける操作履歴へ保存結果を残せば、見逃しても確認できます。
アニメーションを短くすることと、情報を消してよいことは別です。動きを減らしても、操作の結果を伝える文章と、必要なら再確認できる場所を残します。
6.7 動きを減らしたい人の設定を尊重する
OS には、画面の動きを減らす設定があります。Web サイトでは、CSS の prefers-reduced-motion を使うと、その希望を知ることができます。
設定が有効なときは、画面全体の移動、大きな拡大、繰り返す装飾などを止めたり、小さな変化へ置き換えたりします。ただし、アニメーションを無効にしたせいで、メニューが開かない、読み込み中のまま終わらない、といった状態にしてはいけません。
考える順序は単純です。
- 動きが何を伝えているかを言葉にする。
- 動き終わった状態だけでも、その意味が分かるようにする。
- 動きを減らす設定では、移動や拡大を省く。
- 結果を示す文章や状態は残す。
自動カルーセル、読み込み中の光、メニュー、保存通知は、どれも「アニメーション」です。しかし目的は同じではありません。目的と関係の薄い動きは止め、意味を助ける動きは小さくし、最後に文章や静止した状態を残します。
次章へ
動きは、画面の一部へ注意を向けます。動きがなくても、大きさや色の差によって、最初に見る場所は変わります。
次章では、見出し、本文、ボタンなどの強さをどう分けると、読む順序が伝わるのかを見ていきます。
参考資料
- Abrams and Christ, “Motion Onset Captures Attention,” 2003. 動き始めと注意の関係を扱った研究です。
- Smith and Abrams, “Motion onset really does capture attention,” 2018. 動き始めが注意へ与える影響を、条件を分けて調べています。
- W3C WAI, “Understanding Success Criterion 2.2.2: Pause, Stop, Hide.” 自動で動く内容を止める仕組みについての公式解説です。
- W3C WAI, “Understanding Success Criterion 2.3.3: Animation from Interactions.” 操作によって始まる動きを減らす考え方です。
- W3C, “Media Queries Level 5:
prefers-reduced-motion.” 動きを減らす設定を CSS から知るための仕様です。 - W3C WAI, “Carousels Tutorial.” 自動切替の停止や前後操作を含むカルーセルの作り方です。