Share
お問い合わせアイコン

BLOG

2021.11.12

オープニングアニメーションとローディングアニメーションの役割

オープニングアニメーションとは?

オープニングアニメーションとはホームページを訪れた際に実行されるアニメーションです。
オープニングアニメーションを付与することでユーザーに興味を持たせたり、Webサイトをリッチに見せられます。

しかし美しい、かっこいいという理由でオープニングアニメーションをむやみにつけるものではありません。

ユーザーの目的は素早く情報を得ること。

ユーザーは、サイトにアニメーションを見に来ているわけではなく、情報を知りたくてアクセスしてきています。

仮に10秒のオープニングアニメーションがあるWEBサイトにアクセスした時、ユーザーは長すぎるアニメーションに飽きてブラウザバックをしてしまいます。

そういったことを避けるためには「長すぎず、短すぎず」のオープニングアニメーションを作成する必要があります。

 

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

ローディングアニメーションとはページの読み込みが完了するまでの間、ユーザーに動作の進捗を見せるためのものです。

ユーザーはブラウザの読み込み速度があまりにも遅いと「有害なサイトへアクセスしてしまったのではないか?」「変なサイトにアクセスしてしまったせいで、パソコンが壊れてしまったのではないか?」と危険を察知してページを閉じてしまうことがあるからです。

そういったことを避けるためにもローディングアニメーションを付与することはUX(ユーザー体験)の向上につながります。

 

オープニングアニメーションとローディングアニメーションの違い

オープニングアニメーションとローディングアニメーションについて説明しましたが、ここでは2つの違いについて説明します。

・オープニングアニメーションはページを訪れた際に実行されるアニメーションで、ユーザーの興味をひきつけることができる。ローディングアニメーションはロード中であることをユーザーに伝え安心感を与える。

・オープニングアニメーションの時間はロード時間に左右されないので固定。ローディングアニメーションはロード時間に左右される。

・ローディングアニメーションはページの読み込みが終わるまでの間アニメーションをする。

 

実績紹介

オープニングアニメーションを使用して制作した当社の実績を紹介します。

株式会社MEKERS

ローディングアニメーションを使用して制作した当社の実績を紹介します。

有限会社ワイエルシー

キキョウファーマシーグループ

 

まとめ

オープニングアニメーションとローディングアニメーションについて説明しました。

オープニングアニメーションをブランドサイトや企業サイトに使用すると世界観をイメージさせたり、印象に残りやすくできるので効果的です。

読み込みに時間がかかってしまうページにローディングアニメーションを用いて、ユーザーを不安にさせないことも大切なことです。

どちらのアニメーションにも言えることですが「かっこいい、美しいアニメーションを見せたい!」に重きを置きすぎるとかえってユーザーにとって不便なサイトになってしまうのでいい塩梅で適用させることが大切です。

投稿者イラスト

このブログの筆者

Suzuki

エンジニア