レスポンシブWebデザイン

専用設計と兼用設計

モバイル ”専用” ページの例

Yahoo! や YouTubeなどの大手サイトは、PC専用レイアウトのホームページと、スマートフォン・タブレット向けの、モバイル専用レイアウトのホームページを「分けて」作っています。閲覧者側は特段意識することはありませんが、これらは、パソコン（PC）と スマホで「同一のページ」を見ているわけではなく

のように振り分けられ 同じコンテンツを、それぞれ専用に設計された、別々のページで 閲覧する形になります。 もっとも、YouTubeはスマホブラウザではなく、アプリで閲覧することの方が多いですが；

例えて言うなら … 海に行く時はSUV。本気で走りに行く時はポルシェ911。芝刈りに行く時は軽トラ。という具合に、それぞれ専用で使い分けている贅沢仕様、という感じです。

”兼用” 設計のメリット

PC向けとスマホ向けサイトを別々に・専用に制作すると、初期費用の面でも維持更新の面でもコスト高になってしまいます（単純に×２倍ではないですが、それに近いニュアンス）。

ゆえに、一般的な商用ウェブサイトを作る時には、兼用設計であるレスポンシブデザインでの制作が主流です。スマホ用ページとPC用ページを別々に作らなくても、閲覧デバイスの幅に応じてレイアウトが可変するように。

例えて言うなら『モンキーレンチ』のようなもので …
モンキーレンチは、対象となるボルト・ナットに合わせて幅を可変させ、１本で様々な口径に対応しますよね。

クルマで言えば … 海に行くにも山に行くにも、ファミリーカー１台でOK！というのに近いでしょうか。

つまりレスポンシブデザインは、専用ではなく 兼用設計 です。ポルシェと軽トラを使い分ける程の「両極端の用途にものすごくフィットした加減」を出すのには向いていませんが、合理的かつ実用的、現実的。検索最大手・Googleも、レスポンシブデザインでのサイト制作を推奨しています。*

*Googleの検索ロボットから見た際に「同じ内容を持つサイトが、閲覧デバイス切り分けの為に別々のURLで存在する」よりも、「１つのURLに集約されている」方が、インデックス（Webサイト／キーワードの目次化）に於いて都合が良い、というのがその理由の１つと言われています。

*2015年、Googleはサイトが「モバイルフレンドリー」かどうかを、スマートフォン等から検索した際の表示順位決定要素の１つにすることを明言し、2015/4/21より適用しました。