第6章　人間は、動いたものを見てしまう

画面の端で何かが動くと、読んでいた文章から注意が移ることがあります。ボタンを押した直後の変化なら、その動きは結果を理解する助けになるかもしれません。広告が反復して揺れているなら、目的の情報を探す妨げになるかもしれません。

ただし、「動いたものを見た」「注意が移った」「内容を理解した」「作業が遅れた」「身体的に不快だった」は同じ出来事ではありません。視線が向いても意味を理解したとは限らず、目立つ動きがいつも課題を妨げるとも限りません。

本章では、アニメーションを良いか悪いかで裁く前に、何が、いつ、どのように動き、何を伝えようとしているかを観察します。

本章でいう「動き」には、位置の移動だけでなく、拡大縮小、回転、透明度や色の時間変化、突然の出現、動画、自動スクロールを含めます。利用者が操作するスクロール、操作に続く画面遷移、自動で反復するアニメーション、映像コンテンツは条件が異なるため、観察時には種類を記します。

この章の必修は三つです。

1. 動いた要素、開始時点、面積、距離、時間、反復等を指して説明する
2. 動きが伝える状態・因果・位置関係と、副作用を分ける
3. 通常、動きを減らした状態、静止状態を比べ、注意・理解・課題・不快感を別々に確かめる

この章で見るもの

• 既にある物体が動き始めることと、新しい物体が突然現れること
• 動きの面積、距離、時間、速度変化、方向、反復、位置
• アニメーションが伝える状態、因果、空間的位置
• 自動で切り替わるカルーセルと利用者の操作権
• スケルトン UI が示すもの、示さないもの
• 横方向という一語に隠れた複数の条件
• 動きを減らす設定と、意味を保つ代替表現

6.1 視野の端の動きに振り向く

駅で案内板を読んでいるとき、視野の端を自転車が横切れば、そちらへ注意が移ることがあります。環境の変化へ素早く気づくことには意味があります。一方、画面上では、読む課題と関係のない動きも同じ視野へ入ります。

研究では、静止していた物体が動き始める Motion Onset が、一定の実験条件で注意を捕捉し、標的の識別時間へ影響することが示されています。しかし、実験室の単純な刺激で生じた反応時間差を、そのまま「Web のアニメーションは必ず注意を奪う」という規則にはできません。動きが課題に関係するか、何を探すよう指示されたか、刺激が新しい物体か、既存物体かなどで結果は変わります。

図 F01 では三つを分けます。

• 既に見えていた物体が動き始める
• 物体が突然現れる
• 読者が探している対象自体が動く

新しい物体の突然の出現は Abrupt Onset として研究されてきました。Motion Onset と似た結果に見える場合があっても、刺激は同じではありません。Web では、トースト通知が現れると同時に移動するなど、複数の変化が重なりがちです。何が注意へ影響したかを考えるなら、出現、移動、色変化、拡大を一度に変えない比較が必要です。

注意を向けさせる必要がある場合

動きによる注意誘導が、利用者の目的に合うこともあります。送信後に結果が追加された場所、Drag した項目の移動先、通信中から完了へ変わった状態などです。重要なのは、目立ったかだけでなく、利用者が「何が起きたか」を説明できるかです。

観察は、次のように書けます。

記事を読んでいる間、右端の告知が約 3 秒ごとに上下した。告知へ視線が向いたかは未確認だが、本文と無関係な反復する動きが周辺視野に存在する。

「気が散るアニメーションだ」は評価です。まず、位置、開始、反復、課題との関係を記録します。

6.2 動きの経験を形づくる複数の変数

「もっとゆっくり」「横移動は強い」といった言葉だけでは、動きの条件を再現できません。速度は、移動距離と時間の関係から生まれます。同じ時間で遠くまで移動すれば速くなり、同じ距離でも時間を延ばせば遅くなります。

動きを観察するときは、少なくとも次を分けます。

一つの値だけから強さは決まりません。短距離の小さな状態変化と、画面全体が同じ時間で移動する画面遷移では、面積も空間的位置の変化も異なります。遅い動きでも反復し続ければ、読書中に何度も現れます。

一度に一つだけ変える

距離の影響を比べたいなら、面積、時間、方向、反復を固定します。時間を固定して距離を変えれば速度も変わるため、「距離だけを変えた」とは言えません。厳密な実験でなくても、何が連動して変わったかを記録すると、比較の解釈が良くなります。

