こんにちは、プロクラスの杉本です！
Web制作の仕事をしていると、日々いろいろなサイトを見て「このアニメーションいいな」「この装飾おしゃれだな」と気になるポイントをチェックする機会が多くあります。
今回は、そうして集めた参考サイトの中から「これは特に見ていて楽しい・記憶に残る」と感じたものを厳選してご紹介します。数が多くなってきたので、今回は反応が良さそうな3つのカテゴリー「動き・アニメーション」「ホバーアニメーション」「装飾」に絞ってピックアップしました。
Web制作やデザインの参考にしていただけたら嬉しいです。
目次
動き・アニメーション編
やっぱり見ていて一番テンションが上がるのはこのジャンル。スクロールやホバーに合わせて画面がぐりぐり動くサイトはついつい長居してしまいますよね。
コピーを固定し写真だけが動く逆転パララックス
パララックスって背景を固定して文字を動かすパターンが多い印象ですが、ここは逆！「お米と塩。至福のハーモニー」というコピーを画面上部に固定して、その下で写真や文章が動いていくんです。「まずこのこだわりを知ってほしい」という気持ちがちゃんと伝わってくる、良い見せ方だなと思いました。
年表バーと連動するヒストリースライダー
ヒストリーエリアが個人的にすごく好きで、スライダーをスクロールすると下の年表バーの黄色い矢印も一緒に動くので、今どの年代を見ているのか迷わないんです。下ではキャラクターが走り続けていて、一緒に時代を駆け抜けている感じがして世界観に引き込まれました。
雲が晴れて空港が現れるダイナミックな導入演出
導入エリアが画面いっぱいの雲に覆われたあと、パッと開けて空から見た空港の写真が現れる演出、これはかなりダイナミックで印象的でした。ボタンの装飾も飛行機になっていて、ホバーすると右へ飛んでいくところまで芸が細かいです。
ホバーアニメーション編
サイトを触ったときの「気持ちよさ」が一番出るのがホバーの演出だと思います。何度もカーソルを当てたくなるようなサイト、ついつい試したくなりますよね。
オレンジレイヤーが重なる上品なホバー演出
NEWSやSELECTIONSエリアで、写真をホバーすると薄いオレンジ色のレイヤーが下からふわっと重なるアニメーションになっていて、上品でおしゃれ。写真の切り抜き自体もロゴをモチーフにした形になっていて、細部までブランドの世界観が統一されているのがさすがだなと思いました。
カーソルに追従して動く実績動画
実績エリアで作品にカーソルを合わせると動画が再生され、しかもマウスの動きに合わせて動画自体も動くという仕掛け。思わず何度も触りたくなるくらい楽しくて、静止画だけでは伝わらない作品の空気感までしっかり見せてくれます。
キャラクターインジケーターで魅せる世界観
サービス紹介スライダーのインジケーターがキャラクターになっているのがまず可愛い。ホバーアニメーションや装飾もサイト全体にたっぷり散りばめられていて、「動く」というコンセプトがちゃんと体感できるサイトでした。
カードがひっくり返るトランプ風ホバー
教授紹介のカードをホバーするとひっくり返って言葉が表示される演出が、トランプをめくっているみたいで純粋に楽しい。「受講方法を見る」ボタンもチケットをもぎ取るような動きになっていて、細かいところまで遊び心が効いていました。
装飾編
派手な動きがなくても、装飾ひとつでブランドの世界観をぐっと引き込んでくれるサイトも大好きです。統一感があると、それだけで「ちゃんと作り込まれてる」感が出ますよね。
リフォーム会社とは思えないメルヘンな世界観
リフォーム・リノベーション会社のサイトなのに、初見では洋菓子店かと思うくらいメルヘンで可愛いデザインでびっくりしました。イラストやボタンの装飾まで細部までこだわられていて、まるで絵本の世界に入り込んだような雰囲気です。
サイト全体に登場する猫マスコットの統一感
事業紹介エリアの数字装飾がマスコットの猫になっていて、思わずクスッとしてしまうくらい可愛い。この猫、ローディング画面やフッターなどあちこちに登場するので、サイト全体にちゃんと統一感が生まれているのも good ポイントです。
パズルのピースが組み上がる「つながる」演出
画像の形やタブ切り替えボタンがパズルのピースになっていて、「つながる」というコンセプトにぴったり。ABOUTエリアでは大きい画像に触れると小さなパズルのピースがはまっていって完成する演出があり、遊び心があって面白かったです。
今回は3カテゴリーに絞りましたが、他にもインジケーターやマウスポインターの演出など、まだまだ紹介したいサイトがあるので、また機会があればまとめたいと思います！