webと企画 #21 画期的なローディングアニメーション

こんにちは、クリエイティブディレクターの
高宮と申します！

第20回目の記事では
「知っておきたいマーケティング用語②」
という部分についてお話いたししました。
前回の記事はこちら
https://note.com/chiharunoippo/n/n341dc841c3ca

第21回目の記事では
「画期的なローディングアニメーション」
についてお話ししようと思います。

WEBのアニメーション

webにおけるアニメーションは
サイトのイメージ向上だけでなく、
他のサイトとの差別化などにも
効果があるため
WEBクリエイターにとっては
今や欠かせない存在となりました。

例えば、
読み込みの間に表示される
少しのアニメーションが存在するだけで
ユーザーの直帰率を下げることができます。

アニメーションにも様々な種類があり、
それを学ぶことで、表現の幅を
さらに広げ、サイトの効果を
最大限にできます。

今回はその中の１つである、
ローディングアニメーションに
ご紹介しようと思います。

ローディングアニメーションとは？

ページを訪問、移動した際などに
読み込みを行なっている間表示される
ローディングアニメーション。

サイトに入る前に
一番最初にユーザーがみる
アニメーションです。

このアニメーションを制作する
主な目的は
待たせているという感覚
を与えないためのものです。

ゲームなどではよく
「NOW LOADING ...」と
表示されることもありますが、

例えばもし、
読み込みの間に画面が
真っ白、または真っ黒の状態だった
としましょう。

待たされているストレスや
本当に処理が進んでいるのか
不安を感じませんか？

ゲームの場合は特に
ローディングに時間がかかって
しまうことはどのゲームでも
基本的にあり得ますが、

WEBの場合は特に、
ユーザーが１つのサイトを
閲覧する時間は数十秒だと
言われています。

そのため、
ユーザーがサイトを検索してから
クリックし閲覧して次のアクションを
起こすというところまでを
ユーザー体験として設計する必要があります。

ローディングアニメーションの作り方

基本的にはCSS、Javascriptなどの
言語を使ったプログラミングで
表現されることが多く、

After effectsやAnimateなどで
SVGのアニメーションとして
書き出すことも可能です。

しかし、
これはWEBのどの機能についても
言えることですが、
プログラミングで実装されるからと
いってエンジニアに全て
任せてしまうのではなく

構成についてや表現したい動きについて
ディレクターやデザイナーも
一緒に考えていく必要があります。

ここで注意したいのは
ただかっこいい動きを、
作りたいと提案するのではなく

具体的に
どういったコードやプログラムを使えば
こういった表現ができる、
という現実味の考慮を
しながら動きについて
考える必要があります。

構成について

アニメーションとはいえ、
難しい動きやエフェクトを
使うといった必要はなく、

・ロゴを表示する(表示の仕方を工夫する)
・点滅させる
・ロードの進み方を表現する

など、シンプルなものでも
ローディングアニメーションに
相応しいものが多く存在します。

見入ってしまうような物を
作らないと...というよりは
そこにローディングアニメーションが
あるという事に意味があります。

表現できないと遠ざけるのではなく、
少し飾りを付けるつもりで
積極的にチャレンジ(実装)したい、
アニメーションと言えます。

まとめ

ローディングアニメーションは
最初に見てもらう
重要なアニメーションですが、
だからこそ、役割が重要であり
その内容を複雑にする必要はありません。

シンプルなものであっても
あるか無いかだけで、
ユーザーの直帰率やサイトイメージが
大きく変化するため、
積極的に実装していくべきです。

エンジニアだけのものではなく、
デザイナーやディレクターなどの
WEBに携わる人も一緒に
表現の幅を増やしていく事が
できれば、新鮮なユーザー体験を
作り上げる事ができます。

今回は
「画期的なローディングアニメーション」
についてお話しました。

ここまで読んでくださった皆様、
ありがとうございました。
次回も、よろしくお願いいたします！