レスポンシブデザインの仕組みとデザイナーが指定すること

PCの画面できれいに作ったデザインを、スマホで開いたら崩れていた。
じゃあスマホ用にもう1つ作るの？　いえ、作りません。ここで出てくるのがレスポンシブデザインです。

このレッスンでは、レスポンシブデザインの仕組みと、デザイナーが決めて指定すべきことを扱います。
実装はコーダー（コードを書く担当者）の仕事です。でも「何を決めるか」はデザイナーの仕事。ここが曖昧なまま渡すと、スマホ表示はコーダーの想像で組み上がってしまいます。

1つのHTMLで、すべての画面幅に対応する

レスポンシブデザインは、1つのHTMLを、画面の幅に合わせてCSSが並べ替える仕組みです。PCでは3列だったカードが、スマホでは縦1列になる。あの動きです。

ポイントは「1つの」というところです。PC用とスマホ用でページを2つ作るのではありません。HTMLもURLも1つのまま、CSS側の指定で見た目だけを切り替えます。

昔はスマホ用に別URLのサイトを作る方法もありました。いまは更新の手間と検索評価の面からレスポンシブが標準で、Googleもこの方式を推奨しています。新規の案件は、レスポンシブ前提で考えて問題ありません。

ブレイクポイント：切り替えの境目を決める数字

では、CSSはどこで見た目を切り替えるのか。その境目になる画面幅の数値をブレイクポイントと呼びます。

たとえば「767px以下はスマホ用の見た目」と決めたら、CSSにはこう書きます（px＝ピクセルは、画面上の大きさを表す単位です）。読めれば十分なので、1行だけ見ておきましょう。

@media (max-width: 767px) { /* ここにスマホ用の指定を書く */ }

この書き方をメディアクエリと呼びます。「画面幅が767px以下のときだけ、この中の指定を使う」という意味です。
ブレイクポイントの数は案件ごとに決めます。スマホとPCの2段階が最小構成で、タブレットを挟んで3段階にする案件も多いです。

ブレイクポイントをいくつにするか・何段階にするかは、実装の前に決めておく設計項目です。カンプ（本番と同じ見た目で作るデザインの完成見本）を何枚作るかがここで決まるので、デザイナーが最初に関わるところです。

固定と可変：境目の間は「伸び縮み」でつなぐ

ブレイクポイントだけでは、まだ足りません。同じスマホでも画面幅は機種ごとに違うからです。境目と境目の間は、幅を割合で指定して伸び縮みさせる作りでつなぎます。これを可変（フルード）と呼びます。

幅を「360px」と数字で固定すると、それより狭い画面でははみ出して横スクロールが出ます。「100%」のように割合で指定すれば、どの幅でも収まります。画像も同じで、枠に合わせて伸縮する前提で組みます。

デザイナーとして覚えておくのは、Webのレイアウトは伸び縮みするのが前提ということです。カンプは特定の幅で描きますが、その幅ぴったりでしか成立しないデザインは実装できません。「幅が変わったらどこが伸びるのか」を考えて作ります。

スマホファースト：狭い画面から設計する

作る順番にも定石があります。スマホの画面から先に設計するやり方で、スマホファーストと呼びます。

理由は2つあります。まず、多くのサイトで閲覧の主流はスマホです。よく見られる方を先に固めるのが自然ですよね。
もう1つは、狭い画面の方が設計が難しいからです。スマホは横幅が狭く、1画面に載る情報が限られます。ここで情報の優先順位を絞り込んでおけば、PC版は「広い画面にゆったり展開する」だけで済みます。逆順だと、PCで詰め込んだ情報をスマホで削る作業になって、たいてい破綻します。

デザイナーが決めて、指定すること

ここまでの話を、実務の指定に落とします。コーダーへカンプを渡すとき、次の5つが決まっていれば「あとはお任せ」になりません。

• ブレイクポイントの数と数値（何段階で切り替えるか）
• カンプを幅ごとに用意する（最低でもPCとスマホの2枚）
• 並び順の変化（3列のカードは、縦積みでどの順番になるか）
• タップする要素の大きさ（指で押すボタンは44px四方が目安）
• 文字サイズの下限（スマホの本文は14〜16pxを目安に、それ以下にしない）

特に3つ目は忘れがちです。横並びを縦に積むとき、左から順とは限りません。「画像が先か、テキストが先か」を決めるのはデザイナーです。
カンプの渡し方そのものは、デザインカンプからコーディングへで詳しく扱います。

ミニ実践：好きなサイトをスマホ幅にしてみる

レスポンシブの動きは、ブラウザに入っている無料の機能でそのまま観察できます。5分でできます。

1. PCのChromeで好きなサイトを開く
2. 右クリックから「検証」を選ぶ。画面に開発者向けのパネル（デベロッパーツール）が出ます
3. パネル左上にある、スマホとタブレットが重なったアイコンを押す。表示がスマホ幅に切り替わります
4. 画面上部の幅の数値をドラッグで広げたり狭めたりして、レイアウトが切り替わる瞬間の幅を探す。それがそのサイトのブレイクポイントです
5. PC表示と見比べて、変わった点を3つ書き出す。列の数、メニューの形、文字の大きさ、消えた要素。どれもデザイナーが指定した結果です

いくつかのサイトで繰り返すと、「スマホでは何を削り、何を残すか」の相場観が育ちます。自分が設計する側に回ったとき、この観察がそのまま効いてきますよ◎

よくある質問

レスポンシブデザインの例にはどんなものがありますか？

いま見ているこのサイトもそうです。PCでは余白を広く取った表示、スマホでは縦1列の表示に切り替わります。
ニュースサイトやECサイトなど、いま公開される商用サイトの大半はレスポンシブです。ブラウザの幅を縮めてみると、切り替わる様子を観察できます。

レスポンシブデザインのメリットは何ですか？

HTMLが1つで済むことです。更新が1回で全デバイスに反映し、URLも1つなのでシェアや検索評価が分散しません。
一方で、1つのHTMLですべての幅を成立させる設計が必要になるので、最初の設計の重要度は上がります。

CSSのレスポンシブデザインとは何のことですか？

レスポンシブを実現しているCSS側の仕組みを指した言い方です。中心になるのはメディアクエリ（@media）で、「この画面幅のときはこの指定」と書き分けます。
そこに可変の幅指定と伸縮する画像を組み合わせたものが、レスポンシブデザインの中身です。

レスポンシブデザインはどうやって作るのですか？

デザイナー側の作業は、ブレイクポイントを決めて、幅ごとのカンプを用意して、並び順やタップ領域を指定するところまでです。
そこから先のメディアクエリの実装は、コーダーが担当します。分業の境目を知っておくと、見積もりや相談がスムーズです。

次に学ぶこと

最後に整理します。

• レスポンシブデザイン：1つのHTMLを、幅に合わせてCSSが並べ替える
• ブレイクポイント：切り替えの境目。数と数値は設計段階で決める
• 可変：境目の間は割合指定の伸び縮みでつなぐ
• スマホファースト：狭くて難しい方から設計する
• 指定の5点：境目・幅ごとのカンプ・並び順・タップ領域・文字の下限

ここまでで、止まっている画面の話は一区切りです。次は「動き」。スクロールで現れるアニメーションや開閉するメニューの正体、JavaScriptでできることへ進みましょう。

あわせて読みたい

JavaScriptでできること5つの実例と、デザイナーが動きを指定する伝え方HTMLとCSSを学ぶと、次に出てくるのがJavaScriptです。「プログラミングは無理…」と身構えなくて大丈夫。デザ…

コース全体の並びはデザイン基礎コースの目次から確認できます。