ストーリー仕立てで│東京のWeb制作会社のパララックスデザイン関連コラム

Columnコラム

Webデザイン

ストーリー仕立てでパララックスデザインを活用しよう

ストーリー仕立てでパララックスデザインを活用しよう

2015/06/22
このエントリーをはてなブックマークに追加

管理部の宮澤です。
パララックスデザインは流行り始めてから、多くの企業が取り入れていますが重要なポイントは、ページの構成をストーリー仕立てにすることです。

パララックスとは

パララックスとは直訳すると「視差」という意味です。
もともと写真用語なのですがWebデザインでのパララックスとはスクロールの動作に応じて、各部が異なるスピードで動くことにより画面に立体感と奥行き間を演出する手法です。
スクロールというシンプルな操作だけでたくさんの情報を得られます。

パララックスデザインの有効活用例

ストーリー仕立てでパララックスデザインを活かしているサイトを紹介します。
こちらの「PETLY」というサイトです。

story_20150615.01.png

http://petly.jp/

こちらは小型犬・猫用のペット家電のサイトです。
スクロールをすれば大まかに、どのような家電なのかを見ることができます。
商品が完成するまでのストーリーが分かるだけでなく、この商品を使うことでペットの餌を出すのが便利になる、といった家電を使用する時のイメージを描きやすくなります。

パララックスデザインの利点

通常のページで単純に長いだけですと途中で見るのに飽きてしまい、ページの一番下まで見てもらえずにサイトから離脱されてしまいます。
ストーリー仕立てでパララックスデザインを活用することでユーザーは長いスクロール画面でも苦に思うことなく、サイトに描かれているストーリーを追いながら自然にスクロールできるためページの下まで見てもらえることを期待できます。

パララックスデザインの注意点

リンクやボタンをクリックして別のページに移動する必要がない分、ページが長くなり多くの情報を1ページに集約するため使用する画像や動画が重くなりすぎないように注意する必要があります。
ユーザーの利用環境によっては読み込む時間や操作性も考慮しなくてはなりません。
また、ストーリー仕立てにするのでページを見た時に想像をしやすいか、他に気になる項目があれば、その項目に関連するページも見られるようにしているかターゲットユーザーの視点を忘れてはなりません。

story_20150615.02.png

終わりに

いかがでしたでしょうか。
きちんとストーリー仕立てでパララックスデザインを活用することで1ページが長いサイトも魅力的なページになります。
商品・サービスの特性を魅力的に伝えるページを作成する際は、ぜひ活用してみてはいかがでしょうか。

関連するサービス

Webデザイン

デザインガイドライン作成

レスポンシブWebデザイン

UI/UXデザイン

関連キーワード
text_totop