レスポンシブwebデザインの基本事項と要点

レスポンシブwebデザインとは、スマートフォン、タブレット、デスクトップなど、さまざまな画面サイズで見た目が美しいだけでなく、適切に機能するwebサイトを作成する手法です。適切に実施されていれば、ほとんど気づかれることはありませんが、それはすべてが正常に機能している証拠であり、良いことです。しかし、ある画面ではwebサイトのコンテンツが読みやすく表示されていても、別の画面ではレイアウトが正しく表示されない場合、それはすべてのプラットフォームやデバイスに最適化されていないことを示しています。これにより、ユーザーが不満を感じたり、デジタルエクスペリエンスが一貫性を欠いたり、質が低くなったりする可能性があります。

Webサイトがさまざまなデバイスで正しく表示されない場合、ユーザーにとって悪いエクスペリエンスとなります。サイトがさまざまなプラットフォームでどのように表示されるかの重要性を理解することで、より良いユーザーエクスペリエンスを提供できます。

デザイナー、開発者、マーケター、またはビジネスリーダーであれ、webサイトのコンテンツが効果的にクロスデバイス最適化されていることを確実にしたいものです。レスポンシブwebデザインの基本を理解しておくことが、自身のサイトへの実装を考える前に必要です。

この記事では、レスポンシブwebデザインとは何か、webサイトをよりレスポンシブにするための具体例、そしてベストプラクティスについて学びます。

主な内容：

• レスポンシブwebデザインとは
• レスポンシブweb開発の利点
• レスポンシブwebデザインの技法と方法
• レスポンシブwebデザインの例
• レスポンシブwebデザインのベストプラクティス
• レスポンシブwebサイトの作成方法

レスポンシブwebデザインは、ユーザーのプラットフォーム、画面サイズ、向きに応じて、コンテンツの表示方法を動的に変更します。レスポンシブなwebページは、様々なデバイスや画面サイズにおいて品質が均一です。レスポンシブなサイトは、消費者がどのデバイスからアクセスしても、視覚的に魅力的で、機能的かつ使いやすいものです。

レスポンシブwebデザインでwebサイトを作成する際、デザイナーはそれにアクセスして操作するさまざまなタイプのユーザーに対応できるよう、エクスペリエンスを調整します。レスポンシブwebデザインは、サイトの表示速度を向上させ、アクセシビリティとナビゲーションを改善します。ユーザーが求めている情報を見つけやすくし、サイトに長く滞在するよう促すことで、エンゲージメントや売上の向上につながります。

内部的な利点もあります。レスポンシブなwebサイトは動的であり、あらゆるデバイスで同じコードベースを使用できるため、開発とメンテナンスがより容易かつ迅速に行えます。

携帯電話からタブレットまでを含むモバイルデバイスが、全webトラフィックの60%以上を占めているため、競争力を維持するにはレスポンシブなwebサイトの導入が不可欠であり、すべての会社にとって最も高い優先度であるべきです。

ブレイクポイントの活用方法

レスポンシブwebデザインにおけるブレイクポイントは、webサイトのコンテンツとデザインが新しい画面サイズに合わせて変化し、最適なユーザーエクスペリエンスを提供するタイミングを示します。すなわち、ブレイクポイントはwebサイトの表示方法を決定するものであり、それらは通常、ブラウザーの幅に基づいて設定されます。

コンテンツは、さまざまな画面サイズで読みにくくなりがちです。そこで、ブレイクポイントを利用すれば、容易にレスポンシブデザインに対応できます。通常、モバイルデバイス、タブレット、ノートパソコンやデスクトップパソコン向けのブレークポイントが設定されていますが、すべてのデバイスに対応できるようにカスタムすることも可能です。

画面サイズに関係なくユーザーによりスムーズなエクスペリエンスを提供できるよう、複数のブレークポイントの作成を検討してください。これは、ページのレイアウトを4の倍数で分割されたグリッドに配置することで行われます。デザイナーは各ページに通常2～3つのブレイクポイントを設けます。しかし、以下のサイズを考慮することをおすすめします。

