Webアニメーションの参考サイト18選！動きの種類なども解説

近年は魅力的なWebサイトが増えてきているため、通常のWebサイトではユーザーの印象に残りにくくなっています。そのため、自社のWebサイトをユーザーの印象に残すためにも、Webアニメーションを活用したいと考える方も多いのではないでしょうか。

また、Webアニメーションを活用することによるメリットを知りたい、アニメーションの種類が気になるという方も中にはいらっしゃるかもしれません。

この記事では、Webアニメーションの参考サイトを動きの種類とともにご紹介し、メリットや実装する際の注意点についても確認していきます。

Webアニメーションを活用するメリット

Webサイト内でアニメーションを活用することには、さまざまなメリットがあります。

まず、Webサイト内で動きがあるとユーザーの視線に留まり、直感的に操作をしやすくなります。そして、伝えたいことを静止画ではなくWebアニメーションで伝えることで、表現の幅が広がるため、ユーザーに伝えたいことをそのまま伝えられるでしょう。

もちろんユーザーがWebサイトを再度来訪することにつながったり、製品やサービスに対する購買意欲を促進できたりすることや、ブランドイメージの向上につながったりもします。また、クオリティの高いWebアニメーションを用いたサイトは、サイト運営者に先進的なイメージを持たせ、その仕事に対する信頼性の向上にもつながります。

また、Webサイト制作の際だけでなく、Webサービス開発の際にもアニメーションを取り入れることで、よりユーザーが使いやすいサービスを構築できるため、メリットがあるでしょう。

弊社ではデザイン性と機能性を兼ね備えたサイトの制作を得意としています。弊社でのWebサイトの制作事例やサービス概要についてはこちらからご確認ください。

Webアニメーションの種類

一口にWebアニメーションといっても、さまざまな種類があります。もちろんそれぞれには適した使いどころがあり、その特徴を理解したうえで実装することがポイントです。

ここではよく用いられるWebアニメーションの手法について、詳しくみていきましょう。

パララックス

参考事例:マーケティングエージェンシー / コーポレートサイト

ページ内でスクロールする際、手前と奥の要素の動きに時間差をつける手法は、パララックスと呼ばれます。ページ内に奥行きを出したりスピード感を演出したりするために使われ、ユーザーのスクロールを促す効果も期待できる手法です。

また、パララックスを使うとページ全体にストーリー性を持たせられたり、スタイリッシュな印象を形成できたりするというメリットもあります。もちろん背景にパララックスを使う場合は、主張しすぎないように実装することが、手前の要素を引き立たせるためのポイントです。

スライド・カルーセル

参考事例:ワンメディア株式会社 / クリエイター支援事業コーポレートサイト

スライド・カルーセルとは、ユーザーのクリックやタップによって横並びのスライドが動くというアニメーションです。企業のコーポレートサイトなどにおいては、作品や実績、新着情報といった部分で使われ、ページがコンパクトに収まるというメリットがあります。もちろん各コンテンツが大きく表示できるため、ユーザーの目にも留まりやすいのもポイントです。

スライド・カルーセルの中にはユーザーは気になったバナーやリンクを任意で選ぶことができるうえ、自動で切り替わるものもあります。その場合、各スライドの情報量とアニメーションの速度のバランスをとることが、ユーザーをアニメーションに惹きつけるポイントです。

フェードイン

参考事例:株式会社ぐんぐん / コーポレートサイト

ページの中の何もないところにテキストや画像を出現させる手法は、フェードインと呼ばれます。スクロールの進み具合によってテキストや画像を出すこの手法は、多くのサイトで実装されていてシンプルなサイト構造にも動きをもたらします。

スムーズに表示されることが求められるフェードインですが、うまく活用すると要素の表示速度によってサイト内の印象を変えることもできるでしょう。ユーザーの目に留まりやすく、スクロールを促せるのも、フェードインの魅力です。

