レスポンシブデザインの実現方法

レスポンシブデザインとは一つのHTMLで全てのデバイス（端末）に対応するWebデザインのことです。今では一般的ではありますが、一昔前はPCとスマホ、もっと言うと携帯電話（ガラケー）用に別々にHTMLを用意していました。そのため一つ修正するのに3箇所の修正が必要であるという風に管理が大変でした。レスポンシブデザインの場合は修正が1箇所で済むため、運用が以前よりは楽になりました。

レスポンシブデザインはGoogleが推奨したこともあり（※1）、「SEOに強い」Webデザインとして広く普及しました。以前はスマホ（ガラケー）用ページの情報がPC向けページと比べて情報量が少ないサイトが多くありました。モバイルファーストインデックス導入前はPC向けページの情報を対象にしてスマホ検索の順位を決めていました。現在はモバイルファーストインデックス導入済みのサイトはスマホ向けページの情報を対象にしています。スマートフォンサイトの重要性が増したためにCSSの調整だけで済むレスポンシブデザインのサイトが増えました。2020年現在PCとスマホを別々のHTMLとするアダプティブデザインを選択するのはそこに意図がある場合だけではないでしょうか。

※1「レスポンシブ・ウェブデザイン – メディアクエリのパワーを使いこなす」
https://webmaster-ja.googleblog.com/2013/01/responsive-design-harnessing-power-of.html

メリット・デメリット

レスポンシブWebデザインのメリット・デメリットです。集客と運用を考えるとレスポンシブデザインが良いのですが、ユーザー体験・コンバージョンを考えると必ずしもレスポンシブデザインが最適とは限りません。特に繰り返し利用するサービスの場合はアダプティブデザインも検討すべきと考えます。

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

• PCとスマホで同じ情報を提供できる
• デバイスに合わせて最適なレイアウトを提供できる、同じ情報でもPC・スマホで見やすいデザインである
• 一つのHTMLなので運用コストが抑えられる、修正がしやすい
• URLが一つなのでSEOに適した設計となる、無駄のない被リンク・別URLによるSEOの問題回避

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

• 最初の設計に時間がかかる、PCとスマホそれぞれに適した構成を考える必要がある
• どのデバイスにも最適にすると同じようなデザインになりがちである
• デバイスに特化したHTMLでないため、デバイスによっては推しが弱くなることもある
• （作り方によっては）スマホでもPC用のCSSを読み込むなど無駄な通信が発生する

レスポンシブデザインの実現方法

レスポンシブデザインはデバイスサイズに応じてCSSを切り替えて見た目を調整します。CSSの読み込み方法は2つあります。メディアクエリを使用してデバイスサイズに応じたCSSファイルを読み込む方法と、JavaScriptでUserAgentを取得してCSSを読み込む方法です。

メディアクエリでデバイスサイズごとに使用するCSSを切り替える

一般的なレスポンシブデザインというとメディアクエリで使用するCSSを切り替える方法です。ただし実際に使わないCSSも読み込むのでエコではないと言えます。作り手からするとテスト確認がしやすいでいいのですが（ウインドウサイズを変えれば表示確認できるため）。対象を細かくし過ぎるとデバイスに応じたCSSが増えるのである程度絞り込んだ方が良いと考えます。

UserAgentでデバイスを判定して対応したCSSを読み込む

UserAgentはデバイスごとに異なります。なのでUserAgentを取得してデバイスに応じたCSSのみ読み込みます。デバイスに不要なファイルを読み込まないので無駄な通信が発生しないエコな方法になります。ただしテスト確認をする場合はUserAgentを切り替えた上で再読み込みが必要です。1回の通信で複数サイズの表示確認できないので作り手にとってはエコではないとも言えます。また、UserAgentの判別はPHPまたはJavaScriptで実現できます。PHPの場合はソース上に無駄な記述がなくなるので極限までページを軽くする場合はこちらの方が良いです。

JavaScriptの読み込みについて

CSS同様にデバイスに応じてJavaScriptを使い分けたいというケースもあります。例えば要素をスライダーで切り替えて表示させたい場合、PCでは要素を2点・スマホでは1点という風にデバイスごとに表示数を変えたいとします。

この場合、CSS同様に複数の実現方法があります。

1. ウィンドウサイズに応じて処理を条件分岐させる
2. UserAgentに応じて処理を条件分岐させる
3. ウィンドウサイズまたはUserAgentに応じてHTMLに任意のCLASSを追加して使用するJavaScriptファイルを切り替える

どれが良いかは考え方次第ですが、一つのJavaScript内で条件分岐をするか、デバイス用のJavaScriptを用意するかというと弊社は後者を選択します。

弊社では案件をほぼレスポンシブデザインで構築しています。アダプティブデザインは一部の大規模なサービスのみです。デバイスに応じてユーザー体験を変えることを優先させる場合はアダプティブに構築します。予算やサービス規模に応じて最適な選択をすべきと言えます。