レスポンシブデザインとは？アダプティブデザインとの違いや実装のメリット
モバイルフレンドリーな Web デザインを作成するために「レスポンシブデザイン」か「アダプティブデザイン」のどちらが良いのか悩むデザイナーも多いのではないでしょうか？
レスポンシブウェブデザインとは、画面サイズに応じてページ内の要素が再配置される流動的デザインのことです。それに対して、アダプティブウェブデザインは、決められたサイズのプラットフォーム向けに作成された静的レイアウトを使用する Web デザインの一種です。
この記事では、2 つのデザインの違いとそれぞれの長所と短所を深堀りしていきます。ホームページを作成する際にどちらのデザインを採用するかべきか検討するための情報と、モバイルフレンドリーデザインのコツを詳しく紹介します。
目次
モバイルフレンドリーなデザインはなぜ必要？
近年のユーザーは、ノートパソコンやデスクトップパソコンよりも、圧倒的にモバイル端末からインターネットを閲覧しています。モバイルからでも、デザインと機能を維持できる Web サイトデザインの重要度はますます高まっています。
Google はこうした流れを組み、2019 年からモバイルファーストインデックスを採用しています。これは、モバイル版サイトのコンテンツを優先的に使用して評価するインデックス方針です。2023年の現在ではほとんど全ての Web サイト がモバイルファーストインデックスにより評価されています。そして、Google が最も推奨している、モバイル フレンドリーなサイトの構成方法がレスポンシブデザインです。
レスポンシブとアダプティブの違い
モバイル対応するために Web デザインの世界でよく比較されるのが、「レスポンシブデザイン」と「アダプティブデザイン」です。
Web サイト を設計する際には、すべてのユーザーを意識する必要があります。しかし、会社で使うような大型モニターから小さなスマートウォッチまで、ユーザーが使う画面のサイズはさまざまです。全てのデバイスで同じように優れた UX デザインを提供することは極めて困難です。 この問題の対応策として考えられたのが、レスポンシブデザインとアダプティブデザインです。以下では、これらの主な違いについて説明します。
レスポンシブデザインとは？
レスポンシブデザインとは、Web ページのデザインとレイアウトをあらゆる画面サイズに自動的に適応させて表示できる動的な Web デザインのことを示します。レスポンシブデザインでは、CSS メディアクエリ（カスタマイズされたスタイルシート）を使用してエンドユーザーのデバイスサイズに応じて Web サイトのデザインが表示されます。
たとえば、トヨタ自動車の Web サイトは、レスポンシブデザインの良い事例です。流れるようなグリッドデザインで、ホームページのコンテンツを小さな画面でも美しく表示できます。PC 版のサイトを開いて、ウィンドウのサイズを変えていくと、画面サイズに合わせて、デザインが再配置される様子がよくわかります。
もちろん、画面サイズが変わっても同じコンテンツは同じ順番で表示されますが、メニューなどのコンテンツは新しい画面サイズでも使いやすいよう拡大または縮小されます。さらに、訪問者が使用しているプラットフォームに応じて、スクロールの動作などの機能が変更されています。
レスポンシブデザインは、2010 年にシアトルで行われた Web デザインカンファレンス「An Event Apart」にて、グラフィックデザイナーのイーサン・マーコット（Ethan Marcotte）さんにより発表されました。マーコットさんは、この新しいデザイン手法に名前を付けた経緯をこう語っています。
「この講演を行うまでの数年間は、さまざまなデザインプロジェクトで、独立したスタンドアロン型モバイルサイトの制作の依頼が中心でした。それどころか、『iPhone 専用のサイトを作ってほしい』と言われることもしばしばあり。でも、何かしっくりきませんでした。というのも、これから新しい端末が登場するたびに別々のサイトを作成するのでしょうか？それに、私はいつも柔軟で美しいレイアウトを作ることに興味がありましたから」
それ以来、この流動的な Web デザイン手法が普及したことで、ユーザーはスマホからより多くの操作ができるように。また、企業もより多くのデバイスで、より多くの消費者にリーチできるようになりました。
アダプティブデザインとは？
アダプティブデザインとは、検出されたデバイスに基づいて、あらかじめ作成された静的なレイアウトを Web ページに読み込ませる手法です。これを実現するために、Web デザイナーはさまざまな画面幅に基づいて異なるデザインを作成する必要があります。最も一般的な幅は次のとおりです（ピクセル単位）。
320
480
760
960
1200
1600
Apple のサイトは、アダプティブデザインの良い例です。最も一般的なブレイクポイントを想定し、各サイズに応じたカスタムデザインを使用しています。これがレスポンシブデザインであれば、どの訪問者の画面にも同じコンテンツが同じ順序で表示されるでしょう。しかし、アダプティブデザインは動的なものではありません。
Apple の場合、ページの構成はほぼ同じで、セクションの数も同じです。しかし、コンテンツは PC とモバイルで若干異なっています。テキストではなく、サイトで使用されている画像に注目してみてください。どこが変わっているか分かりますか？
ユーザーエクスペリエンスという点では、何ら損なわれることはありません。むしろ、アダプティブデザインの方がデスクトップの画面をすべてモバイル端末に当てはめるレスポンシブデザインよりも、正確に画像を使用できます。
アダプティブデザインは、レスポンシブデザインに続いて、Microsoft で Web のエキスパートとして勤務していたアーロン・グスタフソン（Aaron Gustafson）さんによって提唱されました。彼はこのことを著書『Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement（プログレッシブエンハンスメント*を用いたリッチな体験の構築）』という本でつづっています。
*プログレッシブエンハンスメント：不可欠なコンテンツを最重要として扱う Web デザイン戦略のこと。
2015 年にこの本を再販したとき、グスタフソンさんは次のように語っています。
「プログレッシブエンハンスメントの哲学は機能的なものであり、拡大し続けるグローバル市場に新しいサイズの Web 画面が現れるたびに、その素晴らしさを発揮し続けるでしょう。実際、私が 2010 年に『Adaptive Web Design』を執筆したときよりも、プログレッシブエンハンスメントは今の時代において、さらに重要な意味を持っているはずです」
アダプティブデザインは、企業がスマートフォンでのコンテンツ表示方法をコントロールしたいと考えるようになって以来、Web デザインにおいて欠かせない存在となりました。
レスポンシブデザインとアダプティブデザインのメリットとデメリット
モバイルサイトのデザインに関しては、技術的な勝敗はありません。ニーズや要望、リソースに応じて適したものを選択すればよいのです。Wix のようなホームページ作成ツールなら、簡単なモバイル対応のホームページを作成することができます。一方、Wix が提供する Web デザイナー向けのノーコード Web 制作ツールであれば、レスポンシブ CSS を採用しており、要素をドラッグ & ドロップするだけで完全レスポンシブデザインのサイトを効率的に構築できます。
では、以下でそれぞれの長所と短所を見ていきましょう。
レスポンシブデザインのメリットとデメリット
メリット：
すべてのプラットフォームで一貫したコンテンツ体験を提供可能
非標準の画面サイズを持つ新しいデバイスでも動作する
デメリット：
各デバイスでのレンダリング方法の制御が難しい
要素の順序やサイズが異なると、視覚的な階層性が損なわれる可能性がある
デザインの専門知識、クロスプラットフォームテスト、デザインの微調整をより必要する
動的コンテンツの読み込みに時間がかかるため、サイトパフォーマンスが低下する可能性も
アダプティブデザインのメリットとデメリット
メリット：
各プラットフォームやコンテキストに合わせて最適なエクスペリエンスを実現
ターゲットとするデバイスに対してデザインが最適化されているため、パフォーマンスが高い
広告やその他のサードパーティ製統合コンテンツにフィットしやすい
デメリット：
すべてのデバイスでコンテンツが一貫していない場合、SEO に悪影響を及ぼす可能性がある
モバイルファーストのWebデザイン
これらのモバイルフレンドリーデザイン戦略のいずれにおいても最良の結果を得るには、モバイルファーストのアプローチの採用が重要です。または、モバイルサイトで起こりがちな問題を避けるために、最初のデザインを最小のスクリーンサイズに合わせて作成することをおすすめします。
モバイル対応Webデザインのための10のポイント
Web デザインにおいて、レスポンシブデザインないしアダプティブデザインを用いて優れたサイトを作成するコツは、サイト内の各要素（パーツ）に注目し、サイトの変更がそれらにどのような影響を与えるかを検討することです。
モバイルフレンドリーなデザインを設計する際には、以下のような主要パーツを最適化するようにしましょう。
1. ヘッダーのコンテンツ
ヘッダーは、サイトについての多くの情報を一瞬で訪問者に伝えられる重要なパーツです。
ブランドについて
商品やサービス
サイト上で行えるアクション
サイト内検索
PC 版のレイアウトでは、サイトのヘッダーにこれらすべての情報を表示できる十分なスペースがあります。しかし、モバイルの場合はそうではありません。いずれの手法でも、Web デザインにおいてはこの点を考慮する必要があります。
モバイルサイトのナビゲーションには、どのような要素を表示すべきかを考えてみてください。たとえば、強力かつ一貫したブランドアイデンティティを確立するためには、ブランドロゴの表示が必須でしょう。また、ナビゲーションメニューや、Eコマースサイトの場合はショッピングカートのアイコンを表示するのが一般的です。
2. 文字の読みやすさ
Web サイトのテキストは、単純そうに見えて注意が必要な要素です。見栄えが良く、ブランドのスタイルを反映したフォントを選びたい一方で、読みやすさに影響が出ないようにします。
また、さまざまなデバイス向けにデザインする場合、画面サイズの拡大および縮小に伴って、サイズやスタイルが変化する可能性も考慮が必要です。これらの点は、サイトを公開する前に必ずテストしておきましょう。
3. ハンバーガーメニュー
ナビゲーションは、すべての Web サイトにとって重要な役割を担っています。中でも、モバイルサイトでよく見られるのが「ハンバーガーメニュー」です。
ハンバーガーメニューとは、通常サイトの右上または左上に配置される三本線のアイコンのことを指します。多くのモバイルサイトで使われているため、ほとんどの人はこのアイコンからナビゲーションメニューにアクセスできることを知っていると思います。
4. ナビゲーションの配置
モバイルアプリの人気が高まるにつれ、各サイトのモバイルナビゲーションも次第に変化しています。これまで定番だったハンバーガーメニューの枠を超えたデザインも見られるようになってきました。
トップレベルのナビゲーションリンクを少なめ（3～4 つ以下）にし、水平型のメニューとして画面下部に固定したり、ウェブサイトのヘッダー内への配置などを検討するブランドもあります。また、ライトボックスを使用したフルスクリーンポップアップメニューも人気です。
5. 固定ヘッダー
アダプティブデザインでは、モバイルページデザインで表示するコンテンツを前もって選択することで比較的短く表示できます。しかし、レスポンシブデザインでは、特に変更がない限り、デスクトップのコンテンツがすべてモバイルサイトに反映されます。
最善を尽くしてもモバイルページが長くなってしまう場合は、ヘッダーメニューを固定するのも良いアイディアです。こうすることで、ユーザーはいつでもナビゲーションにアクセスできます。
6. 視覚的な階層
Web サイトの視覚的階層とは、訪問者の視線がページ内でたどる経路のことを指します。サイトのレイアウトが乱雑だと、特にモバイルサイトではどの部分に注目すればいいのか、次にどこへ行けばいいのかが分からなくなってしまいます。
ヘッダーやサブヘッダー、画像ブロック、ホワイトスペース、ナビゲーションツールなどを Web ページに追加すると、以下を実現できます。
大量のコンテンツや複雑なテーマを分割
ページ内の情報の構造を作成
バランスの取れたデザインにする
異なるセクション間の関係を確立
アダプティブデザインでは、各バージョンのビジュアルの詳細を決める際にこの点を考慮できます。レスポンシブデザインでは、画面が縮小するに伴ってパーツのサイズやスタイルが変更される可能性があるため、注意が必要です。
最善の方法は、PC、タブレット、モバイルのそれぞれで使える総合的なスタイルを設定し、レスポンシブ版として再構築する過程で、コンテンツの整合性が損なわれないようにすることです。
7. ページの長さ
次に、サイトのコンテンツの長さについて説明します。モバイルサイトでは、ナビゲーション機能によって長いページもスクロールしやすくなりますが、スマホで閲覧する場合は、やはりスクロール回数は少ない方が便利です。 モバイルで利用するユーザーに向けて、コンテンツの長さを調節することが大切です。
8. 画像
Web サイトの画像は、デザイン、ブランディング、ストーリーテリング、セールスを行う上で非常に有効なツールです。レスポンシブデザインやアダプティブデザインでは、これらの画像がページのパフォーマンスに与える影響に注意を払う必要があります。アダプティブサイトでは、画像の重さが問題になることはあまりありませんが、必要な画像だけを使用し、ページの表示速度の低下を防ぐことをおすすめします。
9. 埋め込みコンテンツ
埋め込み型の SNS ウィジェット、動画、バナー広告などの外部コンテンツを利用しているサイトも多くあります。アダプティブデザインでは、これらの外部パーツをコンテナの境界内に配置して表示させられます。レスポンシブデザインでは、埋め込みコードをカスタマイズし、コンテナの枠内に配置する必要があります。
10. インタラクション
インタラクティブデザイン要素としては、次のようなものが挙げられます。
インタラクティブであることを認識しやすい
ページ上で見つけられる
エラーなしでサイトを操作できる
訪問者がサイトで行うであろう、さまざまなインタラクションを考えてみましょう。小さな操作であっても、画面サイズによりその方法が異なる場合もあります。たとえば、サイトのヘッダーに電話番号を表示するとします。PC ユーザーはこの電話番号をスマホに直接打ち込まなければいけませんが、モバイルユーザーはタップして電話をかけられることを期待するでしょう。
インタラクティブなジェスチャーやデザインも、プラットフォームによって異なります。たとえば、画像のスライダーはすべてのユーザーにとって同じように見えるかもしれません。しかし、PC ユーザーは通常、マウスを使用してスライダーを閲覧しますが、モバイルの訪問者はタップしてスライダーを左右に動かします。
そのため、レスポンシブデザインかアダプティブデザインかにかかわらず、異なるプラットフォームでコンテンツの位置やサイズを変更し、表現する方法だけに注目せずに、ユーザーが置かれる状況や想定されるコンテキストに基づいて、コンテンツのインタラクションがどう変化するかも考えましょう。
まとめ
検索エンジンがレスポンシブ Web デザインを推奨していることもあり、SEO 対策としても、レスポンシブ Web デザインを避けては通れません。一方で、制作するにあたっての時間・費用がかかること、スマホへの表示スピードへ影響があるため、レスポンシブ化の対応については十分な検討が必要です。モバイルフレンドリーなWebデザインにするためにどちらの方法を取るかは、費用や作成の手間をよく検討した上で、バランスが取れるものがいいでしょう。
よくある質問
レスポンシブの意味は？
レスポンシブデザインとは、Web ページのデザインとレイアウトをあらゆる画面サイズに自動的に適応させて表示できる動的な Web デザインのことを示します。レスポンシブデザインでは、CSS メディアクエリ（カスタマイズされたスタイルシート）を使用してエンドユーザーのデバイスサイズに応じて Web サイトのデザインが表示されます。
レスポンシブ化のメリットは？
レスポンシブデザインの仕組みは？
編集者：Miyuki Shimose
ブログ コンテンツマネージャー
