ページ遷移アニメーションのメリットとは？3つの種類と参考事例を紹介

ページ遷移のアニメーションとは？｜サイトに動きを付ける

ページ遷移アニメーションとは、WEBサイトを開いたときに文字や画像が動き出す演出です。WEBサイトに動きのアクセントをつけることで、訪問した人に企業や商品をアピールしやすくなります。

ページ遷移アニメーションは、動画を作成するわけではありません。HTMLやJavaScript・CSSを組み合わせて、アニメーションの視覚効果を生み出しています。

ページ遷移のアニメーションを構築する3つのメリット

ページ遷移のアニメーションを構築するメリットは、以下の3つです。

ユーザーを惹きつける

ページ遷移のアニメーションを構築すると、WEBサイトに動きが生まれるためユーザーを惹きつけられます。アニメーションで伝えたいことをアピールでき、インパクトもあるため記憶に残りやすくなるでしょう。

企業サイトの場合は企業イメージの向上が望め、商品サイトであれば商品の魅力を伝えやすくなります。アニメーションがあればWEBサイトの評価が高まり、宣伝効果を発揮できるでしょう。

ユーザーの離脱を防ぐ

WEBサイトを訪れてすぐにキャッチーなアニメーションが表示されると、ユーザーの離脱を防げます。WEBサイトが表示されるまでの時間を稼ぐ点もメリットです。

メインコンテンツが表示されるまでの間にアニメーションが流れることで、読者の興味を惹き、サイトに長く滞在してもらいやすくなるでしょう。

企業や商品のイメージをアピールできる

企業や商品のイメージを存分にアピールできるのは、ページ遷移アニメーションのメリットです。画像や文字だけではなく、アピールしたいものの特徴をアニメーションでユーザーに伝えられます。

たとえば、イノベーションを手掛けている企業サイトであればスマートでスタイリッシュな画像が効果的でしょう。子供向けの洋服を扱っているサイトでは、ポップでかわいらしいアニメーションがユーザーを惹きつけます。

アニメーションでイメージをアピールできると、企業価値の向上や商品の購買につながります。

ページ遷移のアニメーションを構築する3つのデメリット

ページ遷移のアニメーションを構築する3つのデメリットは、以下のとおりです。

サイト構築にスキルが必要になる

WEBサイトにアニメーションを導入するためには、HTML以外に専用のコードを埋め込む必要があります。

複雑なシステムを構築するプログラミングほど難しくはありませんが、CSSやJavaScriptのスキルは身につけなければなりません。画像と文字だけのWEBサイトを作成するより時間もかかります。

ユーザーにとって魅力的なサイトを作成するために、ページ遷移アニメーションのテクニックを学びましょう。

ページ表示スピードが遅くなる

ページ遷移のアニメーションでは、画像や動画を導入しています。通常のHTMLコードよりも起動に時間がかかり、ページの読み込みが遅くなります。インターネットの接続状況が悪いユーザーにとっては、表示が遅くなりストレスに感じることがあるでしょう。

インターネットの接続状況が悪いユーザーがストレスで離脱しないよう、ページ遷移のアニメーションが重くならないように工夫する必要があります。

複雑にすると意図が伝わらなくなる

伝えたいことをページ遷移のアニメーションに詰め込みすぎると、かえって意図が伝わりません。複雑で意図が伝わらないサイトはユーザーが離脱しやすくなります。アニメーションを構築するときは、短い時間でシンプルなアピールを心掛けましょう。

ページ遷移アニメーションの種類

ページ遷移アニメーションは、以下の3種類です。

スライドイン

ページ遷移をしたときに、画面の上下左右のいずれかから流れるように画像が入ってくる方法です。画像を同じ方向から流れるようにする場合と、異なる方向から流す場合があります。

シンプルなアニメーションですが、躍動感のあるWEBサイトになります。スライドインする方向と画像をうまく組み合わせて、ユーザーに印象的なWEBサイトを構築しましょう。

フェードイン

画像が動くのではなく、イメージの一部分から全体を表示させる方法がフェードインです。テキストを一文字ずつ表示でき、動きのあるメッセージを伝えられます。

写真をフェードインすると、徐々に全体像が見えてくるため、ユーザーにやわらかいイメージを与えます。テキストと画像を組み合わせて使え、幅広いアニメーション効果を生み出せるでしょう。

フェードアウト

画像が徐々に消えていくアニメーションがフェードアウトです。ユーザーに画像の余韻を残すことで、画像のあとに表示されるページで伝えたいメッセージを表現できます。

動画挿入

