「アノウェブ」は、Web業界15年の”アノ”が、小さな事業のWebのモヤモヤを日常の言葉にほどいていくブログです。制作会社ではないので、売り込みはありません。
前回、HTMLとCSSの役割についてお伝えしました。
今回は、そのCSSの仕組みを使って実現されている「レスポンシブ」という言葉についてお伝えします。
レスポンシブは、画面の大きさに合わせて見え方が変わる仕組み
レスポンシブ（Responsive）とは、パソコン・タブレット・スマートフォンなど、見る画面の大きさ（ピクセル数）に合わせて、文字の大きさやレイアウトが自動で切り替わる仕組みのことです。
CSSに見え方を制御するよう、指定します。
同じ一つのホームページでありながら、画面の幅ごとにレイアウトや操作性が変わります。
スマホ用とパソコン用で、別々のホームページを作る必要がないのは、この仕組みを採用しているからです。
なぜ、画面ごとに見え方を変える必要があるのか
パソコン用の見た目のまま、そのままスマホの小さな画面で表示すると文字や図が小さすぎたり、横にスクロールしないと読めなかったりします。
ボタンも小さく、押しにくくなりがちです。
閲覧している環境に合った見え方と操作のしやすさを用意できていないと、読みにくさ・使いにくさから、そのままホームページから離れてしまう方が多くなります。
今は、スマホからの閲覧が中心になっている
一般的なホームページでは、閲覧の7〜8割程度がスマートフォンから、パソコンからは2〜3割程度、と言われています(2026年8月時点の目安。事業内容や客層によって差があります)。
この傾向を受けて、スマホでの見え方を基準に設計する「モバイルファースト」(まずスマホでの使いやすさを優先して考える設計の考え方)という進め方も増えています。
ご自分のホームページを、スマホやタブレットで開いてみて、文字の大きさやボタンの押しやすさ、横スクロールの有無を確かめてみてください。
これを最適な状態に保つことは、よりよいホームページを維持していくのに重要なことの一つです。
次回は、住所(ドメイン)を案内する「案内係」、DNSについてお伝えします。