レスポンシブと制約

ねらい

UI/UX編も、これで最後だ。

このクエストでは、Webデザインがずっと立ってきた一つの「前提」を、足元からひっくり返す。画面だ。

紙のポスターには「決まったサイズ」がある。A4ならA4、B2ならB2。デザイナーはその枠の中で構図を決める。でもWebには、決まったサイズが無い。 あなたのサイトは、小さなスマホでも、大きなPCでも、その間のタブレットでも、同じ一つのデータから表示される。幅は人によって、端末によって、バラバラだ。

だからWebのデザインは、固定（決まった一枚）ではなく、流動（幅に合わせて伸び縮みする組み方）で考える。これをレスポンシブWebデザイン（responsive＝応答する、の意）と呼ぶ。このクエストのねらいは、その仕組みと、その奥にある一つの思想――「制約は敵ではなく、設計を導く力だ」――を、理由ごとつかむことだ。

何への反作用だったか ―― 「固定幅」という思い込み

新しい考え方は、いつも前のやり方への反発として生まれる。これは様式編から続く、この本の見方だ。レスポンシブも同じ。では、何への反発だったのか。

2000年代の前半、デザイナーの多くは紙の頭でWebを作っていた。画面の幅を「960ピクセル」のように固定で決め打ちし、その枠の中に紙のようにレイアウトを置く。これを固定幅デザインという。当時はみんな似た大きさのPCで見ていたので、それでよかった。

ところが2007年、iPhoneが出る。手のひらサイズの画面でWebを見る人が一気に増えた。すると固定幅サイトはこうなる――小さな画面に960ピクセルの紙が無理やり押し込まれ、文字は米粒、横スクロールだらけ。枠を固定した瞬間に、その枠に合わない端末を全部切り捨てていたわけだ。

実は、その10年前にこの問題を見抜いた人がいた。ジョン・オールソップだ。彼は2000年の文章「ウェブデザインの道（A Dao of Web Design）」で、こう論じた。デザイナーは紙の「決まったページ」という発想にとらわれている。でもWebの本質はむしろ**しなやかさ（柔軟であること）**にある、と。

画面サイズを自分で決められないことは、欠点ではない。それがWebなのだ。 ――A Dao of Web Design（A List Apart, 2000）の主張を一言にまとめると、こうなる。

この一言が、のちのレスポンシブの種になった。

レスポンシブの三本柱 ―― 流動で組む

2010年、イーサン・マルコットが「レスポンシブWebデザイン」という言葉と方法をまとめた。考え方は単純だ。幅を固定するのをやめ、幅に合わせて中身が伸び縮みするように組む。 そのための道具が三つある。これが三本柱だ。

1. 可変グリッド … レイアウトの列幅を「300ピクセル」のような固定値でなく、「全体の50%」のような割合で決める。画面が広がれば列も広がる。
2. 可変画像 … 写真も「最大でも入れ物の幅まで」と決めておく。入れ物が縮めば写真も縮む。枠からはみ出さない。
3. メディアクエリ … 「画面の幅が○○以下になったら、ここからスタイルを変える」とCSSに書ける仕組み。これで、狭い画面では2列を1列に折りたたむ、といった切り替えができる。この切り替えが起きる幅の境目を、“節目”＝ブレークポイントと呼ぶ。

ここで大事なのは、レスポンシブは「スマホ用の別サイトを作ること」ではないということ。中身（HTML）は一つ。見せ方（CSS）だけを幅に応じて変える。部品はそのまま、並べ方が画面に応える。だから「レスポンシブ（＝応答する）」と呼ぶ。

モバイルファースト ―― いちばん厳しい制約から始める

三本柱を手にすると、次の問いが出る。どの画面から作り始めるか。 大きなPC画面から作って、だんだん小さくしていくべきか。それとも逆か。

答えを出したのがルーク・ウロブレウスキだ。2011年の本『Mobile First』で、彼は「小さい画面から作れ」と言った。理由が深い。スマホは、いちばん厳しい制約だらけの環境だからだ。画面は狭い。指は太い（マウスより不正確）。通信は遅いことがある。気が散りやすい場所で見られる。

この厳しさが、じつはふるいになる。狭い画面に全部は入らないから、「本当に必要なものは何か」を選ばざるをえない。そうやって本質だけ残したものを土台にして、画面が広いときに足していく。逆――広い画面で好きなだけ盛ってから小さい画面へ削る――だと、何を削るか毎回もめるし、たいてい削りきれずに詰め込みすぎたスマホ画面になる。

「指は太い」という制約も、ちゃんと答えに変わる。指はマウスより不正確だから、指で押せる大きさのボタンにする。大きく・近い対象ほど速く正確に押せる――これはフィッツの法則という、押しやすさの法則だ。制約（指は太い）が、設計（ボタンを大きく）を導いている。

気づいただろうか。これは様式編で見たスイス様式のグリッドと、まったく同じ構造だ。あちらも「升目という制約」を先に置くことで、かえって秩序と美が生まれた。制約は、選択肢を減らすことで、迷いを消し、本質をあぶり出す。 モバイルファーストは、その思想をWebの画面サイズに当てはめたものだ。

