スマホ時代に必須のレスポンシブWebデザインとは

近年スマートフォンが急速に普及して……なんて言っていたのは過去の話で、今ではスマホを持っていない人を探すほうが難しいくらい、すっかり生活に溶け込んでいます。2018年の時点で20〜30代の普及率は9割以上に達し、10代や40代でも8割近くの人がスマホを持っているそうです。

LINEの調査（2017年）では、スマホでのネット利用は85%。さらにスマホのみの利用者は46%と半数に迫る勢いです。対してPCのみの利用者はわずか7%しかいません。今やスマホはネットを利用するための最もポピュラーな機器なんですね。

Webの利用もすでにスマホが主流と考えられます。サイトの内容にもよりますが、半数以上がスマホでの閲覧とみてよいでしょう。

当然Webサイトはスマホでの閲覧を考慮して作らなくてはいけません。その制作手法として2019年現在の主流がレスポンシブWebデザインです。

レスポンシブデザインはスマホ対応のための手法ではない

スマホのためにレスポンシブと言っておいていきなりあれですが、そもそもレスポンシブデザインはスマホに対応する“ため”の手法ではありません。ひとつのコンテンツを、環境（画面サイズ）に応じて最適化して表示するための手法です。

小さな画面や大きな画面、様々なデバイスに対応することができるのがレスポンシブの特徴で、結果的にスマホにも対応できるのです。

そのため、スマホには最適化されているけど、タブレットでの閲覧には適さないようなサイトは、レスポンシブとは言えません。

また、「手法」であって「技術」ではありません。レスポンシブを実現するための技術は様々なものがあり、それを必要に応じて組み合わせる必要があります。なにか特定の技術を指すものではないのです。

レスポンシブデザインの利点

今後現れるものも含めて、あらゆるデバイスに対応

レスポンシブの一番の利点は、（理想的には）「今後現れる新たなデバイス」にも対応できるという点です。

多くのスマホのビューポート（表示幅）は360px、iPhoneなら375pxか414pxです。きちんとレスポンシブなページになっているなら、これが380pxや424pxのようなデバイスで閲覧しても、デザインが崩れることなく見ることができる（はずな）のです。

幅を360pxや375pxで固定してデザインを切り替えるだけの手法はレスポンシブデザインではありません。

管理が楽

ガラケー全盛の時代、モバイル版のページはPC版とは別に作るのが普通でした。別のURLにするにせよ、サーバー側で内容を切り替えるにせよ、モバイル専用のページを制作していたのです。

スマホ対応も初期の頃は同じように、スマホ用のページを作って、PC版と切り替えることで実現していました。もちろん現在でもスマホ用ページを準備するサイトもあります。

このやり方では、ひとつのページに対し複数のHTMLが存在することになり、管理が煩雑になります。一方を更新したけど、もう片方を忘れていたなんてことも起こりえます。CMSを使うことである程度は避けられますが、それでも複数のファイルを管理する手間があるのは変わりません。

レスポンシブであれば、ひとつのページにHTMLはひとつですから、更新も簡単です。PHPで構築しているようなページでも、複数のファイルを用意する必要がありません。

レスポンシブデザインの欠点

コンテンツの出し分けはできない

PCではこういった構成だけど、スマホでは簡略化した構成にする、といったことはレスポンシブデザインではできません。すでに述べたように、レスポンシブデザインはひとつのコンテンツをデバイスに応じて最適化する手法です。そもそもの目的が違います。

レスポンシブでもCSSで display の値を変えることで表示非表示を切り替えることができますが、見た目上消えているだけで、当然データ自体はダウンロードされています。あまり多用するべきではありません。

PCとスマホで想定する内容があまりに違うのであれば、そもそも別々にページを作るべきです。

作るのが大変

HTMLやCSSに関する広範な知識と技術を要します。「メディアクエリで表示を切り替える」程度の認識では、きちんとしたレスポンシブデザインのページを作るのは難しいです。

また、制作後のスタイルシートの管理も大変です。例えば、CSSファイルの一番最後になにかスタイルを追加したら、スマホ・PC両方に影響が出てデザインが崩れた、なんてこともありえます。

レスポンシブデザインを実現する主な技術

メディアクエリ

環境に応じて適用されるCSSを変更する仕組みで、これ自体は昔からあります（メディアルールという名前だった）。例えばCSSに

@media print {
  img {
    display: none;
  }
}

