コラム

こんにちは。

皆さんは普段WEBサイトを眺めていて、「このサイトはいいなー」と思うのはどのようなときでしょうか？
コンテンツが充足している、計算されたUIによる操作性、単純に見ていて楽しいなど、いろいろとあると思います。
知りたい情報がある、操作性が良いはイメージできますが、見ていて楽しいサイトとはどのようなものでしょうか。
各々見解が分かれると思いますが、ここでは動きのあるサイトについて見ていきましょう。
ただコンテンツが並べてあるより、そのコンテンツ達がスクロールのたびに動いたりしたら少し興味をひかれませんか？
今回は、見ていて楽しい要素の一つであるパララックス（視差効果）を使用したサイトについて見てみましょう。

パララックスとは？使用するメリットは？

簡単に言うと、スクロールした時の動き方を要素ごとに変化させることです。
動くスピードや、表示される方向などを要素に応じて変えることにより、奥行きのあるページデザインにすることができるのが大きなメリットです。

他にも、パララックスによりページに動きをつけることにより、他と似たようなデザインでも違いを出すこともできます。
スクロールするごとに要素がふわっと表示されたり左右からスッと表示されたりしたら、次は何が来るのだろうとワクワク
しませんか？
このように、ユーザーに最後まで見てもらうための興味を持たせることも可能です。

またパララックスの導入も非常に簡単であり、単純なものであれば専用プラグインをDLし、読み込ませるだけで動くものも
あります。

パララックスを使用するデメリットは？

パララックスを使用した動きのあるサイトは、画面全体で訴求が可能となりとても便利です。
しかし、基本的にスクロールしないと動いたり、コンテンツが表示されないので、目的のコンテンツが探し辛いなどの欠点もあります。

他にも、画面全体に動きをつけているので、通常のサイトに比べて表示速度が遅くなることもあります。
中には、特定のブラウザーで動作しないものもありますので、対応ブラウザーの定義もしっかりしておく必要があります。

また、コーディングの際にも要素の上下のみでなく、奥行きまで考えて組まなければいけないので、通常の設計よりも難易度が高いと言えるでしょう。

いかがでしたでしょうか？
サイトのコンセプトやターゲットを考え、正しくパララックスを使用して興味を持ってもらえるようなサイト制作をしたい
ですね。