レスポンシブWEBデザインとは

レスポンシブWebデザイン（Responsive Web Design）とは、
ユーザーのデバイス（パソコン、タブレット、スマホ等）に関係なく、ひとつのページ（同じ ＵＲＬ で同じ ＨＴＭＬ コード）を配信して画面サイズに応じて（つまり「レスポンシブ」に）表示を変えるデザインを言います。
ブラウザーのスクリーンサイズを基準にCSSでレイアウトを調整することでデバイスごとに専用サイトを用意する必要がありません。またＳＥＯ対策でも優位になります。
※ＳＥＯ対策ページ参照。

当サイトもレスポンシブWebデザインに対応しています。
ブラウザを「最大化」している方は、「元に戻す（縮小）」ボタンをクリックし、ウィンドウの横幅をドラッグして表示の変化を確認してみてください。

（  ← 元に戻すボタン ）

※各画面サイズでのページ上部は、以下のようなイメージになります。

上図のように表示が切り替わる場所を「ブレイクポイント」と言いますが、これは制作側で設定しています。
中には「レスポンシブＷＥＢデザイン」を謳っていても「ブレイクポイント」に達しないと横スクロールが出るサイトがあります。ＰＣで見てる分には良いですが、スマホやタブレットは機種によって画面サイズも違うため、横スクロールが出たり画面が切れて見づらい場合もあります。このような作りのサイトは、個人的にはあまりお薦めしません。

メリット

レスポンシブWebデザインのメリットとしては以下の点があげられます。

• 単一のＨＴＭＬファイルで表示するので、更新や管理が容易になります。
• ユーザーがページをシェアしたり、リンクしたりしやすくなります。
• ＳＥＯ対策で優位になります。

一番のポイントはＳＥＯ対策で優位になる点だと思います。
Google では平成27年4月21日より、「ウェブサイトがモバイル フレンドリーかどうかを検索ランキングとして評価する」と発表しました。
詳しくは「ＳＥＯ対策について」をご覧ください。

デメリット

レスポンシブWebデザインのデメリットには、次のような点があげられます。

• 読み込む画像サイズはPCと同じため、スマホで見ると重くなる可能性があります。
• デザイン等の細かな調整が難しく、サイト設計・構築が複雑なため開発コストがかかります。
• IE8以下の古いブラウザには基本的に対応していません。また、フィーチャーフォン（ガラケー）にも対応していません。

日本のスマホではiPhoneが人気がありますが、iPhoneやMacbook Pro に搭載されているRetinaディスプレイはとても高解像度です。
そのため大きめの画像を使う必要があるためダウンロードするファイル容量が大きく、細い回線だと時間も掛かります。

まとめ

Googleが推奨しているレスポンシブWebデザインが検索ランキングにも影響するとの発表がありましたが、サイトによっては向き不向きもあり全てのサイトがレスポンシブWebデザインにする必要は無いと考えます。
既にサイトをお持ちの方は、Google Analytics（グーグル　アナリティクス）でアクセス解析を行い、スマホからの閲覧割合等を調べてみると良いでしょう。
レスポンシブWebデザインは基本的に HTML5 で作るため、対応していない古いブラウザにはJava Script を当てるなど対策が必要ですが、完全ではないため公的なサイトや写真をたくさん使われるサイトはアクセスされる方を考慮して従来通りの作り方が良いと考えます。
 
２０１７年の統計で、インターネットを利用する環境を調べた結果は次のようだったそうです。
 
スマホのみ　４６％
ＰＣのみ　　７％
スマホ＋ＰＣ　　３９％
 
これを見ると「スマホのみ」＋「スマホ＋ＰＣ」は８５％にもなります。
対して「ＰＣのみ」＋「スマホ＋ＰＣ」は４６％しかありません。
ＰＣだけに至っては わずか７％しかないので、ＷＥＢ製作はスマホで見ることを基準に考えた方が良いと思います。
Google が「モバイルフレンドリー」を提唱している事からも、「レスポンシブＷＥＢデザイン」の対応は必須と言えます。