レスポンシブデザインとは？アダプティブデザインとの違いや実装のメリット
- 3月30日
- 読了時間: 14分
まずはじめに：ホームページを作成 →｜Web デザインツール →
この記事では、あなたのサイトに最適なデザイン手法で使いやすいモバイルフレンドリーなサイトを作るためのお役立ち情報を紹介します。
この記事の概要
「レスポンシブデザイン」と「アダプティブデザイン」の手法の違いや、それぞれの長所と短所をわかりやすく解説します。さらに、モバイル対応のWeb サイトを設計する際の具体的なコツもご紹介します。
モバイル対応が不可欠な理由（Googleのモバイルファーストインデックスについて）
レスポンシブデザイン（画面に合わせて流動的に変化）とアダプティブデザイン（端末ごとに固定レイアウトを用意）の違い
2つのデザイン手法のメリット・デメリット比較
▶︎ Web デザインツールの詳細はこちら
スマホ対応（モバイルフレンドリー）デザインはなぜ重要なの？
近年、ユーザーはノートパソコンやデスクトップパソコンよりも、圧倒的にモバイル端末からインターネットを閲覧しています。そのため、小さな画面からでもデザインの美しさと使いやすさを維持できる Web サイトの重要性がますます高まっています。
Google もこうした流れを受け、2019 年から「モバイルファーストインデックス」を採用しています。これは、モバイル版サイトのコンテンツを優先的に評価する仕組みです。現在、すべての Web サイトがこの基準で評価されています。そして、Google が最も推奨している構成方法が「レスポンシブデザイン」なのです。
レスポンシブデザインとアダプティブデザインの違いとは？
Web サイトを設計する際、会社で使うような大型モニターからスマートウォッチまで、ユーザーが使う画面のサイズは実にさまざまです。すべてのデバイスで同じように優れた UX デザインを提供するための解決策として考えられたのが、レスポンシブデザインとアダプティブデザインです。
レスポンシブデザインとは？
レスポンシブデザインとは、画面サイズに応じてページ内の要素が自動的かつ流動的に再配置される Web デザインのことです。CSS メディアクエリという技術を使い、ユーザーのデバイスサイズに合わせてデザインを表示します。
たとえば、トヨタ自動車の Web サイトはレスポンシブデザインの良い事例です。パソコンでサイトを開き、ウィンドウの幅を少しずつ狭くしていくと、画面サイズに合わせて画像やテキストがスムーズに再配置される様子がわかります。
画面サイズが変わってもコンテンツの順序は同じですが、メニューの形が使いやすく変化したり、画像が自動で縮小されたりします。グラフィックデザイナーのイーサン・マーコット（Ethan Marcotte）氏によって提唱されたこの手法により、新しい端末が出るたびに別々のサイトを作る手間が省け、企業はより多くのユーザーに情報を届けやすくなりました。
アダプティブデザインとは？
アダプティブデザインとは、ユーザーのデバイスの画面幅（320、480、760、960ピクセルなど）を検出し、あらかじめ用意された複数の静的レイアウトの中から最適なものを読み込ませる手法です。
Apple のサイトは、アダプティブデザインの良い例です。デスクトップとモバイルでコンテンツの構成は似ていますが、テキストではなくサイトで使用されている画像が端末ごとに最適化されています。
アーロン・グスタフソン（Aaron Gustafson）氏が提唱したこの手法は、企業がスマートフォンでのコンテンツ表示方法を細かくコントロールしたいと考える場合によく使われます。パソコンの画面をそのまま無理やりモバイルに当てはめるのではなく、端末ごとに最適な画像を正確に表示できるのが特徴です。
彼はこのことを著書『Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement（プログレッシブエンハンスメント*を用いたリッチな体験の構築）』という本でつづっています。
*プログレッシブエンハンスメント：不可欠なコンテンツを最重要として扱う Web デザイン戦略のこと。
2015 年にこの本を再販したとき、グスタフソンさんは次のように語っています。
「プログレッシブエンハンスメントの哲学は機能的なものであり、拡大し続けるグローバル市場に新しいサイズの Web 画面が現れるたびに、その素晴らしさを発揮し続けるでしょう。実際、私が 2010 年に『Adaptive Web Design』を執筆したときよりも、プログレッシブエンハンスメントは今の時代において、さらに重要な意味を持っているはずです」
アダプティブデザインは、企業がスマートフォンでのコンテンツ表示方法をコントロールしたいと考えるようになって以来、Web デザインにおいて欠かせない存在となりました。
それぞれのメリットとデメリットを徹底比較
Web サイトの作成にあたり、技術的な優劣はありません。あなたのビジネスの目的や、かけられる予算・時間に合わせて最適なものを選ぶことが大切です。
Wix のようなホームページ作成ツールなら、簡単なモバイル対応のホームページを作成することができます。一方、Wix が提供する Web デザイナー向けノーコード Web 制作ツール Wix Studioであれば、レスポンシブ 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 サイトのデザインが表示されます。
レスポンシブ化のメリットは？
1. 一つの Web デザイン多くのデバイスに対応することができます: スマートフォン、タブレット、デスクトップなど、様々なデバイスで美しいWebデザインを維持することができます。
2. ユーザーエクスペリエンスの向上: ユーザーが使用するデバイスに合わせて Web サイトのレイアウトが調整されることにより、ユーザーエクスペリエンスが向上します。
3. SEO の向上: Google などの検索エンジンは、レスポンシブな Web サイトを優遇する傾向があります。
レスポンシブデザインの仕組みは？
レスポンシブデザインの仕組みは CSS メディアクエリを使って、画面の大きさ、解像度、設定などを検出し、様々な画面サイズに合わせて異なるスタイルを適用することによって実現されます。この仕組みにより、同じ HTML で様々なデバイスで適切なレイアウトを提供することができます。
おすすめ関連記事
この記事を書いた人
下瀬 美幸（Miyuki Shimose）
Wix 公式ブログ編集者／SEO エキスパー
