レスポンシブデザインって何？

「美味しい焼肉屋さんができたらしい！場所がよくわからないからスマホで検索してみよう！･･･ってスマホでHP見ても全然わからない！もういいや別のお店に行こう･･･」
皆さんにもこんな経験ありますよね。レスポンシブデザインとはこのような問題が起こらないようにするためのものです。

試しに、今このサイトを開いている状態で、ブラウザの右下をつまんで動かして大きさを変えてみて下さい。

ブラウザの画面サイズをにゅーっと変えていくと同時にサイトの内容もにゅーっと変わりますよね。画面サイズに応じてメニューの表示が変わったり、 テキストや画像が画面サイズに自動でフィットします。

しかも、これは画面サイズごとにファイルがあるのではなく、ひとつのファイルに画面サイズに応じて表示が変わるような設定がされています。

ざっくり理解すると「ひとつのファイルでどんな画面サイズでも綺麗に表示されるのがレスポンシブデザイン」と覚えて下さい。

次に、もう一歩進んで「レスポンシブデザイン」がどのように定義されているのか見てみましょう。

レスポンシブ 【responsive】

［形動］反応が良いさま。感じやすいさま。 kotobank

レスポンシブWebデザイン 【responsive web design】

Webデザインの手法の一つで、様々な種類の機器や画面サイズに単一のファイルで対応すること。 (中略) 表示された機器の種類やサイズに応じて表示内容が最適な状態に変化するよう設定された単一のファイルを制作し、すべての機器に同じように送信する。(後略) IT用語辞典 e-Words

また、似たような概念で「リキッドデザイン」や「アダプティブデザイン」というものもあります。これらの概念と「レスポンシブデザイン」の区別は混同される事も多いのですが、そもそも定義自体に複数の意見があります。

個人的な意見ですが、些細な言葉の区別は気にせず、考え方の根本にある「利用者にとって不都合がないように。可能な限り便利に。」という部分だけ意識すれば必要十分だと思います。

それでは「レスポンシブデザイン」にはどのようなメリットとデメリットがあるのでしょうか。

ひとつのファイル（ワンソース）で管理するので更新作業の手間が少なくて済みます。
「モバイルサイトの方の更新を忘れてた！」というようなアクシデントもなく、サイト運用が楽になります。

PCでもモバイルでも同じコンテンツをレイアウトを変えて見せるという手法なので、ユーザーを困惑させないデザインや構造に統一性のあるサイト構築が可能です。

PCでもモバイルでも同じURLになるのでリンクやシェアが分散しません。また、検索エンジンにも適切にインデックスされやすくなります。 Google のアルゴリズムでコンテンツのインデックス プロパティを割り当てやすくなります。(Google:スマートフォン向けウェブサイトの構築)としてGoogleもレスポンシブデザインを推奨しています。

完全に端末ごとに最適化したコンテンツを複数構築して閲覧環境を振り分けるような大規模なサイト開発に比較して、レスポンシブデザインであれば費用/開発期間のコストを抑えることができます。 例えば、WordPressでサイトを構築して当サイトで配布しているレスポンシブテーマを利用するような場合は、イニシャルコスト・ランニングコスト共に手間も費用も抑えた運用ができるでしょう。

メリット

レスポンシブデザインではひとつのファイルに全てのコードが含まれていて、CSSで表示やレイアウトを最適化しています。 従って、特にモバイル端末でサイトを見た場合、モバイル専用サイトと比較して表示が重たくなる可能性があります。 スマホで動画を見るような人も多い現在ではそれほど重大な問題ではないかもしれませんが、本来20KBで十分なサイズの画像をPCと共通にするために80KBの画像を縮小して表示している、というような場合もあります。

これはメリットであるデザインや構造の統一性が高いことの裏返しでもありますが、レスポンシブデザインは基本的に単一ファイルで表示を切り替える都合上、サイトを各端末ごとに完全に異なるコンテンツにすることは困難です。

レスポンシブデザインでは通常、CSSのMedia Queries（メディアクエリ）を利用して端末の画面サイズに応じた表示を行います。 その結果、普通の携帯電話（ガラケー/フィーチャーフォン）では正常に表示されない場合が多いので、これらの端末も含めて完全な表示をするには別の対応を組み合わせる必要がでてきます。

あなたが個人や企業としてWebサイトを立ち上げた目的はなんでしょうか？

みんなにブログを見てほしい。情報を共有したい。商品を売りたい。サービスを知ってほしい。お店に来てもらいたい。･･･etc. サイトを運用する中で新しく何かを取り入れるときにもその目的（＝ゴール）を忘れてはいけません。上記のように、レスポンシブデザインにはメリットもデメリットもあるのでサイトの目的に合わせて総合的に考える必要があります。

あなたがブログで情報を共有することを第一の目的としているなら、レスポンシブデザインを取り入れることでデザインやレイアウトに手間や時間を取られることなく執筆活動により専念できると思います。

金融機関が最高の顧客サービスを目指して、PCサイトでは金融商品やIR情報に力を入れつつ、モバイルサイトではATMや支店の場所を探す人に最も便利な構成にしたい、というような場合ならばレスポンシブデザインではなく、開発期間やコストがかかるとしても最適化されたモバイルサイトとPCサイトを別に用意するべきでしょう。

カフェを経営していてイベント情報やメニューをわかりやすく見せたい、というような場合であればレスポンシブデザインを取り入れることで、更新漏れなどを防止しつつもコストパフォーマンスの高いサイトを構築できるかもしれません。

まずは、あなたのサイトにレスポンシブデザインを導入することで利用者が便利になるのか？を基準にして考えてみるといいと思います。 次に、管理する上で他の選択肢よりもベターか？を考えて導入を検討してみるといいかもしれませんね。

レスポンシブデザインは完全無欠ではありません。
それでも多くの場合において、サイトを管理する人にとっても利用する人にとっても便利でコストパフォーマンスが高いといえるでしょう。 特にスマートフォンの普及が進んだ現在においてはモバイル環境でサイトを閲覧する人が非常に多いので、レスポンシブデザインの導入は利用者の利便性と管理のとしてくれると思います。

WordPressと当サイトで販売しているレスポンシブテーマを組み合わせれば、簡単にレスポンシブデザインのサイトを構築することが可能ですのでぜひお試し下さいね。