Web関連

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

0

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

パララックスとは

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

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

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

 

http://petly.jp/

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

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

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

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

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

 

終わりに

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

関連するサービス

Webデザイン

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

レスポンシブWebデザイン

UI/UXデザイン

0

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

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

ピックアップ記事

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

関連記事

  1. Web関連

    サイトを持つなら考えよう!UI/UXについて

    みなさん、UI/UXという言葉を知っていますか?Webをかじっている人…

  2. Web関連

    キーワードは「共感」?クレーム解決への最短経路

    こんにちは、ISO室所属の尾崎です。今回もクレ…

  3. Web関連

    web制作会社が紹介するW3Cチェック(validator)の使い方

    Webに関わる方ならご存知の人が多いと思いますが、W3CというWebに…

  4. Web関連

    こんなときに!とっさのiPhone/Android無料アプリ3選

    年々、アプリ市場は大きく発展していますよね。有料アプリはコンテンツの量…

  5. Web関連

    WEBサイトリニューアル時におけるサーバー選びのポイント

    WEBサイトリニューアルの相談を受ける際、同時によくいただくお話として…

  6. Web関連

    毎日見たくなるオウンドメディアサイトとは?

    自社でメディアを持つことを指す言葉「オウンドメディア」、今では多くの企…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    料理レシピサイトでおなじみの「クックパッド」が結構すごかった
  2. AI関連

    AIによる炎上対策は新しい価値を生みだす?
  3. Web関連

    究極のパーソナルサービス「コンシェルジュ」
  4. AIさくらさん

    【人工知能(AI)×証券】ユーザーの不満を解消する人工知能型サポートサービス
  5. SNS関連

    Web制作会社がアパレル業界のSNS戦略について調査してみた
PAGE TOP