レスポンシブデザインとは？アダプティブデザインとの違いや実装のメリット

モバイルフレンドリーな Web デザインを作成するために「レスポンシブデザイン」か「アダプティブデザイン」のどちらが良いのか悩むデザイナーも多いのではないでしょうか？

レスポンシブウェブデザインとは、画面サイズに応じてページ内の要素が再配置される流動的デザインのことです。それに対して、アダプティブウェブデザインは、決められたサイズのプラットフォーム向けに作成された静的レイアウトを使用する Web デザインの一種です。

この記事では、2 つのデザインの違いとそれぞれの長所と短所を深堀りしていきます。ホームページを作成する際にどちらのデザインを採用するかべきか検討するための情報と、モバイルフレンドリーデザインのコツを詳しく紹介します。

目次

モバイルフレンドリーなデザインはなぜ必要？

レスポンシブとアダプティブの違い

　レスポンシブデザインとは？

　アダプティブデザインとは？

　レスポンシブデザインのメリットとデメリット

　アダプティブデザインのメリットとデメリット

　モバイルファーストのWebデザイン
 モバイル対応Webデザインのための10のポイント

よくある質問

近年のユーザーは、ノートパソコンやデスクトップパソコンよりも、圧倒的にモバイル端末からインターネットを閲覧しています。モバイルからでも、デザインと機能を維持できる 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 デザイナーはさまざまな画面幅に基づいて異なるデザインを作成する必要があります。最も一般的な幅は次のとおりです（ピクセル単位）。

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 制作ツール Wix Studioであれば、レスポンシブ CSS を採用しており、要素をドラッグ & ドロップするだけで完全レスポンシブデザインのサイトを効率的に構築できます。

では、以下でそれぞれの長所と短所を見ていきましょう。

メリット：

デメリット：

メリット：

デメリット：

これらのモバイルフレンドリーデザイン戦略のいずれにおいても最良の結果を得るには、モバイルファーストのアプローチの採用が重要です。または、モバイルサイトで起こりがちな問題を避けるために、最初のデザインを最小のスクリーンサイズに合わせて作成することをおすすめします。

Web デザインにおいて、レスポンシブデザインないしアダプティブデザインを用いて優れたサイトを作成するコツは、サイト内の各要素（パーツ）に注目し、サイトの変更がそれらにどのような影響を与えるかを検討することです。
 

モバイルフレンドリーなデザインを設計する際には、以下のような主要パーツを最適化するようにしましょう。

1. ヘッダーのコンテンツ

2. 文字の読みやすさ

3. ハンバーガーメニュー

4. ナビゲーションの配置

5. 固定ヘッダー
 6. 視覚的な階層

7. ページの長さ
 8. 画像

9. 埋め込みコンテンツ
 10. インタラクション
 

ヘッダーは、サイトについての多くの情報を一瞬で訪問者に伝えられる重要なパーツです。

PC 版のレイアウトでは、サイトのヘッダーにこれらすべての情報を表示できる十分なスペースがあります。しかし、モバイルの場合はそうではありません。いずれの手法でも、Web デザインにおいてはこの点を考慮する必要があります。

モバイルサイトのナビゲーションには、どのような要素を表示すべきかを考えてみてください。たとえば、強力かつ一貫したブランドアイデンティティを確立するためには、ブランドロゴの表示が必須でしょう。また、ナビゲーションメニューや、Eコマースサイトの場合はショッピングカートのアイコンを表示するのが一般的です。

Web サイトのテキストは、単純そうに見えて注意が必要な要素です。見栄えが良く、ブランドのスタイルを反映したフォントを選びたい一方で、読みやすさに影響が出ないようにします。

また、さまざまなデバイス向けにデザインする場合、画面サイズの拡大および縮小に伴って、サイズやスタイルが変化する可能性も考慮が必要です。これらの点は、サイトを公開する前に必ずテストしておきましょう。

ナビゲーションは、すべての Web サイトにとって重要な役割を担っています。中でも、モバイルサイトでよく見られるのが「ハンバーガーメニュー」です。

ハンバーガーメニューとは、通常サイトの右上または左上に配置される三本線のアイコンのことを指します。多くのモバイルサイトで使われているため、ほとんどの人はこのアイコンからナビゲーションメニューにアクセスできることを知っていると思います。

モバイルアプリの人気が高まるにつれ、各サイトのモバイルナビゲーションも次第に変化しています。これまで定番だったハンバーガーメニューの枠を超えたデザインも見られるようになってきました。

