レスポンシブデザイン
画面の大きさに応じて表示が自動的に組み替わる設計。端末を問わず一貫した体験を保つ手法。
意味
レスポンシブデザインとは、画面の大きさに応じてレイアウトや要素の並びが自動的に組み替わる設計手法を指す。同じ内容を、パソコンでもスマートフォンでも見やすい形で届けることを狙う。
端末ごとに別々のページを用意するのではなく、一つの設計で複数の環境に対応させる点に特徴がある。可変の余白や折り返しによって、幅の違いを吸収する。
ブランドの観点では、どの端末でも崩れずに一貫した見え方を保つことが識別を支える。表示環境が変わっても「らしさ」が損なわれない状態が求められる。
成り立ち
画面幅に「反応する（responsive）」という語に由来する設計の考え方で、多様な端末での閲覧が一般化するなかで広く採られるようになった。
レスポンシブデザインとオムニチャネルの違い
レスポンシブデザインは、一つの媒体の中で画面幅の違いを吸収する設計手法である。オムニチャネルは、店舗やアプリ、電話といった異なる接点をまたいで体験をつなぐ考え方を指す。前者は同じ入口の内側の話で、後者は入口そのものが複数ある話になる。
取り違えると対策の当てが外れる。狭い画面で表示が崩れる問題は前者の領域だが、アプリで見た内容が店舗で引き継がれない問題は後者の領域にある。どちらの層で断絶が起きているかを確かめないまま画面の作り直しに向かうと、原因の外側を触ることになる。
オムニチャネルの項へ →レスポンシブデザインとデザインシステムの違い
デザインシステムは、部品と規則を用意して制作の再現性を担保するしくみである。レスポンシブデザインは、その部品が幅の変化に対してどう振る舞うかを定める設計方針にあたる。前者が何を使うかを決め、後者が使ったものがどう変形するかを決める。
順序としてはシステムの側が上位に来る。部品ごとに折り返しの規則がばらばらだと、画面が狭まったときに全体の秩序が崩れる。幅が変わったときの振る舞いを部品の定義にあらかじめ含めておくかどうかで、運用の負担は大きく変わってくる。
デザインシステムの項へ →使いどころ
多様な端末での閲覧を前提に、単一の設計で表示を最適化する方針を示すときに用いる。端末ごとに別ページを持つ設計との対比で語られる。
実務でのチェックポイント
- 主要なページを幅の狭い環境で開き、最も伝えたい一文と次にとってほしい行動が、最初の画面に収まっているかを確かめる。
- 問い合わせや購入までの操作を、実機を片手で持った状態でたどる。押し間違えが起きる箇所は、間隔の問題として記録する。
- 訪問者の端末構成を確認し、実際に多い幅を優先して検証しているかを見る。制作環境の幅だけで判断していないかを疑う。
- 画像や表のように幅を要求する要素について、狭い環境での扱い方を決めているかを確認する。方針がなければ実装ごとにばらつく。
よくある誤解
縦一列に積み替わった時点で対応は終わり、と見なされやすいのがレスポンシブデザインである。崩れないことと、その幅で用が足りることは別で、指が届きにくい間隔や、細い画面では下まで辿り着かない要点は、見た目が整ったまま働いていない。確かめる対象はレイアウトの破綻ではなく、その幅で目的に到達できるかどうかにある。
狭い画面向けの設計を、内容を削る作業だと捉える誤解も根強い。幅の狭い環境で見ている相手が、求めている情報まで少ないとは限らない。むしろ移動中や店頭など、切実な状況で見られていることがある。削るのではなく優先順位を置き直す作業として扱うと、判断がぶれにくくなる。
よくある質問
スマートフォン専用のページを別に用意するのとどちらがよいですか？
運用体制の側から決めるほうが現実的になる。別々に用意すれば環境ごとに最適化できるが、更新のたびに二か所を同期させる負担が生まれ、放置されたほうが古い情報を出し続ける。更新頻度が高く担当が限られているほど、一つの設計で吸収する方針が有利に働く。
ブランドの見え方は端末ごとに変えてもよいですか？
表現は変えてよいが、性格は変えないという線引きになる。狭い画面で余白や情報量を調整するのは適応であって逸脱ではない。損なわれるのは、色づかいや語り口まで環境ごとに別物になり、同じ送り手だと受け取れなくなったときになる。
対応が済んだかどうかはどう判断しますか？
表示の崩れではなく、その環境での目的達成で判断する。幅ごとに見た目を確認するだけでは、押しにくさや読み飛ばしは見つからない。狭い環境から入った訪問者が想定した行動まで到達している割合を追うと、崩れていないのに機能していない状態を捉えられる。