こう書くと、画像は印刷されません。

これを拡張したのがメディアクエリで、そのデバイスの種類に加え、特徴から適用されるCSSを変更することができます。

例えば、

@media screen and (max-width: 375px) {
  h2 {
    color: red;
  }
}

こう書くと、表示幅が375px以下のとき、h2 に color: red が適用されます。

この切替の基準になる幅をブレイクポイントと呼びます。このブレイクポイントを適切に設定して、スタイルを変更することでレスポンシブを実現します。

リキッドレイアウト

表示領域の幅に応じて、コンテンツがはみ出たり、デザインが崩れることなく、レイアウトが可変するデザイン手法です。多くは width: 50% のように幅を割合で指定することで実現します。

一時期流行ったような気がしますが、かつては作るのが難しいものでした。今はメディアクエリを組み合わせて、固定幅との切り替えが簡単にできるので、だいぶ作りやすくなっています。

レスポンシブイメージ

上ふたつは主にCSSの話ですが、これはHTMLの話です。画面解像度や表示幅に応じて、表示する画像を切り替えることができます。ふたつの方法があります。

解像度切替

あらかじめひとつの画像に対し、複数の解像度の画像を用意しておき、デバイスに応じて切り替えます。

例えば、

<img srcset="cat.jpg 960w, cat@640.jpg 640w, cat@320.jpg 330w" sizes="(max-width:767px) 360px, 960px" src="cat.jpg" alt="かわいい猫">

この <img>タグは表示幅が767px以下なら320pxで画像を表示させ、それ以外では960pxで表示します。

iPhone8で見た場合、画像を320pxで表示させたいわけですが、iPhone8はデバイスピクセル比（1ピクセルを何ドットで表現するか）が2なので、320px × 2 = 640px で、cat@640.jpgがダウンロードされます。960pのcat.jpgや320pxのcat@320.jpgはダウンロードされません。

この利点は、不必要に大きな画像をダウンロードしないようにすることで、表示速度を速くしたり、通信量を抑制できることです。

また、クライアント（ブラウザ）側で最適な画像幅を計算してリクエストを送るため、サーバー側ではなにもする必要はありません。ただ対応するファイルを準備しておくだけです。

アートディレクション

こちらも複数の画像を切り替えるものですが、解像度によるものと違い、メディアクエリで切り替えます。

<picture>
  <souce srcset="cat_sp.jpg" media="(max-width:767px)">
  <souce srcset="cat_tab.jpg" media="(max-width:959px)">
  <img src="cat.jpg" alt="かわいい猫">
</picture>

この例では、幅が767px以下ならcat_sp.jpgが、959px以下ならcat_tab.jpgが、それ以外ではcat.jpgが表示されます。PCとタブレットでは横長の画像だけど、スマホでは正方形の画像を出したい、といったときに使います。

これは解像度切替と組み合わせることも可能です。

実際に作るときの話

今までスマホ対応の手段としてレスポンシブの話をしてきましたが、実際にレスポンシブデザインのページを作るときは、スマホ用のデザインをPCに対応させるほうが往々にして作りやすいです。

つまり、

/* ベーススタイル */
...
@media screen and (max-width: 959px) {
  /* タブレット用スタイル */
  ...
}
@media screen and (max-width: 767px) {
  /* スマホ用スタイル */
  ...
}

↑こうするよりも、

/* ベーススタイル */
...
@media screen and (min-width: 768px) {
  /* タブレット用スタイル */
  ...
}
@media screen and (min-width: 960px) {
  /* PC用スタイル */
  ...
}

↑こうしたほうが作りやすい。

スマホベースで作れば、そもそもの話としてスマホ対応を考える必要がありません。最初からスマホに対応しているのですから。

表示幅が小さいとき、あまり複雑なレイアウトは見づらいため、比較的簡素なレイアウトになりやすいです。逆に幅が大きければ複雑なレイアウトにも耐えられます。

複雑なものを簡単に直すよりも、簡単なものから複雑にしていったほうが楽なのです。

最後に

なるべく深い技術的な話は避けて、ざっくりとレスポンシブデザインについて説明しました。Webサイトのスマホ対応は、重要を通り越して当たり前の時代です。

現在のWeb制作において、レスポンシブデザインは必須！　大小様々なデバイスで快適に見られるようにしたいですね。

作るのはなかなか大変なんですけど。

参考