企業や商品がWebサイトを持つことが当たり前に近しい時代となってきました。

かつては、Webサイトを持っている持っていないでファーストインプレッションを与えていましたが、今では多くの企業ページや商品ページがあるため、商品や企業の判断材料が変わってきました。

では、どこで差を付ければいいのでしょうか。

それは、スクロールする度に背景が動くなどWebサイトコンテンツの工夫です。

Webサイトに動きを付ける「パララックス」という言葉があります。

今回はその「パララックス」についてご紹介いたします。

1. パララックスとは

パララックス（parallax）直訳すると、「視差：観測位置の相違により生じる物の視覚像や方向の差異」という意味になります。

Webサイト上では、このパララックスの効果を取り入れることがあります。

Webサイト上でパララックスを利用することによりコンテンツの「動く方向」や「部分ごとでの動くスピード」が異なる演出など、Webサイトに「動き」を生みだすことができます。

スクロール操作によって要素が動いたりスピード感が出るので、ユーザーにインパクトを与え、飽きさせないようにすることができます。

2. パララックスのメリット

次に、パララックスのメリットについて4つご紹介いたします。

興味を惹くことができる

まず1つ目は、ユーザーの興味を引くことができる点です。

パララックスでWebサイトに動きを持たせることで、一般的な静的サイトよりも、ユーザーの興味を惹くことができます。

スクロールしてもらいやすくなる

2つ目は、ユーザーにスクロールしてもらいやすくなる点です。

スクロールと同時にコンテンツが現れたり動いたりすると、ユーザーは「次も見たい」とさらにスクロールしてくれるかもしれません。

動画再生や広告とは違い自分の操作で画面を動かしたり、好きなペースで読み進めていくことができるので、Webサイトの滞在率アップにも繋がります。

おしゃれでイマドキ感が出る

3つ目は、Webサイトをイマドキでおしゃれにすることができる点です。

これはパララックスの最大のメリットと言っても過言ではありません。

他社のWebサイトとの差別化はもちろん、動的なWebサイトにすることで時代に適応できているというアピールにもなります。

文字や写真、イラスト情報だけでなく動くコンテンツも活用することで、企業やサービスの伝えたいことを強く印象付けることができるため、視覚的な訴求力が高まります。

ページにストーリーを持たせることができる

4つ目は、ページにストーリーを持たせることができる点です。

スクロールするとコンテンツが出てくる手法では次々に異なる内容を表示させることが可能であるため、商品やサービスの開発行程や説明、企業の歴史など順序立っている内容を表現するには最適です。

コンテンツにストーリー性を持たせることで情報をわかりやすくするだけでなく、スクロールすることでコンテンツが動くという操作性に対するワクワク感を刺激することができます。

3. パララックスの注意点

次に、パララックスの注意点について3つご紹介いたします。

ページの表示速度が遅くなる

画面いっぱいいっぱいに画像を使ったりアニメーションを付けると、その分だけ表示されるまでの速度が遅くなります。

あまりにも表示速度が遅いと、ユーザーがページやWebサイトから離脱してしまう可能性があります。

SEO的にも表示速度の遅延は良くないとされているため、あまりに表示されるのが遅ければ検索結果の順位にも影響が出てきてしまいます。

対策としては、表示するまであまりに時間がかかるものは取り入れないようにしましょう。

それでもどうしても表示させたいものがある場合には、読み込み中をお知らせするローディング画面を入れるといった工夫が必要です。

情報過多で内容が伝わらない

パララックスを取り入れすぎてしまうがゆえに、Webサイトが複雑になりすぎてしまい、コンテンツやメニューがどこにあるか見つけにくくなってしまうことがあります。

また、どこのボタンを押せばいいのか、どのコンテンツに注目すればいいのか混乱させてしまうこともあります。

パララックスの過度な使用は、ユーザーの理解や次の行動を妨げてしまうので、本当に訴求したいコンテンツにパララックスを活用するようにしましょう。

レスポンシブ対応にお金がかかる

最近Webサイト制作では、レスポンシブ対応*が当たり前になっています。

一般的なWebサイトであれば、レスポンシブデザインの技術でどのデバイスでも同じHTMLやCSSから構成できますが、パララックスを活用する場合は、アニメーションを端末ごとに変える必要があります。

端末ごとに対応させるために、時間やコストがかかることを頭に入れておきましょう。

*レスポンシブ対応とは、PCやスマートフォンなど様々な端末の画面サイズに合わせてデザインすること

4. パララックスの活用事例

Swissdent

スイスにある「Swissdent」のWebサイトでは、商品である歯ブラシの画像を縦にし、スクロールと共にデザインが変わっていくようになっています。

スリムでスマートな印象を受けるデザインとなっています。

大きくデザインが変わっていくのはHomeだけですが、ProdectsページやAbout usページなどもパララックスが活用されています。

「Swissdent」のWebサイトはこちら：https://swissdent.creative-nights.com/

Every Last Drop

イギリスのWebサイト「Every Last Drop」では、パララックスで1日の生活を表現しています。

スクロールのアニメーションを活用し、1日でどれだけ水を消費しているのかを見せることにより、水の重要性をユーザーに訴えかけています。

「Every Last Drop」のWebサイトはこちら：http://everylastdrop.co.uk/

Anton & Irene

アメリカ・ニューヨークにあるデザインスタジオ「Anton & Irene」のWebサイトでは、ファーストビューにカラフルな2人の人物シルエットが中央に配置され、ユーザーの興味をとても惹くようなものとなっています。

スクロールをしていくと、2人の人物シルエットが両端へと移動し、中央に情報が記述されます。

Webサイトがデザイン性に富んでいることから、デザイナーへの信頼も高まります。

「Anton & Irene」のWebサイトはこちら：https://antonandirene.com/

さいごに

今回は、パララックスについてご紹介いたしました。

パララックスを活用することで、ユーザーの興味を惹き飽きさせないWebサイトにすることができます。

しかし、過度なパララックスの活用は、ページの読み込みを遅くしたり、ユーザーを混乱させてしまうため、注意が必要です。

「パララックス」を上手に活用し、目を引くWebページを作ってみましょう。