制約は敵ではなく、設計を導く力

ここがこのクエスト――そしてUI/UX編全体――の核心だ。ふつう「制約」は、じゃまもの・敵だと思われている。「もっと広ければ、もっと自由に作れるのに」と。

でも本当は逆だ。制約は、設計を導いてくれる力である。

なぜか。何でもありの白紙は、実はいちばん作りにくい。選択肢が無限にあると、人は決められない。そこに「画面は最小320ピクセル（＝いちばん小さいスマホの横幅の目安）から、指で押せるボタンは最低これくらいの大きさ、回線が遅くても読み込める重さで」といった制約が入ると、答えがぐっと絞られる。制約は、無限の中から「ありうる良い形」だけを残すふるいなのだ。

この見方を持つと、UI/UX編で扱ういくつもの話が一本につながる。フィッツの法則（押しやすさ）は「指と画面」という制約から来る。アクセシビリティ（誰でも使える状態）は「人は多様だ」という制約。レスポンシブは「幅は決められない」という制約。ぜんぶ、制約を出発点にして良い設計を導いている。 制約は守るべき壁ではなく、設計を引っぱってくれる味方だ。

プログレッシブ・エンハンスメント ―― まず土台、その上に飾り

制約を味方にする、もう一つの具体的なやり方がプログレッシブ・エンハンスメントだ。直訳すると「段階的な強化」。2003年にスティーブン・チャンピオンとニック・フィンクが名づけた、Web制作の組み立て方だ。

考え方はこうだ。Webページは三つの層でできている。**中身（HTML）・見た目の飾り（CSS）・動きや便利機能（JS）**だ。HTMLは文章や見出しやリンクそのもの、CSSは色や余白などの見た目、JSはページに動きや機能を足す言語――この順に重なっている。

まず、どんな環境でも・誰でも使える素のかたまりを作る。文章が読めて、リンクがたどれて、情報が伝わる。回線が遅くても、古い端末でも、ここは必ず動く。これが中身（HTML）＝土台。そのうえに、環境が許す端末にだけ、見た目の飾り（CSS）や気持ちいい動き（JS）を乗せていく。土台を壊さずに、上から重ねる。

これの何が偉いかというと、上の飾りや動きが何かの理由で動かなくても、土台が残るから誰も切り捨てられない点だ。動き編で学んだ「動きを止める設定の人のために、止めるコードも書く」も、これと同じ発想だった。土台は全員に。飾りは届く人に。これは優しさであると同時に、いちばん頑丈な作り方でもある。

「足さない」の集大成

最後に、この本をずっと貫いてきた一本の糸を、ここで結ぶ。足さないだ。

準備編では、余白を「働く要素」として残した。様式編のスイスでは、装飾を引いてグリッドに乗せた。動き編では、仕事のない動きを消した。そして今、レスポンシブとモバイルファーストで――狭い画面というふるいで、本質だけを残した。 ぜんぶ同じことを言っている。良いデザインは、足すことではなく、引いて整えることで生まれる。

レスポンシブは、テクニックの名前であると同時に、態度の名前でもある。決められないこと（幅）を嘆かず、しなやかに受け入れる。制約を敵にせず、設計の味方にする。誰も切り捨てない土台を先に置く。そして、足さない。――これがUI/UX編の、そしてこの本のひとつの結論だ。

見分け方

レスポンシブにきちんと向き合ったサイトかどうかは、こうやって確かめられる。

• ブラウザの窓をぐーっと細くしていく。レイアウトが崩れず、ある幅（＝ブレークポイント）で2列が1列にすっと折りたたまれるか。
• スマホで見たとき、横スクロールが出ず、文字が読める大きさで、ボタンが指で押せる大きさか。
• 画像が枠からはみ出していないか。窓を縮めると画像も一緒に縮むか。
• （作り手向け）小さい画面を土台にして、広い画面で足しているか。逆になっていないか。

これらは別々のチェックに見えて、すべて一つの問いに行き着く――「決められない幅を、しなやかに受け止めているか」。掟を覚えるより、この問いを覚えるほうが、ずっと長く効く。

譜例

棚（design-gallery）で実例を開き、ブラウザの窓を細くしてみよう。本文の「見分け方」がどう現れるか、自分の目で確かめるのがいちばん早い。

• 棚：レスポンシブの実例を見る

窓を「ぐーっと細く」したとき、図8のように列が折りたたまれるか、画像が一緒に縮むか――この二つを見るだけで、そのサイトが流動で組まれているか固定で組まれているかが分かる。

練習・チェック

1. 身近なサイトを一つ開き、ブラウザの窓を少しずつ細くしてみよう。どこかの幅で、2列が1列に「折りたたまれる」瞬間はあったか。その幅が、そのサイトの「節目（ブレークポイント）」だ。
2. モバイルファーストが「小さい画面から作れ」と言う理由を、一文で言えるか。（ヒント：狭さは何のふるいになる？）
3. 自分が「制約があってやりにくい」と感じた場面を一つ思い出す。その制約を敵ではなく味方として見直すと、選択肢はどう絞られるだろう。制約が「答えを絞ってくれていた」と言い換えられたら、このクエストは身についている。