動きのあるWebサイトの作り方についてはこちらの記事で解説しています。ぜひこちらもご確認ください。

マウスポインター

マウスポインターの部分でも、Webアニメーションは存分に活用できます。まず、リンクになっている文字や画像などをマウスオーバーした際に色や形が変わるという仕様は、ユーザーの操作を促します。

中には大胆に要素が動いたり形が変わったりするというアニメーションも、一部のWebサイトでは見られます。PR力やエンターティメント性を重視する場合は、検討するとよいでしょう。

また、マウスポインタそのものがアニメーションとなっていて、スクロール、ドラッグ、クリックなどの操作で色や形が変わるというパターンもあります。

3Dアニメーション

参考事例:世界株式会社 / 東京アニメセンター

2次元の写真やテキストでは表現が難しい場合、3Dアニメーションを用いてみることがおすすめです。奥行きや立体感を演出できるため、施設や製品などの紹介がよりリアルになったり、Webサイトに臨場感や迫力を持たせられたりします。つまり、Webサイト内で効果的に3Dアニメーションを使うことで、より豊かなユーザー体験を提供できるのです。

もちろん強いインパクトを与える3Dアニメーションは、ブランドの認知やエンゲージメントといったポジティブな効果もユーザーにもたらすでしょう。

弊社では、さまざまな技術を用いた表現の実装を得意としています。モーションや3Dなど、デザイナーが作成したデザインをそのままWebサイトやシステムに落とし込めます。ご相談やご提案は無料なので、ぜひ制作を検討している方はこちらからご相談ください。

Webサイトに3D表現を導入する方法についてはこちらの記事で解説しています。ぜひこちらもご確認ください。

Webアニメーションの参考サイト18選

では実際に、どのような形でWebアニメーションが活用されているのでしょうか。こちらでご紹介するように、商品のPRページやコーポレートサイトなどでは、Webアニメーションがいくつか混ぜて組み込まれていることが多いです。

ここでは参考サイトを18種類ご紹介しますが、いずれもアニメーションの使いどころが的を得ていることはもちろん、操作するうえでのストレスが少ない点にも魅力があります。

マーケティングエージェンシー / コーポレートサイト

東京のマーケティングエージェンシーである株式会社werollのコーポレートサイトでは、モーショングラフィックスを活用したダイナミックな表現がユーザーの興味を惹きつけます。このサイトは弊社で制作いたしました。

ロゴをはじめとして、サイト内の様々な箇所がくるくると有機的に回転するアニメーションを取り入れています。企業名に含まれている「roll」を印象づける演出を取り入れています。

ブランドのイメージをアニメーションを用いて表現しており、ユーザーの記憶に残りやすいWebサイトとなっています。

また、今回の制作の概要と課題、解決策についてはこちらで確認できます。ぜひ確認してみてください。

エフコープ生活協同組合 / ブランドサイト

エフコープ生活協同組合のサステナブルへの取り組みを紹介するスペシャルサイトでは、シンボルであるりんごマークをモチーフに、スワイプのスムーズな動きや「親しみやすさ」を感じさせるかわいらしいアニメーションを多数実装しました。こちらのサイトも弊社で制作しています

一般的に社会活動の取り組みは、テキストやイラスト画像のみで表現すると単調になってしまいます。しかし、こちらの事例では、3D表現を活用してユーザーが能動的に体験できる仕掛けを盛り込み、伝えたいことが楽しく伝わるように工夫しています。

特に、スマホで閲覧するときは、まるで地図アプリから1つの街をのぞいているような感覚を体験できるようになっています。

また、今回の制作の概要と課題、解決策についてはこちらで確認できます。ぜひ確認してみてください。

株式会社NTTドコモ / 診断キャンペーンサイト

NTTドコモ株式会社が提供する、診断キャンペーンサイトを弊社で制作しました。3D空間上でのリッチな診断コンテンツを活用して、新しいスマホ選びの体験を提供する「声から選ぶスマホ店」をサイト上にオープンしました。

