お問合せ株式会社ジェイコス
TEL 03-5428-8733

Webコンサルティング会社、首都圏(東京)を中心に戦略的なホームページの制作、Webマーケティングをご提供

Webコンサルティング.jp HOME > Blog Top > 2016年3月

Profile

通称:株式会社ジェイコス
誕生日:2005年4月1日
出身地:三軒茶屋
現住所:麹町
職業:Webコンサルタント

2016年3月28日

パララックスを使いたい人必見!メリット・デメリットと思わず触ってしまう商品紹介ページ・採用サイト


20160229102253.jpg
数年前からWebデザイン業界で流行している「パララックス(視差効果)」

スクロール操作に合わせて各々の層で別のアニメーションが起こったり、違う速度でスクロールされるように見えて奥行きが感じられるエフェクトに使われている手法をパララックスといいます。

単語を聞いてピンと来なくても、実際のサイトを見れば「これだったのか!」と思うはずです。


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

まずは1つ例を見てみましょう。最後までスクロールしてみてください!

tokyu.png

普通の告知サイトよりも洗練されて、おしゃれな印象を受けませんか?
見た目が美しく、能動的な操作であるスクロールを使って画面に効果を与えることで、ユーザーはコンテンツに入り込みやすくなります。

自社サイトにも導入してみたいな、と思いましたか?
パララックスは使う場面によっては非常に良い効果もありますが、単におしゃれなだけではユーザーには響かず、提供側も利益を得ることができません。
それどころか使いづらさを感じさせてしまったり、離脱を増やしてしまう場合もあります。

メリット・デメリットを押さえて、有効活用しましょう!


パララックスのメリット
・Webページにストーリー性を持たせることができる
・「カッコいい」「おしゃれ」「先進的」「綺麗」等のポジティブなイメージを与えることができる
・スクロール操作に飽きを感じさせず、ユーザーに能動的にスクロールをさせることができる

パララックスのデメリット
・Webページに含まれる情報が多くなり、表示が重くなる
・上手く使わないと見た目に気をとられてしまい、肝心の情報が伝えづらくなる
・パララックスに隠されて、ユーザーが一目でアクセスしたい情報に辿り着きづらい場合がある


パララックスを有効活用しまくりの「Nikon」!

今回注目したのはカメラメーカーの「Nikon」
製品ページに多くのパララックスを使って、閲覧したユーザーがNikonの世界観に入り込んでいくストーリーが出来上がっています。
お手本となるようなNikonの製品紹介ページをどうぞご覧ください!


Nikon 1 AW1
nikon1aw1.png

パララックスを使ったNikonのページで最も有名なのがこちらなのではないでしょうか?
ページの読み込みには少々時間がかかりますが、とにかく凝った作りになっています。
防水・耐衝撃・寒冷地対応といったNikonのカメラの機能性をパララックスで表現し、スクロールした最後には購入ページへのリンクボタンが設置されています。
ページ全体のデザインは青基調ですが、「耐衝撃」等のシーン別で様々な色を仕様しているので、視覚的にも飽きがありません。


Nikon D5
nikond5.png

こちらは高級なデジタル一眼レフカメラ。
コンテンツは左から「スペック」「インデックス」「ギャラリー」。
パララックスが使われているのは横移動の時の動作と、「インデックス」の縦スクロール。
ユーザーからしてみれば、例えどんなに製品紹介ページが綺麗であっても、ここまでの高額製品を購入するときは、じっくり情報を見て決めたいもの。
余計なページには一切パララックスの要素を入れていない、引き算を上手く使ったページです。


Nikon 1 J5
nikon1j5.png

このページでは3カラムを採用しています。
メインとなる製品情報を示す半透明のカラムが実際のスクロール速度で動き、7つのスペックを紹介するごとに左カラムの背景が切り替わります。
更に、右カラムはボディの2色を交互に紹介するという、見ていて驚きが途絶えないつくりになっています。
使う色数を抑えているので視覚的にもうるさくなく、「ちょっと検討してみようかな」という気持ちになりますね。


Nikon COOLPIX 2015 春モデルキャンペーン

nikoncoolpix.png

比較的廉価なデジタルカメラの春モデルを比較できるキャンペーンサイト。
このページで面白いのは、スクロールではなくPCのカーソルボタンで操作ができること。
(ページを表示すると、最初にカーソルボタンで動かすように指示が出ます!)
戻る、進む...を繰り返さずとも簡単に商品の比較ができる、ユーザーにやさしい作りになっています。

全体的に、価格帯やターゲット層に合わせてパララックスの使い方も変えているのが特徴的です。


採用サイトでもパララックスが力を発揮!

今までは商品紹介をしてきましたが、次は自社の紹介でユーザーの心を掴んでみましょう!
採用サイトでもパララックスが使われている場面が多々あります。

株式会社エー・ピー・カンパニー採用サイト
apcompany.png

飲食店や食品販売店の経営をしている株式会社エー・ピー・カンパニー。ファーストビューに大根がチラッと見えるのが可愛いくてスクロールをしたくなります(笑)。
上部のエントリーボタンとメニューボタンは固定。エントリーしたい!と思った時にいつでもエントリーできます。


株式会社アイスタイル
istyle.png

ひたすらトップの右画面を下へスクロール!ストーリーが進んでいって、引き込まれるつくりになっています。
反対に左のサイドメニューから各ページに飛ぶと、パララックスは控えた読み込めるページが現れます。
パララックスの足し算と引き算をうまく組み合わせた採用サイトになっていますね。


まとめ

いかがでしたでしょうか?
パララックスは上手く使えば直接のコンバージョンのみならず、ブランディングや新規ファン獲得にも使えます。
今回紹介した商品紹介のキャンペーンサイト、採用サイトのようなサイトでは特に力を発揮するのではないでしょうか?
パララックス導入、その他デザイン手法のご相談も、WebConsulting.jpにて承ります!






« »

Recent Entries

  1. パララックスを使いたい人必見!メリット・デメリットと思わず触ってしまう商品紹介ページ・採用サイト