ウェブサイトの動きはユーザーを魅了するか、遠ざけるか

動画クリエーター兼コーダーの川島です。
最近、多くのウェブサイトを見ていて思うことがあります。それは、テキストがふわっと出現するあのアニメーション、目に見えて減ってきたなあ…ということ。

というわけで今回は「そのアニメーション本当に要る？」という話題で記事を書いてみようと思います。

＼ノベルティのホームページ制作実績はこちら／

アニメーションとは

ウェブサイトにおける「アニメーション」とは、例えば要素が動きを伴って出現したり、クリックやスクロールに応じて要素の見た目が変化する過程を連続的に描画した動作そのものを指します。

ウェブサイト上にただテキストや画像を掲載するだけでなく、利用者の動作に応じてコンテンツが変化する（アニメーションする）ことで、時間的な前後関係や繋がりを示すことができます。
また、要素がアニメーションすることによって、利用者へ実際にウェブサイトを触っている感覚を与え、コンテンツへの注意を引くことができたり、新しいユーザー体験を提供することも可能です。

アニメーションはウェブサイトにとって必要不可欠な概念です。

近年見直されているウェブアクセシビリティ

ウェブアクセシビリティに関する取り組みが民間企業でも義務化されることとなった2021年以降、ウェブサイトの在り方が見直されている中で「よりシンプルに、誰にでも分かりやすく」といった考え方に基づくウェブサイトが増えてきたように感じます。

アニメーションという観点でこの話題を受け止めてみると、大味にいえばアニメーションさせること自体がウェブサイト制作の選択肢から外れてきている印象です。

法改正に伴い、制作者として、これまでより更に利用者の立場に立った制作を心がける必要があります。そして、「利用者」という言葉が示す範囲は広くなっているという自覚を持つことが肝要です。

アクセシビリティにおけるアニメーション

アクセシビリティにおいて、過度なアニメーションは、コンテンツへの集中を阻害してしまったり、注意力を散漫にさせてしまうきっかけを生む可能性もあるので実装の際は注意が必要です。

もし過度なアニメーションを実装する必要がある場合は、メディアクエリを使用して、そのアニメーションを無効にできる余地を残し実装する必要があります。

ウェブサイトの目的を考える

ウェブサイトとは、言わずもがな情報を伝えるメディアであり、利用者にとっては使う（活用する）メディアであるはずです。
つまりウェブサイトが担う本来の目的は「伝えたい情報をきちんと伝えること」であり、それを利用者が使いやすい形に整形することがウェブデザインの本質です。

とするならば、ウェブサイトを作る際には、
「どんな情報を伝えたいのか」「どんな手段で伝えるべきか」この2点の精査が最も大切であると言えるでしょう。

ウェブサイトを通して伝わる情報は大体「テキスト」

伝えたい情報の種類は大きく「テキスト情報」と「イメージ情報※」に分けられるでしょう。

情報の種類をこのように大別したとき、ウェブサイトはテキスト情報を伝えるのに優れているといえます。これは、ウェブサイトが本やパンフレット等と同様に、利用者が動作の主導権を持つ静的な性質を持つ媒体であるからです。

また、ウェブサイトにイメージ情報が掲載されたとしても、それが何を示しているのかを補足しなければならず、その補足は必ずテキストによって行われます。

すなわち、テキスト情報を伝える、テキスト情報が伝わる、ということが、ウェブサイトという媒体にとって大前提の性質であると言えます。制作者は、この前提の上に立ち、最適な手段を選択していく必要があります。

※イメージ情報とは、図やグラフ、絵によって示される情報です。

テキスト情報を伝えるのに相応しい手段はアニメーションではない

ここで本題です。
テキスト情報を伝えやすくするという観点で、アニメーションさせることは有効な手段であるのでしょうか？すなわち「動いていることで万人が読みやすくなるテキスト」は果たして存在し得るでしょうか。

僕は、正しい文法を用い書かれた適切な長さの文章であることや、誰でも見やすい文字の大きさ・色・フォントが採用されていること以上に、テキスト情報を伝えやすくする手段はないと思っています。

テキストを読むスピード、読める長さ、読み始める位置…これらはすべて利用者の主観に委ねられています。テキスト情報をアニメーションさせることは、基本的にこれらを阻害します。よってテキスト情報を伝える手段としてアニメーションさせることは最適ではあるとは言えないでしょう。

映像化したウェブサイトが伝える美しさと面白さ

ここまで、アニメーション不要説のような見解を示してきましたが、前提として、アニメーションすることはアクセシビリティを必ずしも阻害するわけではありませんし、新しいUXを生み出すことの価値は変わらず存在し続けています。
芸術的な美しさや面白さは、わかりやすさや使いやすさと相反する側面があるのです。

アクセシビリティの観点で論じるとどうしてもアニメーションは排除されがちな要素ではあるのですが、例えば、文字を大きくするボタンを設けてアクセシビリティを担保したり、アニメーションを無効化することができるようにしたり…それらを両立させる手段やアイデアはいくらでも存在するはずです。

ともあれ最も大切なことは、目的に対して最適な手段をとることです。

目的に対して最適な手段をとる

例えば、冒頭でお話ししたテキストがふわっと出現するあのアニメーションに関して言えば、個人的には必要ないのではと思っています。なぜなら、テキスト情報を隠す意味も、ゆっくり出す意味も、それによるUX向上も見込めないと感じるからです。

このようにアクセシビリティへの意識改革が起こったことで、目的に対する無駄淘汰論が、近年のウェブサイトの根幹になりつつあるように感じます。

無駄を楽しむことがなくなってしまうと淡泊なクリエイティブばかりが量産されそうで少々悩ましいところですが、しかしこういった変化の流れを辿ることが、新しい表現を生み出す動機となり、また新たなトレンドの波が寄せるのだろうと思います。
少なくともこれまでそうしてきたら脳死で実装…という、そのウェブサイトが担う目的に対し、それを妨げるだけの中途半端な手段をとることは可能な限り省いていきたいと思っています。

「わかりやすく使いやすい」がウェブサイトに求められる本来の性質です。
もしもそこから逸脱する必要が出てきたときは、そうすることの目的と、それに相応しい手段としてのアニメーションを検討した上で、ひとつひとつ採択していく必要があると感じています。

私たちノベルティは、「どんなサイトにしたいか」だけではなく「顧客に何を伝えたいのか」「見た人にどんな行動を期待するのか」など、根本的な課題や未来像をベースにWebサイトの企画・設計を行なっています。

Webサイト制作・アプリ開発のフローはデザインや構築に目が行きがちですが、基盤となる「調査」「分析」「企画・設計」のフェーズを重要視しています。

企画やその前の段階からご相談いただくのがおすすめです！

＼ご相談はこちらから／