Web関連

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

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

パララックスとは

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

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

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

 

http://petly.jp/

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

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

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

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

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

 

終わりに

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

関連するサービス

Webデザイン

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

レスポンシブWebデザイン

UI/UXデザイン

ティファナも使っているCMS、Movable Typeの特徴とは?前のページ

スマートフォンアプリ広告で新たな利益獲得!次のページ

ピックアップ記事

  1. 新しい販売形態であるDtoCについて考えてみる
  2. 新型コロナウイルスで日本の働き方改革が起こる
  3. 大手企業も注目するMaaS(Mobility as a Service)とは何か…
  4. AIに求められているものは、実は意外な物だった

関連記事

  1. Web関連

    ECサイトを立ち上げろ!!最新のEC-CUBEを使ってみた話

    みなさん、ECサイトを利用していますか?ECサイトで有名なのは、Ama…

  2. Web関連

    【Web制作】ビッグデータって結局なに?身近なビッグデータを考える

    ビッグデータ関連書籍が数多書店に並び、テレビでも新聞でも騒がれて久しい…

  3. Web関連

    動画配信サービスhuluってどんなもの?

    最近流行り(?)のhulu。テレビと共同で作品を作ったり、限定映画を配…

  4. Web関連

    繋がりは無限大!マルチデバイスの進歩

    今や通信機器はパソコンやタブレット、スマートフォンだけに留まらず、あら…

  5. Web関連

    web制作会社を選ぶポイント

    ホームページを作りたいと思ったときに、まずWeb制作会社を探すと思いま…

  6. SNS関連

    WebサービスInstagram(インスタグラム)の恐るべき経済効果!

    しまむらパトロール(しまパト)という言葉をご存知ですか?私がこの言…

おすすめ記事

最近の記事

  1. デジタル化が旅行・観光業を救う!?ウィズコロナ・アフターコロ…
  2. 人が対応するのが正しいの?DX(デジタルトランスフォーメーシ…
  3. 人間拡張って聞いたことがありますか?デジタル化が背中を押して…
  4. テレワークだけでは足りない?デジタルシフトなど、アフターコロ…
  5. 【初心者向け】ここに注目!スマートフォン用バナーを作成しよう…

アーカイブ

  1. Web関連

    パララックス効果を使ったサイトを調査してみた
  2. SEO関連

    web制作には欠かせない、SEOとオウンドメディア
  3. Web関連

    webマーケティング One to Oneマーケティングってなんだ?
  4. DX関連

    非接触がこれからの常識。ウィズコロナ・アフターコロナはIoTを活用したタッチレス…
  5. Web関連

    ブランドや商品名を印象づけるには!?
PAGE TOP