次の四つも別々に尋ねます。

1. 動きに気づいたか
2. 探していた対象を見つけられたか
3. 状態変化の意味を説明できたか
4. 不快または避けたいと感じたか

これらを一つの「疲れる」へまとめると、改善対象が分からなくなります。

身体的不快を無理に再現しない

不快感を確かめるために、参加者へ強い動きを耐えさせてはいけません。軽減設定を尊重し、内容を事前に伝え、いつでも即時停止・離脱でき、完全な動きを見ない経路を用意します。不快を申告した人へ同じ刺激を再提示しません。本書の比較から医学的な安全閾値を推定しません。

6.3 アニメーションは何を伝えるためにあるか

アニメーションは、時間とともに画面の属性を変える表現です。フィードバックは、操作やシステムの結果を利用者へ返すことです。両者は重なることがありますが、同じではありません。色や文言が即座に変わるだけでもフィードバックになり、動いていても操作結果を何も伝えない場合があります。

動きの目的を、次の候補から考えます。

状態変化

メニューが閉じた状態から開いた状態へ変わる、保存中から保存済みへ変わるなどです。開始と終了の状態が識別できることが先で、アニメーションだけに状態を担わせません。

因果

押したボタンからダイアログが開いた、削除した項目がリストから消えたなど、操作と結果の関係をつなぎます。動きが長すぎると、因果を示す前に待ち時間になる可能性があります。

空間的定位

いま見ていたページが左へ退き、次のページが右から入る表現は、情報空間の隣接を示すことがあります。しかし、実際の情報構造と方向が一貫しなければ、位置関係を誤って教えるかもしれません。

注意誘導

更新された行やエラーの位置へ注意を導きます。エラーを揺らすだけでなく、文言、色以外の印、フォーカス、読み上げなども必要です。

装飾

雰囲気やブランドの調子を作ります。装飾であることは、無価値という意味ではありません。ただし、課題に不可欠な動きと違い、利用者が減らしたいときに残す必要性は低いかもしれません。

一つのアニメーションが複数の目的を持つこともあります。目的を名付けた後は、「その意味は静止した最終状態からも分かるか」「同じ意味を、より小さい面積や短い距離で保てるか」を考えます。

機能目的と表現目的

同じ状態変化でも、動きの間、リズム、軌跡、要素同士の同期によって、静か、軽快、重い、祝祭的といった印象が変わります。これは状態伝達とは別の表現目的です。「装飾だから不要」と切り捨てず、伝える意味、課題への副作用、ブランド表現との適合を別々に評価します。読み方向や「先へ進む方向」の慣習も言語、文化、製品内の規則によって変わり得ます。

動きの約束を書く

実装値を決める前に、動きの契約を一行ずつ書きます。

開始状態 → きっかけ → 変化 → 終了状態 → 途中で再操作された場合 → 軽減時の代替

メニューなら、「閉じている→メニューボタンを押す→パネルが現れる→開いた状態とフォーカスが確立する→再操作なら閉じる→軽減時は移動せず即時表示」と書けます。アニメーションの終了イベントだけに処理完了を依存させず、動きが無効でも状態とフォーカスが成立するようにします。

方向の意味も固定しません。日本語横書きで右から入るパネルが「次」を示していても、右から左へ読む言語や縦書き、別の製品内規則では同じ解釈にならない可能性があります。内容の論理順序と画面上の移動方向を一緒に確認します。

6.4 カルーセルと自動再生が奪うもの

カルーセルには、限られた場所へ複数の内容を置ける利点があります。一方、自動切替は読む時間と画面の主導権をシステム側で決めます。読了前に切り替わる、戻ったスライドを再発見できない、キーボードフォーカス中に内容が変わる、といった問題が起こり得ます。

図 F04 では、自動切替なし、5 秒、10 秒、利用者が操作した後に停止する条件を比べます。ここで 5 秒を推奨値にはしません。見出しの長さ、読者の言語能力、画像の理解、拡大表示、支援技術等によって必要時間は異なります。

WCAG 2.2 の達成基準 2.2.2 は、自動で始まり、5 秒を超え、他の内容と並行して動く情報などについて、一時停止・停止・非表示の仕組みを求める条件を定めています。この 5 秒は「5 秒以下なら使いやすい、安全」という意味ではありません。点滅には別の達成基準があります。

