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

レスポンシブデザイン(レスポンシブWebデザインとも)とは、Webサイトを様々なサイズのデバイス環境に対応させるための技術です。WebサイトはHTMLで表示内容を記述し、CSSを使ってレイアウトや見た目を指定します。このCSSを画面サイズに合わせて変更させることで、同じWebサイトでありながら画面サイズに合わせた複数の見た目を表現することができるようになります。
レスポンシブデザイン vs アダプティブデザイン

レスポンシブデザイン以外にWebサイトを様々なデバイス環境に対応させるための方法として、アダプティブデザインがあります。アダプティブデザインとは、PC用とモバイル用で異なるHTMLを配信し、それぞれ異なるデザインとして準備するような実装です。しかし、この方法ではサイトのコンテンツやデザインを変更する際にPC用とモバイル用の両方を編集する必要があり、多くの運用コストがかかってしまいます。また、PC用とモバイル用でURLが異なる場合などは、Googleなどの検索エンジンに両ページが同じコンテンツであることを適切に伝える必要があるなど、他にも多くの運用スキルが必 要となる点でも注意が必要です。
レスポンシブデザインでは、コンテンツを記述するためのHTMLは1ページに1つとなるため、アダプティブデザインよりも効率的にWebサイトを構築・運用することができます。また、近年タブレットデバイスが普及し、対応が必要なデバイスサイズがさらに増えたこともあり、デバイスサイズごとに異なるHTMLを準備するのではなく、レスポンシブデザインでのWebサイト制作を行うことが主流となりました。
レスポンシブデザインのメリット

現在では、Webサイト構築の標準となりつつあるレスポンシブデザインですが、アダプティブデザインと比較して、いくつかのメリットがあります。
SEOに最適化されたサイトを構築しやすい
SEO対策は今日のWeb戦略において欠かせないポイントとなっており、Googleは公式にSEO的観点からWebサイトにレスポンシブデザインを採用することを推奨しています。Googleが提示している「レスポンシブデザインにする理由」は以下の6つです。
Webサイトを閲覧するデバイスに関係なくURLがいつも同じであるため、ページの共有が容易。
Googleがページを正確にインデックス(検索エンジンへの登録)しやすい。
運用コストが低い。
モバイルサイト用のリダイレクト設定などで、重要な設定ミスが起きにくい。
リダイレクトの必要がないため、読み込み時間を短縮できる。
Googleのボットが最小限のリソースでサイト内のページをクロールできる。
大きくまとめると、どの観点も「アダプティブデザインでも可能ではあるけれど、設定がとても難しい」というような内容となっています。現状、これらの設定難易度を考慮した上で、アダプティブデザインにはそれを上まるメリットがないといった状況となっています。
また、アダプティブデザインでは「ユーザーが使っているデバイスを判定する」というプロセスが必要となりますが、これを正確に行うのは実は技術的にとても難しいです。この点から考えても、ユーザーのデバイスに応じて表示するHTMLを変更するのではなく、単純に「表示するブラウザの横幅」という情報をもとに表示を切り替える仕様とした方がバグの少ないWebサイトを構築しやすいです。
ちなみに、一般的なWeb開発でも同じで、「モバイルデバイスの場合は・・・する」というような要件は、
モバイルブラウザで表示した場合
PCブラウザで表示幅を縮小した場合
大きめのモバイル端末
モバイルデバイスの横画面表示
など、様々な場合のことを考慮する必要があるため実装が難しいです。「表示横幅640px以下の場合は・・・する」などといった画面サイズに基づいた要件とする方がプロダクトの挙動を明確に定義しやすくおすすめです。
運用コストが低い
レスポンシブデザインのその他のメリットとしては、運用コストの低さが挙げられます。コンテンツを表示するためのHTMLをデバイス間で1つに統一できるので、ページ更新時に同じ内容を複数のHTMLに反映する必要がありません。
開発運用面でメリットのあるレスポンシブデザインですが、デザイナーは結局複数の画面サイズ用にデザインファイルを追加する必要があるなど、デザインの運用性にはどうしても課題が残ります。この点については、FigmaのAuto Layout機能をはじめとし、デザイン側でもレスポンシブなページの運用が行いやすいような環境づくりが進んでいます。
データ分析やA/Bテストが行いやすい
データ分析も近年のWebプロジェクトにおいて欠かせない観点です。レスポンシブデザインにすることで、一つのページに対してデバイス環境にかかわらず同じURLが使えるため、デバイスを横断したデータ分析が可能となります。逆に、デバイスによってコンテンツのURLが異なってしまうと、データ分析のためのイベント設計や運用・分析がとても複雑になってしまいます。
レスポンシブデザインの作り方と制作のポイント
