Webサイトのアニメーションは必要？使いどころと避けたい動き

動きを使うかは、伝えたい変化と対応で決める

採用の出発点は、派手さではなく、読者に伝えたい変化です。選んだ項目と表示中の詳細の対応を見失うなら、その関係を示す表現が候補になります。

アニメーションは、位置や大きさなどが変わる途中の表示をつなぎ、動いて見せる表現です。滑らかな表示と、サービスの対象や条件の説明は役割が違います。説明が足りない場合は、先に見出しや本文を直します。

二つの別提案を同じ項目で比べる

次の図では、文章と写真が滑り込む案と、選んだ説明と詳細を対応させる案を見ます。動く目的と、動きなしで残る情報を近くで比べてください。一方を直した実績ではなく、改修を説明する独立した架空提案です。

原寸画像を開く

滑り込む案は、何を伝えるための動きか、動かない場合に何が表示されるかが原票にありません。この二点を具体的にしてもらいます。対応を示す案には目的がありますが、目的があるだけで採用済みにはしません。同じ情報が止まった表示でも読めるかを試作で確かめます。

本文を待たせたり、全部を同時に動かしたりしない

営業時間、対象サービス、依頼前の条件など、読む必要がある文章は演出を待たずに読める案を基本にします。重要条件を動く間だけ見せるなら、止まった表示にも同じ条件を残します。動きが目的に必要でなければ、通常の文章・写真・見出しで伝える案を選べます。

スクロールは読者が読む場所を自分で移す操作です。操作量と違う移動を強いる、読むたびに別方向の動きを加える案では、その必要性を先に見ます。通常の上下移動と、背景や要素を別の速さで動かす追加演出は区別してください。

複数の要素を同時に動かす案なら、対象を一つに絞り、最初に何を見て次に何を読むかを同じ文章・用事で比べます。動きの多さを、理解や問い合わせが増える証拠にはできません。

目的が決まったあと、実装方法や使えない環境の表示を調べる場合は、Webデザインの新技術の使いどころと確認手順で技術ごとの役割と対応条件を確認できます。

動きがなくても読める表示を作り、同じ用事で確かめる

動きを加える前に、止まった画面で何を読めるかを決めます。二つ目の提案なら、選んだ項目名、選択位置の印、対応する詳細の三つが分かることを設計要件にします。動く過程を見なかった人も、どの詳細を読んでいるか分かる形を考えます。

停止状態と、動きなし表示の見本をそろえる

図では、項目を選ぶ案と、停止・動きなし状態に残す要素を見ます。同じ項目名・選択印・詳細を残す設計要件であり、実際の軽減表示や操作を確認した画面ではありません。

原寸画像を開く

残したいのは動く過程の記憶ではなく、選んだ項目と詳細を照合できる表示です。動きなしでは印が消える、詳細の題が別の項目になる試作なら、その条件の採用を保留します。表示の関係を直してから同じ項目を選び直します。

開始・停止と、動きを減らす希望を分けて確かめる

WCAGはWebの情報や操作を利用しやすくするための基準です。W3Cの解説では、操作から始まる必須でない動きを無効にできる条件は、達成基準2.3.3のレベルAAAで扱われます。通常のスクロールと追加の動きを区別します。すべての動きがAA違反かを、この条件だけで決めるものではありません。W3C：操作から始まるアニメーション

止める操作を用意するなら、ほかの文章を読む間も止まったままでいられるかを試します。選択位置を合わせている間だけ止まり、離すと再開する仕組みでは、読み続けるための停止にならない場合があります。原票に実際の時間や停止手段の記録はなく、現時点の合否は決められません。

端末の動きを減らしたい希望は、制作側がprefers-reduced-motionというCSSの条件で受け取り、動きを減らす・置き換える設計に使えます。端末の希望だけで全サイトが自動停止するわけではなく、希望が伝わっていない状態も全動作への同意ではありません。MDN：動きを減らす希望を扱う条件

動画や音声も使う場合は、始まる条件、聞こえる音、止める操作も別に見ます。サイトの音声・動画の自動再生と停止の確かめ方で設定と実際の再生を分ける手順を確認できます。

具体的に依頼し、回答後は同じ用事を試す

二つ目の提案なら、目的と残す情報を一緒に伝えます。次は説明用の文例であり、実装済みの仕様や実顧客の依頼ではありません。

選んだ説明項目と、表示中の詳細が同じだと分かる案を見たいです。動く前・選ぶきっかけ・変化・停止状態を示してください。動きをなくしても、同じ項目名、選択印、詳細を残してください。同じ文章と行先で通常表示と軽減表示を比べたいです。

滑り込む案には、「どの情報の何の変化を伝える動きですか。通常表示では足りない理由と、動きをなくした画面を示してください」と質問できます。目的が答えられなければ通常表示で文章を整える案から検討し、理由が具体化されたらその対象だけを追加して比べます。

1. 同じ内容の試作をそろえる。文章・項目名・詳細・行先をそろえます。説明も同時に変えると、何が判断を変えたか分かりにくくなります。
2. 一つの用事を試す。同じ項目を選び、選択位置と詳細を止まった状態で読めるか確かめます。読む前に演出を待たされないかも見ます。
3. 条件を変えて同じ用事を試す。通常と動き軽減、スマホとPCを分けます。キーではTabなどで対象へ移り、部品に適したEnterやSpaceで操作し、選択位置と内容を確認します。未実施の条件へ結果を写しません。
4. 不足を直して同じ条件で再確認する。動かないと情報が消えるなら、表示を戻して試します。開始・停止やキー操作が期待と違う場合は対象と再現条件を制作担当が調べます。試作と公開先の結果は分けて確かめます。

利用者が読み取れたかも適切な範囲で確かめ、表示だけを理解や事業成果の証拠にはしません。今回の実装、端末別表示、キー操作、理解、成果、基準適合は未確認です。

まとめ：動く理由と、止まった画面を一組で決める

動きは、選んだ対象と詳細の関係など、伝えたい変化を助けるときに検討します。すべてを動かすことを出発点にせず、目的を説明できない演出は保留し、文章や静止表示で伝える案も比べます。

採用前に、動く前・きっかけ・変化・停止状態・動きなし表示をそろえます。停止と軽減の条件を分け、同じ情報と行先で通常表示、軽減表示、キー、スマホとPCを確かめます。

相談には対象ページ、見せたい情報、参考案のどの動きが気になるかを添えてください。DREEXYの支援範囲・料金・受付可否は個別に確認します。サイト改修の内容を相談する