カルーセルを見るときは次を確かめます。

• 自動で始まるか、停止できるか
• 前後へ移動でき、現在位置が分かるか
• キーボードで操作でき、フォーカスが見えるか
• フォーカス中やホバー中にも勝手に切り替わるか
• スライドの変更が支援技術へ過剰に通知されないか
• 3 枚目を見た後、同じ内容へ戻れるか
• 最重要情報を隠してまでカルーセルにする理由があるか

測定も分けます。見出しを読み終えられたか、目的のスライドを見つけたか、申込ボタンを操作できたか、再び見つけられたかは別の課題です。「カルーセルを見た人が少ない」だけでは、動き、位置、内容、計測方法のどれが原因か決まりません。

比較ではスライドの文章、画像、順序を固定し、条件の提示順を入れ替えます。自動切替を止める操作、フォーカスやホバーでの停止、利用者が前後操作した後に再開しない状態を条件として定義します。現在のスライドだけを適切に通知し、自動更新を読み上げ続けないことも確認します。

6.5 スケルトン UI は待ち時間を短くするのか

通信中に最終レイアウトに似た灰色の形を出すスケルトン UI があります。何もない画面より、これから現れる情報の位置を予告できる場合があります。しかし、スケルトンは進捗率を示しません。半分の形が埋まっていても、処理が 50% 終わったとは限りません。

「待ち時間が短く感じる」を一つの事実として扱わず、次を分けます。

• ネットワークや処理に要した実時間
• 利用者が推定した時間
• 進行していると理解できたか
• 待ち続けたか、離脱したか
• 最終レイアウトを正しく予測できたか
• 読み込み後にレイアウトが大きく移動したか

実時間はパフォーマンス計測で確認できます。知覚された時間は利用者の報告、待機継続は行動です。スケルトンにしただけで通信は速くなりません。

光が流れるスケルトンは、処理が止まっていない印象を与えるかもしれませんが、反復する動きでもあります。静止スケルトン、スピナー、進捗率を示せる進捗表示、何も表示しない条件を、同じ実時間で比べます。短い処理では、ローディング表示が一瞬だけ現れることで、かえってちらついて見える場合もあります。

最終内容とスケルトンの形が大きく違えば、予告としての意味は弱くなります。ローディング中の仮の見た目ではなく、どの情報が読み込み中か、失敗時に何が起きるか、再試行できるかまで状態として設計します。

既に内容がある更新では、それを消してスケルトンへ戻すより、古い内容を保って「更新中」と示す方が課題を続けやすい場合があります。0 件、部分成功、失敗、再試行、逐次表示も別状態です。aria-busy などで領域の更新中状態を伝えることと、真の進捗値を示す progressbar を混同しません。詳細は第14章で扱います。

6.6 横方向の移動は本当に疲れるのか

「横スクロールは疲れる」「横移動は人間に不自然だ」と方向だけで結論づけることはできません。横方向のカード列、ページ遷移、横書き文章を画面ごと移動させる表現は、同じではありません。

横方向の体験には、少なくとも次が含まれます。

• 移動距離と回数
• 自動か、利用者の操作か
• タッチ、ホイール、キーボードなどの入力方法
• 視線で追う必要があるか
• 内容の読む順序と方向が一致するか
• 次の項目が一部見え、続きが予測できるか
• Snap によって意図しない位置へ移動しないか
• 画面幅と表示項目数
• 元の位置を再発見できるか

方向の影響を知りたいなら、縦方向との比較で距離、時間、内容、入力、反復などをそろえる必要があります。実務では完全にそろえられなくても、「横だから」以外の代替仮説を挙げられます。

たとえば横カード列で目的の出演者を見つけにくいとき、見えていない項目数、スクロール可能性の手がかり、カードの類似、現在位置、並び順、入力装置が関係しているかもしれません。改善案も、縦並びに変えるだけでなく、検索、分類、件数表示、前後コントロール、一覧へのリンクなどが考えられます。

なお、利用者が操作する横スクロールと、画面が自動で横へ移動するアニメーションを混同しません。前者は探索構造と入力、後者は時間変化と注意の問題を持ちます。

