GLOSSARY — WEB
レスポンシブデザインとは?
DEFINITION
レスポンシブデザインとは、一つのWebページを、パソコン・タブレット・スマートフォンなど閲覧する端末の画面幅に応じて、見やすいレイアウトに自動で切り替えて表示する設計手法のことです。
画面幅ごとの表示のルールをCSS(ページの見た目を指定する言語)で記述し、同じURL・同じ内容のまま見え方だけを切り替えます。パソコン用とスマートフォン用に別々のページを用意する「スマホ専用サイト」と違い、管理するページが一つで済むのが特徴です。
01EXPLANATION
詳しい解説
企業サイトはスマートフォンで閲覧される機会が多く、文字が小さい、横にはみ出すといったサイトは、内容を読まれる前に離脱されやすくなります。Googleは、主にスマートフォン向けの表示内容をもとにページを評価する方針(モバイルファーストインデックス)をとっており、実装と管理がしやすい方法としてレスポンシブデザインを推奨しています(2026年7月時点)。
レスポンシブデザインには、次のような利点があります。
- URLが一つなので、検索での評価やSNSで共有されるリンクが分散しない
- 更新が一度で済み、パソコン版とスマホ版で内容がずれる心配がない
- 新しい画面サイズの端末にも対応しやすい
注意したいのは、パソコン向けのレイアウトを縮めただけでは見やすくならないことです。文字の大きさや行間、ボタンの大きさと間隔、横に広い表の扱いなどを、スマートフォンでの使いやすさを前提に設計する必要があります。画面に表示しない要素まで読み込む作りになっていると、表示が遅くなることもあります。
制作の段階では、スマートフォンでの見え方から先に設計する「モバイルファースト」という考え方もあります。公開前には、パソコンのブラウザでの確認に加えて、実際のスマートフォンの複数の機種で、表示の崩れや押しやすさを確かめます。




