「レスポンシブ」Webデザインは、スマホサイト必須化の流れの中で、より効率的にWebサイトの制作・運用ができる、と期待されている技術です。
「レスポンシブ」に厳密な定義があるわけではありませんが、「レスポンシブ」という言葉を有名にしたGoogleのデベロッパー向けコラム（https://developers.google.com/webmasters/smartphone-sites/details?hl=ja）によると、同一のHTMLがすべてのデバイスに配信され、CSSによってデバイスでどのようにページをレンダリングするかが決まります。
という構造を持つページを「レスポンシブ」と呼んでいます。スタイルシート（CSSファイル）がデバイスの違いを吸収して、ブラウザ上の見栄えをコントロールする代わりに、htmlデータはPCもスマホも同一のものを使うことで、運用上の負荷が減ることになります。
では実際にWebサイトを制作するに当たり、どんなときに「レスポンシブ」を導入すべきか、導入する場合にどんなメリットがあり、どんな点に注意しなければならないのかをご紹介しましょう。
目次
［ポイント1］「レスポンシブ」化と相性がいいのは情報伝達がメインのサイト
すべてのサイトをレスポンシブで作る必要はありません。コンテンツの種類によってレスポンシブに適しているサイトと、そうでないサイトがあります。
ECサイトは目的がはっきりしていて、仕様、価格、各種法規テキスト、商品写真など、必要不可欠な要素が多く、デバイスによって情報を増減する必要性があまりありません。このような場合、「レスポンシブ」技術によってサイトを構成することは、運用面で非常にメリットがあります。
「レスポンシブ」デザインのページは、テキスト情報がワンソース管理になります。この特長をいかし、頻繁にテキストが更新されるタイプのページでも、レスポンシブデザインを採用すれば、「PCだけ更新してスマホは古いまま」といった齟齬を防ぐことができ、運用上の負荷を軽減できます。
［ポイント2］ターゲットとするデバイスと、その横幅をあらかじめ決める
PCサイトでは、コンテンツの幅は「1000px（ピクセル）前後」「センター揃え」というのが主流です。これは、ほとんどのパソコンの表示解像度が横幅1024px以上であるため、固定サイズで作成することができるためです。
スマホ用のページを作成する場合は、現状では（2014年7月時点）、2つだけ考えればほぼ間違いありません（以下すべて縦持ち＝ポートレートモードを前提としています）。iPhoneは4～6まですべて横幅640pxの液晶ですので、制作する場合の解像度は幅320pxとなります。また多種多様な液晶サイズを持つAndroid端末ですが、こちらは360pxとなります（※液晶の実ピクセルと制作上のピクセルの関係はポイント3で説明します）。
スマホ最適化を「レスポンシブ」で実現する場合は、メディアクエリーを使って、PC用の固定幅と、「幅が320（または360）px以下」という条件でレイアウトを作成することになります。
タブレットの場合、スマホとは異なり、パソコンと同じ原理でブラウザは動作するため、スマホ用のメディアクエリーの設定しかなければ、表示はPC用のものが使われます。タブレットも動作確認端末に含めるのであれば、あらかじめ
・どのタブレットをターゲットにするか
・PC用表示でよいか、スマホ同様、より細かくメディアクエリーの設定をするか
を決める必要があります。
［ポイント3］スマホは画面が小さくても、画像は高解像度データを用意
スマホは、小さい画面に高密度にピクセルが並んでいます。例えばiPhone5Sは、横640px×縦1136pxの液晶を採用しています。しかしhtmlを解釈するブラウザ上では、横幅を仮想的に320pxと解釈してレンダリングします（「ブラウザのDevicePixelRatioが「2」である」といいます）。実ピクセル数を2で割った値をブラウザの横幅として、デザインが進められます。
高密度化する液晶と、ブラウザ上の表示ピクセルが一対一で対応していると、液晶が高密度化すればするほど、ブラウザ上の文字や図形は相対的に小さくなり、読みにくくなります。また制作環境も安定しなくなります。その溝を埋めるため、スマホではDevicePixelRatioというクッションを使うことになったのでしょう。
現在、アンドロイドスマホはフルHDの液晶（1080px×1920px）を採用する機種が増えています。しかし搭載されているブラウザのDevicePixelRatioは、「3」と設定されているため、1080÷3＝360pxがブラウザの横幅となり、その前提でスタイル設定をすればよくなります。仮に横幅720pxの液晶を使ったスマホがあったとしても、おそらくDevicePixelRatioは「2」となっているため、やはり360pxで制作することができ、表示チェック等の運用負荷も低減します。
ただし、配置する画像データに関しては注意が必要です。もし画像データ（写真など）をスマホのブラウザで全画面表示したいなら、DevicePixelRatioによって算出して横幅320px（あるいは360px）のデータではなく、液晶の実解像度で用意するのがベストになります。iPhone5Sなら640pxということです。320pxの写真データだと、2倍に引延ばされて表示されるため、ぼやけた表示になってしまいます。DevicePixelRatioはあくまでスタイルシート上で指定する値にのみ適用される考え方になります。
⇒異なる写真データを配置したサンプル（いろいろなスマホでみてください）
http://www.medix-jirei.com/webbu/01/
⇒タイトルなどを画像化した場合のサイズ違いによるサンプル（いろいろなスマホでみてください）
http://www.medix-jirei.com/webbu/02/
なおタブレットに関しては、全てを調べたわけではありませんが、iPad、iPad mini、Galaxy Tabなど、主要なタブレットのブラウザのDevicePixelRatioはすべて「1」となっているため、PCと同じ扱いになります。
［ポイント4］iPhone6登場で、「レスポンシブ」作業の工数増加。さらにこれまでのサイトの見栄えは再チェックが必要！
「6」および「6 plus」の登場により、レスポンシブを取り巻く環境が若干複雑になりました。
まず、iPhone6の液晶は横750×縦1334pxです。DevicePixelRatioは「2」のままですので、横幅は375pxとしてデザインする必要が出てきました。レスポンシブデザインの場合、メディアクエリーなどでデバイスの横幅に応じたスタイルを複数用意するわけですが、これまでの360pxや320pxよりも大きい375pxも考慮する必要があり、制作の手間を増やす可能性があります。
さらにiPhone6 plusは、ついにフルHDとなり、横1080px×縦1920pxとなりました。横幅は、DevicePixelRatioを「3」として計算すると360pxですが、実際はそれよりも広い414pxになるようです。
「スマホ＝iPhone」と決め込んでレイアウト設計しているサイトは少なくありません。対象端末としてアンドロイドも含まれるはずなのに、スタイルシートを見るとフルHDはまったく考慮されていないというサイトもよくあります。iPhoneもついにフラグメント化したため、今後は「端末の幅」をよくよく認識したレイアウト設計が不可欠になります。
また既存のページも、320px近辺しか考慮していないと、iPhone6以降では、「表示がスカスカ」「文字が小さすぎる」「両サイドに異様な余白が出ている」などが発生します。レスポンシブで作ったから問題ない、ということはありませんので、既存サイトもチェックしてみたほうがよいかもしれません。
［ポイント5］PCでもスマホでも同じコンテンツ量で良いか？
PC（タブレット含む）とスマホのどちらにも最適化したWebサイトを用意したい場合、コンテンツ量（ファイルや画像の容量だけでなく、スクロール量なども含む）に注意を払う必要があります。
掲示板や体験談、お客様の声、会社情報など、テキストベースでも価値が減らないコンテンツでは、同一のhtmlをPCとスマホに配信する「レスポンシブ」構成が望ましいでしょう。
一方、LPやプロモーション用の特設サイトなど、ビジュアル要素を多用する場合、同一htmlによるレスポンシブでは、基本的にPC用に用意した容量の大きい写真や背景画像がスマホにも送られてしまいます。それを避けるための工夫を「レスポンシブ」の範囲内で行うか、いっそ最初からサーバ側で出し分けを行うか、検討した方が良いと思われます。
［ポイント6］スマホ用最適化では、アプリ制作という選択肢もあるかもしれない
スマホの場合は、アプリを作って情報配信やマーケティングを行うことが比較的容易です。複雑な処理や動きを伴うアプリではなく、ブラウザのように情報を表示することを目的とした「簡易ブラウザ」のようなアプリもあります。メリットとしては、ブラウザよりも動作が機敏で凝った動きができ、どんな頻度で起動しているかといったユーザ動向もつかみやすいことがあります。一方、コストはWebサイト制作よりも高くなり、稼働までの手続き、バグフィックスなどの運用の手間も必要です。アプリの審査通過にはサポートWebを求められることもあります。まったくスマホサイトを持たず、いきなりアプリ制作、ということは現実的ではないかもしれませんが、アプリに力を入れるという方針があるならば、検討してみても良いかもしれません。
［ポイント7］シームレスに見栄えが変化する「レスポンシブ」は難度が高い
メディアクエリーにより、より細かく見栄えを制御する応用として、シームレスに変化する「レスポンシブ」も存在します。例えばPC用としてコンテンツ幅を900px固定とし、デバイス（あるいはブラウザ）の幅が900px以下になったときは、メディアクエリーによってコンテンツ幅の指定を「900px→100%」と相対単位に変えます。内部要素も同様です。パソコンでブラウザの幅をドラッグして狭くすると、幅に追従してコンテンツが移動したり縮小されるようになります。こうすることで多様な端末サイズに対応できるようになります。
デメリットとしては、制作するデザインパターンが多くなって作業が繁雑になることです。制作側も確認側も従来の作業フローを変えるか、あらかじめ作業と確認内容を限定しないと収拾がつかなくなります。逆に言えば装飾的なデザインが少なく、グリッド化・ブロック化されたデザインを用いたページなら、試してみる価値があると言えます。
［ポイント8］8インチタブレットはスマホかPCか
10インチクラスのタブレットはPCページを見ることもユーザは望むでしょうが、7～8インチタブレットは人によっては最適化されたページを期待するかもしれません。このクラスのミニタブレットは横方向の実解像度が600px～1080pxですが、DevicePixelRatioは「1」となっているようです。したがってスマホ最適化だけをメディアクエリーで実現した「レスポンシブ」サイトでは、ミニタブレットはPC表示になり、ピンチアウトを許可していないと、文字が読めないということにもなりかねません。自社サイトへのアクセス解析により、どんな端末が多いかをまずは洗い出し、その上で対象端末を決めることがとても重要になります。