• 極小：通常は4列のグリッドに基づき、この範囲はモバイルユーザー向けで最大500ピクセルまでです。
• 小：タブレット向けのサイズ範囲（500ピクセルから1200ピクセル）をカバーし、通常は8列のグリッドが使われます。
• 中：ノートパソコン向けに設計されたこの12列グリッドは、1200ピクセルから1400ピクセルまで対応しています。
• 大：このサイズは大型モニター向けにスケールアップし、1400ピクセル以上に対応します。このサイズには12列のグリッドが使用されます。

レスポンシブweb開発は、ユーザーエクスペリエンス（UX）、検索エンジン最適化（SEO）、ビジネスへの影響という3つの主要分野にわたって利点をもたらします。それぞれについて、以下で詳しく説明します。

ユーザーエクスペリエンス（UX）

レスポンシブweb開発は、webページがどの画面にも適応することを保証します。レスポンシブなwebページがないと、サイトの利用が難しくなったり、使いづらく感じたりして、ユーザーが再び訪れることをためらう原因となります。たとえユーザーがレスポンシブではないサイトの利用を続けたとしても、使いづらいレイアウトによって重要な情報が非表示になり、見逃してしまう可能性があります。これはコンバージョン率に影響を与え、ユーザーのバウンス率を高める可能性があります。

SEO

Google検索エンジンのランキングにおける重要な評価基準のひとつは、webサイトのモバイル対応であり、これはレスポンシブwebデザインによって実現できます。さらに、レスポンシブサイトでは、全デバイス共通のコードベースを使用するため、重複コンテンツによるペナルティのリスクを軽減します。つまり、レスポンシブwebサイトは、検索エンジン結果ページで競合他社よりも上位に表示される可能性が高いということです。これにより、サイトへのトラフィックが増加します。

ビジネスへのインパクト

簡単に言えば、単一のレスポンシブサイトを運用するコストは、さまざまなデバイス向けに複数のバージョンを運用するよりも低く、効率的で、メンテナンスも容易です。これにユーザーインターフェイス（UI）の改善と検索結果ページでの可視性向上を組み合わせることで、コンバージョン数の増加も期待できるでしょう。

レスポンシブwebデザインの基本的な定義を押さえた今、webサイトをレスポンシブにするための主な方法を見ていきましょう。

• HTMLとCSS：これら2つの技術によって、webサイトを自動的にサイズ変更したり、非表示・縮小・拡大したりできます。HTMLは構造とコンテンツを制御し、カスケーディングスタイルシート（CSS）はデザインとレイアウトを制御します。
• メディアクエリ：メディアクエリは、デバイスの種類や特定の特性（例えば画面サイズや解像度）に基づいてwebサイトやアプリの表示を調整するCSSの手法です。
• レイアウト： 可変レイアウトは、画面サイズのようなパーセントベースの値を使用します。一方、フレックスボックスレイアウトでは、空きスペースを埋めるために要素を拡張したり、オーバーフローを防ぐために縮小したりします。
• レスポンシブ画像：レスポンシブwebデザインでは、動的変数を使って画像の幅と高さを制御できます。
• 速度:ページの読み込み速度が速いほど、バウンス率は低くなります。画像の最適化、キャッシュの活用、重大なレンダリングパスの改善は、読み込み速度の向上に役立ちます。

大規模なオンラインプレゼンスを持つ多くの会社が、さまざまなユーザーやデバイスに対応できるように自社のwebサイトをよりレスポンシブに更新しています。レスポンシブwebデザインのいくつかの例を見てみましょう。

The New York Times

2018年、The New York Timesはレスポンシブwebデザインを導入することで、サイトの速度とユーザーエクスペリエンスを向上させました。この更新により、webサイトの一貫性が向上し、デジタル読者は新聞のすべてのデジタルプラットフォームに簡単にアクセスできるようになりました。

モバイルアプリケーションの使いやすさと見た目を紙面の形式に近づけて改善した後、The New York Timesはデスクトップ版のデザインが遅れをとっていることに気付きました。この気づきにより、ノートパソコンやデスクトップの読者向けにwebデザインが改善され、現在ではモバイルアプリケーションのユーザーや紙の新聞の読者と同様のエクスペリエンスが得られるようになりました。

