スマートフォンでネットサーフィンをしていて、PC用サイトがぎゅっと縮小されて見にくいサイトにあたると「今どきスマホ対応くらいしといてよ～」と思うのですが、いざ自分が作る立場になると「いやいや、そんな簡単じゃないんだから魔法みたいにすぐできると思うなよ？」なんてご都合主義な考えになりませんか。（私はなります。）

今回は現在主流だと思われる「レスポンシブデザイン」という手法でスマホ対応をする時の、設計ポイントをまとめました。

前提

• html、cssをばっちり書ける人
• レスポンシブデザインの概要を知っている人

を対象に書いています。

レスポンシブデザインの特徴

レスポンシブデザインの最大の特徴は、「一つのhtmlファイルで、複数の端末に対応する」というところです。

ソースを何個も作って、PC用ソースとタブレット用ソースとスマホ用ソースがあって…という方法と比べると、htmlとcssさえあれば作れるし、管理も楽で、重複するコンテンツがないためSEO的にも良いとされます。

いいとこばかりのように聞こえますが、「なんとかうまいこと工夫してhtmlが1つですむように構成して作る」ということなので、作る人はhtmlの組みを頭に入れながらデザインしなくてはなりません。そういう意味で、なかなか技術の必要な手法なのです。

（フレームワークを利用すると、「htmlの組み」を意識せずにレスポンシブデザインのサイトが作れるので、簡単になります。ただし、デザインでできることに制限があるためシンプルなサイトになりがちです。）

レスポンシブデザインのポイント

私がよく失敗するのは、

• 何となく適当にスマホ対応をはじめてしまい、後からブレークポイントが変わって作ったところをまた修正する
• ブレークポイントが変わってしまったことで画像の幅が変わって画像を作り直す羽目になる
• IE8以下の存在を忘れていて見た目がぐちゃちゃになり、かといって完全に切り捨てきれず結局後から手直しする
• Retinaとかまぁいっかと思って後回しにするも、画像のピンボケが気になり結局また画像を作り直す

といったあたりです。（ブレークポイントは、画像を作る前に必ず決めよう…!）

レスポンシブデザインに使う技術自体は割とわかりやすく簡単なのですが、このデザイン手法、「設計」を怠ると手戻りが多くなりすごく苦労します。

自分でゼロベースから作りきる時間がないなら、フレームワークを使ってそれに合わせてデザインするなども検討したほうが良いでしょう。

レスポンシブデザイン・最初に決めること

デザインを作り始める前に以下を決めてしまいましょう。特に、ブレークポイントは画像をWEB素材にする前に決めてしまわないと、何度も画像を作り直す羽目になります！

• 対応デバイス・ブラウザの確認（特に、IE8以下が含まれるか？）
• ブレークポイントの決定
• モバイルファースト？デスクトップファースト？（どの端末を一番キレイに見せたいか？）

IE8以下を気にしているのは、レスポンシブデザインで使う「メディアクエリ」がIE8以下では無効となるためです。

メディアクエリをIE8でも理解してくれるようにしてくれるプラグインなどもあるのでそれを入れてOK!という場合もあると思いますが、どうしても読み込みタイムラグがでてくるので、一瞬ぐちゃっとなってしまったりします。

私はそれが気持ち悪いので、メディアクエリの外にIE8対応スタイルを書くことで対応するようにしたりします。
他にもいろいろ対応方法はあると思いますが、「IE8以下でメディアクエリは無効」ということは知っておきましょう。

ブレークポイントの決め方

ブレークポイントとは、デザインを切り替える画面幅の画面ピクセル数のことです。

画面幅が768px以上ならこのスタイル、321px～767pxならこのスタイルを適用させる…といった条件分岐に使います。

世の中にはさまざまな画面幅のスマートフォンがあるので、ブレークポイントを多く設定してそれぞれにあったスタイルを作れば、より多くの人にキレイにデザインされた画面でサイトを見てもらえるというわけです。
実際には、ブレークポイントが多ければ多いほど作る手間も検証する手間もかかるので、代表的な機種を考慮した３～4点設定する感じになると思います。

ブレークポイントをどこに設定するかは深い話になりそうですが、ユーザー数的に無視できないiPhoneやiPad系を基準にするのもありだと思いますので、参考まで画面幅とメディアクエリのサンプルを掲載しておきます。

※以下は、hmtl・css・jQuery ベーステンプレートにも追記しておきました。

/* style.css */

/* メディアクエリサンプル */
@media screen and (min-width: 1281px) {
  // 画面幅が1281px以上（PC専用スタイル）
}
@media screen and (max-width: 1280px) {
  // 画面幅が1280px以下（タブレット・スマホ共通スタイル）
}
@media screen and (min-width: 768px) and (max-width: 1280px) {
  // 画面幅が768px～1280px（タブレット専用スタイル）
}
@media screen and (max-width: 767px) {
  // 画面幅が767px以下（スマートフォン専用スタイル）
}
@media screen and (max-width: 414px) {
  // 画面幅が414px以下（スマートフォン縦向き専用スタイル）
}

スタイルシートの切り分けについて

レスポンシブデザインは、多くの場合「ベースのデザイン＋各端末専用スタイル」という構成になっていると思います。

そうなると、PCだろうがタブレットだろうがスマホだろうが、背景の画像は一緒であるとか、PCは画像Aだけどタブレットとスマホは画像Bであるとか…そういう「共通のスタイル」というものがけっこうあると思います。

スタイルシートをどういう風に切り分けていくか、というのも方針をたてず適当に書いていると、保守性に欠けるソースになってしまいます。
スタイルシートのソース構成には、大きく3つの方向性があると思います。

1. 各端末共通スタイルも含め、すべて各端末のメディアクエリ内に書く
2. 共通スタイルをスタイルシートの共通部分に書き、各端末専用スタイルのみメディアクエリ内に書く
3. ベースとなる端末のスタイルをスタイルシートの共通部分に書き、ベース端末以外の専用スタイルをメディアクエリ内に書く

文字で書くとややこしい感じがしますが、ひとつずつ見ていきましょう。

1は、単純でわかりやすく、PCはPC、タブレットはタブレット、スマホはスマホ専用の独立したCSSファイルがあるイメージです（実際に分かれている必要はありません）。

2は、1から共通スタイルだけを抜き取って、スタイルシートの共通部分にまとめるというものです。

3は、少しトリッキーな構成になります。ある一つの端末のスタイルをベースとし、その差分スタイルだけを各端末のメディアクエリ内に書くというものです。各端末の差分スタイルが少ない場合や、メディアクエリが無効になるIE8以下などのブラウザを考慮したい場合に有効です。

モバイルファースト or デスクトップファースト？

これは前項「スタイルシートの構成 3」での製作の場合に特に意識する必要があります。
ベーススタイルをPCにするのか、スマホにするのか、というところですが、考慮する点は以下のようなことがあげられます。

内容がなかなか難しいのでつい小難しく長くなってしまいました。。。
スマホ対応では、画像解像度をどうするかなども頭を悩ませるので、また別の機会に書けたらと思います。

おわり