スキューモーフィズムはフラットデザインへの道を示し、フラットデザインは… 何かその中間的なものへの方法を示します。近年採用されているテクニックの１つに、パララックス・スクローリングと呼ばれる、サイトに奥行きの錯覚を加える視覚効果があります。
本記事では、パララックスを皆さんのサイトに採用する際に検討するべき項目をいくつかご紹介します。
フォアグラウンドとバックグラウンドの両方のコンテンツを異なる速度でスクロールさせると、奥行きの錯覚を生み出すことができます。Jacqueline Kyo Thomas氏が自身のこのトピックに関するUX Mattersの素晴らしい記事で指摘しているように、「パララックス・スクローリングは誘導されたストーリー展開において効果的です。」つまり、スクローリングされたストーリーブックを通して、皆さんの製品やサービスの販売を促進することができます。
Nam Lee氏の「The Boat」のようなサイトは、パララックスをストーリー展開のデバイスとして使用しています。しかし実際のところ、パララックスは優れたUXを提供しているのでしょうか？
パララックスに関しては、SEOからユーザビリティの最良の実践方法まで、様々な要因を検討する必要があります。
１. パララックスとSEOは常に融合しているわけではない
無料の電子書籍である「Web UI Design Best Practices」で説明しているように、パララックスサイトは検索エンジンに最適化しなければならないという負担を伴うことがあります。
Lindsay Kolowich氏は自身のHubspotの記事「Is Parallax to Blame for Poor SEO?」によると、SEOへの悪影響は、サイト全体を１つのURLに収めるという、パララックス・スクローリングが推奨していることから来ています。つまり、Googleのような検索エンジンは１つのページしか登録してくれないのです。この場合は、より多くのページにコンテンツを展開することで、検索エンジンで表示される可能性を高めることができます。
これに対応するには複数の方法があります。詳しく見ていきましょう。
- ページの選別した部分にパララックスを追加する。Lindsay氏は自身の記事の中で、大きなストーリーではなく、小規模のストーリーを展開するために、ページ上の特定の部分にパララックスを利用することを推奨しています。
- 検索エンジンへのコンテンツを区別するために、jQueryを活用する。（検索エンジンの登録のために）１つのページを異なるセクションに分けて、それぞれ異なるURLを使用するために、jQueryを利用することができます。iProspectのKevin Ellen氏は、jQueryソリューションの実施方法に関する素晴らしいチュートリアルを提示しています。
- １つのキーワードについて最適化する。H1の見出しタグや本文のパラグラフで単一のキーワードのみにターゲットを絞ることは、決して悪いアイデアではありません。
MozのSEOの専門家たちは、Kevin Ellen氏のjQueryソリューションも含めたその他の対策方法に関する広範な記事を執筆しているため、SEOおよびパララックスに関して詳しく学びたい方は、チェックしてみてください。
２. 読み込み速度が遅くなる可能性があり、モバイルフレンドリーではない
パララックスのその他の欠点は、モバイルフレンドリーかどうかという点です。
パララックスはJavaScriptを使用しているため、ページの読み込み速度が遅くなり、モバイルユーザーに大きな損害をもたらします。全てのコンテンツを１つのページにまとめることもまた、サイトの読み込み速度の向上には貢献しません。
モバイルユーザーを考慮に入れた、優れたパララックスサイトであるCyclemonを例に見てみましょう。
画像元：Cyclemon
ページを下にスクロールすると、上の画像が自転車の画像に変化しますが、読み込み速度は特別遅いわけではありません。
画像元：Cyclemon
下にスクロールし始めると、自転車が現れます。スクロールし続けると、自転車にはタイトルがあり、ユーザーがどのようなタイプのライダーかを説明しています。
画像元：Cyclemon
ページを下の方向に移動する際に表示される自転車は、全部で20種類あります。
注目してもらいたいのは、ページの左上には基本的なナビゲーションメニューもあり、デザインから排除されていないということです。
「買い物をする」というリンクをクリックして初めて、このサイトは自転車を販売しているわけではなく、実際は２人のグラフィックアーティストが （自転車のグラフィックも含めた）自分たちの作品を販売していることがわかります。彼らは間違いなく何かしらの技術を使用しているのですが、パララックス・スクロールが豊かな視覚的ティーザー広告でユーザーを惹きつけているため、このサイトは上手く機能しているのです。
画像元：Cyclemon
モバイルサイトに行ってみましょう。ここでは、パララックス効果は使用されていません。
サイトは十分な速さで読み込まれ、デスクトップと同じ効果は提供できていませんが、画像はきちんと表示されています。
画像自体は、モバイルユーザーを惹きつけるだけの優れた出来栄えとなっており、失われた効果もそれほどありません。ナビゲーションメニューも利用可能となっており、ユーザーはサイトのその他のページを容易に移動することができます。
このサイトのパララックスは革新的なものではありませんが、デザイナーたちはモバイルユーザーに対するバックアップデザインを提供するという健全な判断をしていました。彼らの戦略は非常に聡明であり、自分たちの作品を展示するインタラクティブなショールームを作り出すためにパララックスを使用しています。
３. ユーザビリティの向上に対する利点は存在しない
The Journal of Usability Studiesは、パララックスに関する研究を行いました。結論は、パララックスは満足できるエクスペリエンスですが、パララックスを使用しているサイトと使用していないサイトの間に実質的な相違はないというものでした。
１つのテストグループがパララックスのサイトを利用し、もう１つのグループがパララックスがないサイトを利用しました。どちらのグループも、ホテルの部屋を予約するというタスクを完了する必要がありました。
試験者たちは、パララックスのサイトのほうがより面白いと報告しました。しかし、パララックスのサイトが役に立つことは、それが全てかもしれません。どちらのグループの間でも、パララックスのサイトはユーザビリティや満足度、総合的な楽しさにおいて優位に立ってはいませんでした。
しかし、この調査では、パララックスのサイトを使用した参加者のうちの２人が、「パララックスのウェブサイトとやり取りを行っている間に、乗り物酔いと深刻なユーザビリティに関する問題」に苦しんでいたことがわかりました。
結論ですか？ パララックスは、ユーザーが （オンラインショッピングなどの）明確なタスクの遂行を目的としている場合は、最良の選択ではありません。例えばAmazonが、自分が欲しいと思っているハードドライブを探すのに、関係のない製品の８つのセクションをスクロールしていかなければならないような構成になったとしたら、非常に苛立つだろうことを想像してみてください。
画像元：Cyclemon
一方で、ユーザーを視覚的なストーリーに熱中させることを目的としているサイトにとっては、パララックスは強力な選択となります。例えば、The Dangers of Frackingが、ユーザーがサイトの全体の工程を通して流動的な流れの細部までコントロールすることをどのように許可しているかを考えてみましょう。この場合、パララックスは複雑なトピックを魅力的な （そして非常に面白い）エクスペリエンスへと簡略化するのに、間違いなく強力なテクニックとなっています。
パララックスに対する最終的な結論
パララックス・スクローリングは、素晴らしい効果を発揮するのに使用されますが、妥協も必要です。
この効果を使用するかどうかを決定する前に、考慮しなければならない重大なUXの問題点があります。それらをおさらいしてみましょう。
- 対処方法はいくつかありますが、パララックスによってSEOは著しく妨害されてしまう恐れがあります。それは、全てのコンテンツが単一のURLを用いた単一のページに詰め込まれている場合、検索エンジンはそのサイトを一度だけ登録することになるからです。
- パララックスはモバイルに向いていない。パララックスはJavaScriptを使用するため、ページ読み込み速度は非常に遅くなります。これによって、モバイルとレスポンシブデザインの両方にとって非実用的なものとなってしまいます。
- パララックスは、ユーザビリティに対する優位性があまりない。遊び心溢れるウェブサイトとの相性は良いですが、パララックスのないサイトと比較してユーザビリティに優れているとは限りません。しかし、私たちは皆、UXにはユーザビリティ以上のものが必要であることを理解しています。皆さんの目的がインタラクティブなストーリー展開であるならば、パララックスは間違いなく良い効果をもたらすことでしょう。
以上を胸に留めて、パララックス・スクローリングの利用を検討している全てのプロジェクトは、徹底したユーザビリティテストを行うための予算を別に組む必要があるでしょう。結局のところ、ユーザーの参加を伴うテストを行うことが、パララックスが皆さんのサイトのUXを改良するか、または損失を与えるかを示す真の指標となるでしょう。
その他の実用的なUI技術を詳しく学びたい方は、無料の電子書籍である「Web UI Design Best Practices」をチェックしてみてください。109ページに及ぶこの電子書籍は、 SpotifyやApple、Skullcandyなどのトップ企業から30以上の事例を分析しています。
