パララックス効果、エフェクトを使ったイケてるサイト10選

パララックスとは視差効果で奥行きを出すエフェクトです。またスクロールエフェクトと合わせ、背景やコンテンツに変化を加わえ、展開やストーリー性を持たせることができたり、ビジュアルに大きな動きを出せたりするところが特徴です。2010年頃からWEBのトレンドとして多くのサイトで取り入れられるようになり、今ではファッションブランドやアーティストのサイト、企業など様々なWEBサイトで使われています。

 

そこで今回は改めて、パララックス・スクロールエフェクトを使ったイケてるサイトをご紹介します。

 

思わず、おぉ?！っとなるかっこいいパララックス効果WEBサイト

DEEPSEA　DIVE

via DEEPSEA DIVE

こちらは、海の環境や生き物という資源を訴えるサイト。スクロールするごとに、どんどん深い海に潜っていくような物語になっています。色々な魚が出てくるのですが、それらの魚の説明も見ることができます。まるでダイビングしている気分になる面白いWEBサイトです。

 

 

Alee Foroughi

via?ALEE FOROUGHI

こちらは海外のデザインスタジオのWEBサイト。幾何学的なモチーフと写真や手書きのイラストを掛けあわせてクリエイティブな世界観を表現しています。

 

 

LIFE of PI

via LIFE OF PIE

映画「ライフ・オブ・パイ/トラと漂流した227日」のWEBサイト。虎と少年が小さなボート程の小型船で漂流をする物語ですが、スクロールでページを進んでゆくと制作の過程や映像が楽しめます。映画もみましたが、映像が綺麗でとてもオモシロイですよ！

 

 

キリン 澄みきり

via 澄みきり

「キリン 澄みきり」のWEBサイト。冷えたビールのしずく感や、素材のこだわり、メッセージがとても伝わってきます。写真も美しく、思わずグビグビっと飲みたくなってきますね。

 

 

LETTERS, INC

via LETTERS, INC

WEB制作会社のコーポレートサイト。電子回路のようなモチーフと、スクロールで進んで幾度に現れるデザインがとってもクリエイティブ。いつも、定期的にリニューアルされていて楽しませて頂いています。日本の制作会社ですが、まるで海外のサイトのようです。

 

 

Melanie F

via Melanie F

シューズメーカーのWEBサイト。ルックブックとして商品を楽しみ見ながら見ることができます。色使いもとってもキレイです。動きのある文字のエフェクトもいい！

 

 

Dangers of fracking

via Dangers of fracking

雨の行く先をイラスを用いて、ストーリー仕立てで表現しています。トラックがスクロールに合わせて走ったりして可愛い。

 

 

MANUFACTURE D’ESSAI

via?MANUFACTURE D’ESSAI

こちらもシューズブランドのWEBサイト。スクロールする毎に現れる花びらが奥行きを表現しています。女性らしいデザインのサイトです。

 

 

Madwell

 

via Madwell

海外の制作会社のコーポレートサイト。スクロールするに従って自然や都市をモチーフにしたビジュアルが展開されて行きます。アーティスティックな雰囲気がかっこいい！

 

 

Studio Meta

via studiometa

写真が表示されるエリアとテキストのエリアが半分に分割された、印象的なサイト。写真と背景のカラーの移り変わりが目を引きます。写真も、フォントの感じもいちいちかっこいい！

 

 

UNFOLD

viahttp://unfold.no/

斜めのラインがスタイリッシュなサイト。色使いも個性的です！

 

 

Nikon1 AW1

via?Nikon1AW1

ニコンのNikon1AW1特設ページ。商品の特徴でもある、タフさをスクロールする毎に表示されるスペックと背景のシチュエーションで様々な環境に耐えうる性能を表現しています。ダイナミックでかっこいいサイトです。

 

いかがでしょうか。パララックスを使ったダイナミックな表現のサイトがたくさんありました。動きのあるクリエイティブなサイトは見る人を惹きつけます。見ていて楽しい、というのはWEBサイトの大切な要素だと改めて感じますね。

 

パララックスに関するおすすめの記事はこちら
これはカッコイイ！動きが効果的なパララックスサイトまとめ
パララックスを簡単実装！オススメのjQueryプラグインまとめ！