responsive_web_design
レスポンシブWebデザインとは、単一のウェブサイトでPC、スマートフォン、タブレットといった画面サイズが異なるデバイスへ対応できる制作手法です。
市場に出回っているスマートフォン、タブレットはいろいろなサイズで発売されていますが、それに対応させる手法がレスポンシブWebデザインです。

CarrKnowledge_ResponsiveDesign2

ワンソースで管理します。

1つのHTML(ワンソース)を管理します。
例えば、サイト完成後のメンテナンスで、テキスト修正や画像差し替え程度の小規模メンテナンスなら作業時間も減りますし、ミスのリスクも減ります。

SEOに有効的です。

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

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

 

URLが統一されます。

PC用ページとスマホ用ページを用意している場合

Aさんが、そのサイトをPCで閲覧中、FBでそのPC用サイトのURLを紹介しました。仕事中のBさんは、PCでAさんのウォールを見てURLをクリック。
→ PCサイトを開き、問題なく閲覧できました◎

移動中のCさんは、スマホでAさんのFBのウォールを見てURLをクリック。
→ スマホでPCサイト開いてしまい、見づらいのですぐ中断×

というようなことが起こってしまうケースもあります。
レスポンシブWebデザインではブラウザの横幅サイズを判断基準にできるため、表示が自然と切り替えられ上記のようなことが起こりません。

Google公式ブログには、PC 用のページとモバイル用のページを単一の(同一の) URL とすることができるため、ユーザーにとってはシェアやリンクが容易…

と表記されています。

 

デメリットも当然あります
構築が複雑⇒時間がかかる⇒コストが増える

切り替えるレイアウト毎にデザインを用意したり、HTMLコーディングの構築が複雑だったり、チェックが増えたり、など従来の制作方法と比較して設計段階でも構築段階でも複雑になるため、従来より費用が増えてしまうケースがあります。

 

responcive_scheme3

まとめ

複数のファイルを用意する従来の方法に比べ、デザインや機能の自由度は下がってしましますが、すべての機器に同じ内容を表示でき、更新作業の時間短縮や更新漏れの防止が期待できます。
検索エンジンやアクセス解析に内容が重複した複数の異なるURLが出現することも避けられます。