ユーザーのリアルな声を集め、吹き出しで表現されているユーザー自身が共感できる声を選択すると、自分にぴったりのスマホが提供される仕組みです。

バーチャルストアへのリンクを設置することで、自然な流れで商品購入まで誘導できます。このようなリッチな診断コンテンツは化粧品業界や製品数が多いメーカー、また採用サイトでの職種診断など幅広く活用可能です。

また、今回の制作の概要と課題、解決策についてはこちらで確認できます。ぜひ確認してみてください。

BOTANIST

BOTANISTのPRページでは、スクロールするたびに動く背景の桃のモチーフが商品の使用感をイメージさせています。適度にパララックスという手法が用いられていて、紹介文や商品画像などの伝えたい要素とのバランスが絶妙です。背景と手前の要素を使って奥行きのあるサイトにすることで画像が際立ち、より商品に対するインパクトを残しているでしょう。

また、スクロールした際の動きが変則的になる部分も作り、商品の特徴を強くPRできるような工夫もされています。この部分も背景がパララックスになっているので、操作性が自然な印象です。

ノーミーツ

「ノーミーツ」というストーリーレーベルのWebサイトでは、ステートメントがフェードインしてくる際に取り消し線やアンダーラインが追加されることが特徴です。カラフルで細かい装飾の追加を使うことで、強調したいフレーズに目線がいく仕様になっています。その傍らで、スマートフォンなどで使うような絵文字が動き続けるのも目を引くポイントです。

作品紹介のサムネイルが縦スクロールでスムーズに動くことを通して、ユーザーに作品をPRできている点が、ストーリーレーベルであることを強調しているポイントです。

DEMI DO

パララックスが効果的に使われたこちらのPRページでは、カラフルなシャンプーが動くことで、躍動感を演出しています。商品のPRのコメントの部分ではパララックスが緩やかになることで、ターゲット層に対する文章に対する読みやすさが意識されていることもポイントです。

サイト下部ではカラフルな新着商品のバナーがどんどん上に重なってくることもポイントで、新しい商品に対するワクワク感を演出しています。もちろんブランドの特徴はしっかり強調されています。

セラミックベアリングのパイオニア セラベア

ベアリングという部品を取り扱うこちらの会社のコーポレートサイトでは、円のように動くスライドカルーセルが印象的です。商品の写真にカーソルをホバーすることでカーソルのデザインが変わるところで、ユーザーの注意を引ける点に遊び心が感じられます。製品一覧のリンクを軸に円のように動く仕掛けは、取り扱い製品であるベアリングを連想させます。

またサイトトップで使われているスピード感のあるフェードインは、「セラミックベアリングのパイオニア」としてのブランドイメージにはもってこいの演出です。

日本気象協会

日本気象協会のWebサイトでは、フェードインやスライド・カルーセルが効果的に使われています。スクロールすると見出しが柔らかくフェードインしてくるため、提供サービスを紹介するコンテンツに視線が向くでしょう。加えて大きな見出しには横に線がフェードインするため、コンテンツの区切りもわかりやすくなっています。

また、新着情報や関連サイトといった細かいコンテンツには、スライド・カルーセルが使われており、気になる情報が見つかりやすくなっています。このようなシンプルで情報が探しやすいデザインは、Webサイト運営者の堅実性や信頼性を演出するのに一役買っています。

株式会社ニュービレッジ

コーポレートカラーの赤が印象的なこちらのコーポレートサイトでは、マウスオーバーした時のアニメーションにもインパクトがあります。

画像が震えたり大きくズームしたりといった動作がはっきりとしたアニメーションは、インパクトのあるコーポレートカラーとのバランスが絶妙です。お問い合わせの部分にマウスオーバーすると社員の画像が大胆に表示され、CTAにつなげようという意図が見えます。

