「動き」のある参考Webサイト 14選

あなたの会社のWebサイト、ワクワクしますか？

Webサイトでは「JS（javascript）」や「CSSアニメーション」などを利用して、動き（アニメーション）を付けることができます。

動きの役割は大きく分けると2種類あり、「ワクワクする」「おもしろい」などユーザーに何かしらの印象や体感に影響する「UX的」な動きと、Webサイトの操作性を向上させる「UI的」な動きがあります。

これらを上手く組み合わせることにより、Webサイトにインパクトを与えたり使いやすさの改善につなげることができます。

UI/UXについては下記の記事で解説しているのでご参照ください。

この記事では、王道アニメーションから昨今のトレンドや、動きを付けるときの注意点を解説します。

これから新しいWebサイトを立ち上げる人や、マンネリ化した既存サイトにアクセントを取り入れたいWeb担当者の方は参考にしてみてください。

動きをつけるメリットとは？

まずそもそもWebサイトに動きを付けるメリットは何でしょうか。
私は大きく分けて下記のような3つのメリットがあると思います。

1.ユーザーの印象に残りやすくなる

Webサイトの「世界観」や「特にユーザーに伝えたいこと」に動きを加えて表現することによって、オリジナリティが上がりユーザーを惹きつけやすくなります。
ユーザーに何かしらのインパクトを与え印象に残ると、ページを離れた後も再訪する可能性が上がり、ブランドイメージの向上にもつながります。

2.ユーザーの目線を誘導しやすくなる

人は視界で何かが動くとつい目で追ってしまう生き物ですよね。
Web上でも同様に、CV（コンバージョン）につながる重要な要素だけに動きをつけたり、そこにたどり着くまでに感じなかった違和感を与えることで目に留まりやすくなります。

3.先進的なイメージを持たれやすくなる

テキストがただ並べられたのっぺりとしたWebサイトよりも、スタイリッシュな動きがあるサイトの方が、常に新しいものを取り入れ進化していくような印象を与えることができます。
「こだわってるな～」とユーザーに思ってもらえると、仕事のクオリティへの信頼性向上にもつながると思います。

定番で使いやすい動き 5選

次に使い勝手の良いメジャーな動きを5つご紹介します。
シンプルな動きが多いので新任Web担当者の方でも取り入れやすいと思います。

パララックス

スクロールすると背景と手前にある要素が時間差で動き、奥行きやスピード感があるように見える手法です。

奥行きを出すことで手前にある要素が目に留まりやすくなったり、主張しすぎない程度に背景で遊ぶことができます。

BOTANIST | フレグランスコレクション アイスピーチティーの香り

人気シャンプーブランドから新しく発売された夏シリーズのキャンペーンLPです。

爽やかなFV（ファーストビュー）からスクロールすると、モバイルファーストを意識した横幅の狭いコンテンツが現われ、背景に桃の写真や動画が時間差で流れていきます。伝えたい要素を邪魔しない程度に桃が流れ、読みやすさも考慮されています。

GO!PEACE! | フェリシモ

カタログやWebなどの独自メディアで、自社企画商品やセレクト商品を販売するフェリシモの、新カタログ『GO! PEACE!』の特設ページです。背景のアニメーションがスクロールするごとに形を変え、手前の要素が宙に浮いているような感覚を与えます。よく見るとテキストの内容にあわせて色や形が変わっており、こだわりを感じます。

スライド・カルーセル

複数の要素（テキスト、画像、動画など）をクリック（タップ）しスライドして切り換える手法です。

要素を設置できるスペースが限られていたり、ページを間延びさせたくない場合に、コンパクトに設置できます。

Yard Dental Clinic | 半田市の歯医者

愛知県半田市にある歯科クリニックのWebサイトでは、クリニックのおすすめポイントを自動カルーセルで分かりやすく紹介しています。ユーザーがカルーセルを止めたり「進む・戻る」の操作もできるので見逃してしまうストレスが少なそうです。医師紹介エリアでもスライドを使用しており、先生の顔もばっちり確認してから歯医者に臨むことができます。

セラミックベアリングのパイオニア｜株式会社セラベア

大阪府大阪市にあるベアリングをはじめとした軸受製品を輸出入販売している会社のコーポレートサイトです。ベアリングとは機械の中にある軸を滑らかに回転させる部品のことで、ベアリングをモチーフにしたと思われる、円のように回るカルーセルが商品紹介で使われています。パッと見た感じカルーセルとは思いづらいため、カルーセルにマウスカーソルが近づくと「←SWIPE→」アイコンになり、ユーザーを誘導してくれるUIがしっかり設計されています。

フェードイン

何もないところから要素が現れる手法です。

スクロールに合わせてタイミングよく要素を表示させるフェードインは、簡単に「ちょっとしっかりしてそうなサイト」のような印象を与えられるのもあり、多くのサイトで使われています。しかしテンポよくスムーズに表示されないとユーザーのストレスや不安につながるので注意してください。

日本気象協会

日本気象協会のWebサイトでは要素が背景と少しズレながら上にヒョコっと動く王道のフェードインが使われています。

あまり遊び心を加えられない堅実なイメージのサービスに、このようなフェードインの小さな動きを付けることで、のっぺりとせずサイトに軽い雰囲気が演出されるのでお勧めです。

