Webサイトにアニメーションは必要あるのか。ないのか。どっちなのか。
まえがき
アニメーションを多く取り入れたWebサイトが好きかどうかのアンケートを取ると、ネガティブな票が多く占めることがよくありますが、それに関して思うところがあったので「Webサイトにアニメーションは必要あるのか」というテーマで自分の思っていることを言語化してみました。
Xでちらっと検索しただけでも動くサイトが嫌い、という方は結構いそうですね。もし「アニメーションはすべて悪」と思っている人がいたらぜひ読んでいただきたいです。
この議論はアプリなどにも言えることですが、私の主なお仕事はWebサイトのフロントエンド実装なので、Webサイトについて書かせていただきます。
また、保険をかけているわけではないですが、私はUI (ユーザーインターフェース) の研究をしている専門家でもないんでもないので、この記事の内容に学術的なものは一切ありません。あくまで個人的な意見として気軽に読んでいただければと思っております。
ちなみに、先日開催されたDIST.42で似たような話をしました。
DISTでは「クリエイティブコーディングはWebサイトのどこに活きるのか」というテーマだったので、この記事よりももう少し範囲が狭い内容でした。クリエイティブコーディング = 動く というわけではないですが、アニメーションを伴うものも多く、そういった事例を取り上げてWebサイトにおけるクリエイティブコーディングの役割と取り入れる際の注意点を話してきましたので、この記事に共通することがたくさんありました。
※本当はこの記事を先に書いてDISTで引用しながら話したかったのですが、間に合いませんでした。
すみません、まえがきが長くなりました。
まず結論
「Webサイトにアニメーションは必要あるのか」と聞かれると「特定の条件下では必要ない」というのが答えになってしまうと思います。すごくふわっとした答えで申し訳ないですが、私の見解ではそうとしか言えないです。
そもそも
Webサイトにおける
アニメーションの役割とは？
ではそもそもWebサイトにおけるアニメーションにはどういった役割があるのでしょうか。
ここで、ブランドコンサル会社 B&H 代表の 今村 玄紀さん のX(Twitter)の投稿を引用させていただきます。
WEBサイトにおけるアニメーションやモーションはブランドの人格を伝える非言語コミュニケーションの一つ。いわば、会話におけるボディランゲージ。誰がどのような人に何を伝えたいのか、どのように受け取って欲しいのか、何が相手にとって居心地が良いのか。だと思います
— Genki Imamura (@leegenki) November 7, 2023
まさにこの通りで、「Webサイトを通して発信者が何を伝えたいのか・どう受け取って欲しいのか」を表現する上でアニメーションは重要な役割を担います。
ではもう少し具体的に掘り下げていきます。
Webサイトにおけるアニメーションが持つ役割で、私が強く意識しているものが大きく分けて4つあります。
この記事では便宜的に、サイトを閲覧しているユーザーを「閲覧者」、サイトで情報を発信・運用している管理者を「発信者」とします。
閲覧者の視線を誘導する
閲覧者の操作で画面内の要素に変化が起きたときに、何が起きているかを通知する
UIもしくはWebサイト全体の使用感を向上させる
発信者が表現したい世界観・雰囲気を演出する
ただし、各々のアニメーションが上記のうちの1つの役割を担っているのではなく、実際は複数の役割を兼任していることが多いです。
それぞれ順番に説明します。
役割1:
閲覧者の視線を誘導する
読ませたい見出しや文章、画像などに対してアニメーションを与えることで、閲覧者の視線を誘導することができます。これは後述の役割4と絡めたものになることもよくあります。
↓私が実装を担当したKUMALEONプロジェクトのAboutページでは、見出しやセクションがウィンドウ内に入ると、アニメーションを伴って出現します。多少過剰にも見えますが、前述の通り役割4も兼ねていて、このサイトのポップで楽しげな雰囲気を作り上げるための演出でもあります。
このようなスクロールでウィンドウ内に入ったことをトリガーとするいわゆるスクロールトリガー系の演出は、特にコンテンツが画面の左右に散らばっているようなデザインの際に閲覧者の視線を誘導することができます。
役割2:
閲覧者の操作で画面内の要素に変化が起きたときに、何が起きているかを通知する
UIを使用する上で、閲覧者のクリックなどによるアクションで画面内の要素に変化があった際に、何かしらのアニメーションがないと何が起こったか理解しにくい場合があります。そこに適切なアニメーションを与えることによって、閲覧者の混乱を防ぎ、快適にサイトを使用してもらえるようになります。
たとえば画面を覆い尽くすようなデザインのモーダルウィンドウ (特にスマホでありがち)の場合、フェードインやスライドインのようなアニメーションがないと、展開したコンテンツが元のコンテンツの上にかぶさったのか、ページが遷移したのかがわかりにくい場合があります。ページ遷移してしまったと勘違いした閲覧者は、ブラウザの戻るボタンを押下し意図しないページに戻ってしまう、という事故が考えられます。
↓の動画は3パターンのモーダルの出現の仕方を比較したものです。
1つ目はアニメーションなし、2つ目はフェードのみ、3つ目はフェード + スライドインのアニメーションを付けています。
↑実際に動作するデモはこちら。
3つ目のように適切なアニメーションを付けることによって、モーダルがコンテンツの上に展開していること (= ページ遷移をしているのではないこと) を閲覧者に伝えることができていると思います。
ただし、このアニメーションがページ遷移時のアニメーションと同一だった場合は混同してしまう恐れがあるので、そのあたりの差別化は必要です。サイト全体で見たときに、このアニメーションがモーダルが展開するときにしか使われない固有のものである必要があります。
※アニメーションだけでなく、デザインでも工夫できるところではあると思いますが、今回はアニメーションのみに焦点を当てています。
もっと単純な例でいうとボタンのマウスオーバーのアニメーションも同様です。何かしら反応がないと、ボタンじゃないのかな？とさえ思ってしまう場合もあります (※ただし厳密に言うとこの場合はアニメーションである必要はありません)。
個人的にはUIのアニメーションは役割2と3を兼任することが多いかと思います。
役割3:
UIもしくはWebサイト全体の使用感を向上させる
前述の役割1や2より少し抽象的な役割と言えますが、「使っていて気持ちいい」という感覚を引き起こすアニメーションがこれです。このアニメーションの出来は、そのままサイトの使用感に直結し、ひいてはコンテンツやサービスの信頼度にまで響いてきます (たぶん)。
この役割は、役割2と兼任することが多いと前述しましたが、後述の役割4ともよく関わることが多いと思います。
↓こちらはUNIEL の代表である野田さん のポートフォリオサイトのWorksページです。
マウスオーバー時に上下方向のマスクで画面右側の画像が切り替わるのと同時に、一瞬矩形が小さくなり、また元の大きさに戻りつつ角度がランダムに変わるので、より画像が切り替わったことがわかりやすくなっていると思います。また、画像はマウスの位置によって角度が変わるようになっています (3Dの動き)。
マスク表現はWebGLを使用してマスクの縁を曖昧にしていますが、動きに関しては複数のシンプルなアニメーション (拡縮・回転) を組み合わせているだけです。このように少しの工夫だけでも気持ちのいい動きを作ることができます。
マウスオーバーしているリンクの方も、テキストが白抜きから色がついた状態へ変化し、右下に矢印がスッと出現します。テキストはマウスの動きに若干吸着したような動きになっています。
このような気持ちいいアニメーションを盛り込むことによって、
ストレスが少ないので使いやすい → また使いたい
という良い印象を閲覧者に持たせることができます。
＊ちょっと脱線 その1
「気持ちのいいUI」
「気持ちのいいUI」の話になると、渡邊恵太さんの著書「融けるデザイン ハード×ソフト×ネット時代の新たな設計論」の中でも取り上げられている「自己帰属感」という言葉がよく引用されます。
↑書籍に関連するnoteの記事も書いていらっしゃいます。
自己帰属感とは「この身体はまさに自分のものである」という感覚であり、運動主体感とは「この身体の運動を引き起こしたのはまさに自分自身である」という感覚である。
マウス操作によって画面上を動くマウスカーソルは自己帰属感が高いものであり、その動きに遅延が発生すると途端に自己帰属感が薄れます。当然マウスカーソルを乗せるボタンも同様で、カーソルを乗せたときの反応に遅延が発生すると、自己帰属感は薄れ、気持ちよさからは遠ざかってしまいます。
それを念頭においた上で、さらに付加的な表現をうまく加えることによって気持ちよさの新しいレベルを設計できると渡邊さんは考られていて、そのような表現を「自己帰属感の余韻表現」と呼ばれていました。
というわけで、例えばボタンのマウスオーバーのアクションは、自己帰属感を損なわないようフィードバックを早くしつつ、「余韻」の動きをつけると、気持ちいいと感じるものが出来上がるのかと思います。
私の尊敬するデザイナー/ディベロッパーの一人である山田啓太さんもその自己帰属感と余韻表現についての興味深いnoteの記事を書いているので参照させていただきます。
山田さんの制作するWebサイトを見るといつもデザインと動きのバランスが抜群に良いなと感じます。まだ見たことのない方は、彼のポートフォリオサイトから実績を覗いてみることをおすすめします。
役割4:
発信者が表現したい世界観・雰囲気を演出する
たとえばゲームや映画を題材にしたWebサイトであれば、実際にそのゲームや映画で使われている表現だったり、その世界を象徴するような表現を取り入れたりします。
↓mount さん制作のPERFECT DAYS 公式サイトはその最たる例の一つかと思います。映画の雰囲気が再現されており、まるで映像作品を見ているかのようです(実装はmountさんの変態ディベロッパー岡部さん)。
ゲームや映画のようにわかりやすいモチーフがなくても、例えば楽しげな雰囲気だったり、高級感を演出したい場合、それぞれに適したアニメーションがつけられます。上記のような複雑で難易度の高い演出が必ずしも必要なわけではなく、単純な演出だったとしてもアニメーションのイージングの選択やduration (アニメーションの継続時間)などの調整によってあらゆる雰囲気を再現できます (このあたりの具体的な話もいつかできれば…)。
↓こちらは私が実装を担当した世界遺産の西芳寺のWebサイトで、サイト内の演出はすべて渡しからご提案させていただいたものです。実際に境内を散策し、感じたことを演出に落とし込むことによって、神秘的な西芳寺の雰囲気をWebサイト上に再現できたと思っています。
メインのビジュアルはWebGLを使用していますが、見出しや年表のアニメーションなどはCSSだけで再現できる比較的難易度の低い実装です。しかし、そこも厳かな雰囲気を壊さないように細かく調整しながら実装しました。
※実際に訪れた際に感じたことは、西芳寺のオウンドメディアであるinto Saihojiにインタビューが掲載されていますので、興味ある方は御覧ください。
また、単純にWebサイトにインパクトを与えて「なんかよくわかんないけどすごい」という感情を閲覧者に起こさせ、強烈に印象に残すこともできます。これを実現するためにはWebGLのようなリッチなグラフィック表現を使用したアニメーションがよく使われます。
私のポートフォリオサイトはまさにインパクト重視で、インタラクティブなオブジェクトが様々に変化し、下層ではそのオブジェクトが役割を持つような構成になっています。
↓こちらはフリーランスの活動を始めた際のポートフォリオサイトです。トップのキービジュアルが様々に形を変えてアニメーションします。下層ページではそのパーティクルがページタイトルになるといった役割を持っています。
↓続いてはは現行の (というか形だけのコーポレートサイトからリンクしている) ポートフォリオサイトで、こちらもキービジュアルのオブジェクトがインタラクティブでかつ様々な形に変形し、Worksページでは各実績の画像に変形します。
どちらもインパクト重視 (で、やりたいことを盛り込んでいる) + 「こんなことできるよ！」という技術力のアピールも兼ねている表現です。
※DISTではWebサイトにおけるクリエイティブコーディングの役割として、この「インパクトを与える」という項目を独立させてましたが、この記事では役割4に統合しています。
↓個人的に最近の「なんかよくわかんないけどすごい大賞」はこちらです。
では、
「アニメーションが必要なくなる特定の条件」
とは何なのか？
先述した結論で、「Webサイトのアニメーションは特定の条件下では必要ない」と述べました。
個人的にはこの「必要がない」という中にも
ない方がよい
なくても問題ない
上記のように2つのパターンに分けられると思っています。
では、「特定の条件」とは一体何なのでしょうか。
「ない方がよい」の条件:
閲覧者にストレスを与えるもの
これのせいで「動くWebサイトは嫌い」という票を多く獲得していると思います。閲覧者のストレスになるようなアニメーションは基本的にはない方がよいです。
「ない方がよい」アニメーションは、発信者がよかれと思ってつけたものでも、実装の質が低いために閲覧者にとってはむしろ邪魔になってしまいます。具体的には以下のようなものです。
処理負荷が高く、パフォーマンスを著しく低下させているもの
タイミングやスピードが適切に実装されていないもの
1つ目は明白です。どんなに魅力的な表現であっても、処理負荷が高くマウス操作やスクロールがスムーズにできないものはストレスでしかありません。アクセスして数秒で離脱されてしまう可能性もあります。
では、2つ目の適切に実装されていない例をいくつか挙げてみます。
↓3種類のボタンのアニメーションを比較しています。一番左のBad Buttonのアニメーションに注目してください。
↑実際に動作するデモはこちら。
Bad Buttonは、マウスオーバー時のアニメーションに遅延が発生しているように見える (マウスオーバーによってアニメーションは即座に開始しているが、イージングが適切でない) ため、もっさり重たい印象を受けてしまい、ストレスを感じます。
真ん中のNot Bad Buttonは悪くないですが、イージングとマウスオーバーのときとマウスアウトのときのアニメーションdurationを変更し改良したものがGood Buttonです。マウスを乗せたときにより早く反応しているように見えるのと、マウスアウトの際に余韻を感じさせ、よりメリハリのある気持ちい動きになっているのかなと思います。連続でマウスオーバーするとその違いが歴然としています。
ここでのGood・Not Bad Buttonはあくまで主観で、サイトのデザインなどによって適切かどうかは変わってきますが、Bad Buttonは明らかに不適切な実装であることがわかるかと思います。
続いて、よくあるスクロールトリガー系のアニメーションです。
↑実際に動作するデモはこちら。
Bad Animationの方は、アニメーションが開始するタイミングとアニメーションのdurationが遅く、文字ごとのdelay (アニメーションが起こるまでの待ち時間) が長いので、テキストが表示し切る前に画面外にスクロールしてしまいます。よって少し待たないと全てのテキストが表示されません。
これでは閲覧者がイライラして離脱してしまうかもしれません。
これらのように、明らかに実装方法に問題があるものに関しては「ない方がいい」です。これを放置したまま公開するのは危険です。実装を改善するか、アニメーション自体を取ってしまったほうがよいです。
ただし、役割4において「操作性を犠牲にしてでも表現したいことがある」という発信者の強い思いがある場合は例外となりますが、この場合もしっかり議論・検証した上で動きをつけないと、見せたい部分を見てもらえない場合があるので、注意が必要です。
「なくても問題ない」の条件1:
UIに直接関係ないもの
これは主に役割1と4のアニメーションであることが多いかと思いますが、「情報を閲覧する」というWebサイトの本来の機能から離れたところにあるアニメーションは、なくても情報の閲覧は問題なくできます。
「なくても問題ない」としていますが、発信者が表現したいことが欠落することにはなるのかと思います。
「なくても問題ない」の条件2:
閲覧者の慣れにより、
何が起こるかを事前に予測できる場合
閲覧者が日々Webサイトを使用する中で、よく遭遇する機能や挙動を学習し慣れることによって、初訪問時のサイトであっても動きを予測できる場合があります。
これはデザインの流行にも左右されます。たとえばスマホのハンバーガーボタンや、画面下に固定されているタブバーなどが例として挙げられます。これらには、役割2や3のアニメーションが実装されていることが多いです。
スマートフォン登場以前はあまり一般的ではありませんでしたが、今ではあらゆるWebサイト・アプリに使用されており、「ハンバーガーボタンをクリックしたらメニューが現れる」「タブをクリックしたらコンテンツが切り替わる」ということを多くの人が予測できるようになりました。
この場合、UI アニメーションが省略されていても、閲覧者は問題なくサイトを使用できると言っていいと思います。
今のところ、慣れていない人に合わせて一律でUIアニメーションを付与しているサイトが数多く見受けられるので、そのような対応が一般的なのかなと思われます。つまり、慣れている閲覧者に対しては特に対応しないということです。この対応に関しては、アニメーションが適切に実装されていればほとんど問題になることはないと思っています。ただし、適切に実装しなければ「ない方がよい」に成り下がります。
アニメーションを多く活用しているサイトではほとんど見かけませんが、慣れている閲覧者に対しては、アニメーションをOFFにできるオプションがあったりすると親切なのかもしれません。
＊ちょっと脱線 その2
CSSのprefers-reduced-motionの話
CSSにprefers-reduced-motionというメディア特性があります。
prefers-reduced-motion は CSS のメディア特性で、ユーザーが余計な動きを最少化するよう要求したことを検出するために使用します。
OS側で視覚効果を減らすようなオプションを設定しているかどうかを検出できるものです。これを使用して、OSの視覚効果を減らすオプションがONのときにはCSS側でもアニメーションを切るといった対応をすることができます。
私もこの対応をしようとしたことがあったのですが、「OSの設定で視覚効果を減らしているけど、WebサイトのアニメーションがOFFになることを期待していない」という閲覧者に対して、発信者が表現したいWebサイトの本来の姿を提供することができないという問題があったので、採用を見送りました。
この機能を取り入れるのであれば、Webサイト側の設定で
OSの設定に合わせる (prefers-reduced-motionを使う)
(OSの設定にかかわらず) アニメーションON
(OSの設定にかかわらず) アニメーションOFF
というオプションがあるといいのかなとも思いますが、通常のWebサイトでそこまでするのは工数に見合わないのかなと思いました。
話を戻します。
同じサイトに複数回訪問することも当然そのサイトの挙動を学習する機会になります。
たとえばアクセスすると、ロゴアニメーションが再生されてからコンテンツが表示されるコーポレートサイトがあったとします。
すでにこのサイトに訪問済みの閲覧者が会社情報などに素早くアクセスしたい場合、ロゴのアニメーションが終わってからでないと情報にアクセスできないので、閲覧者がストレスに感じてしまう場合があります。
これの対策ですが、役割4が絡むと発信者側の対応が割れます。「サイトのコンセプトを再現する上で欠かせないのでどんな場合でも必ず必要」とするか「スキップボタンを用意する」とするか「一度アニメーションが再生したら、cookieなどに保存し、再訪問時は再生しない」とするなど、サイトによってさまざまな対応が考えられると思います。
前述の通り、アニメーションの役割は一つではないため、サイトによってどのような対応を取るかは当然バラバラになりますが、対応によっては「ない方がよい」になってしまうので注意が必要です。
結局何が言いたいのか
これらをふまえて結局私が何を言いたいのかというと、どんなにいいデザインだったとしても、アニメーションの役割を理解して適切に実装しないとWebサイトの出来栄えは残念になります。これを私は「デザインを殺す」と言っています。
「デザインを殺すな」というほぼ自戒の念を込めた記事となってしまいました。
最後まで読んでいただきありがとうございます。
サポートいただければ、レッドブルを飲んでより頑張れると思います。翼を授けてください。