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. 新型コロナウイルスで日本の働き方改革が起こる
  4. 新しい販売形態であるDtoCについて考えてみる

関連記事

  1. Web関連

    夏バテでスピードダウンしない!WEB制作にのめり込む夏にするには?

    まだ6月なのに真夏日が続く日が多いですね。毎年、この時期に来ると夏バテ…

  2. Web関連

    リッチスニペット対策の落とし穴!

    こんにちは!コーダーの須澤です。今回はリッチスニペットについて書き…

  3. Web関連

    皆さんご存知?カスタマージャーニー

    皆さん「カスタマージャーニー」という言葉をご存知ですか?知っている人も…

  4. Web関連

    クラウドビジネスの動向。世の中のサービスちょっとだけ調べてみました。

    こんにちは、コンサルの横山です。会社の掃除をすることが多くなってきまし…

  5. Web関連

    綺麗だなぁ・・・夜空に浮かぶ冬の星座と流星群

    小さなころから星を見ることが大好きな管理部の川又です。みなさん、理科の…

  6. Web関連

    ブラウザシェアランキングから見るブラウザの特徴

    皆さんはブラウザシェアという言葉をご存知ですか?そもそもブラウザと…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    web制作会社が考える更新メンテナンスのポイント
  2. Web関連

    地方移住×ローカルWEBメディア
  3. Web関連

    ポケモンGo!田舎でやってみた!
  4. Web関連

    どんな企業にも必ず必要!IT資産管理ってなに?
  5. Web関連

    擬人化ソーシャルゲームと経済の関係
PAGE TOP