レスポンシブウェブデザイン

2021年8月30日作成

Google 検索セントラル「レスポンシブウェブデザイン」によると，レスポンシブウェブデザインを次のように説明している。

レスポンシブウェブデザインは、サーバーからどのデバイスに対しても常に同じ HTML コードを配信しつつ、CSS を使用して各デバイスでのページのレンダリングを変更する設定方法です。

developers.google.comまた Google は，レスポンシブウェブデザインをモバイル対応のベストプラクティスとして推奨していることもあり，レスポンシブウェブデザインに対応する例が増えている。

もちろん，Masassiah Web Site，Masassiah Blog もレスポンシブウェブデザインを採用している。

レスポンシブウェブデザインの特徴

レスポンシブウェブデザインの利点は，以下の通り。

URL が一つなので，ユーザによるコンテンツの共有やリンクが簡単になる。
同じコンテンツのページをいくつも維持管理する手間が省ける。
ユーザをリダイレクトする必要がないので読み込み遅延が少ない。

レスポンシブウェブデザインは，いいことばかりのようだが，実際どうだろうか。

レスポンシブウェブデザイン（案１）と Web サイトにアクセスする Web ブラウザやデバイスのユーザエージェント情報によって，表示を切り替える方法（案２）を比較する。

表　レスポンシブウェブデザインの比較
項目	案１	案２
Web サイト表示の切替え方法	様々なデバイスに対して単一の HTML ファイルを使用する。Web ブラウザのウィンドウ幅を基準に，CSS で表示を切り替える。	デバイスごとに最適化した複数の HTML ファイルを準備しておく。Web サーバへのアクセス時に通知されるユーザエージェント情報（Web ブラウザの種類やバージョンの情報）に応じて，適切な HTML ファイルにリダイレクトを行うことで表示を切り替える。
表示速度	リダイレクトを行わないので，表示の遅延は発生しない。ただし，PC の高解像度ディスプレイ用の画像をスマートフォンでも共通して使用する場合は，表示の遅延が発生する。	案１と比較した場合，リダイレクトを行う分，表示の遅延が発生する。
デザインの自由度	どのデバイスでも同じ HTML ファイルを表示するので，基本的なデザインは共通となる。そのため，デバイスごとに大幅にデザインを変更することは難しい。	デバイスごとに異なる HTML ファイルを表示するので，デバイスごとに自由にデザインすることが可能である。

私が運営する Web サイトでは，デバイスごとに大きくデザインを変更する必要がなく，初期開発や将来のデザイン変更において，開発コストを抑えられるため，案１のレスポンシブウェブデザインを採用している。

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

レスポンシブウェブデザインを実現するため，デバイスの解像度，ウィンドウの幅・向きなどの指定条件に合わせて別々の CSS を適用する「メディアクリエ」の機能によって CSS を切り替える。Web ブラウザのウィンドウ幅で CSS を切り替える条件を「ブレークポイント」という。ブレークポイントはピクセルで指定し，単位は px で表す。

スマートフォンとタブレットのブレークポイントを 768 px，タブレットと PC のブレークポイントを 1,024 px とし，次表のように対象デバイスごとの Web ブラウザで想定されるウィンドウ幅の範囲を決める。