CSSを使って実現できることの中でもアニメーションは、特に制作者のセンスが光るものと一つでしょう。動的な表現は、ユーザーにボタンがあることを認識させたり、クリックの動機をつくるなど、ホームページの閲覧をスムーズにする助けにもなるものです。マウスカーソルをメニューに重ねた際の色の変化など小さなものから、もっと目立った動きが印象的なものまで、CSSで作れるアニメーションはたくさんあります。今回は、cssで作れるアニメーションの事例として、様々な業界のホームページをピックアップしました。定番とも言えるアニメーションを搭載したものもあれば、ちょっとめずらしいものもあります。ぜひ、チェックしてみてください。

1)ソニックジャム

image1.png
https://www.sonicjam.co.jp/
(画像引用:ソニックジャムホームページより)

ソニックジャムのホームページは、素早いアニメーションがどんどん展開していくインパクトの強さが印象的です。左側にカーソルを移動すると表示するメニューは、メニュー上でのカーソルの移動に従って、選択箇所を大きくピップアップして存在感を増します。マウスポインターが移動すると円形のイメージが追ってくるマウスストーカーも搭載しており、技術の集合体とも呼べる仕上がりです。ロゴマークやボタンなど、様々なところにカーソルを移動させてみたくなる好奇心をくすぐるホームページと言えます。

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

image4.png
(画像引用:オペラコスメティックホームページより)

ホワイトを基調としたシンプルさを保ちつつ、洗練されたスタイリッシュさを感じる化粧品のホームページです。このタイプの洗練された印象を打ち出すページは、奇抜で極端なアニメーションよりも、部分的にセンスが光るお洒落なアニメーションを搭載するのが効果的でしょう。このホームページもhoverやtransformを使ってマウスオーバー時の動きのあるカラーの変化などの小さな動きをはじめ、ページをスクロールすると自然な流れで登場するイメージにjQueryをつかうなど商品イメージを演出する上品なアニメーションを実現しています。

3)日比谷音楽祭

image9.png
https://hibiyamusicfes.jp/
(画像引用:日比谷音楽祭ホームページより)

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

4)琵琶湖汽船

image5.png
https://www.biwakokisen.co.jp/
(画像引用:琵琶湖汽船ホームページより)

琵琶湖汽船のホームページは、びわ湖クルーズの様子がわかる動画をメインビジュアルとして再生しつつ、その下に波をイメージしたアニメーションをCSSで動かしています。とても存在感のあるトップページです。メニューボタンなど細かなところもhoverやtransitionを使った動きのあるカラー変化を効果を見せています。サービスの特徴を全面的に訴求できるホームページコンセプトを演出する細かなアニメーション効果が印象的なホームページと言えるでしょう。