パララックススクロールとは

この記事の目的
Webの世界は日進月歩で進化していて、便利で新しい技術がどんどん登場しています。
その進化に伴い、新たな用語も年々増えています。
私たちが提供する「ホームページ制作サービス」の観点から専門用語を抜粋して分かりやすくお伝えします。

この記事の対象読者
Web制作を始めたばかりの人。
Webデザインを行なっているが、言葉の定義を再確認したい人。
自社でWeb担当を任されたが専門用語についていろいろ知りたい人。
など、Webに限らずDXに携わるすべての方に。

パララックスとは？

パララックス（parallax）、直訳すると「視差」という意味です。
もともと写真用語で、光学式ビューファインダーを使う際、レンズとの位置関係のズレにより、ファインダー視野と実際に撮影される画面にズレが生じる現象を指す言葉です。
Webの世界におけるパララックスとは、スクロールすることにより、複数のレイヤー（層）にある視覚要素を異なるスピードで動かすことで視差が発生し、立体感や奥行きなどの効果を演出する手法のことを指します。

パララックススクロールは動的に表示を切り替えて見せ、個性的な効果を表現することにより、サイトを印象づけることができるので、企業の特設サイトやキャンペーンサイトにも比較的多く使われます。

しかし、パララックススクロールの技法自体はすでに多くのサイトで採用されており、新しさは失われつつあります。
パララックスのメリットやデメリットを正しく理解した上で、独創的なレイアウトやUX設計をする必要があります。

パララックススクロールがもたらす効果

スクロールすることで生み出す演出に、ユーザーは興味を持ちやすくなります。
ユーザーに先進的なデザインを楽しんでもらい、能動的にスクロールしてもらえるため、SEO的にはサイトへの滞在時間が伸びる効果も期待できます。

パララックススクロールを使った制作上の注意

PCとタブレット・スマートフォンではスクロール量が異なったり、スクロールイベント発生中のJavaScriptの実行が制限されたり、CSSの条件が異なるため、ユーザエージェント(UA)やJavaScriptなどで分岐する必要があります。
そのため開発コストは一般のサイトに比べ多くかかります。

OSやブラウザ、機種ごとの対応分岐が増え、ページの読み込みが遅くなりユーザに不快感を与えるサイトにならないよう、UX（ユーザーエクスペリエンス）を考慮した設計も必要です。また、不必要なアニメーションにより、訴求したいものが伝えられなくなってしまわないように気をつける必要があります。どこのボタンを押せばいいのかユーザーが混乱してしまうようなデザインや文字の視認性、可読性にも気をつけましょう。