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

レスポンシブデザインとは何か？

「今さら何をいうのか」という話であるが，たまたま，ちょっと不可解な HTML のソースを見たので今回取り上げることにした．

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

wikipedia のレスポンシブデザインには

ウェブデザインの手法のひとつで、デスクトップ版のウェブページを閲覧者の画面サイズまたはウェブブラウザに応じて表示できるようにする。加えて、1つのウェブサイトで多様なデバイスを同様にサポートする

と書いてある．

また，Google の Google 検索セントラルにはレスポンシブデザインにする理由として

• URL が 1 つなので、ユーザーによるコンテンツの共有やリンクが簡単になります。
• 対応するパソコン用ページまたはモバイル用ページが存在することを Google のアルゴリズムに伝える必要がなく、インデックス登録プロパティが正確にページに割り当てられます。
• 同じコンテンツのページをいくつも維持管理する手間が省けます。
• モバイルサイトでよくある誤りに陥る可能性を抑えることができます。
• ユーザーをデバイスごとに最適化したページにリダイレクトする必要がないため、読み込み時間を短縮できます。また、ユーザー エージェントに基づくリダイレクトはエラーが発生しやすいため、サイトのユーザー エクスペリエンスを損なうおそれがあります（詳細については、ユーザー エージェントの正確な検出をご覧ください）。
• Googlebot がサイトをクロールするために必要なリソースを節約できます。レスポンシブ ウェブ デザインでは、1 つの Googlebot ユーザー エージェントがページを一度クロールするだけで済みます。異なる Googlebot ユーザー エージェントが何度もクロールしてコンテンツのすべてのバージョンを取得する必要はありません。Google によるクロールの効率が上がることは、間接的には、サイトのコンテンツがより多くインデックスに登録され、適切な間隔で更新されることにつながります。

と書いてある．

昔は検索エンジンのロボットをユーザーエージェントなどで見分けて，ロボット専用コンテンツを作って人が見るものと違う内容のページに(URLは変えずに)誘導して，検索エンジンの順位を上げるような行為(クローキングと言っていた)をするようなサイトもあったが，対ロボットだけでなく，デバイスに対しても違うコンテンツを作るのをやめましょうということを言っている．

本来，
www.xxxxxx.co.jp
というサイトURLがモバイルでアクセスすると
m.xxxxxx.co.jp
などと飛ばされることがあり，「内部のページにアクセスしているのにトップページに飛ばすのはやめましょう」と Google が書いているページもあるが，そもそも「それ自体もやめたら？」と言っているわけである．

レスポンシブデザインの本質

Google の理由の一番上に書いてあることからも分かるように同じコンテンツを複数作成しないで済むようになることが本質である．

同じコンテンツを複数箇所・ページに書くようになっているとメンテナンスが大変だからである．

一つのHTMLページに同じ内容が複数存在するケース

つまり，レスポンシブに対応したデザインがなされている場合，HTML は一つになり，デバイス毎に CSS によって表示の仕方を変更することになる．

これを拡大解釈しているのか不明だが，一つの HTML の中に同じコンテンツを複数入れ込んでいるソースを見かけることがある．
よくあるのはクラス名に sp や pc と名付けているものである．
そして，CSS によってスマホの時は pc を display: none; にし，パソコンの時は sp を display: none; にすることによって表示・非表示を切り替えている．

これだと確かに HTML のページは一つであるが，メンテナンス箇所が複数になってしまい，レスポンシブ対応しているとは言い難い．

先ほどの Google のレスポンシブデザインにする理由にも「サイトをクロールするために必要なリソースを節約」と書かれているところがある．

同じコンテンツが複数ある時点でリソースの節約になっていない．

また，HTMLアウトラインという考え方があるが，コンテンツの中にそういう場所があると場合によっては同じ見出しが複数出てきておかしなことになってしまう．

コンテンツは一つ

ということなので，メニューを作る際も箇条書きのタグを使って書き，CSS によってドロップダウンやアコーディオンメニューに変えればレスポンシブデザインになり，その書き方は「CSSのみでの多階層ドロップダウンメニュー」や「メガメニューの簡単な作り方」などで紹介している．

また，テーブルも「レスポンシブ対応縦横ヘッダ固定テーブル」として紹介している．

CSS も進化していていろいろなことが出来るようになっているので，それを使えばうまくレスポンシブ対応のサイトを制作することが出来る．
業者に頼んでいて，自分のサイトのソースを見たことがないという方もいるだろうが，一度確認されてはどうだろうか？