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

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

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

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

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

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

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

このように、普段意識をしていなくてもいろいろなアニメーションがあることが分かるかと思います。
<img width="200" alt="WEBサイトを見る家族" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952194/4cc6b9c5-297f-c35a-7437-68c210ea06e1.png">

# アニメーションの作成手法
アニメーションの作成方法にもいろいろあります。
例
- Adobe Flash
- GIFアニメーション
- CSSアニメーション

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

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

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

### **メリット**
- ページを訪れた方の目を引くことができる。
- 他のWEBサイトやLPと差別化を図ることができる。
- 適切な場所に使うと、売上につなげることができる（はず）。
<img width="150" alt="メリット" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952194/7f684d99-682e-2d06-1356-402c3866ca1c.png">

### **デメリット**
- （使いすぎると）ページ速度が遅くなることもある。
- （使いすぎると）何が重要なのか分からず、ページ全体がうるさくなってしまう。
- 使う箇所を間違えると、ページを訪れた方が離れてしまう可能性も…
<img width="150" alt="デメリット" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952194/02ba5eb0-8518-dd9a-d7c4-245b00e715f2.png">


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

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

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

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

:::note info
**商品を販売するLP：購入ボタン（ご購入はこちら）**
:::
:::note info
**会員専用のWEBサイト：会員登録を促すボタン（会員登録はこちら）**
:::
<img width="100" alt="チャンネル登録" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952194/37585edb-4785-4845-a103-91179507f697.png">　<img width="100" alt="資料請求ボタン" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952194/5bcc89ec-32f6-c294-e564-ae37ccc942cd.png">


- **メインビジュアル**
ページを訪れた方が最初に目にするのが「メインビジュアル」です。
メインビジュアル内に設定することで**インパクトを与え、興味を持ってもらう**ことができます。
<img width="100" alt="ネットサーフィン" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952194/83ade476-1183-df76-14b2-27cfe6765aca.png">

- **アイコン**
コンテンツの補足情報として「アイコン」を載せることもあるかと思います。
**アイコンの種類や使用目的によって設定してみる**と良いでしょう。
<img width="100" alt="WEBサイトを見る家族" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952194/4d756c22-24c7-ff4c-3b27-896b556e0d71.png">

- **イラストなどの装飾部分**
**見てほしい文言の近くにイラストを配置**し、イラストに対してアニメーションを設定するのも効果的です。
<img width="100" alt="WEBサイトを見る家族" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952194/a6daadbd-0da6-c9ee-d941-009a786675ed.png">


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

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

- **ボタン**
ただボタンを配置するよりも **「光らせる」** などのアニメーションを設定することで、目を引くことができます。
<p class="codepen" data-height="188" data-default-tab="result" data-slug-hash="xxyeQBJ" data-user="ribra17" style="height: 188px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ribra17/pen/xxyeQBJ">
  button</a> by yuki (<a href="https://codepen.io/ribra17">@ribra17</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
</p>

- **吹き出し**
ボタン自体にアニメーションを設定しなくても **「吹き出し」** などの補足となる要素にアニメーションを設定することで目を引くことができます。
<p class="codepen" data-height="257" data-default-tab="result" data-slug-hash="gOByZMP" data-user="ribra17" style="height: 257px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ribra17/pen/gOByZMP">
  balloon</a> by yuki (<a href="https://codepen.io/ribra17">@ribra17</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

- **イラスト（画像）**
某ゲームっぽいページを作成した時に使用したアニメーションです。
ページのイメージによって設定するとよいかと思います。
※今回はテキストを動かしてみました。
<p class="codepen" data-height="188.5" data-default-tab="result" data-slug-hash="JjmVepv" data-user="ribra17" style="height: 188.5px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ribra17/pen/JjmVepv">
  game</a> by yuki (<a href="https://codepen.io/ribra17">@ribra17</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


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

https://coco-factory.jp/ugokuweb/


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