WEBサイトのアニメーションについて

はじめに

WEBサイト制作やページ制作において、アニメーションを使用する機会が多くなってきました。
（自社のサービスでもあらゆるページで使用しています！）
使用する意味や、どこに（どのように）設定するのが良いのか、改めて記事にまとめることにしました。

WEBサイトのアニメーションって？

WEBサイトのアニメーションには、どのようなものがあるのでしょう。
大きく分けると以下が挙げられます
※以下は一例です。

• ページを「訪れたとき」のアニメーション
  例：画像やイラストなどが最初から動いている。

• ページを「読み進めたとき」のアニメーション
  例：ページをスクロールすると、ふわっと内容が表示される。

• ページを訪れた人が、「何か行動を起こしたとき」のアニメーション
  例：ボタンをクリックしようとする（オンマウス）とボタンの色が変わる、ハンバーガーメニューをタップするとメニューが開く。

このように、普段意識をしていなくてもいろいろなアニメーションがあることが分かるかと思います。

アニメーションの作成手法

アニメーションの作成方法にもいろいろあります。
例

• Adobe Flash
• GIFアニメーション
• CSSアニメーション

WEBのお仕事を長くされている方は「Adobe Flash」や「GIFアニメーション」を使っていた方も多いかと思います（筆者も以前 Flash を作成していました）。
自社のサービスでは、CSSアニメーションを使うことが多いです。

なぜ「必要」なのか？

実際のところ「必要」ではありません。
アニメーションが無くても、ページとしては成り立つからです。
では、なぜ設定するのでしょうか。
メリット・デメリットについて考えてみました。

WEBアニメーションを設定するメリット・デメリット

メリット

• ページを訪れた方の目を引くことができる。
• 他のWEBサイトやLPと差別化を図ることができる。
• 適切な場所に使うと、売上につなげることができる（はず）。

デメリット

• （使いすぎると）ページ速度が遅くなることもある。
• （使いすぎると）何が重要なのか分からず、ページ全体がうるさくなってしまう。
• 使う箇所を間違えると、ページを訪れた方が離れてしまう可能性も…

どこに設定したらいいの？

それでは、ページ内のどこに設定するのが望ましいのでしょう。

• WEBサイトやLPで「ゴール」となるところ
  サイトを訪れた方に、最終的にどういうアクションを起こしてほしいのかを考え、クリック（タップ）してほしいところに設定します。

例えば、以下のような場所が良いでしょう。

商品を販売するLP：購入ボタン（ご購入はこちら）

会員専用のWEBサイト：会員登録を促すボタン（会員登録はこちら）

　

• メインビジュアル
  ページを訪れた方が最初に目にするのが「メインビジュアル」です。
  メインビジュアル内に設定することでインパクトを与え、興味を持ってもらうことができます。

• アイコン
  コンテンツの補足情報として「アイコン」を載せることもあるかと思います。
  アイコンの種類や使用目的によって設定してみると良いでしょう。

• イラストなどの装飾部分
  見てほしい文言の近くにイラストを配置し、イラストに対してアニメーションを設定するのも効果的です。

どんなアニメーションを設定したらいいの？

問題はここですよね（筆者も毎回悩んでいます）。
必ずしもこれがいい！というものではありませんがいくつかご紹介します。

• ボタン
  ただボタンを配置するよりも 「光らせる」 などのアニメーションを設定することで、目を引くことができます。

See the Pen button by yuki (@ribra17) on CodePen.

• 吹き出し
  ボタン自体にアニメーションを設定しなくても 「吹き出し」 などの補足となる要素にアニメーションを設定することで目を引くことができます。

See the Pen balloon by yuki (@ribra17) on CodePen.

• イラスト（画像）
  某ゲームっぽいページを作成した時に使用したアニメーションです。
  ページのイメージによって設定するとよいかと思います。
  ※今回はテキストを動かしてみました。

See the Pen game by yuki (@ribra17) on CodePen.

参考サイト

以下は、普段参考にさせていただいているアニメーションCSSのサイトです。

まとめ

いかがでしたでしょうか。WEBアニメーションは「適切な量」を、「適切な場所」に設定しましょう。
参考にしていただければ幸いです。