ページ全体もしくはページの一部分に動画を埋め込む方法です。動画挿入には、多くのメッセージを込めるメリットがあります。テキストをフェードインにして、その後ろに動画を入れる組み合わせも効果的でしょう。

動画挿入のアニメーションは応用範囲が広いです。動画のスピードや長さに工夫が必要で、無駄な動きが多いと飽きられる可能性があります。表示スピードも遅くなりやすいため、軽くて伝わりやすい動画を挿入しましょう。

ページ遷移のアニメーション事例

ページ遷移のアニメーション事例を5つ紹介します。

株式会社ヴィーコ

おしゃれなデザインの新築住宅やリフォームが得意な点をページ遷移のアニメーションで表現しています。企業カラーを実績と共に表現しており、ユーザーを飽きさせないデザインです。

引用：株式会社ヴィーコ

PATRICK PROACT 公式オンラインストア

スニーカーが有名なPATRICKのWEBサイトです。PATRICがこだわっているファッションとモノづくりの思想をページ遷移のアニメーションで表現しています。

引用：PATRICK PROACT 公式オンラインストア

やさしい切りかた辞典 | 貝印

「野菜の過剰除去」を防ぐために、やさいの切り方を紹介しているキッチン用品メーカー「貝印」のWEBサイトです。一面に野菜が表示され、楽しみながら野菜の正しい切り方を理解できるアニメーションです。

引用：やさしい切りかた辞典 | 貝印

EVERING

指にはめたリングで買い物の決済ができる「EVERING」の紹介サイトです。訪問してすぐにアニメーションが表示され、支払いが1秒でできるスピードを表現したアニメーションになっています。

引用：EVERING

株式会社パルコ

「パルコだから面白いんじゃなくて、面白いからパルコなんだ。」をテーマにした社員の採用情報ページをアニメーションで表現しています。若者がパルコに入社して何を実現するのか、企業イメージと採用方針が伝わりやすいWEBサイトです。

引用：株式会社パルコ

ページ遷移アニメーションの作り方

ページ遷移のアニメーションは、CSSかJavaScriptを組み合わせて作ります。

CSSを使った編集

CSSはテキストの色やサイズに変化を付けたり、背景を変えたりするのに使います。簡単なアニメーションを構築するときは、CSSが便利でしょう。難しいコードを組み込む必要がないため、WEBサイト構築の初心者でも扱いやすいです。

JavaScriptを使った編集

動きがあるページ遷移のアニメーションを入れたいときは、JavaScriptを活用します。JavaScriptでアニメーションを構築すると、画像を途中でストップさせたり、動き方を変えたりできます。

複雑な動きができる分、編集の難易度が高いです。凝ったアニメーションでは、JavaScriptが必須であるため、これを機にスキルを身に付けましょう。

まとめ

ページ遷移アニメーションは、サイト訪問者にインパクトのあるイメージを与え、メッセージを伝えやすくなるメリットがあります。

CSSやJavaScriptを活用し、スキルアップと共に取り組むとよいでしょう。複雑なページを作るのではなく、ユーザーの視点にあったWEBサイト構築が大切です。

「比較ビズ」なら、複数の業者を比較してWEBサイトのデザイン企業を見つけられます。WEBサイトの構築やページ遷移アニメーションに迷うことがあれば、ぜひ参考にしてください。

監修者のコメント

株式会社Weathercock

代表取締役　大野淳

愛媛県でホームページ制作・SEO対策を行なっている会社。コーポレートサイトやECサイトの構築はもちろん、オウンドメディアの構築を行う。クライアントに寄り添ったWEB制作を心がけており、WEBマーケティングを通して見込み客の欲求に合わせたコンテンツ作成を行うことをモットーに行う。

詳しく見る

ページ遷移のアニメーションを取り入れることで、ユーザーを自分のWebサイトに引き止めることができる可能性が高まります。

ただメリットだけではなくWebページの表示速度低下などのデメリットも加味しなくてはいけません。そのため、全てのページ遷移にアニメーションを付けるのではなく、サイト内で特にインパクトを与えたい部分や、長く留まってほしいページに利用すると効果も高くなると思います。

WordPressであればアニメーションを手軽に設定することのできるプラグインなどもありますので、ぜひ一度利用されてみてはいかがでしょうか。ただ、注意点としてはアニメーションをつけすぎると”くどい”ページにもなりますので、設定後、第三者目線でそのページを見てみるというのも大切です。

執筆者

比較ビズ編集部では、BtoB向けに様々な業種の発注に役立つ情報を発信。「発注先の選び方を知りたい」「外注する際の費用相場を知りたい」といった疑問を編集部のメンバーが分かりやすく解説しています。