Webサイトのデザインで近年主流なのは「パララックス」を用いたデザインです。縦長のサイトでスクロールするに従って様々な要素が移動するようなサイトを見たことはありませんか？ パララックスは立体的で動きのある表現としてポピュラーなデザイン手法です。
今回は、そんなパララックスの説明と、うまく取り入れているサイト例をいくつかご紹介します。
パララックスとは？
パララックスとは、視差効果のことです。
複数のレイヤー（層）を作り、それぞれをスクロールに応じて違う速度で動かすことで、奥行き・立体感・遠近感を演出することができます。ひとつひとつの要素自体は二次元でも、簡単に立体的でリッチな演出が可能なため、特にビジュアル重視のWebサイトではポピュラーな手法となっています。
パララックスをデザインに上手く取り入れているサイト
※サイトによってはモバイルではパララックスではない場合がありますので、PCでご確認下さい
iPhone 6S
iPhone 6Sの商品ページでは様々なカラーのiPhoneが宙を舞っており、それぞれ微妙に異なるスピードで動作がつけられ、空間に幅を持たせています。重なりあうオブジェクトに影を付けているところもポイントです。
TRENDY STYLE - キリン 氷結®｜キリン
キリンの氷結のキャンペーンサイトです。スクロールやマウスの動きによって氷のかけらが舞い、各オブジェクトがレイヤーごとに表示されるという、まさにパララックスをふんだんに取り入れたサイトです。
大塚倉庫株式会社
大塚倉庫株式会社の企業ページです。わかりやすく各ページの主役オブジェクトを中心に他のオブジェクトがパララックスに動いています。
富士山麓
キリンウィスキー富士山麓のサイトです。パララックスといえば水しぶきや派手なモチーフを散りばめて動かすものが多いですが、こちらはオトナな雰囲気でここぞという商品の部分にゆったりめなパララックスを採用し、雰囲気を出しています。
リプトン スイーツティー｜紅茶の専門家リプトン（Lipton）
ページ上で周囲のお菓子や小物が浮遊しているように動きます。また、スクロールの際のページ送りも左右に動きながら下に下がっていっているような不思議な動きが楽しめます。
イタリア人が認めなかったパスタ。カップヌードル・パスタスタイル
日清のカップヌードル・パスタスタイルシリーズのサイトです。縦スクロールに合わせてたくさんの顔が画面に追尾し、ただついてくるだけでなく、コンテンツごとに合わせてた形並び直す、ユニークなパララックスの使い方をしてあるサイトです。
ヤクルトレディ CMドラマ
ヤクルトレディのお仕事をPRするためのサイトです。文字やオブジェクトかポップに飛び出して可愛いサイトになっています。相関図の部分など、細かいオブジェクトの出現タイミングなどが絶妙で、詳細な部分までテンポよく作られています。
LALAN（ララン）｜ワコール
人魚がコンテンツの奥側や手前側を泳いでるように、スクロールに合わせて移動するので、まるでコンテンツが海中に浮かんでいるかのようなイメージをユーザーに与えています。ページ途中の境目が波のように動くのも、より海中や水のイメージを引き立たせます。
