「パソコンでは整っているのに、スマートフォンで開いたら文字が重なっていた」——この記事は、HTMLとCSS、そしてよく使うタグまで読み進めた方への、入門の仕上げです。読み終わる頃には、レスポンシブという言葉の中身と、スマートフォンで崩れる場所の見つけ方が分かります。

先に結論から。レスポンシブデザインとは、1つのページの中身を、画面の幅に合わせて自動で並べ替える作り方です。スマートフォン用のページを別に作るのではありません。中身は1つ、並べ方だけを変える。この違いが分かると、修正の考え方まで変わります。

洗濯物と同じ。干す場所が変われば、並べ方が変わる

晴れた日、広いベランダに洗濯物を干すときは、タオルもシャツも横一列に並べます。雨の日に部屋の中の物干しに移すときは、同じ洗濯物を二段に折り返して縦に干します。洗濯物の量も種類も変わっていません。変わったのは、干す場所の広さと並べ方だけです。

レスポンシブがやっているのは、まさにこれです。パソコンでは横に3つ並んでいた案内が、スマートフォンでは縦に3つ積まれる。文章も画像も差し替えていません。CSSが「今は狭い画面だから縦に積もう」と並べ替えているだけです。

画面の幅に、線を1本引く

切り替えの正体は、CSSに書く1行です。@media (max-width: 768px) { … }と書くと、日本語では「画面の幅が768ピクセル以下のときだけ、この中の指定を使ってください」という意味になります。max-widthは「最大の幅」、つまり上限です。

この線を、制作ではブレイクポイント（切り替え点）と呼びます。線をどこに引くかに絶対の正解はなく、載せる情報の量で決めます。私たちは「文字が2行で収まらなくなったところ」を目安に線を引くことが多いです。

作る順番は、スマートフォンが先

レスポンシブで一番差が出るのは、どちらの画面から作り始めるかです。パソコンから作ると、情報を全部のせられてしまいます。その後スマートフォンに移したとき、全部が大事に見えて、何を削るか決められません。

反対に、狭いスマートフォンから作ると、最初に「この画面で一番先に伝えることは何か」を決めることになります。1つ決まれば、あとは広い画面で余裕を足すだけ。これをモバイルファースト（スマートフォン優先）と呼びます。順番を変えるだけで、作り直しがはっきり減ります。

崩れる場所は、だいたい決まっている

スマートフォンでの崩れは、ほとんどが3か所です。横に長い表は画面からはみ出して、左右に揺れるページになります。小さすぎるボタンは指で押せません。人差し指の先は、画面の上でおよそ44ピクセル四方を覆います。それより小さいボタンは、隣を押してしまいます。

3つめが縮みすぎた文字です。本文を12ピクセルまで小さくすれば情報は収まりますが、その画面は電車の中で読めません。私たちは本文16ピクセル前後を下限にして、それで収まらないときは文字を小さくせず、載せる情報のほうを見直します。

CCの制作現場で、実際にあった話

私たちCCコミュニケーションズがWordPressサイトを納品した直後、依頼主のご担当者から電話をいただいたことがあります。「自分のスマートフォンで見ると、お問い合わせボタンが押せないんです」。パソコンの検証画面では正常でした。実際にその方の機種で開くと、下から出てくる固定バーがボタンに重なっていました。

この一件から、私たちは公開前のチェックに「担当者の手元の実機で、全ページのボタンを実際に指で押す」という手順を入れました。パソコンの画面を細くして確かめるのは早くて便利ですが、指の太さも、通信の速さも、そこには写りません。

その画面の向こうに、誰がいるか

求人サイトなら、応募ボタンを押すのは通勤電車の中の人かもしれません。飲食店のサイトなら、店の前で地図を開いている人かもしれません。レスポンシブは技術の見せ場ではなく、その人が片手で目的にたどり着けるようにするための作り方です。私たちが実機を触るのは、依頼主のサイトの先にいるその人を待たせないためです。

今日からできる、たった1つのこと

まとめ

レスポンシブは、中身を1つに保ったまま、画面の幅で並べ方だけを変える作り方です。切り替えの線を引き、狭い画面から作り、表・ボタン・文字の3か所を実機で確かめる。ここまでできれば、入門の骨組みは完成です。私たちCCコミュニケーションズは、実際の案件を実機で確かめながら学べる環境で、一緒にサイトを届ける仲間を探しています。