画面サイズのレスポンシブデザインはなぜ必要? 対応が必須となったいま求められること

Chapter 2レイアウトNo. 12レスポンシブデザインレスポンシブデザインの現在

PC／モバイル両対応の手法のひとつであったレスポンシブデザインも、現代では標準的な存在となった。スマートフォンの多様化やタブレット端末の普及により、PC／モバイルの二元論ではなく、多様なディスプレイサイズに対応することが必要となった。

フレームワークの登場でより身近な存在に。 http://getbootstrap.com

レスポンシブデザインの誕生を振り返る

スマートフォンが世間に登場した当時は、PC向けのレイアウトとスマートフォン向けレイアウトを別々に作成し、それぞれを個別に表示させる手法が取られていました。この方法ではそれぞれの環境での表示を最適化できる一方で、作業量や管理するデータが倍になり、実質2つのサイトを作っているのと同じ労力がかかります。そこで登場したのが、レスポンシブデザインでした図1。

図1同一のソースを用いて多種多様の画面解像度に対応する。

画面サイズに応じて適用するCSSを切り替えることで、同じHTMLソースにもかかわらず、環境によって別のデザインを表示することができるレスポンシブデザインは、制作量を軽減し、情報の一貫性などの多くの利点を持っています。レスポンシブデザインを取り入れたフレームワーク「Bootstrap」などの登場により、導入コストが下がり、認知が広がるとともにより身近な存在となました。

レスポンシブデザインの弱点としては、同一のHTMLソースを使用するため、PCとモバイル環境で大きく差のあるページが作りにくいという点がありました。しかし前述のとおり、モバイルファーストが通常となった現在では、むしろPCサイトがモバイルサイトに近づいています。レスポンシブデザインを導入する障壁は、以前よりもさらに低くなっていると言えるでしょう。

「どのデバイスか」から「どんなサイズでも」へ

レスポンシブデザインが登場した当時は「PCサイトのスマートフォン対応」といった文脈で語られることが多かったものですが、現代ではスマートフォンの画面サイズは多様化し、タブレット端末でもiOSのSplit ViewといったWebサイトの表示サイズを変更する機能が実装されています。こうなってくるともはや「どの端末に向けた表示」ではなく、「あらゆる表示サイズにも対応できる」デザインが必須と言える状況です。

画面サイズによるブレイクポイントの設定は、CSSのメディアクエリで行うことになります。主に、スマートフォンとタブレットの中間（600px程度）やタブレットとPCの中間（960px程度）に設定されますが、レイアウトによって、あるいはコンテンツによってはさらに細かなブレイクポイントを設定する必要があるかも知れません図2。

図2あらゆる解像度にデバイスは分布している。

また、レスポンシブデザインで重要なのは各デザインがあらゆる解像度においてシームレスに変動することです。ブレイクポイントの前後で要素がはみ出てしまったり、想定よりも大きな画面サイズで表示した際にレイアウトが破綻してしまったりするケースをよく見かけます。

デザインの段階でスマートフォン、タブレット、PC、それぞれのデザインを作成するだけではなく、その中間の画面サイズの場合、どのデザインがどのように変動してカバーするのかを考慮してください。そして、レスポンシブデザインの挙動をチェックする際は、必ず無段階に画面サイズを変更しながら確認を行うようにしましょう。

「Quanta Magazine」図3では3段階のレイアウトに対応していますが、画面幅が狭くなってもメニューの文字が隠れないよう折り返し処理がなされるなどの注意が払われています。

近年では、Webブラウザーでもレスポンシブデザインの挙動の確認が容易にできるようになりました。Google Chromeのデベロッパツールや、Safariのレスポンシブ・デザイン・モードなど、ブラウザー内でデバイスや解像度を指定するだけで、簡単に状況の再現が可能です。また、GoogleはWebサイト上で各デバイスでの表示が確認できる「Resizer」図4というツールを公開しています。

図4各デバイスでの表示を同時に確認できる。
https://material.io/resizer/

Googleも推奨するレスポンシブデザイン

以前からGoogleはレスポンシブデザインを推奨してきました。モバイル環境のユーザーが増えたことに加え、特にデバイス毎にURLが分かれないこと、デバイス毎のコンテンツ（HTMLコード）に差異がないことを重視しています（注1）。

注1：https://developers.google.com/search/mobile-sites/mobile-seo/（Google Developers）

2015年からは、「サイトがモバイルフレンドリーであるかどうか」が検索結果に影響を与えるようになりました。

もちろん、「レスポンシブデザインを採用したら検索順位が上がる」という単純な話ではありませんが、今後さらにモバイル環境の多様性が広がり、コンテンツの内容が重視されることとなるのは間違いないと言えるでしょう。そのような状況において、レスポンシブデザインは今後も価値を発揮し続けるのは間違いありません。

他にも、Material Designのガイドラインの中には、レスポンシブUIについての記載があります（注2）。Material Designにおける表示サイズ変更時のデザインパターンも網羅していますので、画面サイズ変更時の挙動の参考にするのもよいでしょう。

注2：https://material.io/guidelines/layout/responsive-ui.html#responsive-ui-surface-behaviors

画像もレスポンシブに

レスポンシブデザインの中でもネックになる要素として、写真画像などのビットマップ素材が挙げられます。例えば、背景前面に画像を使用したい場合、あらゆる画面サイズに対応するためにファイルサイズの大きな画像を指定したい、しかしモバイル環境でのロードを考えるとファイルサイズの小さな画像のほうが好ましい…。

一方で、ピクセル比の高いRetinaディスプレイ（@2x、@3x）への対応をする必要もあります。このような悩みを解決する方法として、imgタグのsrcset属性があります。想定される画面サイズと、そのときに読み込みたい素材のURLを設定することで、画面サイズに応じた画像を読み込むことができます図5。

<img src="img@1x.jpg" srcset="img@1x.jpg 1x, img@2x.jpg 2x" />

見出しテキストを画像で作成するケースがありますが、高解像度対応ができていないために、本文のテキストは滑らかに表示されているのに、見出しテキストはぼやけている、というような光景をよく目にします。見出しもそのまま通常のテキストにすれば解決ですが、特別なフォントが使いたいなどデザイン上の理由もあることでしょう。このような場合、SVG形式を利用することをお勧めします。SVG形式はアウトラインでデータが作成されているため、いくら拡大したとしても滑らかに表示させることができます。見出しだけでなく、表示サイズが変動しうるアイコンなどもSVGで作成するとよいでしょう。

<picture>
  <source media="(min-width: 1024px)" srcset="large.jpg" />
  <source media="(min-width: 600px)" srcset="small.jpg" />
  <img srcset="other.jpg" />
</picture>