レスポンシブwebデザインの基本
PCでは美しくwebページが、モバイルの画面では崩れてしまったという経験は誰にでもあるでしょう。モバイルに限らず、webサイトがあらゆるプラットフォームとデバイス向けに最適化されていないと、オンライン体験の一貫性が損なわれ、フラストレーションを感じた顧客が離れていってしまうことがあります。
あらゆるデバイスで一貫したweb体験を提供できなければ、顧客を失望させてしまいかねません。さまざまなデバイスに自在に対応できるwebページの重要性を理解できれば、より優れた顧客体験を構築できるようになります。
デザイナーから開発者、マーケター、ビジネスリーダーに至るまで、社内の誰もが、デバイスやプラットフォームをまたいで、自社のwebサイトコンテンツが適切に表示されているかどうかを把握することが大切です。レスポンシブwebデザインを導入するには、まず基礎知識を身に付ける必要があります。
本記事では、レスポンシブwebデザインの概要、例、ベストプラクティスを解説します。
主な内容：
レスポンシブwebデザインとは？
レスポンシブwebデザインとは、さまざまなデバイスやプラットフォームの画面サイズと機能に合わせて、レイアウトやテキストサイズ、コンテンツ、ナビゲーションツールを自動的に調整し、一貫性のあるwebページを作成する仕組みです。つまり、どのプラットフォームでも機能性に優れた、魅力的なwebサイトを構築できるのです。
レスポンシブwebデザインなら、あらゆるデバイスに自在に対応できるwebページをデザインできます。サイトの読み込みを高速化し、オーディエンスが探している情報を見つけやすくすることで、オーディエンスをサイトに引き留め、エンゲージメントと売上を向上できます。
レスポンシブwebデザインのメリットを享受できるのは、オーディエンスだけではありません。あらゆるデバイスで同じコードベースを使用できるため、開発とメンテナンスが容易かつ迅速におこなえるようになります。
スマートフォンやタブレットなどのモバイルデバイスは、webトラフィックの60％を占めています。そのため、レスポンシブwebデザインを推進することは、あらゆる企業にとって競争力を維持するために不可欠であると言えます。
ブレイクポイントとは？
レスポンシブwebデザインにおけるブレイクポイントとは、デバイスに応じてwebサイトのコンテンツとデザインを最適化するための、特定の切り替えポイントを指します。すなわち、ブレイクポイントはwebサイトの表示方法を決定するものであり、通常、画面幅に応じて設定します。
デバイスの画面サイズに合わせてwebサイトが調整されておらず、コンテンツが読みづらいことはよくあります。そこで、ブレイクポイントを利用すれば、容易にレスポンシブデザインに対応できます。モバイルデバイス、タブレット、ノートPC、デスクトップPC向けのブレイクポイントが存在し、それらに対応した上で、さらにカスタマイズして柔軟性を高めることもできます。
レスポンシブwebデザインの手法
ここでは、レスポンシブwebデザインの一般的な手法をいくつか紹介します。
- HTMLおよびCSS： webサイトのサイズ変更、非表示、縮小、拡大を自動的におこないます。HTMLは構造とコンテンツ、CSSはデザインとレイアウトを制御できます
- メディアクエリ： デバイスの種類や特徴（画面サイズや解像度など）にもとづいて、webサイトやアプリケーションを調整するCSS手法です
- レイアウト： フルードレイアウトでは、画面サイズなどの比率を調整できます。一方、フレックスボックスレイアウトでは、画面サイズに応じて要素の配置を拡大および縮小できます
- レスポンシブ画像： 動的変数を使用して、画像の幅と高さを制御できます
- スピード： ページの読み込み速度を上げることで、バウンス率を低下させることができます。画像の最適化、キャッシュの活用、クリティカルレンダリングパスの改善は、読み込み速度の向上に役立ちます
レスポンシブwebデザインの例
デジタルプレゼンスを確立している企業の多くが、さまざまなデバイスやプラットフォームに対応するために、レスポンシブwebデザインを推進しています。ここでは、優れたレスポンシブwebデザインを実現している企業の事例をいくつか紹介します。
- TheNew York Times
2018年、The New York Timesはレスポンシブwebデザインを導入し、サイトの読み込み速度と顧客体験を向上しています。これにより、webサイトの一貫性が強化され、自社のあらゆるデジタルプラットフォームで、同じ優れた体験を提供できるようになりました。
同社はまず、モバイルアプリケーションの使いやすさとデザインを改善しました。続いて同社は、デスクトップPCにおけるwebページの読み込みが遅いことに気が付きました。そこで、PC画面に合わせてwebデザインを調整し、デバイスやプラットフォームを問わず、読者がいつでも優れた体験を享受できるようにしました。
- Dropbox
ファイルホスティングサービスとクラウドストレージサービスを提供するDropboxは、モバイルデバイス向けにwebサイトを最適化しています。上図の左側のPC版と右側のモバイル版を比較すると、webページを読みやすくするために、グリッドの色やフォントが調整されています。
- Etsy
Etsyのwebサイトでは、さまざまなデバイスの画面に合わせて、サイズ、フォント、メニューオプションを調整しています。タブレット版とPC版のレイアウトは、ヘッダーオプションと一部のデザインを除いて、ほぼ類似しています。一方、モバイル版では、ナビゲーションバーが排除され、画面がすっきりと見やすくなっています。
モバイル版サイトでは、顧客が製品をすばやく見つけられるように、パーソナライゼーションを強化していることがわかります。
- GitHub
GitHubのwebサイトを見ると、ビジネス目標を達成し、コンバージョンを向上させる上で、同社が何を重視しているのかがひと目でわかります。PC版サイトにアクセスすると、まず製品オファーと登録フォームが目に留まります。
一方、モバイル版サイトでは、コンテンツなどの要素が最小限に抑えられ、新規登録ページが強調されています。
- Slack
Slackは、モバイル版サイトではハンバーガーメニューを採用し、PC版サイトではナビゲーションバーを上部に配置しています。また、CTAの配置もデバイスごとに調整されています。PC版では、アバブザフォールドにふたつのCTAが配置されています。一方、モバイル版では、画面全体に大きなボタンがひとつ配置されています。
さらにモバイル版では、コンテンツが垂直方向に圧縮され、テキストの段落が画像の上下に表示されます。
- スターバックス
スターバックスのwebサイトは、シンプルで魅力的なレスポンシブデザインの優れた例です。スクロール時のパララックス効果は導入されていないものの、季節限定商品のカラフルな静止画像が目を引きます。
ただし、課題がひとつあります。デザインを縮小した場合、「商品メニュー」オプションが一般的なハンバーガーメニューとして表示されるため、オーディエンスがハンバーガーメニューを開いたときにそれらのオプションが表示されることを予期していない場合、混乱を招く恐れがあります。
レスポンシブWebデザインのベストプラクティス
ここまで、レスポンシブwebデザインの概要と事例を解説しました。続いて、ベストプラクティスをいくつか紹介します。
コンテンツを重視
最小限のスクロールとブラウジングで、コンテンツを見つけられるようにする必要があります。PC画面では少ないスクロールで閲覧できたとしても、モバイルデバイスではコンテンツが長すぎたり、フォントや画像が適切に表示されなかったりすると、顧客体験の質が低下してしまいます。
オーディエンスが目的の情報を容易に見つけられるように、指定されたビューポートに収まるようにコンテンツを調整することが重要です。
摩擦を減らす
webサイトを設計する際は、CTAをできる限り多く配置しようとするよりも、ページの主要な目的を考慮することが重要です。各デバイスに応じてwebページを調整する必要があります。モバイルファーストのアプローチは、ビジネス目標（製品やサービスの売上につなげるなど）を達成するために、webサイトに必要な要素を把握するのに役立ちます。
モバイル版のwebページを作成したら、続いてタブレット版とPC版を作成します。その際、最適なCTAやマイクロインタラクションを配置し、ニュースレター登録を促進して購入に導くなど、副次的な目的も考慮に入れる必要があります。ここで重要な点は、まずオーディエンスの主目的に焦点を合わせ、主目的と副目的の達成に貢献しない、不要な摩擦を排除することです。
モバイルデバイスの操作を考慮する
オーディエンスがモバイルデバイスを使用して、ページの重要な情報を容易に閲覧できるようにしましょう。PCとモバイルデバイスの主な違いは、前者がデスクに座ってキーボードで操作するのに対し、後者はデバイスを手で持って使用することです。
webデザイナーは上記の違いを念頭に置いて、オーディエンスが操作する要素を調整する必要があります。例えば、オーディエンスは通常、PCの主要なナビゲーションが上部にあることを期待しています。一方モバイルデバイスでは、ナビゲーションを上部に配置すると、親指では届かないため、中央または下部に配置する必要があります。
デザイナーと開発者の連携
レスポンシブwebデザインでは、オーディエンスの行動や環境に合わせて、デザインと開発の両方を調整する必要があります。そのため、デザイナーと開発者が緊密に連携し、コンテンツの調整方法や最終的なレイアウトを決定することが重要です。
これにより、コンテンツが読みやすくなり、オーディエンスのサイト上での滞在時間を延ばし、エンゲージメントを促進して、全体的な顧客体験と売上を向上できます。
レスポンシブwebデザインを実践するには、まず情報を収集し、レイアウトを整理して、デザインを決定することから始めましょう。続いて、ベータ版サイトを検証し、ローンチします。
レスポンシブ体制の構築
レスポンシブ対応は、webページや特定のマーケティング施策だけでなく、プロセスやシステムに組み込む必要があります。webデザイナーは、コンポーネントレベルでのレスポンシブデザインと機能性を重視する必要があります。
製品ページ全体ではなく、製品ページの見出し部分をレスポンシブにする方法や、カード、カルーセル、CTAなども考慮に入れる必要があります。各コンポーネントが異なる表示幅や画面解像度で効果を発揮するために、必要なものは何かを検討しましょう。デザインチームは、ページ制作の依頼を受けた時点ですでにコンポーネントが用意されているため、特定のページコンテンツに専念しながらエクスペリエンスを構築できます。
検証
さまざまなプラットフォームで、可用性テストを定期的に実施することが重要です。デバイスや画面ごとにナビゲーションバーが適切に表示されているかどうか検証し、必要に応じて調整する必要があります。
また、複数のデバイスでフォントを検証しましょう。さまざまなフォントやデザインを用いてコンテンツを制作する場合、それらのフォントがあらゆるデバイスで適切に表示されるとは限りません。ランダムな文字やコードに変換される可能性があります。そのため、webサイトを更新してローンチする前に、複数のデバイスでフォントを検証する必要があります。
デバイスとブラウザーの組み合わせを検証することも重要です。Google Analyticsを使用して、webとモバイルのトラフィックを分析し、オーディエンスがサイトにアクセスするために最も使用しているブラウザーを把握しましょう。続いて、各デバイスの画像や動画などのコンテンツの読み込み速度を考慮しながら、webサイトの読み込み速度を検証します。
レスポンシブwebサイトの作成方法
デバイスやプラットフォームを問わず、webサイトが適切に表示されることは、オーディエンスに優れた体験を提供するために不可欠です。
レスポンシブwebデザインを導入する準備ができたら、見直したいwebサイトについて、その主目的を明らかにし、それを実現するためのデザインを検討しましょう。
Adobe Experience Manager Sitesなら、ほぼあらゆるデバイスに合わせてwebページを自動的に調整し、常に最適な体験を届けることができます。
Adobe Experience Manager Sitesがレスポンシブwebサイトの作成にどのように役立つのか、動画と製品ツアーをご覧ください。