ホームページを作るとき、「アニメーションってつけた方がいいのかな？」って思ったことありませんか？
スクロールしたら文字がふわっと出てきたり、画像がスーッと現れたり、見ていてちょっとワクワクしますよね。でも実は、やり方を間違えると逆効果になってしまうこともあるんです。
今回は「アニメーションってどうすればいいの？」という疑問に、正直にお答えします。
アニメーションが多すぎると、うるさいサイトになる
まずちょっと想像してみてください。
カフェに入ったら、あちこちでポップが動いていて、BGMが大音量で流れていて、店員さんが次々に話しかけてくる。。。
情報が多すぎて、何に注目すればいいかわからなくなりますよね。
ホームページも同じで、動く要素が多すぎると「視覚的にうるさい」状態になります。見ている人は疲れてしまって、肝心なサービスや商品の内容が頭に入ってきません。
「おしゃれにしたかったのに、なんかごちゃごちゃして見づらい…」
そうならないために、アニメーションは「量」と「場所」を意識して使うことが大切です。
どこにアニメーションをつけるべき？
つけるなら、見出しや画像だけに絞るのがおすすめです。全部の要素に動きをつけるのではなく、ポイントを絞ることでメリハリが生まれます。
全部の文章や要素に動きをつける必要はありません。むしろ「ここぞ！」というポイントだけに絞ることで、メリハリが生まれてスッキリした印象になります。
スピードも大事
アニメーションを設定するとき、意外と見落としがちなのがスピードです。
ゆっくりふわっと出てくる演出はきれいに見えますが、スクロールのスピードが速い人だと、アニメーションが始まる前に通り過ぎてしまいます。
コンテンツを読んでいるとき、人は思ったよりもサクサクスクロールしています。なので、テンポよくパッと表示されるくらいのスピード感が、実用的にはちょうどいいです。
アニメーションで文字が読めないときの対処法
スクロールアニメーションを入れたら「なんか文字が見えなくて読めなかった」という声をもらったことはありませんか？
透明な状態からフェードインするアニメーションだと、スクロール途中のタイミングによっては文字が表示されず、内容が伝わらないまま通り過ぎてしまうことがあります。
おすすめの対処法は、アニメーション前から文字を見えるようにしておくこと。
具体的には、透明度を0（完全に透明）からスタートするのではなく、少し見えている状態からアニメーションを始める方法があります。動きはあくまで「演出」で、情報はいつでも届いている——そんな設計にしておくだけで、読みやすさがぐっと変わります。
以下のサイトはお客様が過度なアニメーションを懸念されていたため、見出しはグラデーションが動くようなアニメーションにさせていただきました。
その結果アニメーション開始前でも見出しが読めるようになっております。
ブランディングにこだわるなら、がっつり入れるのもあり
アニメーションは入れすぎないほうがいいという話をしましたが、例外もあります。
ブランドのイメージや世界観をしっかり伝えたいサイト（ハイブランドのショップや、デザイン系・クリエイター系のサービスサイトなど）は、むしろアニメーションをしっかり作り込んでいることが多いです。
動きそのものが「このブランドはこういう雰囲気です」というメッセージになるからです。
ただしこの場合も、「なんとなくつけている」のと「意図して作り込んでいる」のは全然違います。 ブランドのトーンに合った動きや一貫したテンポ感で統一感が出てかっこよく見えるんです。
「うちのサイトもブランドっぽくしたい！」と思ったときは、アニメーションの量よりも、まずブランドのイメージを言語化するところから始めてみてください。
以下のサイトはブランドにこだわってがっつりアニメーションを追加したサイトになります！
まとめ
アニメーションは「なんとなく全部につける」よりも、「どこに・どんな動きを・どのくらいの速さで」を意識して使うのがコツです。
シンプルに絞ったほうが、結果的におしゃれでスムーズなサイトになりますよ。
もしアニメーションがあるサイトを欲しい方はお問い合わせいただければ、無料でお話をお伺いすることが可能です。
