見出し画像

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

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

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

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

WEBのアニメーション

画像1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

画像2

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

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

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

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

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

具体的に
どういったコードやプログラムを使えば
こういった表現ができる

という現実味の考慮
しながら動きについて
考える必要があります。

構成について

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

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

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

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

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

まとめ

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

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

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

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

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


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

嬉しすぎて何度も通知見ちゃいます!
12
芸術大学で学生をしながら、Webディレクション、プロモーションを企画のお仕事をしています。お仕事を経験する中で感じた事をnoteでまとめると同時に就活生でもある私が、現場を見ながら感じた事などを伝え、少しでも就活生の不安についてもケアできればと考えています。

この記事が入っているマガジン

Webと企画のあいうえお
Webと企画のあいうえお
  • 32本

webディレクションとプロモーション企画について学ぶ為のwebマガジンです。基礎的なところから実用的な部分まで一つずつフォーカスを当て、実例を交えて紹介していきます。

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。