パララックス効果を使った楽しいWEBデザイン!

By in WEB, クリエイティブ on 2013/08/02

 

今更ながら、「パララックス効果」とは ・・・

 

「パララックス(視差)効果」とは

画面スクロールに合わせ、複数の画像をそれぞれ異なる早さで動かすことによって、動きのあるレイアウト(デザイン)を可能にする「パララックス(視差)効果」。縦長のページ使われることが多く、ページ内容に合わせ視覚的にストーリー性を持たせた展開が可能。

 


「KIRIN -澄みきり-」
http://sumikiri.jp/

p_5

 

WEBの可能性を感じさせてくれるサイト。
アイデアとテクニックでいろんなコトができそう。

 

 


「cuppow -カッパウ-」
http://www.cuppow.jp/

P_2

 

保存用ビンをトラベルマグへと変える優れアイテム「カッパウ」のサイト。
パララックス効果を用いることで、アイテムの使い方を視覚的にわかりやすく、そして楽しく紹介していますね。

 

 


「東京スカイツリー」
http://www.tokyo-skytree.jp/

P_3

スカイツリーのその高さと、スクロールに合わせた動きのパララックス効果が機能的にもページデザイン的にもマッチしている!?
一歩間違えればただの長ーーいページですが、長さに対する不快感を感じさせませんね。

 

 


「任天堂 マリオカートWii
http://www.nintendo.com.au/gamesites/mariokartwii/

p_4

 

横への動きがパノラマ感をだし、またマリオの世界観を見事に表現している!
マリオ大好き!

 

 


「ATANAIPLUS」
http://atanaiplus.cz/index_en.html

P_1

 

iPhone(?)が、クルクルクルと回転しながらサービスの説明画像と合わせ紹介されていきます。

ダイナミックな表現が可能なパララックス効果は、キャンペーンサイトやランディングページに持ってこいかも。

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>