スマホの登場でフラットデザインのような平面的で画一的なデザインが主流となりました。その一方でパララックスデザインのようなデザイン性の高いデザインもニーズは増えています。webサイトの性質に合わせて上手にパララックスデザインを導入しましょう。
パララックスデザインとは何か
パララックスデザインとは、視差効果を狙った奥行きのあるデザインです。
例えば画面を下にスクロールした際に背景と別に画像や文字が浮き上がって見えたり画像が変化したりします。
横にスライドのようにスクロールするタイプでも背景とスクロールできる部分は別になっており、立体的に見えます。
パララックスデザインの視差効果とは？
パララックスデザインでいう視差効果とは、複数のレイヤー（層）を重ねることによって立体感や浮き上がった感じを出すというものです。ただ層を重ねただけではパララックスデザインにはなりません。
下の層と上の層を異なったスピードで動かすことで「視差」が生まれるのです。
とはいえ実際に動画のように映像を動かしているわけではありません。
例えば下にスクロールした際に横から何かオブジェクトが連動して動いたり、下にスクロールするスピードとは違うスピードで何かオブジェクトが降ってきたら立体感のあるパララックスデザインということになります。
パララックスデザインのメリットデメリット
パララックスデザインはサイトに動きが生まれ、フラットデザインでは実現できないデザイン性が生まれるので、ブランドイメージや高級感、楽しさなどの訴求に力を入れているwebサイトにはよく導入されています。
とはいえデメリットもありますので、自社のサイトへの向き不向きもよく考える必要があるでしょう。
パララックスデザインのメリット1:デザイン性が高い
パララックスデザインはデザイン性の高いwebサイトを実現することができます。デザイン性が高いとどのような効果があるかというとサイトに長く滞在してもらい隅々まで見てもらえる可能性が高くなります。
特に、パララックスデザインの動きというのが有効です。人間は動いているものをつい目で追ってしまう習性があります。これは自分に危険を及ぼすものでないか確認するためであると言われています。
ですのでスクロールをして何か画面上で目を引く動きが出るとついついその画面で手を止めて眺めてしまうのです。そこに何かキーになる情報を置いておけばコンバージョンにつながる可能性も上がるでしょう。
また滞在しているwebサイトが面白いとなればいろんなページにアクセスしてどのようなギミックがあるか確認したいと思う人も多いでしょう。このようにサイトのデザイン性の高さは滞在時間の長さや直帰率の低下につながります。
テキストなメニューボックスも立体感のある表示が可能なので、デザイン性が高くかつ見やすいwebサイトを実現することができます。
パララックスデザインのメリット2:画像の訴求性が強い
パララックスデザインのwebサイトでは画像が大きく表示されるものが多いです。画像というのは写真やイラストなど広義に渡りますが、重要なのはやはり質が良いこと。
高画質で魅力的な写真素材をたくさん持っている場合はパララックスデザインいいかせる可能性が高いです。またイラストやアニメーションなどの素材も効果的です。
パララックスデザインのデメリット1:ページが重い
パララックスデザインのデメリットとしては画像を多く使っているがゆえにページが重くなりがちな点です。例えばスクロールするとまだ画面が白いまま表示されなかったり、オブジェクトが表示されるまでに時間がかかる等があり得ます。
自動で切り替わるタイプの画像なども動作環境によってはうまく表示されないかもしれません。当然表示に時間がかかったり表示されないwebページはちゃんと見てもらえませんし、離脱率は高まります。
パララックスデザインのデメリット2:ターゲットを選ぶ
また、パララックはのデザインもデザイン性の高さが必要ないジャンルもあるでしょう。誰にでも見やすく操作がわかりやすいことを重視する郵便局のwebサイトがパララックスデザインだったら悪評が立つでしょう。
パララックスデザインは操作する側も一定以上のwebやデバイスの操作能力があることを前提にしていると言えます。
パララックスデザインを実装するためのプラグイン5選
パララックスデザインをwebサイトに実装するためにはプラグインを導入するのが近道です。人気のプラグインをご紹介します。
1.SUPERSCROLLORAMA
SUPERSCROLLORAMAは1カラムのペライチのようなデザインのサイトの制作に向いているプラグインです。1カラムの場合基本的にはユーザーは上下にスクロールするだけですので、そのスクロールをする中でオブジェクトが飛び出したり回転したり降ってきたり色が変わったりします。
2.Jarallax
Jarallaxはナイキの関連サイトに使われたことで有名になったプラグインです。かなり細かいこともできるプラグインで、写真だけでなくテキストもたくさん使いたい場合にも、背景の移り変わりやテキストのフェードイン等を使えるので高いデザイン性を実現できます。
3.Cool Kitten
Cool Kittenはレスポンシブ対応のパララックスデザインが可能なプラグインです。シンプルなデザインに向いています。ですので、サイトの一部にパララックスを取り入れたり、ちょっとだけデザイン性を高めたいような場合に有効です。
4.skrollr
skrollrもバラエティに富んだ動きを実現できるプラグインです。サードパーティーのスタイルも取り込むことができ、Githubではソースコードなどの配布が盛んです。
5.Parallax Content Slider with CSS3 and jQuery
スライドショーの部分にだけパララックスを取り入れたい場合のプラグインです。
スライドショー内に配置されたオブジェクトがバラバラのタイミングで動いていきます。ページ全体に導入しづらいがインパクトを残したいwebページの作成に有効です。
webサイトにパララックスデザインを導入するには
webサイトにパララックスデザインを導入するにはwebデザイナーに制作業務をしてもらわなければなりません。どのようにwebデザイナーを募集すれば良いのでしょう。
webサイトのパララックスデザインを外部の受注会社に発注する
サイトのデザインを外部のweb制作会社に丸投げするという方法があります。これであれば新しく人を雇う必要はありません。
ただし、会社相手なので費用がかかるのと万が一直し等が発生した場合に時間やコストが追加でかかる可能性があります。
クラウドソーシングでフリーのwebデザイナーとマッチングする
クラウドソーシングで、パララックスデザインが得意なフリーのwebデザイナーとマッチングするという方法もあります。
この方法も外注することには変わりませんが、直接デザイナーと打ち合わせができるためミスマッチが発生しづらいです。フリーランスのwebデザイナーは経験豊富で能力が高い人が多いのも魅力です。