パララックスウェブデザインって？

前回のレスポンシブウェブデザインのブログに引き続き、最近流行っているパララックスウェブデザインに関してもいろいろと調べてみました。
パララックスウェブデザインとは、Flashを使わずにJavascriptやCSS3ののアニメーションなどを使って、スクロールすると複数の要素が奥行きのある視覚効果を生み出す「パララックス効果」を利用したウェブデザインのこと。

パララックスと言う言葉は、カメラ用語として使われていて
コンパクトカメラで光学ファインダを使用して撮影した際、ファインダ越しで決めた構図と、実際に撮影された写真の構図とに差が生じる事

 

を指します。

いろいろ調べていくと、ナイキやアディダス、グーグルなどがキャンペーンで行っていたり、企業のウェブサイトでも最近は広く利用されていることが分かりました。国内外の事例がまとまっているサイトは下記にまとめましたので、ざっとご確認ください。

 

・参照記事
最新の国内のパララックス効果を使用したサイトをまとめました
http://webdesignmatome.com/webdesign/parallax_jp
最近話題のパララックス効果を利用したアニメーションとデザインのキレイな国内・海外サイトまとめました
http://webdesignmatome.com/webdesign/parallax
スクロールに応じて要素がアニメーションする、視差効果（パララックス）を取り入れたWebデザイン例とTipsいろいろ
http://kachibito.net/web-design/parallax-scroll-inspiration.html
【2012年のWEBデザイン】流行決定！パララックスなWEBサイト【CSS3/HTML5】
http://matome.naver.jp/odai/2132488718618912101
優れたパララックスサイト
http://bit.ly/OEPsNh

 

スマホでもパララックス効果を使用！！

PCブラウザベースの事例はいくつもあるのですが、スマホでの事例がなかったので、調べてまとめました。

 

1.NIKE「CHOOSE YOUR FIGHT」

マイケル・ジョーダンの名前を冠したシグネチャーモデルの最新作「Air Jordan 2012」のPRサイト「CHOOSE YOUR FLIGHT」は、画面を下にスクロールするだけで、中の要素がタテ・ヨコ・ナナメに動き、それも立体的に見えるしかけを作っています。

トップ画面からスクロールしていくと、最初は「CHOOSE YOUR FIGHT」と言う文字がバラバラになり、さらにどんどんスクロールしていくと、戦闘機の形をした靴と「FLY OVER」と書かれた靴底が現れ分解し、それが合体し商品である靴になる。
同じくF1マシンの形をした靴と「FLY AROUND」と書かれた靴底、戦車の形をした靴と「FLY THROUGH」と書かれた靴底とがスクロールする度に分解され、合体するという動きをする。

説明よりも下記を見て体験してみてください。

PCブラウザはこちらから（http://www.nike.com/jumpman23/aj2012/）
スマホブラウザはこちらから（http://www.nike.com/jumpman23/aj2012/mobile/）

 

2.Online Portfolio von Jan Ploch

こちらはドイツのデザイン会社のサイトです。

スクロールするとビンの中のジュースが減っていく仕様となっています。

 

PC・スマホはこちらから（http://janploch.de/）

 

3.Atlantis World’s Fair

こちらは米国オレゴン州ポートランド出身のグラフィックデザイナー・イラストレーター・教師・クリエイター・ライターと言うなんともマルチな人物であるFrank Chimero氏が手がけたものです。
スクロールすると筒の中のエレベーターが下がって海底沈んだアトランティスへに連れてってくれます。

 

PC・スマホはこちらから（http://lostworldsfairs.com/atlantis/）

 

4.Ben the Bodyguard

ドイツ・ベルリンのNerd Communicationsから，2011年1月にリリース予定のiPhone／iPod touch用アプリのウェブサイトです。

スクロールをすると男が道を歩きながらいろいろと話をしてきます。

 

PC・スマホはこちらから（http://benthebodyguard.com/index.php）

5.東京タワーズ

谷口巧さんの写真集『東京タワーズ』が刊行されたと同時に公開されたサイトです。
PC版ではすべて縦スクロールだが、スマホで見ると、縦スクロールと横スライドで見ることができます。

サイトでは「東京タワー」と「夜」「海」「朝」「夕方」「赤」などのキーワードでTwitterで呟かれている内容を引っ張って来て各画面にあった内容を表示しています。

谷口さんの写真とTwitterの内容がインタラクティブにかつ美しく表現されています。

 

PC・スマホはこちらから（http://www.takumitaniguchi.com/tokyotowers/）

 

如何でしたでしょうか？

ウェブデザインも技術の発達とともにどんどん進化していってるんだなと実感をしています。モバイルのような小さな画面上でどのように表現をしていけるか、今後の展開が楽しみです。

 

またいろいろと勉強していきます。

株式会社フーモア　代表取締役社長　兼　漫画家　芝辻幹也
HP：http://whomor.com/
Fb：https://www.facebook.com/MikiyaShibatsuji
Tw：https://twitter.com/#!/mikiya_4822

 

 

Comments

comments