昨年度からWebサイトに取り入れられ始めたパララックス効果、現在でも取り入れられているWebサイトをよく見ます。実際にパララックスが取り入れられているWebサイトを実際に触って興味を持ったり、作成された方もいるのではないでしょうか。参考にできるパララックスを使ったサイトはたくさんありますが、今回はパララックス効果を上手く取り入れ、ストーリーを印象的に伝えているサイトをまとめてみました！
（参考: 15 Awesome Websites That Tell a Story As You Scroll）

Every Last Drop

http://everylastdrop.co.uk/
私たちが起きてから寝るまでに使う水の量が視覚的にわかるWebサイトです。

Ben the Bodyguard

http://benthebodyguard.com/index.php
写真やメモ管理アプリのランディングページです。スクロールすることでキャラクターが動き、このアプリの良さを説明します。

Dangers of Fracking

http://www.dangersoffracking.com/
水の行方を水視点で追いかけたWebサイトです。

Eclectic Pedicab Rides

http://www.spokespedicabs.com/
バイクタクシーのような乗り物の宣伝サイトです。その乗り物が町中を走ります。

Slavery Footprint

http://slaveryfootprint.org/
スクロールすることで奴隷として働いている人たちについての文書が出てきます。

How Far is it to Mars?

http://distancetomars.com/
地球から火星までの距離をピクセルで表したWebサイトです。たくさんスクロールしないと火星にたどり着けないので火星までの距離の遠さが実感できます。

Air Jordan 2012

http://www.nike.com/jumpman23/aj2012/
ナイキの靴がスクロールすることで現れ、飛行機やレーシングカーに変形していきます。

James Bond 007 Cars Evolution

http://www.evanshalshaw.com/bondcars/
映画007シリーズに登場する車の歴代の車が時代ごとに現れます。

Peugeot HYbrid4 Graphic Novel

http://graphicnovel-hybrid4.peugeot.com/start.html
スクロールすることで紙芝居のように画像が展開されていきます。

D’Angelico Guitars

http://dangelicoguitars.com/
スクロールとともにギター会社の経歴が見ていけます。

The State of the Financial & Economic Education

http://surveyofthestates.com/
学生ローンを背負っているアメリカの学生の現状を説明しているWebサイト。

TRON LEGACY

http://disneydigitalbooks.go.com/tron/
ディズニー映画TRONのサイトです。方向キー、または画面をドラッグすることで画面が遷移し、アメコミのTRONがどんどん展開していきます。キャラクターも動いているので迫力があります。

以上です！
パララックスをうまく取り入れることでユーザーにメッセージを届けやすくなりそうですね。デザインの参考になれば幸いです！

Share on

Goodpatch
Goodpatch公式アカウントです。