キーボードフォーカスが画面外へ移動しないか、移動後も見えるか、右から左へ読む言語や縦書きで順序が保たれるかも確認します。

6.7 prefers-reduced-motion と動きの代替

OS などで、不要な動きを減らしたい設定を表明できる場合があります。CSS の prefers-reduced-motion メディア機能は、その要求を検出するためのものです。

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

これは出発点です。アニメーションを消した結果、状態や因果まで消えていないかを確認します。メニューなら開閉状態を即座に反映し、ローディングなら文言や進捗を残し、エラーなら揺れ以外の印と説明を示します。

reduce は「すべてのアニメーションを必ずゼロにする」という値ではありません。不要な動きを最小化する要求です。短いフェードへ置き換えることもありますが、フェードも時間変化であり、誰にとっても安全な万能代替とは決めません。面積、距離、拡大縮小、反復を減らし、意味を別の手がかりで保ちます。

反対に、no-preference は「派手な動きへ同意した」という意味ではありません。利用者が軽減要求をシステムへ表明していない状態です。通常状態でも、目的のない反復や大面積の移動を無制限にしてよい根拠にはなりません。

検証では、開発者用の切替だけでなく、可能なら実際の OS 設定と複数ブラウザで確認します。JavaScript が動かない状態、印刷、キーボード操作、支援技術での状態通知も見ます。

CSS 以外の Web Animations API、Canvas、SVG、動画でも軽減条件を確認します。transitionend や animationend を、状態更新やフォーカス移動の唯一の条件にしません。

6.8 動きを止めて比較する

動きは、再生したままでは複数の差を同時に追いにくい対象です。まず実時間で見た後、低速再生し、開始・中間・終了フレームへ止めます。

次の順で観察します。

1. 実時間で、最初に気づいたことを記録する
2. 0.25 倍などで、変化するプロパティと同時に動く要素を見る
3. 開始・中間・終了フレームを横に並べる
4. 境界ボックスの軌跡、距離、面積を重ねる
5. 動きなしの最終状態と比べる
6. 一つの変数だけ変えて再生する

ブラウザの開発者向け機能や Web Animations API から、継続時間、遅延、イージング、反復などを確認できます。ただし、開発者向け機能の名称や場所はブラウザと版によって変わります。値を見る前に、どれくらいの時間・距離かを予想すると、知覚と実装値を接続できます。

録画やフレーム列は、何が変化したかを調べる資料です。それだけで、利用者がどう知覚し、課題成績や不快感がどう変わるかを測定したことにはなりません。

仕様上の 300ms が、いつも滑らかな 300ms として経験されるわけでもありません。メインスレッドの処理、フレーム落ち、入力への応答遅延、レイアウトシフトを実機で記録し、設定値、記録上の時間、利用者が待った時間を分けます。

6.9 問い――文化祭の画面で動きを見る

文化祭 Web サイトのトップページを使います。上部に自動カルーセル、出演者欄に光が流れるスケルトン、メニューに画面幅いっぱいの遷移、フィルター保存後にトースト通知があります。

次の課題を一つずつ行います。

1. 開催日時を読む
2. 特定の出演者を探す
3. 絞り込み条件を保存する

基準条件

初見の利用者を想定し、390px 幅、キーボード操作、通常の動き設定、カルーセルは 1 枚目、通信待ち 5 秒から始めます。次に、一度に一軸だけ、1280px 幅、ポインター操作、reduce、静止、待ち 2 秒または 10 秒へ変えます。四つの動きは個別切替で一つずつ有効にし、同時再生を基準比較にしません。身体的不快の比較には、前述の停止・離脱・非曝露の手順を適用します。

問い

• 何が、いつ、どの範囲で動くか
• それぞれの動きは何を伝えようとしているか
• 課題と関係のない動きは何か
• 動きを止めると失われる意味は何か
• 通常、軽減、静止の三条件で何を測るか

答えの例

開催日時を読んでいる間にも、画面上部のカルーセルが 10 秒ごとに画面幅の約 70% を横移動する。日時の理解を助ける動きではない。読了前の切替、注意の移動、元のスライドの再発見へ影響する可能性がある。自動切替を止めた条件で、日時の読み誤りと完了時間を比べたい。