Dropbox

人気のファイルホスティングおよびクラウドストレージサービスも、モバイルデバイス向けにwebサイトを改良・適応しました。両レイアウトを比較すると、左側のデスクトップ版と右側のモバイル版が非常に似ていることがわかります。しかし、グリッドの色やフォントにはさりげない変化が加えられており、ページの読みやすさが確保されています。

Etsy

Etsyのwebサイトでは、サイズ、フォント、メニューオプションをさまざまな種類やサイズの画面に合わせてどのように適応させているかが分かります。タブレット版とデスクトップ版のレイアウトはほぼ同じで、ヘッダーオプションとわずかなデザインの違いだけがあり、これらはデバイスごとのユーザー意図の変化を示しています。しかし、これらのバージョンとモバイルデバイスで表示されるEtsyのwebサイトを比較すると、ナビゲーションバーが完全に非表示になり、余計な要素が減っています。

モバイルデバイスでは、Etsyがパーソナライズ機能を重視し、顧客が商品に素早くアクセスできるようにしていることが明確です。

GitHub

このwebサイトは、会社のビジネス目標とコンバージョン目標に関して何が重要かを示しています。デスクトップ版にアクセスした際、訪問者が最初に目にするのは、製品のオファーと、ユーザーがGitHubに登録できるフォームです。

モバイル表示では、余分なコンテンツや要素がなく、メインのサインインまたは新規登録ページがより目立つ形で表示されています。

Slack

Slackは、モバイルやタブレットではwebサイトのオプションをハンバーガーメニューにグループ化しており、デスクトップ版では画面上部のナビゲーションバーに配置しています。また、CTAの配置もデバイスごとに調整されています。デスクトップ表示でファーストビューにあった2つのCTAは、モバイルおよびタブレット表示では、画面をほぼ埋め尽くす大きなボタン1つに置き換えられています。

さらに、モバイルでは、webページのコンテンツが縦方向の1カラムレイアウトにまとめられ、テキストの段落が画像の上や下に配置されます。

スターバックス

スターバックスは、シンプルで印象的なレスポンシブwebデザインが正しく実装された場合の好例を示しています。凝ったパララックススクロール効果はありませんが、季節限定商品のカラフルな静止画像が効果的に使われています。

ただし、イシューがひとつあります。デスクトップでは商品メニューとして表示されているメニューオプションが、デザインをスケールダウンすると一般的なハンバーガーメニューにバンドルされてしまいます。ハンバーガーメニューをオープンしたときに食品のオプションが表示されることを予期していないユーザーにとっては、混乱を招く可能性があります。

レスポンシブwebデザインについて理解し、実際の例もご覧いただいたところで、次はベストプラクティスについて見ていきましょう。

コンテンツを優先

ユーザーが目的のコンテンツを最小限のスクロールやブラウジングで見つけられるようにしましょう。デスクトップでwebサイトの情報を見る場合はスクロールが少なくて済みますが、同じ情報でもコンテンツが長く、フォントや画像が画面に合わせて調整されていないと、モバイルデバイスではユーザーエクスペリエンスが損なわれる可能性があります。

ユーザーが必要な情報を簡単に見つけられるよう、指定されたビューポートに収まるコンテンツを作成してください。

フリクションの排除

まず、ページの主な目標を特定し、その目的を念頭に置いてデザインしてください。CTA（コールトゥアクション）を多くしすぎてユーザーを圧倒しないようにしましょう。各サイトのバージョンをユーザーのニーズに合わせて最適化してください。モバイルファーストのデザインアプローチは、デザイナーが会社の主目的を達成するためにwebサイトに何を含めるべきかを理解し、見極めるのに役立ちます。主な目的の例としては、製品やサービスの購入が挙げられます。

