May 13.2020

アニメーションが魅力的なサイト8選|視覚的に個性とメッセージ性のあるクリエイティブ例!

アニメーション
こんにちは、Webデザイナーの橋本です。

Webサイトで使われていることが多くなったアニメーション。アニメーションの特徴と言えば、動きのないサイトと比べると、ユーザーに伝える事のできる情報量の多さや、動きによってユーザーの注意をひきつける事ができる点ではないでしょうか。

JavaScript、CSS等、アニメーション作成する様々な手法がありますが、今回は手法にはこだわらずアニメーションを上手に取り入れている魅力的なサイトをご紹介いたします。

MY VERMICULAR

MY VERMICULAR
https://www.vermicular.jp/myvermicular/about/

紙吹雪風のアニメーションがコミカルでオシャレなサイト。

イラスト一つひとつにもアニメーションが用意されていて、見ているだけで楽しい気分になります。

サイトデザイン自体は白・薄いグレー・黒だけで構成されているのですが、暗い印象になっていないのが素敵です。

MERRY FUTURE クリスマスキャンペーン 2019|三越伊勢丹グループ

MERRY FUTURE クリスマスキャンペーン 2019|三越伊勢丹グループ
https://cp.mistore.jp/common/event_calendar/christmas.html

現代風のサンタクロースさんや天使が登場する、クリスマスのイベント告知サイトです。

動く絵本を見ているかのような印象を受けますね。絵柄がすごくレトロな感じで描かれていて、不思議な世界観に引き込まれます!

JPホールディングスグループ リクルートサイト

JPホールディングスグループ リクルートサイト
https://jphdgroup-recruit.jp/

保育士さん向けの採用サイト。保育の楽しさを伝えるかのような仕掛けが多くあるのが特徴的。

たとえば、積み木のような文字には、落ちてきて積み重なるアニメーションと、画面をスクロールすると崩れていく楽しい仕掛けが施されています!

また、子供のイラストが多用されており、サイト全体の温かな印象に、ほほえましい花を添えています。

ズズサウルス

ズズサウルス
https://www.zuzusaurus.com/

長野市を拠点としたクリエイティブ・エージェンシーのWEBサイト。

シンプルなファーストビューから一転、画面をスクロールすると、特撮映画のような「ズズサウルス」の影が登場します。

サイトに隠された遊び心から、ワクワクするような制作物を作ってもらえそうな印象を非常に受けますね!

みさとと。——島根県美郷町魅力再発見プロジェクト

みさとと。——島根県美郷町魅力再発見プロジェクト
https://www.town.shimane-misato.lg.jp/misatoto/

島根県の美郷町の紹介サイト。

雲を潜り抜けて進んでいくような、奥行きのあるパララックス効果を使用したアニメーションになっています。

更に進んでいくと、町の名物をかわいいイラストで紹介してくれます。

アニメーションがとてもスムーズで、情報量が多いにも関わらず見やすいサイトに仕上がっています。

パティスリー GIN NO MORI

パティスリー GIN NO MORI
https://ginnomori.info/patisserie/

パティスリーのおしゃれなサイト。

青い(銀の)森の世界観で統一されています。また、リスがパティスリーの格好をしており、とてもかわいい演出を見ることができます。

ビスケットを箱に詰めるアニメーションは、しばらくマウスを止めて見てしまいます。美味しそうなお菓子だけではなく、独特の世界観でお店にとても興味が湧いてきますね。

定期採用|フェリシモ採用情報|フェリシモ

定期採用|フェリシモ採用情報|フェリシモ
http://www.felissimo-job.com/recruit2021/

パッと見た感じはシンプルな採用サイト。ペンで書いたような赤い丸が、アニメーションになっています。

最初は何を表現しているのかわからなかったのですが、スクロールを下に進めているうちに、仕事に対しての「熱い想い」を表現している事がわかりました。

とてもシンプルなアニメーションなのに、強い想いが視覚的に伝わりやすく表現されています。

シンプルだからこその「力強い表現」が散りばめられているサイトで、発信されているメッセージがとても印象に残ります。

MENYA BIBIRI:メンヤ ビビリ – 奈良市のラーメン屋

MENYA BIBIRI:メンヤ ビビリ - 奈良市のラーメン屋
http://menya-bibiri.net/

美味しそうなラーメンの写真に湯気のアニメーションが相重なって、余計な説明は必要なく見ただけで胃袋を刺激されます。ラーメンの写真も大きく迫力があります!

アニメーションのメリット・デメリットを把握しよう!

アニメーションを活用したWEBサイトをご紹介しましたが、やはり「演出」にこだわっているサイトが多く、それぞれの世界観に引き込まれた方もいるのではないでしょうか。

私見ですが、アニメーションには、以下のようなメリットが存在していると考えます。

■メリット1:多方向から与える情報量の多さ
写真やテキストだけでは伝える事が難しい感覚的な情報までも、飽きさせずに魅力的に伝える事ができます。

■メリット2:注意を引きつけるパワー
人は動くものに注目し反応する習性があります。アニメーションを取り入れたサイトは、静止したWEBサイトよりも、より印象に残すことが可能と考えられます。

しかし、やりすぎは禁物です。デメリットとして、長時間アニメーションを見せることによって、ユーザーがWEBサイトにやってきた目的を妨げてしまう可能性があるためです。

また、情報量が多すぎてユーザーを迷子にさせてしまうリスクもあります!

ファイル容量が大きくなり読み込みに時間がかかってしまう事にもなりますので、バランスやユーザビリティをしっかり意識した上で、上手にアニメーションを取り入れましょう。