Web関連

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

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デザイン

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

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

ピックアップ記事

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

関連記事

  1. Web関連

    知らずに利用しているキュレーションサービス!

    「キュレーションサービス」聞き覚えがない方も多いのではないでしょうか?…

  2. Web関連

    Web制作会社が教えるデザイナーのスキルアップ

    こんにちは、デザイナーの藤原です。昨今?いや、永遠の課題ともいえる「ス…

  3. Web関連

    一石三鳥!?マルチデバイスに対応したブラウザ「Blisk」

    今、ホームページはマルチデバイスに対応しているのが当たり前になってきて…

  4. AI関連

    マーケティング4.0におけるAI/WEB制作会社としての行動について考えてみる

    目次- 接続性について考えてみる- 新しいタイプの顧客について…

  5. Web関連

    マイクロターゲティングで「個」客を獲得

    マイクロターゲティングとは?マイクロターゲティングとは、年齢や性別…

  6. Web関連

    Googleアナリティクスの新機能「ユーザーエクスプローラ」とは?

    「ユーザーエクスプローラ」という新しい機能が2016年4月にリリースさ…

おすすめ記事

最近の記事

  1. 【3分で解説】これから始まる自動車教習所のオンライン学科教習…
  2. 約1年間のウィズコロナ生活で大きく変わったもの
  3. スマートストアにより、小売業は激変する
  4. 【化粧品業界×最新技術】AIが化粧品のアドバイザーに!?
  5. AI技術の普及により移動も安全に

アーカイブ

  1. Web関連

    なぜ2MBなの!?ビジネスマナーの意外な理由
  2. Web関連

    メリットづくしのレスポンシブ・ウェブデザインとは?
  3. AI関連

    AIで森が宝の山になる|スマート林業の未来
  4. Web関連

    Webにもつながる、オタク御用達のニュースアプリを使ってみた。
  5. Web関連

    医療出版業界のWebコンバージョンアップ戦略
PAGE TOP