デザイン /

パララックス(視差効果)を効果的に使ったサイトまとめ 日本編

パララックス(parallax)は直訳すると「視差」という意味。
具体的には、スクロールの動作に応じて、複数のレイヤーを異なるスピードで動かすことで視差を生み出し、立体感や奥行き感を演出する手法です。 2012年くらいからはやりはじめ、今ではいろいろなところで目にするようになってきました。 若干ブームは過ぎ去った感はありますが今回は主に日本のサイトでパララックスをうまく取り入れたサイトをご紹介します。

パララックスサイトは実際に触ってみて、その効果を体感した方が分かりやすいと思います。
サムネイルとサイト名にリンクがついていますのでぜひ実際のサイトもご覧いただければと思います。
それでは早速行ってみましょう!

  
スパイスボックス|2015年度採用サイト

webマーケティング会社スパイスボックスの新卒採用サイト。カラフルな幾何学模様がリズミカルに動きインパクトを出しています。

スクリーンショット(2014-01-29 12.06.59)   
KIRIN|澄みきり スペシャルサイト

KIRINの第三のビール「澄みきり」のスペシャルサイト。パッケージは刀をイメージしたらしく、WEBもキリッとした切れ味する鋭い感じになってます。ピールやホップなどがパララックスを用いて現れ奥行き感が出ています。

スクリーンショット(2014-01-29 13.05.26)   
株式会社 菱健|コーポレートサイト

京都にある呉服店 菱健のコーポレートサイト。着物の柄が幾重にも折り重なっているような表現をパララックスを用いてうまく表しています。

スクリーンショット(2014-01-29 12.07.24)   
みほ幼稚園

横浜の幼稚園のWebサイト。スクロールするとイラストの子供が歩いたり、ボールを蹴ったり、転んだりするかわいらしいアニメーションがつきます。スクロールごとに季節が変わり、それに合わせて背景も変化します。

スクリーンショット(2014-01-29 12.13.15)   
ライオン|HYGIA(ハイジア)スペシャルサイト

ライオンの衣類用洗剤 HYGIAのスペシャルサイト。上へスクロールしていくのが珍しいですね。スクロールに合わせて矢印や子供が元気にとびだしてきてダイナミックな印象を受けます。

スクリーンショット(2014-01-29 13.25.28)   
資生堂|エリクシール シュペリエル商品ページ

資生堂のスキンケアブランド、エリクシール シュペリエルの商品ページ。スクロールに合わせて、ゆっくりフェードインしてくる商品や文字などがエレガントな雰囲気を出してます。

スクリーンショット(2014-01-29 12.20.47)   

以上となります!
パララックス効果はアイデア次第で非常にインパクトのあるデザインにすることができます
スペシャルコンテンツ的な世界感をつくりあげていくタイプのWebサイトと相性が良さそうな印象でした。
ぜひ参考にしてみてください!

この記事を書いた人

斧山洋平

PAGE TOP