Webサイトの制作やリニューアルでいろいろなサイトを見ていると、参考にしたいカッコいいサイトがたくさん見つかります。そういったサイトの一部はパララックスデザインを採用しているかもしれません。そこでこの記事では、パララックスデザインのメリット・デメリット、導入事例や外部に依頼する際の注意点をご紹介します。
目次
パララックスデザインとは？
パララックスデザインとは、Webサイトに立体感や遠近感、高いデザイン性を持たせるデザイン表現です。Parallax（パララックス）とは日本語で「視差」という意味です。Webデザインでは、画面をスクロールするのに合わせて、各要素のスピード感を変えたり、配置を変化させたりすることが可能です。
立体的で奥行きのあるデザインを実現することができるため、Webサイトがより洗練された印象になります。結果として企業のイメージアップにつながったり、動的な印象を与えることができたりします。
パララックスデザインのメリット
パララックスデザインを導入すると、どのようなメリットがあるでしょうか。導入するメリットを詳しく掘り下げてみましょう。
1.おしゃれで先進的なデザインにできる
パララックスデザインの最も大きなメリットは、やはりデザイン性の高さです。おしゃれで洗練されたイメージ、先進的であるという印象を見ている人に与えることができます。
企業のWebサイトは今や、必要な情報が載っていればよいというわけではありません。競合他社との差別化を図ることや、時代に合わせて前進しているという「先進的な企業イメージ」を与えることも重要です。また、パララックスデザインを上手く活用することで「アピールしたい情報」や「コンセプト」など、重要なワードやメッセージを強く印象付けることもできます。
文字情報だけでなく写真やイラスト、フォントなどを組み合わせ、視差効果をつけることで視覚的な訴求力も高まります。
2.ストーリー立てで多くの情報を伝えられる
パララックスデザインは、単純におしゃれで先進的な印象を与えるだけではありません。ページの内容にストーリーを持たせ、それをよりわかりやすく、伝わりやすくする効果もあります。どんな企業の商品やサービスにも、開発や提供に至るまでのストーリーがあります。それらを視差効果を加えながら表現、演出することによって、ユーザーに響きやすくなるのです。
伝えるときに順序が重要になる情報を、効果的に伝えることにも役立ちます。
3.ユーザーにスクロールしてもらいやすい
パララックスによって、ユーザーは能動的にスクロールしてくれるようになります。ページの情報を読み込む前に、単純な「動き」に興味をもってくれるのです。スクロールするたびに「どんな風に動くのだろう？」「次は何が出てくるのだろう？」という視覚的な興味を引き出すことができるのです。自然とWebサイト自体への興味関心が高まり、滞在時間も長くなりやすいでしょう。
パララックスデザインのデメリット
おしゃれで素敵なサイトに仕上がるパララックスデザインですが、一方でデメリットになってしまうこともあるので留意してきましょう。デザイン性を高めることで起こる、別の側面について解説します。
1.Webサイトの表示速度が重くなる
パララックスデザインを導入するには、JavaScriptと呼ばれるプログラミング言語を使用します。ページを表示させるとき、JavaScriptを処理するのに時間がかかるため、パララックスデザインを取り入れない場合に比べて、サイトの表示速度が遅くなる場合があります。
表示速度対策として、ページの表示速度が重くなるほどの効果を入れないように調整することや、ページを読み込み中であることを知らせるローディング画面を入れるなどの施策が考えられます。ページの読み込み速度が遅いと、ユーザーはサイトを離れてしまいます。できるだけ離脱リスクを減らす対策をとっていけば、パララックスデザインを有効活用できるでしょう。
ページ表示速度の計測方法、改善策を解説！SEOに重要な理由も紹介
ページスピードインサイト(Google PageSpeed Insights)の使い方を解説！Webサイト表示速度の見方や改善手法
2.パララックスデザインを好まないユーザーもいる
ユーザーによっては、パララックスデザインが好まれないこともあります。理由としては、コンテンツやメニューなどが、どこにあるか見つけにくかったり、ページのどこを見ればよいかがわかりにくかったりするためです。Webサイトに知見のないユーザー層や、年齢層などによっては、パララックスデザインは使いにくく、わかりにくいサイトと敬遠されてしまう場合もあります。
3.スマホとPCの両方のデザインを作るコスト、手間がかかる
パララックスデザインを導入する場合、スマホとPCでデザインを変える必要があります。一般的な従来のWebサイトであれば、レスポンシブデザインの技術を使えばスマホでもPCでもタブレットでも、どの端末に対しても同じHTMLやCSSを使用できます。
しかし、パララックスデザインの場合は表示させる端末ごとにアニメーションを変えることが必須です。その分、時間や手間がかかることを念頭に置いておきましょう。
パララックスWebサイトの作り方
パララックス効果を用いたWebサイトを作るには、いくつかの方法があります。もっとも簡単な方法は、プラグインを実装する方法です。プラグインの種類も比較的豊富なので、自由度や個々の知識レベルに合わせて選んでみてください。
ただし、プラグインを導入すると、細かい部分のカスタマイズが必要になるため、面倒に感じるかもしれません。また、HTMLマークアップによってパララックスを入れ、CSSに基本のスタイルを適用させることでもパララックスサイトを作ることが可能です。
パララックスデザインを採用したWebサイト事例
実際にパララックスデザインを取り入れている企業サイトを見てみましょう。
ポルシェ（自動車）
ドイツの高級車メーカー「ポルシェ」のWebサイトでは、画面をスクロールすると車種が入れ替わり、それに伴って流れる音楽も変化する画期的なWebサイトです。各年代ごとの歴代車、当時ブームとなっていたサウンドを同時に流すことでポルシェの長い歴史とストーリーを伝えています。
外部リンク：ポルシェ
DONGURI（デザイン）
経営やマーケティング、デザインをコンサルティングする企業のWebサイトです。非常に個性的な絵画を使っていますが、基本的にはシンプルなメッセージがふわっと浮かび上がってくる構造です。複雑すぎない、しかし印象に残りやすいWebサイトに仕上がっています。
外部リンク：DONGURI
KOSHIKI stay（旅行業）
鹿児島県の離島にある観光客向け宿のWebサイトです。スクロールすると、現地の風景や宿のイメージ写真が降りてくるようなアニメーション。こちらも非常にシンプルですが、文字や写真のセンスとイメージ写真の動かし方で、とても個性的なサイトに仕上がっています。
ホテルや旅館などの観光業は、ユーザーにイメージを湧かせることが重要ですので、パララックスデザインサイトでのPRと相性がよいです。
外部リンク：KOSHIKI stay
Anton & Irene（Webデザイン）
都内にあるWeb制作会社のサイトです。スクロールすると人物が移動したように見えたり、思わぬところからテキストが出現してきたりするという美術性と意外性を兼ね備えたデザインです。イメージアイテムがとても印象的なのに、テキストを邪魔しないという計算されつくしたアニメーションです。
外部リンク：Anton & Irene
パララックスデザインを依頼する前に知っておくべきこと
ユーザーの印象に残るサイトにするために、パララックスデザインの利便性をしっかりと把握しておくことが必要です。一つずつ見ていきましょう。
パララックスデザインのメリットを把握しておく
「なんか流行っているから」「なんとなくかっこいいから」といった漠然とした理由で変更すると思わぬ失敗をしてしまいかねません。「伝えたいことがしっかり伝わる」「しっかり見てもらえて印象に残る」といった、パララックスデザインに変更することで受けられるメリットを把握しましょう。
PCとタブレット・スマートフォンは分岐する必要がある
デメリットの章でもお伝えしましたが、レスポンシブデザインの技術が使えませんのでそれぞれを分岐する必要があります。サイトに訪れるユーザーがどういった端末で見ているのかを把握しておくと良いでしょう。
対応すべきブラウザを限定しておく
端末の種類と同じように、ブラウザについても対応すべきブラウザを限定しておきましょう。利用が少ないブラウザに対応するのか、しないのか、事前チェックにかかる時間とコストを考慮して決めましょう。
ユーザーの使いやすさを一番に考える
再三伝えていますが、かっこいいけど表示速度が遅い、デザインは良いけど字が読みにくい、そういったサイトになってしまうとユーザーは離れてしまいます。本末転倒にならないよう、一番に考慮すべきはユーザーの使いやすさであることは忘れないようにしましょう。
パララックスデザインを外部に依頼する際の注意点
洗練されたパララックスデザインは、専門知識のあるWebデザイナーに依頼するのがベストでしょう。外部のデザイナーやWeb制作会社に依頼するときに注意しておきたいことを3つまとめました。
依頼したい要件を具体的に伝える
自社サイトをどのような印象のパララックスサイトにしたいか、具体的に伝える必要があります。そのためには、イメージに近いサイトをいくつかピックアプし、実際の動きやレイアウト、操作性などについて細かく要望を出すことが必要です。
要件を具体的に伝えないと、サイト全体のイメージが大きく変わってしまったり、自社の伝えたいメッセージがわかりにくくなってしまったりすることもあるので注意してください。
過度にアニメーションをつけ過ぎない
視差効果のアニメーションは、複雑にし過ぎないことも大切になります。デザイン性や印象ばかりを重視するのではなく、ユーザーの見やすさや使いやすさを考慮したデザインにしていきましょう。
外部に依頼する際には、デザインのプロに「本当にアニメーションを入れる必要があるか？」という点や、自社のイメージにパララックスデザインが必要か？という点から相談してみることも必要です。
リリース前にしっかりテストを行う
パララックスデザインを実装した場合、リリースする前にテストを行ってください。テスト時にチェックしておきたいポイントは次の3つです。
- アニメーションが正しく動くか
- 伝えたい情報が伝わるか
- 表示されていない要素がないか
アニメーション自体が正常に作動しているかどうかを確認してください。また、本来表示させるべきものが表示されていない、ということもあるので要チェックです。動作だけでなく、このデザインで伝えたい情報がユーザーに届くかどうか？という視点からも最終チェックをしてみましょう。
目的をしっかりと定めた上で印象的なサイトにしよう
パララックスデザインを取り入れるサイトは年々増えています。日々たくさんのWebサイトが開設されており、人の記憶に残るサイトを作ることが求められる時代です。視覚的なPRで自社の印象を強く残すこと、またサイトへの興味関心を引き出すためにも、パララックスデザインは有効です。
ただし、デザイン性だけに飛びつくのは少々危険です。デメリットや注意点をしっかり把握したうえで、どのようなデザインにするか念入りに検討し、制作する必要があるでしょう。
ニュートラルワークスではパララックスデザインを取り入れたWeb制作のご依頼も承っています。どんなサイトにしたいのか、曖昧なイメージで結構ですので、お気軽にご相談ください。ふわっとしたイメージを具体的なデザインに落とし込むお手伝いをさせていただきます。
