10のサイト事例に見るパララックスの効果的な使い方のヒント | アドビUX道場 #UXDojo
エクスペリエンスデザインの基礎知識
短時間しか人の注意を引くことができない今の時代。実際に記憶に残る体験をつくり出すにはクリエイティブでなければなりません。そのために利用可能なテクニックは様々ありますが、最も便利な手段のひとつはパララックススクロールです。このテクニックは、訪問者をコンテンツに引き込む効果をつくり出します。
この記事では、パララックススクロールの基本を確認し、優れたパララックスをデザインするための実用的なヒントと、いくつかの優れた例を紹介します。
パララックスの仕組み
「パララックス」という言葉は、「変化。調整」を意味するギリシャ語の「parallaxis」に由来しています。パララックススクロールは、擬似3D効果をつくり出すために利用できるデザインテクニックです。ユーザーがページをスクロールすると、背景が前景のコンテンツよりもよりも遅く移動して、2Dシーンに奥行きの錯覚を生じさせます。
パララックスの考え方は新しいものではありません。ゲームデザイナーはずっと前からサイドスクローリングと呼ばれるテクニックを使っていました。スーパーマリオブラザーズを覚えている人もいることでしょう。しかし、パララックスがWebデザインの世界でトレンドになったのには理由があります。スクロールはクリックするより簡単な操作だからです。適切にデザインされたパララックスの効果は、ユーザーをより多くの情報へとスクロールさせる力があります。
出典: Pete Cockram
パララックスを使用するべき理由
ストーリーテリングのアプローチ
デザインはコミュニケーションがすべてです。サイトをデザインする際は、訪問者とコミュニケーションを図り、製品、サービス、ブランドについて説得力のあるストーリーを伝えようとするでしょう。パララックスは、訪問者をユニークな体験に引き込むことが可能です。例えば、訪問者がすべてのストーリーをスクロール操作だけで読むことができるシングルページのサイトをつくることができます。
ページの滞在時間を長くする
Webデザインにおいて、直帰率を下げることは、細心の注意を払うべき目標の一つです。直帰率は、サイトの訪問者の中で、あるページだけチェックして「戻る」ボタンをクリックしたかタブを閉じた人の割合です。直帰率が高ければ訪問者の満足度が低いのかもしれません。滞在時間が短い場合も同様です。つまり、直帰率を下げたり滞在時間を延ばすためにできることにはする価値があります。パララックスは、訪問者がページ上に長く留まりがちな動的な体験を提供します。
パララックスをデザインするときに考慮すべき6つのポイント
1. 読み込み時間
Webサイトのページ読み込み時間は、デザインする際の重要な考慮点です。パララックススクロールは、通常CSSとJavaScriptの両方に依存して動作する、重い効果だと考えられます。つまり、ブラウザーの読み込み時間が必要以上に長くなる可能性があります。読み込みに時間がかかると、検索順位が下がり、トラフィックが減少するかもしれません。そのため、こうした視覚効果を導入したい場合は、サイトのパフォーマンスを後で必ず確認してください。
2. 使用する場面
パララックススクロールは、常に訪問者にとって意味があり、付加価値がある形で組み込むよう試みましょう。
すべての種類のコンテンツでパララックスが機能するわけではありません。一般的に、パララックスが適しているのは、ランディングページやシングルページのWebサイトなどです。例えばオンラインショッピング体験をデザインしている場合、パララックスは最適な選択肢ではないかもしれません。
また、デザインする対象を理解し、彼らがサイトとどのように関りを持つのかを理解することも重要です。再訪問の相手にとっては、パララックススクロールが最適な選択肢ではないかもしれません。初めての訪問時にどんなに印象的なデザインだったとしても、アニメーション効果は、2度目の訪問者にとって予測可能です。訪問者の一部には、アニメーションを邪魔に感じる人もいるでしょう（特に時間がかかる効果を見ることになる場合は）。
3. 予測可能であること
スクロールは訪問者にとってごく自然な行動です。訪問者はスクロールを思い通りにできることに自信を持っており、サイトが一般的な動作を変更しようとすれば、すぐ不満に感じる人もいるでしょう。
パララックス効果を使用すると、スクロールを乗っ取る場合があります。訪問者はスクロールを制御できず、サイトがコンテンツを閲覧する速度に関与するためです。スクロールを乗っ取ると、訪問者を混乱させ、最悪の場合はサイトから遠ざけてしまうこともあります。
4. モバイルでの使用は最小限に
パララックスはモバイル環境ではあまり機能しません。これは、効果をモバイルのビューポート向けに最適化できないためではなく、単純に小さい画面では見栄えが良くないからです。そのため、モバイル向けにはパララックススクロールを最小化するか、削除することをお勧めします。
5. アクセシビリティへの考慮
パララックスは、乗り物酔いに弱い人々にとっての悪いUXを簡単につくることができます。このようなユーザーグループに適したユーザー体験を提供したければ、アニメーション効果をオフにするオプションを提供するとよいでしょう。
6. SEO
サイトの検索ランク対策に関しては、パララックスを使用するページには多くの課題があります。そのため、サイトの特定の部分にのみパララックスを使用することが推奨されます。
MOZはパララックスのためのSEOに関する素晴らしい記事を書いています。良い結果を出したいなら、読む価値があります。
10の優れたパララックスのサイト事例
以下は、パララックス効果を使って訪問者に効果的にストーリーを伝えているサイトの10の事例です。
1. Firewatch
Firewatchは、ホームページの上部にパララックスを使用し、奥行きのある感覚をつくり出しています。下にスクロールするにつれて、訪問者は、自分が徐々に細部に踏み込んでいるように感じ始めます。
このサイトの素晴らしいところは、スクロールをハイジャックしていないことです―ユーザーは通常の速度でページをスクロールすることができます。
Firewatchはパララックスを利用して魅力的なスクロール体験を作り出している
2. Every Last Drop
Every Last Dropは、「語らずに見せる」というルールを見事に証明しています。このサイトでは、水を使うことの重要性をユーザーに語る代わりに、私たちが毎日どれだけの水を消費しているかを提示しています。下にスクロールすると、日常生活の場面が水の消費に関する情報と共に表示されます。
Every Last Dropは、視覚的なストーリーテリングの優れた例
3. The Boat
The Boatは、視覚的にストーリーを語るサイトの完璧な例です。このサイトは訪問者をオンラインの旅に連れて行きます。ストーリー全体は6つの章から構成され、スクロールしていくと、パララックスがストーリーを「感じ」させてくれます。イラストとテキストとオーディオの組み合わせが、視覚的な物語に浸ることを可能にしています。
The Boatは、パララックス効果を利用して、忘れがたいい視覚的な旅をつくり出す
4. BeerCamp
BeerCampのデザイナーたちは、意外なパララックスの使い方を発見しました。このサイトは、ズーム効果を利用して、ある一点を中心に訪問者の目を捕らえようとします。サイトは5ページから構成され、各ページはコンテンツのレイヤーとして表示されています。そして、ページをスクロールすると次のページにズームインします。鮮やかな色と大胆なタイポグラフィが組み合わされて、このパララックス効果は、サイトの訪問者の記憶に残る体験を生み出します。
BeerCampはズームインのパララックス効果を使っている
5. Marcin Dmoch
Marcin Dmochはアートディレクターで、自身のポートフォリオにパララックス効果を使っています。サイトは、About、Work、Contactsの3つのセクションに分かれていて、パララックスは、異なるセクションを接続するために使用されています。各セクションは、ユーザーがページをスクロールすると、固定されたり固定が解除されたりします。
Marcin Dmochはパララックスを利用して、サイトのさまざまなセクションを視覚的に分離している
6. Anton & Irene
Anton & Irene は、優れた美学と上質な機能性を兼ね備えた素晴らしいサイトの例です。サイトを訪問すると、2人の人物のシルエットが表示されます。スクロールを開始すると、シルエットが移動して消え、貴重な情報のためのスペースが広がります。
Anton & Ireneは優れた美学と上質な機能性を兼ね備えている
7. Hot Dot
上で見てきたすべての例には、ある共通点があります。パララックス効果が垂直方向のスクロールを使用して作成されている点です。しかし、Hot Dotのアプローチは異なり、水平スクロールを使っています。スクロールすると、ページは左から右に移動し、訪問者は滑らかな3Dパララックス効果を持つ美しいトランジションを見ることになります。
Hot Dotは水平方向のパララックス効果を使用している
8. Porschevolution
Porschevolutionは、ポルシェデザインの創業当初からの進化を示すシングルページのサイトです。ポルシェのデザインのこれまでの変化を確認し、2020年に登場するモデルを想像することができます。ページナビゲーションは、パララックスを利用したスムーズなページのスライド効果によって実現されます。
PorscheEvolutionはストーリーテリングの優れた例
9. Feed Music
Feed Musicは没入型のデジタル体験を作り出すことを目的としてパララックスを使用しています。画面が分割されたレイアウトでは、イメージとコンテキスト情報の組み合わせが表示されます。デザイナーはパララックスを使用して、詳細情報を画像にピン止めします。訪問者がページをスクロールすると、新しい情報の固まりと、関連するビジュアル画像が表示されます。
Feed Musicは垂直スクロールにより視覚効果を発生させる
10. Melanie Daveid
Melanie Daveidも、創造性と機能性を兼ね備えたシングルページのサイトの一例です。ページを下にスクロールすると、Melanieの経験、作品、連絡先情報に関する詳細な情報のセクションが表示されます。ページの最下部に到達するまでには、すばらしい視覚効果に満足していることでしょう。
Melanie Daveidはパララックスを機能的にも装飾的にも利用している
おわりに
パララックススクロールは、静的なWebサイトにはない奥行きと生命力をWebページに与えることができます。よく練られたパララックス効果は、サイトを目立たせ、訪問者によりインタラクティブな体験を提供することができるでしょう。
この記事はBest Practices For Parallax Websites（著者:Nick Babich）の抄訳です