パララックスデザインとUI/UX│Web制作会社のUI/UX関連コラム

Columnコラム

Webデザイン

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

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

2015/08/20
このエントリーをはてなブックマークに追加

こんにちは。
育児に家事に大忙しのディレクター、望月です。
限られた時間の中で、どうやって効率的にデザインするか、いつも考えています。

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

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

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

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

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

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

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

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

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

mochizuki_1508121.jpg

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

関連するサービス

Webデザイン

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

レスポンシブWebデザイン

UI/UXデザイン

text_totop