デザインを考える～パララックス～

パララックスとは？

　パララックスとは、視差効果のことを言います。

　Webデザインにおけるパララックスはスクロールやホイルーンなどの動作に応じて、複数のレイヤー（層）にある要素を異なるスピードで動かすことで視差効果を演出するデザイン手法です。フロントページやライティングページなどで見られるデザインです。

　パララックスを使うとページに動きを持たせることができるためデザインにアクセントを付け加えることができます。

　もともとパララックス（parallax）は写真用語で光学式ビューファインダーでレンズとの位置関係のズレによりファインダー視野と撮影される物とで画面にズレが生じる現象を指す言葉です。

パララックスの効果

　パララックスには大きく別けると立体感や奥行きを演出とフェード・拡大縮小・回転などのエフェクトがあります。

　そんな効果を利用して会社や商品やサービスのイメージをブロック化させ印象づけて表現することができます。それらをワンカラムで縦長に配置することで閲覧者をサイトの中へと引き込むことでコンテンツへの導線を一本の道（ストリート）のように表現でき、各コンテンツの詳細へも誘導しやすくなります。

　ストーリーテリングを用いたページと相性のいいデザイン手法です。

　ストーリーテリングとはページ全体にストーリー性を持たせ、１つのページで１つのストーリーを伝えるようなデザインのことを言います。

　スクロールする度にページの要素が浮き上がってくるようなデザインのサイトは、スクロールすると次は何が表示されるのだろうという興味をユーザーに持ってもらうことができます。

パララックスのポイント

　パララックスを使用する場合、いくつかのポイントがあります。以下に５つのポイントをご紹介します。

方向

　パララックスの方向は、縦方向、横方向、縦横方向、全方向、全方向(ジャイロ対応)がありますが、主に縦方向の演出が多いです。

ただ、ワンカラムレイアウトの場合、コンテンツが長くなることは短所にもなり得る部分です。そのようなときに横方向のパララックスを組み合わせることが効果的です。

デバイス（レスポンシブ対応）

　デバイスを考慮したパララックスを実装する必要があります。

アニメーション効果

　パララックスは何度も言いますがスクロールに連動したアニメーション効果です。

　そんな複合的な要因と効果を組み合わせることで面白いサイトにすることができます。そんな一例を上げていきます。

　フェードイン：透過／移動（左右上下）
　フェードアウト：透過／移動（左右上下）
　回転（３Ｄ）
　縮小

　アニメーション効果だけならＣＳＳで簡単に付けることもできます。

※ただ、単なる永遠と続くアニメーション効果とは違いスクロールで連動させることがパララックスの視覚的な効果なのです。

実装方法

　ライブラリやプラグインを使うのが最も簡単です。

　基本的にJavaScriptやjQueryを使って実装していきます。JavaScriptでもjQueryでも便利なプラグインが多数公開されているので、目的に合ったプラグインを使えばHTMLタグに簡単な情報を加えるだけであっという間に実装することができます。

※WordPressはjQueryをロードしているので必然的にjQueryの構文で記述することになります。

　パララックスを実装するための多種多様のプラグインが存在しますが、プラグインの中から特に人気が高く、おすすめのプラグインを厳選しました。下記を参考にプラグインを見つけてみてください。

対応するブラウザやデバイスとパララックスの方向など実装の難易度やjQueryに依存するか否など注意が必要です。

プラグイン名 パララックスの方向
Rellax.js 縦方向
Parallax.js 全方向(ジャイロ対応)
SUPER SCROLL ORAMA 縦方向
jinvertScroll 横方向
STELLAR.JS 縦横方向
jarallax 縦横方向
Scrolly 縦方向
skrollr 縦方向

※デザイナーではなくコーダー寄りの実装になります。

注意点

　実際にこのようなデザインを導入するにあたり注意しなければいけない点がいくつかあります。

　多くのコンテンツが一枚のサイトに集約されます。多くの画像も使うことになるため、サイトが重くならないように工夫する必要があります。

　インパクトのある視覚演出効果を実装するために出来るだけ多くの要素を入れる気持ちが働きますが、コンテンツの錯綜（さくそう）により本来の訴求（そきゅう）ポイントが見失ってしまう場合もあります。動きのある効果求めるあまりに、各要素の妥当性必要性をユーザー目線の考えで不快感を与えていないかＵＸ（ユーザーエクスペリエンス）を考慮した入念な設計、チェックを行いましょう。

パララックス(視差効果)を使ったサイト

視差効果という言葉だけでは想像しにくいと思いますが、以下の参考サイトでイメージを掴むことができると思います。