フィルター保存後のトースト通知は、操作結果を知らせる目的がある。ただし、右端から大きく移動する必要があるかは別である。まず文言、位置、表示時間を固定し、移動距離だけを 16px、0px と変える。次の比較で、移動距離を固定して表示位置を保存箇所の近くへ変える。完了の理解と不快感を分けて確認する。

別の答え方

問題は動きの強さではなく、開催日時の視覚的階層が弱く、カルーセルの近くに置かれていることかもしれません。カルーセルを止めても日時を見落とすなら、位置、見出し、コントラストなどの仮説を調べます。

スケルトンによる待機離脱が少ないとしても、知覚時間が短くなったとは限りません。最終レイアウトが予測できた、処理中と理解できた、単に実時間が短かった、という別の説明があります。

四つの動きへの回答例

よくある考え方

アニメーションが多くて疲れる。全部消した方がよい。

注意点

どの動きの、どの変数が、どの課題または身体反応に関係するかが書かれていません。状態や因果を伝えているアニメーションまで消すと、操作結果が分からなくなる可能性があります。まず各動きの目的と副作用を分けます。

必須セルフチェック

• 動いた要素、開始、面積、距離、時間、反復を観察の言葉で書ける
• 状態・因果・空間・注意・装飾という目的候補と、副作用を分けられる
• 通常・軽減・静止を比べ、注意・理解・課題・不快感を別々に確かめられる

発展セルフチェック

• 動きの約束に、再操作、軽減時、低性能時の終了状態を書ける
• カルーセル、スケルトン、横スクロールの問題を方向や秒数だけで説明していない
• 不快感を再現させない安全な観察手順を用意できる

参考

• Abrams, R. A. and Christ, S. E. (2003), “Motion Onset Captures Attention,” Psychological Science, 14(5), 427–432, DOI: 10.1111/1467-9280.01458. 動き始めと注意捕捉を扱う原著です。https://doi.org/10.1111/1467-9280.01458
• Smith, K. C. and Abrams, R. A. (2018), “Motion onset really does capture attention,” DOI: 10.3758/s13414-018-1548-1. Motion Onset をめぐる追試と条件を確認できます。https://pubmed.ncbi.nlm.nih.gov/29971749/
• “Attentional Capture by Abrupt Onsets: Foundations and Emerging Issues.” Abrupt Onset 研究の議論と条件を整理した Review です。専門的です。https://pmc.ncbi.nlm.nih.gov/articles/PMC11908675/
• W3C WAI, Understanding Success Criterion 2.2.2: Pause, Stop, Hide. 自動で動く情報の達成条件を確認する公式解説です。https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide
• W3C WAI, Understanding Success Criterion 2.3.3: Animation from Interactions. 操作で生じる動きと軽減についての公式解説です。https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html
• W3C, Media Queries Level 5: prefers-reduced-motion. メディア機能の正確な定義を確認できます。https://www.w3.org/TR/mediaqueries-5/#prefers-reduced-motion
• W3C WAI, Carousels Tutorial. 構造、コントロール、キーボード、通知を実装例とともに確認できます。https://www.w3.org/WAI/tutorials/carousels/
• W3C, Web Animations Level 1 / CSS Animations Level 1. アニメーションの時間モデルと CSS の定義を調べる仕様です。https://www.w3.org/TR/web-animations-1/ https://www.w3.org/TR/css-animations-1/
• W3C, CSS Overflow Module Level 3 / CSS Scroll Snap Module Level 1. 横スクロールの仕組みとスナップを確認する仕様です。疲労の一般則を示す資料ではありません。https://www.w3.org/TR/css-overflow-3/ https://www.w3.org/TR/css-scroll-snap-1/
• W3C WAI-ARIA APG, Carousel Pattern. カルーセルの役割、状態、コントロールを調べる実装パターンです。https://www.w3.org/WAI/ARIA/apg/patterns/carousel/

SC 2.3.3 は WCAG 2.2 の AAA 達成基準です。点滅による発作リスクは別の達成基準で扱われるため、「動きを減らしたから点滅も確認済み」とは考えません。スケルトン UI の知覚時間と横方向の疲労については、本章で無条件の一般則を採用していません。

検索キーワード: motion onset attention capture、abrupt onset visual attention、carousel accessibility pause、skeleton screen perceived waiting time、prefers-reduced-motion、vestibular motion web accessibility