GOODTABLE鎌倉オープン
GOODTABLE鎌倉オープン
2012.04.19

縦スクロール(パララックス)で魅せる!スクロールをカッコ良くデザインした28個のWEBサイト

たか

ランディングページやサービスページは1ページで制作することがあります。

デザインにこだわりたいサービスや、ユーザーに世界観やインパクトを伝えたい場合、スクロールを上手く利用して動きや遠近感、ストーリー性をデザインに組込む(パララックス)のはおすすめです。

縦スクロールで、デザイン性が高く、見ていて楽しくなるパララックスWEBサイトを28個ご紹介します。
一味違った1ページのサイトを制作する際のヒントになればいいなと思います。

次週は横スクロール(パララックス)版をご紹介します。

Matt Brothers

http://www.mattbrothers.net/

Pixel Fable

http://pixel-fable.com/

途中の青いお面、心無しかおじいちゃんに似てなくもないような…。

東京スカイツリー

http://www.tokyo-skytree.jp/index.html

クオリティが高いなー。何処の制作会社がつくってるんだろう。

Balloon

http://balloon.am/

友人のnagisaさんのサービス。センスいいサービスページ。

SUPER C

http://zxcvbnmnbvcxz.com/

こちらも友人の野間さん。カッコいい。

James hayter

http://www.james-hayter.com/

Dangersoffracking

http://www.dangersoffracking.com/

webleedDesign

http://www.webleeddesign.com/

freestyle night

http://www.freestyle-night.ch/

iDESCUBRE

http://www.lagentehadichosi.es/

manufacture dessai

http://www.manufacturedessai.it/it/

Dentsu

http://dentsunetwork.com/#/history

Unfinished Business School

http://www.unfinishedbusiness.is/

wesc

http://wesc.com/footwear

David Beckham

http://www.davidbeckham7.co.uk/

unfold

http://unfold.no/

intopi

http://www.iutopi.com/

Campaign Monitor is hiring

http://www.campaignmonitor.com/hiring/

netlash bseen

http://www.netlash-bseen.be/

JAN PLOCH

http://www.janploch.de/

Nike better world

http://www.nikebetterworld.com/journey/

Lostworlds  fairs

http://lostworldsfairs.com/atlantis/

Appmiral

http://www.appmiral.com/

cultural solutions UK

http://www.culturalsolutions.co.uk/

SMOKEY BONES

http://smokeybones.com/

bloom

http://bloom.io/

SoleiNoir

http://www.soleilnoir.net/believein/#/start

La moulade

http://lamoulade.com/#!/services

作り方

Javascriptやらcssやらで、スクロールの速度を調整して、視覚的に遅い部分と早い部分を制御するような感じだと思うのですが、細かい事はデザイナーチームに聞いてみようと思います。

□チュートリアル
http://www.webdesignshock.com/one-page-website/