《デザイン基礎講座》Webサイトにおける「アニメーションが活きる場面」の見極め方

UIなどを動かすアニメーションは、とても目を引く表現になるがゆえに、必要性のあるところのみに使うことが大切です。適切に使うと、目立つだけでなく、サイトのユーザビリティ向上にも役立ちます。

操作や状況理解の助けに　動かす効果と役割

必要な場面で心地よい動きを

アニメーションは、強調した文字や画像以上に目立つものです。そのため、動かすべき妥当性があるかをしっかり検討しなければなりません。目立たせる必要のないものが動くと、ユーザーはつい意味のないものを見てしまい、本来の閲覧目的のジャマになり悪印象となってしまいます。ユーザーに目を向けさせたい場面に絞って利用するといいでしょう。アニメーションによって良い効果が生まれやすいのは、状況変化をわかりやすくするときです。例えばプログレスバーでダウンロードの進捗を伝えるといったように。

また、アニメーションは、実際の物理法則に則った動きにすると心地よく感じられます。あえて機械的な動きを付与する狙いがなければ、リアリティのある動きをつけるのがよいでしょう。ただし、あまり長く待たされるのはストレスになるので、表示の速さと動くことの効果のどちらを取るかはよく考える必要があります。

直感的な操作を実現　変化の過程を見せる

ユーザビリティを向上

アニメーションをつけるか判断する一つの基準として、ユーザビリティが向上することが挙げられます。例えば画面がAからBへと変化をするとき、その変化の過程をアニメーションで表現すると、ユーザーが今どの位置を見ているのかがわかりやすくなります。身近な例としては、スマホの画面で開きたいアプリのアイコンをタップすると徐々にアイコンが拡大して画面いっぱいに展開するといった表現があります。一瞬で別の画面に切り替わると、何が起きたかわからずユーザーを混乱させてしまう場合がありますが、状態の変化をアニメーションで表現することで、何が起きて今どこを見ているのかを把握しやすくできます。また、iPhoneでアイコンを長押しすると左右に揺れる動きをするのも、「今アイコンの配置や表示を変更できる状態です」ということを明示し、ユーザビリティ向上になっています。

Webサイトの場合では、例えば画像の左右に矢印アイコンを配置し、右の矢印をクリックすると次の画像が表示されるというUIがあったとします。このとき、クリックすると次の画像に一瞬で切り替わって表示されるよりも、アニメーションで左から右へとスライドして切り替わると、コンテンツがどう遷移しているのかがわかりやすくなり、本のページをめくるような感覚で操作できます。またそうすることで、左の矢印アイコンをクリックすると前の画像が表示されるという、「前の状態に戻すためには逆の操作をする」ということが伝わり、ユーザーは直感的に操作できるようになります。

教えてくれたのは…

Text：平田順子
※本記事は、「Web Designing 2024年2月号」の記事を一部抜粋・再編集して掲載しています。