レスポンシブWEBデザイン

Responsive Web Design

レスポンシブWebデザインとは、PC用サイトとスマートフォン(以下スマホ)用サイトを用意する場合、ユーザが閲覧しているOSやブラウザ(ユーザーエージェント)を判別して、サーバーサイドプログラムで表示するHTMLを振り分けるという手法が一般的です。
この人はパソコンで閲覧しているから → パソコン用のHTMLを表示
この人はiPhoneで閲覧しているから → スマホ用のHTMLを表示
というように、複数のHTMLを割り振っています。
それに対しレスポンシブWebデザインは、OSやブラウザを判断基準にしているのではなく、
ブラウザの横幅サイズを判断基準にして、CSS(スタイルシート)を切り替えている手法です。

パソコン、携帯、スマフォ、タブレットなどのレスポンシブWEBデザイン

ワンソース管理!

WEB制作は制作会社毎に費用が異なり、価格が不明瞭なところがあります。
もちろんWEBサイトは自動でページが作られるわけではなく、お客様のご要望に即した機能をプログラマーが、デザインをデザイナーが制作し、1ページつづ制作いたします。
そのため、大規模サイトになるとその分手間が増え費用もかさみます。
また、制作には専門スキルが必要なため、技術を持った単価の高いデザイナーやプロフラマが制作にあたります。彼らの作業期間が長くなればなるほど、それに比例し制作費用も割高になります。

汎用サイトとレスポンシブWebサイトの比較

ワンソース・マルチデバイス対応(PC、タブレット、スマートフォン、携帯)へマルチデバイス対応したWebサイトを制作する手法です。
Webサイトには通常 専用サイト(デバイス毎にWebサイトを制作)と凡用サイト(1つのWebサイトで全てのデバイスに対応したレスポンシブWebデザインなど)があります。
レスポンシブWebデザインによる汎用サイトを制作することで、1つのHTML(ワンソース)を管理が可能。そのため、サイトの完成後、更新時にテキスト修正や画像の差し替え程度の作業時間は軽減されます。

▼汎用Webサイトの場合
●パソコンを使ってサイトを見ている方 → パソコン用のWebサイト表示
●スマフォを使ってサイトを見ている方 → スマフォ用のWebサイトを表示
というおように複数のサイトを割り振っています。

▼レスポンシブWebデザインの場合
レスポンシブ設計のWebはOSやブラウザの判断ではなく、閲覧者の画面の大きさで、表示するコンテンツの配置を変更します。
●1200ピクセルのパソコンモニターで見ている人には → フルサイズのWebサイト表示
●iphoneで見ている人には → 320ピクセルにレイアウト変更をしたwebサイト表示
のように、1つの同じHTMLをCSSによって、見せ方(レイアウト変更)をして表現します。

ワンソース管理!

レスポンシブWEBデザインは1つのHTML(ワンソース)を管理します。
例えば、サイト完成後のメンテナンスで、テキスト修正や画像差し替え程度の小規模メンテナンスなら作業時間も減りますし、ミスのリスクも減ります。
※レイアウト変更やコンテンツまるごと追加という中規模~大規模のメンテナンスなら話は別です。

SEOに有効的!

Googleは、サイトの構築手法の一つとしてレスポンシブWebデザインを推奨しています。
「Google ウェブマスター向け公式ブログ: Google がお勧めするスマホに最適化されたウェブサイトの構築方法」では下記のように述べています。

PC 用のページとモバイル用のページを単一の(同一の) URL とすることができるため、(中略)Google のアルゴリズムにとってはコンテンツを適切にインデックスできるようになります。
ユーザーエージェントの異なる Googlebot ごとにページをクロールする必要がないため Google がより効率的にコンテンツを発見することができます。

URLが統一されることでシェアがしやすく!

レスポンシブWebサイトではなく、汎用サイトをAさんがパソコンで閲覧。
TwitterやfacebookでそのURLを共有したとしましょう。
Aさんが投稿したURLはパソコンで閲覧する人はAさんと同じように閲覧できますが、スマフォ利用で閲覧しているBさんは画面が縮小されたり、コンテンツが画面に入りきれなかったりで閲覧にストレスを感じます。
しかし、レスポンシブWebデザインであった場合、Aさんが共有したURLは、スマフォ利用のBさん、タブレット利用のCさんそれぞれの端末で最適なレイアウトでAさん提供の情報サイトが提供されるため閲覧に不便さを感じません。

レスポンシブWEBデザインの仕組み
WEB制作の依頼はこちら
WEB制作の流れをご説明
HTML5 CSS3の最新コーディング説明
アメブロカスタマイズ
Google Analyticsを用いたWEB解析
WordPress、Movabletypeなどを用いたCMSサイト制作

ページトップへ移動