CSSアニメーションを活用した有名企業のWebサイト制作事例を紹介

CSSを使って実現できることの中でもアニメーションは、特に制作者のセンスが光るものと一つでしょう。動的な表現は、ユーザーにボタンがあることを認識させたり、クリックの動機をつくるなど、ホームページの閲覧をスムーズにする助けにもなるものです。マウスカーソルをメニューに重ねた際の色の変化など小さなものから、もっと目立った動きが印象的なものまで、CSSで作れるアニメーションはたくさんあります。

今回は、cssで作れるアニメーションの事例として、様々な業界のホームページをピックアップしました。定番とも言えるアニメーションを搭載したものもあれば、ちょっとめずらしいものもあります。ぜひ、チェックしてみてください。

参考にしたいCSSアニメーションのWebサイト事例

1）ソニックジャム

https://www.sonicjam.co.jp/
（画像引用：ソニックジャムホームページより）

ソニックジャムのホームページは、素早いアニメーションがどんどん展開していくインパクトの強さが印象的です。左側にカーソルを移動すると表示するメニューは、メニュー上でのカーソルの移動に従って、選択箇所を大きくピップアップして存在感を増します。

マウスポインターが移動すると円形のイメージが追ってくるマウスストーカーも搭載しており、技術の集合体とも呼べる仕上がりです。ロゴマークやボタンなど、様々なところにカーソルを移動させてみたくなる好奇心をくすぐるホームページと言えます。

2）オペラコスメティック

（画像引用：オペラコスメティックホームページより）

ホワイトを基調としたシンプルさを保ちつつ、洗練されたスタイリッシュさを感じる化粧品のホームページです。このタイプの洗練された印象を打ち出すページは、奇抜で極端なアニメーションよりも、部分的にセンスが光るお洒落なアニメーションを搭載するのが効果的でしょう。

このホームページもhoverやtransformを使ってマウスオーバー時の動きのあるカラーの変化などの小さな動きをはじめ、ページをスクロールすると自然な流れで登場するイメージにjQueryをつかうなど商品イメージを演出する上品なアニメーションを実現しています。

3）日比谷音楽祭

https://hibiyamusicfes.jp/
（画像引用：日比谷音楽祭ホームページより）

日比谷音楽祭のホームページは、gifアニメのささやかな動きに思わずクスッと笑ってしまう和やかな演出が特徴的です。カーソルを重ねるとバナーが大きく動きをtransitionの設定やナビゲーションのhover設置もホームページのテイストに合ったナチュラルさを感じます。

また、ページ中にある白い矢印にホバーした際のクリックを誘うtransformを使用したアニメーションも面白いです。

4）琵琶湖汽船

https://www.biwakokisen.co.jp/
（画像引用：琵琶湖汽船ホームページより）

琵琶湖汽船のホームページは、びわ湖クルーズの様子がわかる動画をメインビジュアルとして再生しつつ、その下に波をイメージしたアニメーションをCSSで動かしています。とても存在感のあるトップページです。

メニューボタンなど細かなところもhoverやtransitionを使った動きのあるカラー変化を効果を見せています。サービスの特徴を全面的に訴求できるホームページのコンセプトを演出する細かなアニメーション効果が印象的なホームページと言えるでしょう。

5）キューピー

https://www.kewpie.co.jp/
（画像引用：キューピーホームページより）

キューピーのホームページは、jQueryを使い美しく切り替わるトップページのスライドにより、商品やキャンペーンのPR、会社のメッセージを打ち出しています。マウスカーソルをスライダーに合わせると大きくなるようにtransitionを設定するなどの細かな工夫もユーザーの操作リアクションとして効果的です。ボタンの色を流れるようなアニメーションで変えるhoverの設定なども行われています。

また、モバイル表示の際にハンバーガーメニューをタップすると、ハンバーガーが回転するアニメーションが実にさわやかです。表示されるメニューにはアコーディオンを使い、初期状態の表示数が多くならないように工夫されています。この作りはいろいろなホームページで見かける機会が多くあり、スタンダードかつ実用的なものと言えるでしょう。

6）スープストックトーキョー

https://www.soup-stock-tokyo.com/
（画像引用：スープストックトーキョーホームページより）

スープストックトーキョーのホームページは、トップページ設定された動画からスープの温かさが伝わってきます。そのすぐ下にある今週のメニューにはgifアニメーションが設定されており、様々なメニューのイメージ短い時間で認識できるようになっています。

あまり目立ちませんが、グローバルナビやバナーにホバーさせたときの透過や動きはtransitionによるものです。商品をどのようなイメージで見せるのかを熟慮し、ブランドイメージにマッチしたCSSアニメーションを取り入れている事例と言えるでしょう。

7）東京国際フォーラム

https://www.t-i-forum.co.jp/
（画像引用：東京国際フォーラムホームページより）

東京国際フォーラムのホームページはローディング時やスクロール時のアニメーションやアートワークのカルーセルにつかったjQueryがスタイリッシュさを演出しています。また、transformを使って、ボタンにホバーした際のグラデーションの切り替わりや、画像が大きくなるtransitionなど、スッキリとしたホームページ全体の印象をさらに洗練させる役割を果たしています。

8）shiro

https://shiro-shiro.jp/
（画像引用：shiroホームページより）

jQueryを使ったスライダーやtransitionを使ったボタンやナビの透過が化粧品の上品な雰囲気を演出しています。トップページをスクロールするとすーっと表示される人気ランキングのアニメーションも印象的です。ブランドイメージに合致したアニメーションはもちろん、色遣いやレイアウトなども魅力です。

9）Hitachi Global

https://www.hitachiglobalweb.plasticbcn.com/
（画像引用：Hitachi Globalホームページより）

ホワイトのすっきりした背景の中、赤と黒のアクセントが効いたデザインが印象的です。画像やボタンに設定されたhoverやtransitionは、ホームページ全体のデザインがすっきりしていることもあり、効果的に見えます。スクロールを進めるごとに動的な要素を感じる見本とも言えるホームページです。

10）WOW TAPES

https://www.wowtapes.com/
（画像引用：WOW TAPESホームページより）

様々な動きが随所に散りばめられたホームページです。その中でも注目したいのは、マウスカーソルがドットになっているところです。これは、cursorを使うことで、マウスカーソルの形状を変化させているのです。このホームページで採用しているドットタイプ以外にも、cursorを使えば、十字形や指差しマーク、矢印など、マウスカーソルを様々な形状にすることができます。