creatersnest

スクロールするのが楽しくなるパララックスサイト20選


2012年頃から流行しているパララックスサイトデザイン。
アイディア次第では
他のサイトと違った個性的な情報の見せ方をすることができます!

 

そこで今回はスクロールするのが楽しくなる
パララックスサイトをご紹介します!

SEABREEZE

スクリーンショット 2015-07-10 14.46.05
http://www.seabreezeweb.com/wsidestory/
スクロールしていくごとに物語が進んでいき、
まるでドラマを見ている気分になるサイトです。
音楽が流れたり好きなムービーをチョイスできるのもいいですね。

 

schweppes

スクリーンショット 2015-07-10 14.47.25
http://c.cocacola.co.jp/schweppes/
何かと話題になったschweppes!
サイトも黒を貴重としてかっこいいです。
背景の泡の演出がまたクール!

 

東京スカイツリー

スクリーンショット 2015-07-10 14.49.01
http://www.tokyo-skytree.jp/
スクロールしていくとスカイツリーの構造を先端から眺めていく仕掛けになり、
一押し情報や各部分の説明も動きに応じて出てきます。

 

Mario Kart Wii Experience

スクリーンショット 2015-07-10 14.50.54
http://www.nintendo.com.au/gamesites/mariokartwii/#rediscover
NntendoオーストラリアのマリオカートWiiのサイトです。
縦スクロールではなく、道に沿って横や斜めに進む仕様になっています。

 

キリン 澄みきり

スクリーンショット 2015-07-10 14.54.36
http://sumikiri.jp/
gifアニメーションを活用し
シネマグラフにパララックスを掛け合わせてサイトを作成しています。

 

LION‐HYGIAハイジア

スクリーンショット 2015-07-10 14.54.08
http://top.lion.co.jp/products/hygia/secret/
こちらのサイトスクロールは「上から下」ではなく「下から上」と
少し変わった構成になっています。

 

KathArt

スクリーンショット 2015-07-10 14.56.39
http://tour.kathart.dk/
デンマークのデザイン会社のホームページです。
スクロールしていくと社内見学ツアーのような体験をすることができます。

 

BUZZHOOK

スクリーンショット 2015-07-10 14.57.07

http://www.buzzhook.co.jp/
スクロールしていくと模様が合体していくアニメーションのように見えます。

 

KRYSTALRAE

スクリーンショット 2015-07-10 15.00.24http://krystalrae.com/

スクロールしていくとモデルさんの洋服が変わっていきます。
服飾関連のサイトにはぴったりですね!

 

84デザイン室

サンプル
http://design.hmk84.com/
スクロールするたびに「ふわっ」と浮かんでいるアニメーションに
なっていて楽しいサイトです。

 

イタリア人が認めなかったパスタ

スクリーンショット 2015-07-10 15.00.33
http://www.cupnoodle.jp/pastastyle/
サイト全体が1つの物語として作成されています。
また調査結果などのアニメーションもわかりやすいです。

 

パシフィックコンサルタンツ株式会社

サンプル
http://www.pacific.co.jp/recruit/
未来をテーマに描かれた絵がスクロールする度に動きます。
青、白、黒を貴重としていてシンプルで見やすいです。

 

cultural solutions uk

サンプル
http://www.culturalsolutions.co.uk/
スクロールではなくマウスに反応して背景の円が動く仕様になっています。

 

HOME

サンプル
http://studio-home.jp/#/MENU/
スクロールして写真が切り替わる際のモーションが面白いサイトです。
1枚目は上から下に2枚目は下から上に変わるところがいいですね。

 

ユニーお中元

スクリーンショット 2015-07-10 14.45.06
http://www.uny.co.jp/sp/summergift/
漫画のようなコマ割りになっていて、スクロールする度
漫画を読んでいるような感じになるサイトです。

 

APOLOGIE

サンプル
http://apologie-paris.com/en
ポイントにgifアニメーションを使うことで
目立たせたい箇所が際立っています。

 

WEB SMILE

サンプル
http://www.kobelco2103.jp/websmile/
スクロールするごとに文字やイラストが動きます。
絵本を見ているような感じがして楽しいサイトです。

 

情熱マリ子の世界

スクリーンショット 2015-07-10 15.10.42
http://www.jonetsu-web.com/
デザインも統一されており、1つの物語のようになっているサイトです。

 

ジュレとソースの贅沢仕立て WITH HAPPINESS

サンプル
http://www.tarami.co.jp/withhappiness/
スクロールするごとに画面が切り替わり、コマーシャルを見ている気分になります。

 

京都大学

スクリーンショット 2015-07-10 14.41.14
http://www.kyoto-u.ac.jp/explore/
スクロールすると京都大学の中を探検できる仕様になっています。

 

まとめ

如何だったでしょうか。
パララックスなどのスクロールエフェクトの流行には
「格好いい」とか「面白い」といった単純な理由以外に、
操作性や独特な情報の見せ方などちゃんとした裏付けがあります。
パララックスサイトを作成する場合は、
見易さや操作性に気をつけてデザインするよう心がけましょう!

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Article【CSS】オンマウスで画像にふわっと白いエフェクトがかかるようにしてみよう!