ウェブデザインに秘訣あり！ストーリー性を醸し出すパララックス効果

「LUMIX GF5」のウェブサイトを訪れて、まず目に入るのが自然に動く綾瀬はるかさんの姿。そして下へ下へとスクロールするごとに、パララックス効果により切れ目なくカメラの魅力が解説されていきます。

ウェブサイトの閲覧者に訴えかけるデザインとして、最近注目されているのが前述しているパララックス効果（parallax scrolling effect）です。縦に長いウェブページの構成で、スクロールしながら見ていくと、スクロール位置に合わせて視覚要素が個別に動きます。

今までのウェブサイトにはなかった画面の奥行きとコンテンツ間の滑らかな移動、そして紙芝居を見ているかのようなストーリー仕掛けで、閲覧者の心をつかむことができると言われています。

実際に、仕掛けおもしろさに閲覧者の滞在時間は従来のウェブサイトより長くなる傾向にあります。

LUMIXのサイトでも違和感を与えず、プロモーションサイトを訪問した閲覧者を引きつけるウェブデザインになっています。

動画の使い方にワザあり！大きさも長さも使い分け

ウェブデザインで閲覧者の注意を引きつけたあと、商品の魅力を伝えるために使用されている動画にも注目してみましょう。

サイトを自然にみせているのが、パララックス効果による継ぎ目のない構成に加え、自然に揺れる綾瀬はるかさんの姿や構えたカメラの様子です。そして、その中にはYouTube動画も配置されています。

大きさも様々で、珍しいフル画面表示でインパクトを狙うものもあれば、小さく視覚要素のひとつとして埋め込まれているものもあります。それぞれがサイトと一体化し、動画というコンテンツをWEBサイトに見事に融合させています。

▼ フル画面表示のYouTube動画

▼ ウェブサイトに自然に組み込まれているYouTube動画

▼ 左下の動画

商品のPRに使用される動画は、これまで閲覧者の集中力を切らさないようにと一気に視聴できる1本の動画にまとめられることが多く、サイトのあちこちに散りばめられる使い方はあまりされてきませんでした。

今回のウェブサイトでは伝えたい商品のポイントごとにまとめられた動画が複数配置されています。こうすることでパララックス効果の弱点である重たさをそれ以上悪化させないように分散させ、かつ同時に、パララックス効果で動画から動画へ移る際の細切れ感も回避できています。

動画配信はウェブとの組み合わせでよりスタイリッシュに

ウェブサイトも動画も、単独でマーケティングに用いることが可能なものですが、それぞれの特長を掛け合わせれば、弱点をうまくカバーし、さらなる効果を引き出すことも可能です。

今回の「LUMIX GF5」の例では、ウェブサイトで浮いてしまいがちな動画をうまくウェブデザインでカバーし、閲覧者の注意をそらすことなく、動画の重たさによる閲覧者のストレスを軽減することにも成功しています。そして、動画が持つ豊富な情報量を生かしたウェブサイトは、静止画像では実現できないほどのアピール力を持ちます。

パララックス効果は用いられていませんが、新型「LUMIX GF6」のプロモーションサイトでも動画がウェブコンテンツとしてデザインに組み込まれています。

こちらは動画をより前面に出したデザインになっており、商品のプロモーションサイトとしてわかりやすい構成になっています。ウェブデザインの可能性は限りなくあります。

目的にあわせてウェブサイトと動画をうまく組み合わせれば、優れた相乗効果を生み出すことも可能でしょう。