IT/Web/マーケティング用語辞典
れすぽんしぶうぇぶでざいん
画面サイズに依存しないWebサイトを構築する手法のこと
レスポンシブwebデザインとは、画面サイズに依存しないWebサイトを構築する手法のことです。
パソコンやスマホなど、Webサイトを利用するデバイスによって画面サイズは異なります。1つのHTMLファイルをデバイスに応じたCSSで制御することで、ユーザーが利用するデバイスの画面サイズに応じてページのレイアウト・デザインを最適化して表示させることが可能となります。これを「レスポンシブwebデザイン」といいます。
「レスポンシブ（responsive）」という英語には「よく反応する」「敏感に反応する」などの意味があります。レスポンシブwebデザインは、この英語から派生しています。
①meta viewportタグを記述
・コードの<head>部分にmeta viewportタグを記述
・画面の幅に合わせて表示領域を自動で調整してくれる
②ブレイクポイントを決める
・CSSの切り替わる画面サイズ
③CSSファイルでPC用とスマホ用の表示方法の違いを記述する
・「メディアクエリ」を使う
・CCS内で記述する
・HTMLファイル内のlinkタグで設定する
レスポンシブwebデザインは、以下の手順で作成することができます。
①viewportタグを記述する
HTMLファイルのヘッダー部分（<head>）にviewportタグを記述します。これにより、画面の幅に合わせて表示領域を自動で調整してくれるようになります。
②ブレイクポイントを決める
ブレイクポイントとは、どれくらい画面サイズが大きくなったらCSSを切り替えるか、というCCSの切り替え地点のことです。
③CSSファイルでPC用とスマホ用の表示方法の違いを記述する
「メディアクエリ」を使用し、画面にサイズによって適用されるCCSを切り替えることで、パソコンとスマホで異なる表示をすることができるようになります。方法としては、CCS内で記述する方法とHTMLファイル内のlinkタグで設定する方法があります。
主なレスポンシブwebデザインのメリットとして、「HTMLファイルが1つ」「URLが1つ」の2つが挙げられます。
・HTMLファイルが1つ
PC用とスマホ用に分けて作成した場合、HTMLファイルを2つ作成する必要があります。しかし、レスポンシブwebデザインでは作成するHTMLファイルが1つで済むことによって、作成や管理の負担を軽減することできます。
・URLが1つ
PC用サイトとスマホ用サイトのURLが1つに統一されるため、シェアされやすくなります。
レスポンシブwebデザインにはデメリットもあります。主なデメリットとしては、「レイアウトの制約」「CCSの複雑化」「スマホでの表示時間」の3つがあります。
・レイアウトの制約
1つのHTMLファイルで構築するので、CCSが対応できないデザインやレイアウトを使用することはできません。
・CCSの複雑化
CCSの記述が複雑化するので、制作工数が増え、コーディングに時間がかかります。
・スマホでの表示時間
レスポンシブwebデザインでは、デバイスの画面サイズに関わらず同じデータを読み込ませます。そのため、スマホの場合は表示されないデータも読み込むことになり、表示に時間がかかりやすい傾向があります。
レスポンシブwebデザインと組み合わせて使うことができるレイアウトとして、主に「リキッドレイアウト」「フレキシブルレイアウト」「可変グリッドレイアウト」の3つが挙げられます。
・リキッドレイアウト
画面サイズの横幅100%の大きさに応じて、テキストや画像などの要素が伸縮して表示されるレイアウトのことです。
・フレキシブルレイアウト
リキッドレイアウト同様、画面サイズに応じて要素が相対的・可変的に調整されるレイアウトです。しかし、フレキシブルレイアウトの場合は最小幅と最大幅も指定するので、画面サイズの大きいデバイスで表示すると周りに余白が生まれる可能性があります。
・可変グリッドレイアウト
ブロックごとに文字や画像を配置するグリッドレイアウトと、リキッドレイアウトによる可変レイアウトを組み合わせたレイアウトです。画面サイズに合わせて、ボックス要素が再配置されます。
レスポンシブWebデザインの使用例レスポンシブwebデザインにすることで、デバイスの画面サイズに関係なく同じWebサイトを閲覧することができます。これはユーザー視点に立ったWebサイト構築につながります。
近年、Googleが推奨していることから、レスポンシブwebデザインの導入が進み、スタンダードとなってきています。
ブラウザの機能を使ったり、実際にパソコンとスマホの両方で同じWebサイトを見ることで、そのWebサイトがレスポンシブWebデザインであるかどうかを確認することができます。
業者に依頼してレスポンシブwebデザインを導入する場合は費用がかかります。事前に見積もりをおこなうとよいかもしれません。
レスポンシブwebデザインの導入後、正しく対応できているかを確認する方法として、ブラウザの機能を使う方法、Webサービスを利用する方法、実際にスマホで確認する方法の3つが挙げられます。
・ブラウザの機能を使う方法
Chromeブラウザの場合は「Developer Tools」、Internet Explorerの場合は「開発者ツール」の「エミュレーション」からユーザーエージェントを変更することで、スマホ表示に切り替えることができます。
・Webサービスを利用する方法
スマホ表示とPC表示を切り替えることができるWebサービスもあります。このようなツールを使って、レスポンシブwebデザインに対応しているか確認することもできます。
・実際にスマホで確認する方法
実際にスマートフォンを使って確認することもできます。
Googleがレスポンシブwebデザインを推奨している理由の1つとして、モバイルファーストインデックスの導入が挙げられます。モバイルファーストインデックスとは、Webサイトの評価基準としてPCサイト基準ではなく、モバイルサイト基準を用いるというものです。
スマホ用サイトがパソコン用サイトと比べてコンテンツが少ない場合、検索順位に悪影響を与える可能性があります。これを避けるため、Googleはデバイスの画面サイズによって情報量が変化しないレスポンシブwebデザインの導入を推奨しているのです。
みんな使えるWeb用語辞典「ミンウェブ辞書」
IT/Web/マーケティングに関する用語をわかりやすく、
親しみやすく解説します。
株式会社セルリア
〒160-0022
東京都新宿区新宿6-28-8
ラ・ベルティ新宿10階