そんな、会社のカラーとアニメーションで、ユーザーの印象に残るコーポレートサイトです。

HIBIYA CENTRAL MARKET

HIBIYA CENTRAL MARKETのWebサイトでは、テキストのフェードインが効果的に使われています。色使いがシンプルな分、テキストにより目線がいくようなデザインです。優しいフェードインが用いられていることにより、ユーザーにその施設がもつ上質な空間を連想させます。

また、スクロールする度に不規則に揺れるテキストや画像が、印象的です。白を基調とした洗練されたデザインの中に遊び心があり、内部の店舗のイメージをよく伝えています。

SGS ジャパン株式会社 採用サイト

マウスオーバーした際のアニメーションが印象的なサイトの1つに、SGS ジャパン株式会社の採用サイトが挙げられます。クリックできる部分にマウスオーバーすると表示される、マーカーで塗りつぶすようなアニメーションが強いインパクトを与えます。

採用概要の部分のアニメーションもしっかりしており、ユーザーによく読んでほしいコンテンツであることが一目でわかります。コミカルに動く吹き出しやクエスチョンマークも見ていて飽きないデザインです。

パナソニック インダストリー採用サイト

トップページのアニメーションが印象的なこちらの採用サイトでは、スクロールしてもアニメーションが背景として残るのが特徴です。ABOUT USの部分で縦のスクロールが止まるので、ユーザーによく読んでほしいコンテンツであることが伝わります。

また、想いの部分のカルーセルや、OUR JOBの部分にマウスオーバーした際の効果も特徴的で、直感的にコンテンツが把握しやすくページの下部まで見ていて楽しいです。

MEDIA DEPT.

サイトトップから大胆なエフェクトをつけたい場合、こちらのコーポレートサイトがとても良い例です。大きく表示された実績を示すテキストにマウスオーバーすると、その写真が大きく表示されます。スクロールすると流れてくる写真の中央には緯度と経度が示されており、その数字が動くのにも遊び心が見られます。

また、同社が運営するポップアップストアを紹介する部分では、スクロールした際の画面の動きがかなり緩やかです。店名が強調されることにより、PRがしっかりしたものになっています。

おうちフェスタとうほく｜ドラぷら(NEXCO東日本)

NEXCO東日本のこちらのサイトでは、手の形をしたポインタでドラッグしてページ内を操作することが特徴です。ただスクロールするのではなく、あたかも地図で目的地を探すような動きをユーザーがWebサイト内で行うことで、高速道路での旅を連想させます。

ページ内をドラッグした際やリンクの上をホバーした際に手の形が変わることで、操作内容も把握しやすいです。また、ページ切り替えの際のアニメーションでは四角いモチーフが使われている点に一貫性があり、ここにもこだわりが見えます。

株式会社デジタルガレージ（Digital Garage, Inc.）

デジタルガレージのコーポレートサイトでは、シンプルな構図の中に組み込まれたダイナミックなアニメーションが特徴です。テクノロジーを意識したスタイリッシュなデザインが、アニメーションの美しさを際立たせています。

もちろんマウスオーバーした際のボタンやリンクの動作も滑らかで、動画との調和が図られている印象です。

株式会社風工学研究所

3Dでデザインされた街がトップに表示されるこちらのコーポレートサイトは、街を通りすぎる白い風のようなエフェクトも相まって、かなりダイナミックな印象です。さらにページをスクロールすることで、街のアングルも美しく変化していきます。

ページの中間以降にも強くなびく旗や風車のような回る図形があり、さまざまな種類の風をイメージさせるでしょう。青い背景に青い要素を配置してもしっかり映えるのは、3Dアニメーションを採用したからこそでしょう。フッター近くの街のような図形まで、3D が全面に使われていてとてもクオリティが高いです。

CREATEE