トップレベルのナビゲーションリンクを少なめ（3～4 つ以下）にし、水平型のメニューとして画面下部に固定したり、ウェブサイトのヘッダー内への配置などを検討するブランドもあります。また、ライトボックスを使用したフルスクリーンポップアップメニューも人気です。

アダプティブデザインでは、モバイルページデザインで表示するコンテンツを前もって選択することで比較的短く表示できます。しかし、レスポンシブデザインでは、特に変更がない限り、デスクトップのコンテンツがすべてモバイルサイトに反映されます。

最善を尽くしてもモバイルページが長くなってしまう場合は、ヘッダーメニューを固定するのも良いアイディアです。こうすることで、ユーザーはいつでもナビゲーションにアクセスできます。

Web サイトの視覚的階層とは、訪問者の視線がページ内でたどる経路のことを指します。サイトのレイアウトが乱雑だと、特にモバイルサイトではどの部分に注目すればいいのか、次にどこへ行けばいいのかが分からなくなってしまいます。

ヘッダーやサブヘッダー、画像ブロック、ホワイトスペース、ナビゲーションツールなどを Web ページに追加すると、以下を実現できます。

アダプティブデザインでは、各バージョンのビジュアルの詳細を決める際にこの点を考慮できます。レスポンシブデザインでは、画面が縮小するに伴ってパーツのサイズやスタイルが変更される可能性があるため、注意が必要です。

最善の方法は、PC、タブレット、モバイルのそれぞれで使える総合的なスタイルを設定し、レスポンシブ版として再構築する過程で、コンテンツの整合性が損なわれないようにすることです。

次に、サイトのコンテンツの長さについて説明します。モバイルサイトでは、ナビゲーション機能によって長いページもスクロールしやすくなりますが、スマホで閲覧する場合は、やはりスクロール回数は少ない方が便利です。
 
 モバイルで利用するユーザーに向けて、コンテンツの長さを調節することが大切です。

Web サイトの画像は、デザイン、ブランディング、ストーリーテリング、セールスを行う上で非常に有効なツールです。レスポンシブデザインやアダプティブデザインでは、これらの画像がページのパフォーマンスに与える影響に注意を払う必要があります。アダプティブサイトでは、画像の重さが問題になることはあまりありませんが、必要な画像だけを使用し、ページの表示速度の低下を防ぐことをおすすめします。

埋め込み型の SNS ウィジェット、動画、バナー広告などの外部コンテンツを利用しているサイトも多くあります。アダプティブデザインでは、これらの外部パーツをコンテナの境界内に配置して表示させられます。レスポンシブデザインでは、埋め込みコードをカスタマイズし、コンテナの枠内に配置する必要があります。

インタラクティブデザイン要素としては、次のようなものが挙げられます。

訪問者がサイトで行うであろう、さまざまなインタラクションを考えてみましょう。小さな操作であっても、画面サイズによりその方法が異なる場合もあります。たとえば、サイトのヘッダーに電話番号を表示するとします。PC ユーザーはこの電話番号をスマホに直接打ち込まなければいけませんが、モバイルユーザーはタップして電話をかけられることを期待するでしょう。

インタラクティブなジェスチャーやデザインも、プラットフォームによって異なります。たとえば、画像のスライダーはすべてのユーザーにとって同じように見えるかもしれません。しかし、PC ユーザーは通常、マウスを使用してスライダーを閲覧しますが、モバイルの訪問者はタップしてスライダーを左右に動かします。

そのため、レスポンシブデザインかアダプティブデザインかにかかわらず、異なるプラットフォームでコンテンツの位置やサイズを変更し、表現する方法だけに注目せずに、ユーザーが置かれる状況や想定されるコンテキストに基づいて、コンテンツのインタラクションがどう変化するかも考えましょう。

検索エンジンがレスポンシブ Web デザインを推奨していることもあり、SEO 対策としても、レスポンシブ Web デザインを避けては通れません。一方で、制作するにあたっての時間・費用がかかること、スマホへの表示スピードへ影響があるため、レスポンシブ化の対応については十分な検討が必要です。モバイルフレンドリーなWebデザインにするためにどちらの方法を取るかは、費用や作成の手間をよく検討した上で、バランスが取れるものがいいでしょう。

おすすめ関連記事

編集者：Miyuki Shimose

ブログ コンテンツマネージャー