読み：れすぽんしぶでざいん ／ 分野：IT・システム
画面の幅に応じてレイアウトを自動調整し、1つのサイトでPCやスマホに対応するデザイン手法です。
レスポンシブデザインとは、パソコン・スマートフォン・タブレットなど画面サイズの違う端末でも、1つのWebサイトのデータで見やすく表示できるように作る設計手法です。端末ごとに別サイトを用意する必要がないため、制作や更新の手間を抑えられます。
意味
通常のWebサイトは、画面の横幅に合わせて文字の大きさや画像の配置、メニューの見え方を切り替える仕組みを持っています。これはCSS（デザインを指定する技術）の中で、画面幅ごとに異なる表示ルールを定義することで実現されています。スマートフォンでは1列表示、パソコンでは2〜3列表示といった具合に、同じHTML（Webページの骨組み）を使いながら見え方だけを変えます。これにより、PC用サイトとスマホ用サイトを別々に作って管理する必要がなくなり、情報の更新も1か所で済みます。
使われる場面と具体例
- 企業の公式サイトを新しく作る際、担当者が制作会社に「スマホでも見やすくしてほしい」と依頼し、レスポンシブデザインで設計してもらう。
- ネット経由の問い合わせや注文を増やしたい店舗が、スマホからの閲覧者に合わせて申し込みボタンや文字サイズが見やすくなるようにサイトを改修する。
- 採用サイトを運用する総務担当が、求職者の多くがスマホで閲覧する実態に合わせ、既存サイトをレスポンシブ対応へ切り替える。
中小企業が押さえたい点
- 現在のサイトがレスポンシブ対応かどうかは、スマートフォンで実際に開いて文字や画像が崩れず読めるか確認すると分かります。
- 制作会社に依頼する際は、見積もりや提案書に「レスポンシブ対応」と明記されているか確認することが大切です。
- 検索エンジンはスマホ表示のしやすさを評価に含めるため、対応していないサイトは検索結果で不利になる可能性があります。
- 対応済みでも、公開後に実機やブラウザの表示確認を行い、レイアウト崩れがないか定期的に点検すると安心です。
よくある誤解
- 「スマホ用サイトを別に作ること」と混同されがちですが、レスポンシブデザインは1つのデータで複数端末に対応する仕組みで、別サイトを用意する方式とは異なります。
- 「一度対応すれば永久に問題ない」と思われがちですが、新しい端末サイズや機能の追加に合わせて見直しが必要になる場合があります。
よくある質問
Q. 既存サイトを後からレスポンシブ対応にできますか。
A. 可能ですが、サイトの構造によっては部分的な修正では済まず、作り直しに近い対応が必要になる場合があります。
Q. レスポンシブ対応すると検索順位が上がりますか。
A. 直接的に順位を保証するものではありませんが、スマホでの見やすさは評価要素の一つとされています。
Q. 制作費用はどのくらい変わりますか。
A. 対応しない場合より工数が増えることが一般的ですが、具体的な金額は依頼内容や制作会社によって異なります。
関連する用語
関連記事
ほかの用語を探す