HIBIYA CENTRAL MARKET

日比谷にある複合型店舗のWebサイトでは、ジュワッと染み出てくるようにテキストがフェードインし、明朝のフォントと相まって高級感が漂います。

スクロールするたびに不規則にある写真がふわっと動くのも、全体の雰囲気を邪魔しない程度の遊び心があって素敵です。

ホバーエフェクト

マウスオーバーした際にエフェクトを付けたり要素自体に変化を加える手法です。

主にボタンやテキストリンクで使用することが多く、「押せる・押せない」を分かりやすくする役割があります。

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

各産業分野における検査、検証、試験、および認証を行うスイスの企業の日本法人採用サイトです。

ページを開いた瞬間から色々な要素が動き出し、「SGSの主義」エリアではマウスオーバーするとペンで書いたようなラインが引かれ、右端のエリアも連動してビジュアルが変わります。クリックできるエリアが分かりやすく、細かなギミックまでサイトの世界観を踏襲しており見ていてワクワクするサイトです。

MEDIA DEPT.

交通広告、各種看板屋大型ビジョンなどを企画・制作している会社のWebサイトでは、スクロールすると実績の媒体が次々と流れていき、マウスオーバーするとその実績のビジュアルが現れ非常にインパクトがあります。

動画

背景または一部のエリアに動画を埋め込む手法です。

動画はストーリーやサービスの世界感を伝える時に適したコンテンツの一つで、文章を読むよりもユーザーが楽に情報を受け取ることができます。

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

パナソニックグループで主に電子デバイス・産業デバイスを取り揃えている会社の採用サイトでは、FVに未来の電子機器のような動画が流れ、下層ページまでこだわったサイトです。動画はスクロールしても消えずに背景になりパララックスのような動きが加わります。細かいアニメーションをあちこちに散りばめられているので見ていて飽きません。

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

国内最大級の決済プラットフォームを軸に様々なサービスを展開しているデジタルガレージのコーポレートサイトでは、グリッドで組まれたシンプルなデザインの所々に動画が埋め込まれ、全体の洗練された雰囲気を邪魔せずにサイトに動きを与えています。

最近のトレンド

よくある王道のアニメーションはお分かりいただけたでしょうか。
次に昨今で流行っている動きをご紹介します。

マウスポインターにオリジナリティを出す

スタッフのバッグをのぞき見！「コーデュラ®バッグシリーズ」 | DOD（ディーオーディー）

アウトドア・キャンプグッズを販売する会社のスタッフのバッグをのぞき見してみようという企画サイトです。

カーソルが目になり目がサイト上をウヨウヨ動いていて可愛いです。ボタンなどリンクの上にカーソルが行くと手のアイコンも表示されるのでユーザーへの気配りも感じます。

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

東北6県にある観光スポットやグルメを紹介するサイトです。

スクロールではなくドラッグでページを見回す新感覚なデザインで、今度は手です。手は通常時・ドラッグ時・リンクの上の3パターンで形が変わり、動きの予測をユーザーにさせてくれます。大きな地図を広げて指をさして旅行の計画を立てているようなワクワク感があります。

3Dアニメーション

株式会社風工学研究所

大規模建築物を中心に風に関する業務を行うコンサル会社のコーポレートサイトでは、

街のような3Dアニメーションがダイナミックに登場し、スクロールに応じて角度も変わっていきます。SERVICESエリアでは会社の特徴である「風」を旗でこれでもかというくらい表現しています。

CREATEE

縦型の映像制作・インフルエンサー事業・空間設計などをサービスとしている会社のコーポレートサイトでは強みである縦長動画をイメージした大きなスマホに目を奪われます。インパクトがありつつも伝えたい情報もしっかりまとめている映像制作会社らしいハイセンスなサイトだと思います。

動きを付けるときの注意点

Webサイトに実装できるアニメーションは上記の他にもまだまだあり、効果もそれぞれでたくさん試してみたくなってしまうと思います。

しかし、アニメーションを実装する際に気を付けなければいけないポイントが大きく3つあります。

実装期間・費用に問題はないか

アニメーションを実装するとなると通常のコーディングに加え工数と費用がかさむ場合がほとんどです。実装するアニメーションの難易度によっても変わるので、納期と予算を制作会社によく確認してから進めましょう。

サイトの表示速度が遅くないか

過度なアニメーションを実装するとページを表示する際の読み込むデータが多くなる分、表示までにかかる時間が増えてしまいます。表示速度はユーザーに与える最初のストレスの原因にもなるので、データを軽くする方法を探し不要なアニメーションはやめましょう。

目的があるアニメーションなのか

ただわんぱくに要素が動き回るのではあまり意味がありません。

サービス側・ユーザー側どちらにとっても意味のある動きを取り入れましょう。

また、予測できない動きによってユーザーの操作を妨げないように注意しましょう。1つの使い勝手の悪さでユーザーは離脱してしまうかもしれません。

まとめ

参考になる動きはありましたか？

目的を定め、サービスに合った動きを付けることで、オリジナリティーがあふれ、ユーザーの印象に残りやすくなります。

アニメーションの具体的な実装費や、動きの有無に限らずWebサイト周りの相談をしたい方は、ぜひプライムナンバーズへお気軽にお問い合わせください。