パララックスとは？
パララックス（Parallax）とは、Webデザイン上の「視差効果」のこと指します。
パララックスデザインとは、Webサイトに立体感や遠近感を持たせることでデザイン性が高まるデザインの表現方法の一つです。スクロールなどの動きに合わせて、複数の層にある要素を様々なスピードで動かしアニメーションをつけたり、各要素の配置を変化させたりすることで上記のような表現にすることが可能です。パララックスを使用することで、Webサイトを目を引くようなサイトにできたり、スタイリッシュにかっこよく魅せることができるようになります。
縦長ページでパララックスが用いられることが多く、マウスホイールでスクロールしなくても、グローバルメニューをクリックすれば目的の情報まで自動的にジャンプしてくれる機能が一般的です。パララックスの技術についてはCSS、jQueryなどを用いることが多いですが、その他にもいくつかの手法が開発されています。
パララックスのメリット
Webサイトでパララックスを使うメリットをいくつかご紹介します
先進的/オシャレな印象を与えることができる
パララックスを使用することで、Webサイトに動きをつけることができます。動きがあるデザインになることで先進的でオシャレな印象を持ってもらうことができやすくなります。
また、視差効果を使うことで目立たせたい・読んでもらいたい情報やコンテンツをユーザーにより印象を強く持ってもらうこともできます。
例えば、企業のコーポレートサイトでは、信頼性だけではなく先進的と思ってもらうことも重要な観点の一つです。そういった場合は、パララックスを使うのが適している場合もあります。
ユーザーに能動的にスクロールしてもらいやすい
パララックスのように動きのあるデザインや、スクロールすることでコンテンツが順々に出てくるようなサイトの場合、ユーザーは能動的にサイトをスクロールしやすくなります。視覚的に興味を持たせることで、次はどのように動くのかな、何が出てくるのかなといった興味を持たせることができるのです。
ストーリー性を持たせながらユーザーに読んでもらうことができやすい
パララックスを使用することで、興味関心をひきスクロールしてもらいやすくなることは上記で記載した通りですが、もう一つの効果として、サイト全体にストーリーを持たせながらユーザーに読んでもらえるという点もあります。
パララックスデザイン（視差効果）により、サイト側が伝えたい重要な情報を効果的に伝え、ユーザーの心に響きやすくなります。順序だてて理解を促したいようなコンテンツ（商品紹介やサービス案内）では、パララックスを使うことでより効果的に訴求することができやすくなります。
パララックスのデメリット
メリットがある一方で、パララックスを使うことでデメリットが発生する場合もあります。
デメリットに関してもいくつかご紹介します。
表示速度が遅くなる傾向がある
パララックスのような動きをつける際に、プログラミング言語の一つであるJavaScriptを使うことでデータの処理に時間がかかりページの処理速度に遅延が発生することが要因です。
ある程度は、工夫次第で遅さを感じないようにすることもできますが、ユーザーにWebサイトの表示が遅いなぁと思われると、Webサイトを離脱する確率が高まります。あまりに遅い表示速度にならないようパララックスを使用する際は、注意が必要です。
パララックスが好まれない可能性がある
ユーザーの好みにもよりますが、通常のWebサイトデザインと異なることで、パララックスが好まれないなど好みが分かれることもあります。
すぎに情報を手に入れたいユーザーにとっては、パララックスのように例えばスクロールしないとコンテンツが出てこない場合、情報にたどり着くまで時間がかかることが負担・ストレスに感じることもあるのです。どのような印象を与えたいかなどを加味した上で、こういったユーザーもいることも念頭に置きながら作成を進めることが大切です。
デザイン制作コストと手間がかかる
通常のWebサイトよりひと手間かかるのがパララックスデザインです。
端末ごとにアニメーションを変化させる必要があるためスマホとPCでもデザインを変える必要があり、手間と制作コストがかかります。メリットがある一方でこのようにコストと手間がかかる一面もあるため、パララックスデザインを取り入れる際は理解した上で取り入れると良いでしょう。
パララックスデザインのWebサイト事例
パララックスデザインを使用したWebサイトをいくつかご紹介させていただきます。
まずは、デジタルハリウッドの卒業生の卒業制作でご紹介します。
制作者：小西 快 さん
Webデザイナー専攻 超実践型就職・転職プラン
作品紹介：
本職は映像クリエイターなので、ポートフォリオサイトを作り、サイト上で自分の人となりや経歴、過去に作った映像作品を紹介したいと思い制作に至りました。
デザインは、海外風のミニマルなスタイルながらも、WebGLの3Dグラフィックスを使った「スクロールするだけで楽しいインタラクティブなサイト」をコンセプトに制作しました。また、留学で得た英語力も強みなので、日英に対応したバイリンガルサイトにしています。
パララックス事例：自動車業
ドイツの自動車メーカー「ポルシェ」のWebでサイトでは、スクロールで車種が変わり、それと同時に音楽も切り替わるサイトデザインになっています。ポルシェの歴史とストーリーがパララックスデザインを使用することによって魅力的に表現されています。
パララックス事例：コーポレートサイト
「DONGURI」というデザイン思考を軸に、メガ〜ミドルベンチャーからスタートアップを対象とした組織変革コンサルタントを行う企業のWebサイトでは、動きのある絵画デザインを用いており、スクロールしていくと企業のメッセージが浮かび上がってきます。先進的な印象かつ一度見たら忘れないユーザーの印象に残りやすいWebサイトです。
Webサイト：https://www.don-guri.com/
パララックスを採用する際の注意点
パララックスデザインを使用する際の注意点は、いくつかあります。
ページの表示速度を確認しながら制作を行いましょう。
デメリットでも記載した通り、パララックスデザインのような動きのあるWebサイトの場合、表示速度が遅くなる可能性があります。
極端に遅くなってはいないか等、サイト公開前に必ずテストを行いましょう。
また、併せてアニメーションやテキストが正常に動作しているか、スマホ・PCそれぞれのデバイスで確認を行うようにしましょう。
パララックスデザインが適しているかをクライアントにヒアリングした上で制作を進めましょう。
Webサイトを制作する前にまずは、クライアントの要望やどのようなWebサイトにしたいのか制作目的を明確にヒアリングすることが大切です。
Webサイトの制作目的によって、パララックスデザインが適さない場合もあります。その上でどのようなパララックスデザインが適しているのかを判断し効果的に取り入れましょう。
まとめ
今回は、パララックスについて、概要からメリットデメリット、パララックスを用いたWebサイトの事例をご紹介させていただきました。
ご紹介した通りメリット・デメリット、パララックスを用いる上での注意点などはありますが、使い方によってはユーザーのサイト滞在時間を長くすることができたり、魅力的にみせることができたりと非常に効果的なデザイン手法になります。
効果的な使い方を学び、理解したうえでぜひ今後のサイト制作に取り入れてみてはいかがでしょうか。