タブレット版やデスクトップ版のwebサイトを作成する段階になったら、二次的な目標についても考えることができます。これには、後で購入を促すためにニュースレター登録を促すプロンプトを追加したり、それを可能にするCTAやマイクロインタラクションを決定したりすることが含まれます。最も重要なのは、まずユーザーの主目的に焦点を当て、主目的や副目的の達成を妨げる不要なフリクションを排除することです。

親指操作への考慮

モバイル端末で親指操作を行うユーザーが、ページの重要な部分に簡単にアクセスできるようにしましょう。デスクトップユーザーは通常コンピューターを机の上に置いて使いますが、モバイルユーザーはデバイスを手に持って操作します。

これにより、webデザイナーがユーザーが操作するタップターゲットやその他の要素を作成する方法が大きく変わります。例えば、オーディエンスは通常、デスクトップの主要なナビゲーションが上部にあることを期待します。しかし、モバイルの場合は、親指で上部に快適に届かないため、ナビゲーションは中央または下部に配置することが推奨されます。

デザインと開発の協業

レスポンシブwebデザインは、デザインと開発の両方がユーザーの行動や環境に対応することを推進するアプローチであることを忘れないでください。そのため、両者が効果的に協力することが重要です。デザイナーと開発者が協力して、コンテンツの配置方法やその結果の見た目を決定します。

デザインと開発を一緒に行うことで、次のような効果が得られます。

• 可読性の向上
• サイト滞在時間の増加
• インタラクションの強化
• eコマースの売上増加
• 全体的なユーザーエクスペリエンスの向上

レスポンシブwebデザインを実践するには、まず情報を収集し、構成を整理し、webサイトのデザインを考案することから開始する必要があります。構造化

構造化しましょう。

応答性は、webページや特定のマーケティングキャンペーンだけでなく、プロセスやシステムにも組み込む必要があります。Webデザイナーは、コンポーネントレベルでレスポンシブと機能に焦点を当てるべきです。

商品ページ全体ではなく、商品ページの見出し部分をレスポンシブにする方法を考えます。カード、カルーセル、コールトゥアクションについて考えてみましょう。各コンポーネントが異なる表示幅や画面解像度で最適に機能するために必要なことを検討しましょう。そして、デザインチームがページ開発のリクエストを受けたときには、すでにコンポーネントが準備完了となっているため、特定のページコンテンツに焦点を当ててユーザーエクスペリエンスを完成させることができます。

繰り返しのテスト

定期的に各プラットフォームでユーザビリティテストを実施することが重要です。デバイスや画面ごとにナビゲーションバーが適切に表示されているかどうか検証し、ナビゲーションデザインが異なる画面で適切に機能し、ユーザーエクスペリエンスを損なっていないかを確認するためにテストする必要があります。

また、複数のデバイスでフォントをテストしましょう。Webサイトのコンテンツに、異なるフォントやデザイン手法を使いたくなるかもしれません。しかし、これらのフォントはすべてのデバイスでサポートされているわけではなく、消費者のデバイス上で文字化けやコードとして表示されてしまう場合があります。Webサイトの更新をローンチする前に、複数のデバイスでフォントをテストすることを忘れないでください。

必ずデバイスとブラウザーの組み合わせをテストしてください。Google Analyticsでwebサイトとモバイルサイトのトラフィックを分析し、あなたのサイトを訪問することが多いブラウザーをテスト対象に含めましょう。最後に、画像やビデオなど様々なコンテンツが異なるデバイスで読み込まれる時間を考慮して、webサイトの速度をテストしましょう。

Webサイトがデバイスやプラットフォームを問わず適切に表示されることは、訪問者に優れたエクスペリエンスを提供するために不可欠です。

レスポンシブwebデザインを実装する準備ができたら、刷新したいwebサイトの一部を選びましょう。ページの主な焦点を決めたら、それを中心に目標を達成できるようにデザインを考え始めましょう。

Adobe Experience Manager Sitesを使えば、ほぼすべてのデバイスに対応したwebページを簡単に作成でき、ユーザーに常に最適なエクスペリエンスを提供できます。

Experience Manager Sitesがレスポンシブwebサイトの作成にどのように役立つかをご確認いただくには、概要動画をご覧いただくか、もしくは製品ツアーにご登録ください。