こちらの映像制作会社のコーポレートサイトでは、トップに長く表示されるスマートフォンや、再生されている動画のインパクトを強く感じるでしょう。その後もページ全体を通して、縦長のコンテンツ提供が強調されています。実際の撮影風景も織り交ぜながら表示されている部分もあり、Webサイト内には臨場感が漂います。

背景デザインの移り変わりが大きいものの、伝えたいところはしっかり強調して表示される点も大きなポイントです。ページ全体を通してスクロールの進み具合に緩急がある点も、映像制作会社らしさを感じられます。

元気ファクトリー

元気いっぱいオレンジ色のフレーズが目立つ、こちらの飲食店経営会社のコーポレートサイトでは、テキストのフェードインもとても元気のよいものになっています。ページトップのスライドとフレーズは同じ方向に動きますが、動く速度が異なる点でしっかり差別化されています。

もちろんページ内に織り交ぜられた動画にも元気があり、企業イメージが全面に感じられるでしょう。さらに、ページ下部に「応募する」のバナーが大胆に表示されていることによって、採用に対する積極性がうかがえます。

Webアニメーションを活用するときの注意点

ここまで、Webアニメーションを用いたサイトの例をみてきましたが、これらを効果的に使うためには、さまざまな注意点があります。ここでは特に気をつけたい3つの注意点をご紹介しますので、これらを踏まえたうえで実際にサイトをデザインしたいものです。

目的を明確にする

Webアニメーションを活用する際に最も重視すべき点は、アニメーションを配置する目的を明確にすることです。

単純にWebアニメーションを盛り込むだけでは、サイトの運用にはあまり意味を持ちません。ペルソナに合っていないものや過度なアニメーションの実装などによって、ユーザーが混乱してしまう可能性も考えられます。

そのため、たとえばCTAの部分や特にPRしたいポイントのため強調したいといった、明確な目的があるうえでアニメーションを配置することが重要です。Webサイトそのものの役割やペルソナを考慮したうえで、適切にアニメーションを実装しましょう。

期間や費用を把握する

Webアニメーションをサイト内に実装する場合、期間や費用をよく確認してから進める必要があります。

ほとんどのWebアニメーションのあるサイトは、動作のないWebサイトに比べて工数や費用がかさんでいます。また、アニメーションの難易度によっては、工期が大きく膨れ上がってしまうこともあるでしょう。

つまり、あまりに難易度の高いアニメーションは、Webサイトリリースの遅延や予算オーバーのリスクにつながります。そのため、制作会社に依頼する際には、費用や納期についてよく確認しておくことが重要です。

ページの読み込み速度を確認する

Webアニメーションをサイト内に実装する際は、ページの読み込み速度もおさえておきたい注意点です。あまりにアニメーションが多くてページの表示が遅くなってしまうと、ユーザーはページに来訪した瞬間からストレスを溜めてしまうでしょう。ユーザーのページ離脱につながることはもちろん、Webサイトに対するSEOの評価が下がる原因になります。

これらのデメリットを回避するためにも、不要なアニメーションは避け、ページの読み込み速度とのバランスがとれたページを作成しましょう。

Webアニメーションの制作はBALANCeにご相談ください

Webアニメーションを適切に実装することで、ユーザーの印象に残るサイトになるうえ、ブランドイメージやWebサイト運営者に対する信頼性の向上につながります。つまり、ペルソナやサイト運営の目的に合ったWebアニメーションは、集客やPRに大変役立つものです。

この記事ではWebアニメーションにこだわられたサイトの中で特に参考になる例をご紹介してきました。注意点もおさえながら、適切にWebアニメーションをサイト内に実装してみましょう。

弊社では、モーションや3Dなど、デザイナーが作成したデザインをそのままWebサイトやシステムに落とし込めます。また、Webだけでなく、システムの中にアニメーションなどのデザインを実装可能です。Webサイトやシステムにデザイン性の高い表現を実装したい方はぜひこちらからご相談ください。