Web関連

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

0

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

パララックスとは

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

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

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

 

http://petly.jp/

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

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

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

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

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

 

終わりに

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

関連するサービス

Webデザイン

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

レスポンシブWebデザイン

UI/UXデザイン

0

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

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

ピックアップ記事

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

関連記事

  1. Web関連

    最近のIoEとIoT事情について思ったこと

    インターネットを利用したことが無い人は今の日本にいるのでしょうか・・!…

  2. Web関連

    本当に無料?お手軽ECサイト構築ツールの注意点

    こんにちは、すっかり暖かくなったからか、花粉症に苦しめられている山谷で…

  3. Web関連

    【実録】SFA/CRMのシステム置き換えに関して考えたこと2

    こんにちは、システムエンジニアの小森です今回は社内システムの置き換えに…

  4. Web関連

    サイトの骨格、ワイヤーフレームとは

    みなさんはWebサイトを作るとき、どのようなデザインにしたいと考えます…

  5. Web関連

    採用希望者数を増加させたい

    自社のリクルートサイトを最大限に活用し、多くの人材を獲得総合求人サ…

  6. Web関連

    スマートフォン専用サイトに力を入れないといけないワケ

    こんにちは。2月~4月にかけて花粉症で目の痒さに悩まされるデザ…

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. Web関連

    効率的なミーティングの為に、心掛ける8つのポイント
  2. Web関連

    趣味で生活!!youtuberという職業
  3. Web関連

    子供のプログラミング教育のために、プログラミングおもちゃ『embot(エムボット…
  4. Web関連

    世界を変える17のゴール!ちょっとかっこいいSDGsのあれこれ
  5. AI関連

    音声インターフェース(VUI)ってこれから本当に流行るのか
PAGE TOP