パララックス効果で魅せる縦に長いウェブページ

最近、パララックス効果 (parallax scrolling effect) を採り入れた、縦に長いウェブページが注目を集めています。以下の例のように、ページをスクロールしてゆくと、それに呼応して複数の視覚要素が個別に動くことで視差を作り出し、奥行き感や動きを演出する、というものです。

実際の動きを動画キャプチャしてみました。クローズドキャプション (字幕) で補足説明 (動きの解説) も用意してあります。
Anna Safroncik (http://annasafroncik.it)
東京スカイツリー (http://www.tokyo-skytree.jp)

この効果をうまく用いれば、ユーザーの関心を惹きつける (エモーションを刺激する) ことができ、一定時間、ページに滞留してもらえることが期待できます。面白い視覚効果であれば、行きつ戻りつ (スクロールダウン/アップ) しながら繰り返しコンテンツを見てもらえるかもしれません。ポジティブな印象とともにコンテンツの内容がユーザーの記憶に刻まれる可能性も高まることでしょう。

ただしこのパララックス効果、「流行っているから」という理由で導入するのは、どうなのかな...と思っています。ユーザビリティやアクセシビリティの面で考えておきたいこともいくつかありますので、今回、挙げてみようと思います。

やたらと情報を詰め込まないこと

面白いパララックス効果を演出するためには、それなりに長いウェブページにしたいと思うかもしれませんが、ひとつのページに、やたらと情報を詰め込みすぎるのは、避けたいところです。ページを長くしようとするあまり、複数の主題を盛り込んでしまうと、「このページで訴えたいことは何か?」が不明瞭になってきます。一般的に、ページの主題が明確に絞られているほうが、ユーザーは理解しやすくなりますし、ソーシャルメディアを通じて他人におすすめ (シェア) しやすくもなります。

ページを上から下まで見たときに、繰り出される内容が一貫してひとつの「訴えたいこと」に沿っていて、流れ (ストーリー) が感じられるような演出ができるようであれば、パララックス効果を導入する意義があると思います。

くれぐれも、本来であればページを分けるべきであるコンテンツを、無理やりひとつのページにまとめることはしないことです。ページが分かれている (ページ遷移がある) ことのメリットもあるので (アクセス解析がしやすい、ブラウザの「戻る」ボタンが使える、など)、それを手放してまでパララックスにこだわるべきか、慎重に吟味したいところです。

各視覚要素やその動きに「妥当性」があること

パララックス効果では、各視覚要素やその動きが、ページの主題 (訴えたいこと) と直結しているべきだと思います。大切なのは「パララックス効果に感心してもらうこと」ではなく、あくまでも「(ポジティブな印象を伴って) コンテンツを理解/記憶してもらうこと」だからです。

単に「面白い」「かっこいい」だけでなく、その視覚演出効果に「妥当性」があるか (コンテンツを印象付ける効果がある、ユーザーにうまく次のアクションを促している、など) も含め、十分検討しましょう。

不自然なフィードバックを避けること

パララックス効果をより凝ったものにしようとして、縦方向だけではなく横方向にも動くような演出をしてみたくなるかもしれません。実際、上下方向にスクロール操作しているにもかかわらず、画面表示が上下に動かないパララックス効果もあります。たとえば、以下のようなものです。

画面全体に動きがなく一部の要素だけが差し替わる : KRYSTALRAE (http://krystalrae.com)
画面表示が横方向に動く : Volkswagen Beetle (http://beetle.de)
画面表示が縦横無尽に動く : The Art of FLIGHT (http://www.artofflightmovie.com)

ユーザーとしては上下方向にスクロールしているつもりなのに、そのように画面が動いてくれないというのは、落ち着かないものです。自分のコントロールできる範囲外で事が進んでいる錯覚がして、「今どこにいてどう進むのか」がわからず不安になるからです。

「視覚的な手掛かりとしてブラウザのスクロールバーがあるのだから問題ない」という考えかたもあるかもしれませんが、パララックス効果が視覚的に魅力的であるほど、メインのコンテンツ表示に視野が集中して、スクロールバーは目に入らなくなるものです。

上下方向以外への動きを演出をする場合も、その視覚演出効果に「妥当性」があるかを意識し、(学習によって) 変則的な動きをユーザーが理解/納得してくれそうか (そしてちゃんと使ってもらえそうか)、十分検討しましょう。

また、補助的なフィードバックとして、視覚的な手掛かりを提供して「今の状況」を明示するのも一考です。たとえば上記で例示した「KRYSTALRAE」では、「全部でいくつあるうちの、いくつ目にいるか」をドットで示し (iOS のカルーセル UI などで用いられる page indicator に似ていますね)、また数値でも「何分の何」と表示しています。

視覚的な手掛かりを提供して「今の状況」を明示している例 (KRYSTALRAE)
視覚的な手掛かりを提供して「今の状況」を明示している例 (KRYSTALRAE)

できるだけ軽くすること

パララックス効果を採り入れたウェブページは、視覚演出効果を実現するために様々な画像やスクリプトを読み込む必要があるため、表示までに時間がかかりがちです。作り手としては当然「すべてのファイルが読み込まれてから、スムーズな動きをユーザーに堪能して欲しい」と考えることでしょう。このため、時間稼ぎのためのスプラッシュが冒頭で使われるケースが多いという現実になっています。

しかし、スプラッシュは、どんなに魅力的に作っていても、ユーザーを「待たせている」ことには変わりません。ユーザビリティ的には、ないほうが望ましいものです。

実際問題としては、読み込むファイルをどんなに軽くしても、表示時間の短縮には限度があるかもしれません (スプラッシュは避けられないのかもしれません)。であるならば「スプラッシュでユーザーをお待たせしてでも、敢えてパララックスで提示すべきコンテンツなのか」を改めて問いかけてみるのもよいかもしれません。「Yes」と確信を持って言えないのであれば、無理してパララックス効果を導入するべきではないのかもしれません。

アクセシビリティに配慮すること

パララックス効果の演出には多くの場合、JavaScript を使います。これはつまり、プログレッシブエンハンスメント (Progressive Enhancement) の考えかたにならい、「情報 (HTML)」「見栄え (CSS)」「ふるまい (JavaScript)」を、レイヤーにわける形で実装できることを意味します。この利点を活かし、パララックス効果を盛り込むウェブページであっても、アクセシビリティに配慮したいところです。

タイトルや見出しをはじめ論理構造を適切に HTML でマークアップすること、キーボードでも操作/使用できるようにすること、さらに (ビジュアルデザインとの兼ね合いで簡単ではないかもしれませんが) フォーカス位置を視覚的に明示すること、が大切です。

パララックス効果の面白いところは、「ユーザーの予想しない動きをして驚かせる (印象づける) こと」だと思いますので、それだけに、キーボードで操作しているとフォーカス位置を見失いやすくなります。キーボード操作におけるフォーカスの可視化は、パララックス効果を採り入れたデザインにおいて、とりわけ重要だと思います。


パララックス効果について、デザインや実装テクニックについて言及する記事は多いですが、ユーザビリティやアクセシビリティの観点から考察する記事は、まだあまりないかもしれません。この記事がそのひとつとして、多少の参考になれば嬉しいです。また、上記では留意事項をひととおり挙げましたが、実際には、ぜひユーザビリティテストを実施して検証することをおすすめします。