こんにちは、ツバサです。
ECサイトのリニューアルで制作会社に見積もりを依頼したら「レスポンシブ対応で見積もっています」と書いてあった。レスポンシブ？ スマホ対応とは違うの？ よくわからなかったので調べてみた。
レスポンシブとは
ひとことで言うと、1つのHTMLで画面幅に応じて自動的にレイアウトを切り替えるWebデザインの手法のこと。正式には「レスポンシブウェブデザイン（Responsive Web Design）」と呼ぶ。レスポンシブ（responsive）は「反応する」という意味の英語だ。
MDN Web Docsのレスポンシブデザイン解説によると、CSSのメディアクエリ（@media）という仕組みを使って、画面幅が一定以下になったら2カラムを1カラムに変更する、フォントサイズを小さくする、といった切り替えを行う。URLもHTMLも1つで、見た目だけが変わる仕組みだ。
「スマホ対応」とはどう違うのか。fromationの比較記事を読んでわかったのは、スマホ対応は「スマホで見られるようにすること」全般を指す広い概念で、レスポンシブデザインはその実現方法のひとつということだ。整理するとこうなる。
| 方法 | URL | HTML | 特徴 |
|---|---|---|---|
| レスポンシブデザイン | 同じ | 同じ | CSSで表示を切り替え |
| スマホ専用ページ | 別（/sp/ など） | 別 | PC用とスマホ用を別に作る |
| アダプティブデザイン | 同じ | 同じ | サーバー側でデバイスを判別して表示を切り替え |
EC実務で出てくる場面
ECの仕事をしていると、レスポンシブ対応の話はあちこちで出てくる。
サイトリニューアルの見積もり
僕が遭遇したのがこの場面。制作会社から「レスポンシブ対応で」と言われたのは、PC・タブレット・スマホの全デバイスに1つのHTMLで対応する設計にするという意味だった。スマホ専用ページを別に作るよりもコストが抑えられるケースが多く、Googleも推奨している方法だ。
Google検索セントラルのモバイルサイトに関するドキュメントでは、Googleがレスポンシブウェブデザインを推奨する方法として明記されている。URLが統一されるためクロール効率がよく、モバイルファーストインデックスにも対応しやすいのが理由だ。
商品ページの表示確認
レスポンシブ対応のECサイトでも、PCで見たときとスマホで見たときのレイアウトは異なる。商品画像の並び方、テキストの折り返し、購入ボタンの位置などが変わるため、PC表示だけ確認してOKを出すと、スマホで見たときにレイアウトが崩れていたということがある。ニジボックスのレスポンシブデザイン解説でも、複数デバイスでの表示確認の重要性が触れられていた。
メールマガジンのデザイン
ECサイトだけでなく、メールマガジンもレスポンシブ対応が必要になっている。スマホでメールを開く人が増えているため、PC向けの横幅が広いレイアウトだとスマホで読みにくい。カゴヤのレスポンシブ解説記事にも、メールのレスポンシブ対応について触れられていた。
覚えておきたいポイント
主要ECプラットフォームは標準対応
ShopifyやBASE、STORESなどの主要ECプラットフォームは、標準で提供されるテーマがレスポンシブ対応になっている。自分でゼロからレスポンシブ対応を実装する必要は基本的にない。テーマのカスタマイズ時にレスポンシブが崩れないように注意する程度だ。
画像サイズの最適化が大事
レスポンシブデザインでは、PCで表示する大きな画像をスマホでも読み込むことになる。表示サイズは小さくなっても、データ量は変わらない。そのため、srcset属性を使ってデバイスに応じた画像サイズを出し分けるか、画像の圧縮を適切に行って表示速度を保つ必要がある。
ブレイクポイントの確認
レスポンシブデザインではブレイクポイント（レイアウトが切り替わる画面幅の閾値）が設定されている。一般的にはスマホ（〜767px）、タブレット（768〜1023px）、PC（1024px〜）あたりだが、制作会社やテーマによって異なる。自サイトのブレイクポイントを把握しておくと、コンテンツ更新のときにレイアウト崩れを防ぎやすい。
