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. AIに求められているものは、実は意外な物だった
  3. 新しい販売形態であるDtoCについて考えてみる
  4. 大手企業も注目するMaaS(Mobility as a Service)とは何か…

関連記事

  1. Web関連

    遊びながらスキルアップ?楽しくデザインのことを学ぶ!

    皆さんは学生時代、勉強することが好きなタイプでしたか?それとも苦手なタ…

  2. Web関連

    【人工知能・AI×CSR】最新技術で実現する新しい社会貢献の形

    CSRって何?CSRという言葉、企業のWebサイトではよく目にするか…

  3. Web関連

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

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

  4. Web関連

    進化するソーシャルメディア!ソーシャルギフト編

    いきなりですが、みなさんはSNSサービスをよくお使いになるでしょうか?…

  5. Web関連

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

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

  6. Web関連

    正しい言葉遣い、出来ていますか?

    社会人には、正しい言葉遣いの知識が必須です。同じ会社の先輩、上司に…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    不審なメールに注意!ウイルス・情報漏洩への基本対策
  2. Web関連

    「一度だけ客」をリピーターに変身させる方法(3)
  3. Web関連

    色彩や配色を勉強するならコレ!古き良き日本文化を今に生かす
  4. Web関連

    こんなのあったの・・!?驚愕のアプリ集
  5. Web関連

    ホームページ制作会社がまとめるカスタマーサポートに必要なポイント!
PAGE TOP