ノウハウをいつでも。ウェブマーケティングのポータルサイト

サイト紹介

すご〜く印象的!アニメーションを効果的に使ったサイト10選

このエントリーをはてなブックマークに追加
      
follow us in feedly
友だち追加数
アニメーションでダイナミックに動くサイトには目を引かれます。ひと昔前はFlashが主流でしたが、今ではJavascriptが使われていることが多いようです。

先日、自分の会社ホームページ(ノイズ社のディレクター&デザイナーをしつつ、パートナー企業として自分の会社も運営しております)で、比較メディアOEM製品を紹介するランディングページを作りましたが、そのときアニメーションを実装してみました。今回はその際に参考にしたお手本サイトをご紹介します。どれもいろんな動きをしていて、インスピレーションが刺激されます!


クロマリズム Chromarhythm Inc.

chronarhy.jpg http://chromarhythm.co.jp/

Web映像を発信する制作会社クロマリズムさんのコーポレートサイト。スクロールする度の背景のアニメーションが逸脱です。見てて飽きず、クリエイティビティを感じさせます。


株式会社フリーセル監修 スマホ&タブレットサイト制作サービスLPページ

lp.jpg http://www.web-consultants.jp/lp/smartphone/lp.html

とてもインパクトの強いランディングページです。アニメーションと赤色を効果的に使っていて訴求力があります。


Teehan+Lax - Defining Experience

Teehan.jpg http://www.teehanlax.com/

アニメーションが使われているのは一部のページで、動きはそんなに大きくありませんが、シンプルでスッキリとしたデザインにマッチしています。


Mahédine Yahia Portfolio

Mahédine.jpg http://www.mahedineyahia.fr/

これはユニーク! スクロールする度に筆者が下から出てきます。


Tinké | Take The Tour

Tinké.jpg http://www.zensorium.com/tinke/

商品紹介にアニメーションが絶妙にマッチしています。スクロールしていくのが楽しいです。


Blue Lagoon Geothermal Spa in Iceland

BlueLagoon.jpg http://www.bluelagoon.com/

ゆっくりと動く系のアニメーションです。ゆったりとしたリラックスできる雰囲気を伝えています。リゾート地を紹介するならではのアイデア!


Volkswagen

Volkswagen.jpg http://vw-up.jp/

スクロールせず上からページをめくって紹介しています。スクロールで車を操作する年表ページやフォトギャラリーなどにいろいろな動きがついています。


日清焼そばU.F.O.

ufo.jpg http://www.nissin-ufo.jp/

ページの所々で様々なアニメーションがあり、インパクトの強い印象があります。


Biamar

Biamar.jpg http://biamar.com.br/

横幅をいっぱいに使ったシンプルなサイトにアニメーションがよく合っています。クールかつダイナミックで印象に残ります。


SP EXTREMES

SPEXTREMES.jpg http://www.sp-extremes.jp/

斜めの要素と躍動感のある写真が印象的!スポーツ系のとてもシャープな感じが伝わってきます。


さいごに

いかがでしょうか?動きがあるサイトにもいろいろなタイプがありましたね。

アニメーションはやみくもに使えばいいというわけではありません。サイトの特徴、設計、雰囲気とうまく合ってこそ印象良く見えると思います。使い方にはぜひとも注意してください。

© MAKEPO

 
このエントリーをはてなブックマークに追加
   
follow us in feedly
友だち追加数

著者情報

ノビタ

のび太

Web制作会社「NOBITA」の社長をやっております、のび太と申します。大学卒業後、お金を貯めカナダに留学。バンクーバーのビジネス学校で好きな人に出会ってしまったため、日本に帰らず現地企業に就職。未経験ながらWeb制作、メディア運営、ライター業などの仕事に奮闘する。帰国後、フリーランスのWebデザイナーとして独立し、2014年5月、自身の会社を設立。「伸びていくWebサイトをお届けする!」がモットー。 ブログ:がんばれ!のび太!

他の参加者を見る

のび太

関連記事

マーケティングノウハウ足りてますか?

MAKEPOのメルマガ…購読してみませんか?
直近のピックアップ記事のほか、セミナー・ツール活用情報など不定期でお伝えしています。「サイトにアクセスするのは面倒だ!」「電車の中でざっくり読みたい」という方は是非ご登録ください。 リアルタイムで情報取得をしたい方は、RSSまたは公式Twitterをフォローしてご覧ください!

通勤中の情報収集に!

メルマガ登録

いますぐ新着情報を知るなら

LINE@で友だちに追加!