Web関連

パララックスデザインとUI・UX

0

jQueryが普及し、フラットデザインの流行もあいまって、最近はパララックス効果のデザインが増えてきました。WEB制作会社としては、新しい技術を使うのは楽しいですし、クライアントによっては提案しやすいですよね。

ただし、見た目にこだわるあまり、ユーザーにとっての使い勝手、快適さを損ねてしまっては、WEBサイトとしての意義が半減してしまいます。また、検索エンジン対策が疎かになってしまっては、元も子もありません。

パララックス効果、メリットとデメリット

ここでいったん、パララックス効果を使う利点と、デメリットをおさらいしておきたいと思います。

パララックスとは、別名『視差効果』といい、WEBサイトを複数枚のレイヤーで構成し、それを画面スクロール(もしくはマウスの動き)に合わせて、スピードをずらして動かすことで、あたかも画面に奥行きが出たような、ダイナミックな動きを演出する効果のことです。

最近は様々な企業のWEBサイトで使用されています。

名前は知らなくても、その特徴的な動きを見れば、おわかりになるのではないでしょうか。

ティファナでも今までに様々な実績があります。一部を抜粋し、以下に記載します。

銀座CUVOクリニック様
http://www.cuvo.jp/philosophy/philosophy.html

 

パララックスのメリットは以下になります。

グラフィックやビジュアルを重視した、インパクトの強いWEBサイトを制作できる。

キャンペーンサイトや、自社のサービス・製品に強いブランド力がある場合、大きな効果を発揮します。

画面スクロールを前提にしたデザインで、自然と最後まで見てもらえる。

パララックスは、画面スクロールによるアニメーションが前提なので、イメージがスクロールしていくと、ユーザーは自然と画面を下へ下へを読み進めていきます。起承転結のストーリー仕立てのコンテンツや、情報が多めの読み物コンテンツなどを見せたい時に、きちんと最後まで見せることが出来ます。

逆に、デメリットも記載します。
いくつか、制作する上での注意点があります。

スマートフォン/タブレットの対応は困難。

スマートフォンやタブレットなどの、タッチスクリーンデバイスにおいて、パララックスは思った通りの動きをしてくれません。また、パララックスのレイアウトは、画面の横幅サイズによってレイアウトに影響が出るため、要素の配置が崩れてしまいます。こうなると、ユーザーにインパクトを与えることが出来ません。

ビジュアル頼みのデザインになりがち。

当たり前といえば当たり前ですが、パララックスは、大胆なレイアウトとビジュアルによってインパクトを与えるデザインですので、逆にビジュアルのクオリティが低い場合、ただのシンプルなWEBサイトになってしまいます。

画面表示に時間がかかる。

大きなビジュアルと、視差効果エフェクトのためのjavascript、css をバックグラウンドで読み込む必要が有るため、通常のWEBサイトに比べ、画面のローディングに時間がかかります。この問題も、パララックスには避けられない障害です。

ここまでいくと、パララックスのWEBサイトにも、UI・UX配慮が必要であることがわかってきたのではないでしょうか?
シンプルな構成で、ビジュアル重視なグラフィック、という利点がある反面、その利点を壊さないような工夫が重要になってきます。

1.仕様設計を、念入りに行う。

先ほどの問題点でもあがったように、パララックスはその見た目とは裏腹に、複雑な構造をしています。作ってからの修正にはとても時間がかかるので、デザインを起こす前に、設計段階での慎重な計算が必要になってきます。

2.ナビゲーションのデザインは、シンプルに。

パララックスの特徴は、その画面のダイナミックな動きにあります。よって、ナビゲーション要素は、できるだけシンプルに、世界観を邪魔しないように作らなければいけません。
(逆に、ナビゲーションそのものを演出要素として使ってしまうというやり方もありますが)
たまに、ナビゲーションを画面の端に格納して、必要な時だけ展開する手法を取っているサイトもありますが、あれもひとつの手ですね。

3.コンバージョンに繋がる要素を、埋もれさせない。

WEB制作者側の環境として、制作を進めていくと、演出効果と、そこから与えられるUXに注力するあまり、そもそものサイトのゴールを見失いがちです。
クライアント側も、見た目の派手な演出が楽しいので、制作会社にお任せすることもあると思います。

ただの楽しいサイトになってしまわないためにも、「なぜ、パララックスの効果をつけたのか」の目的をつど振り返り、UXと、そこからコンバージョンにつながる部分の設計を行うことが重要です。

先ほども記載したとおり、パララックスは複雑な効果なので、眼に見えないところで、プログラムが動いています。後々での修正は多くの工数がかかるため、ゴールを見失って手戻りが発生しないよう、上流工程での設計に注意しましょう。

プロジェクトの目的に合わせて、正しい見せ方で制作すれば、パララックスはとても効果的なコンテンツになると思います。目的からずれたUI設計と、UXを生み出してしまわないように、注意して制作に臨みましょう。

ホームページ制作でお困りの方はホームページ制作会社ティファナにご相談ください!

お問い合わせはこちらから

関連するサービス

Webデザイン

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

レスポンシブWebデザイン

UI/UXデザイン

0

対岸の火事ではない!?被害拡大中のwebページ改ざんについて。前のページ

リクルートサイトと採用ポータルサイトの役割次のページ

ピックアップ記事

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

関連記事

  1. Web関連

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

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

  2. SEO関連

    【Web制作関連コラム】ユーザービリティーとSEO対策の関係性

    SEOに興味があり最近色々な本を読んで勉強しています。なぜ、SEO…

  3. Web関連

    【Web制作会社に聞いた】Webサイト売上げアップに使える”行動心理学” そ…

    さて、今回は「行動心理学」についてのコラムです。Webサイトを…

  4. Web関連

    スマート家電を利用してカッコいい生活を!

    皆さんはスマート家電ってご存知でしょうか?スマート家電とは、…

  5. Web関連

    春がくる!春をイメージしたwebデザインサイト

    こんにちは、管理部の川又です。最近、少しづつですが外が暖かくなってきま…

  6. Web関連

    目の疲れをスッキリ!!これで疲れ目解消!

    最近、あなたの目はお疲れではありませんか?パソコンの長時間使用により起…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    売り上げ(コンバージョン・問い合わせ数)を上げたい
  2. Web関連

    リッチな表現でサイトを彩る -SVGアニメーション(線画)-
  3. サービス・新技術

    みんな知ってるフィンテック
  4. AI関連

    【人工知能(AI)×採用】AIの導入で人材採用に劇的な変革がおきる
  5. Web関連

    人の役に立ち、意味のある会社でなるためには
PAGE TOP