レスポンシブデザイン入門

そもそもレスポンシブデザインとは？

レスポンシブ（responsive）とは「反応する」という意味。画面の幅に応じて、文字サイズ・画像・レイアウトが自動で変わるデザイン手法です。2010年にイーサン・マーコット氏が提唱し、今ではWeb制作の標準になっています。総務省の調査では、日本人のインターネット利用端末はスマホがPCを大きく上回っており、スマホ表示に対応していないサイトはそれだけで離脱されます。

仕組み：画面幅で切り替える

切り替えの判断はCSSの「media query（メディアクエリ）」というルールで行います。たとえば「画面幅が767px以下のときだけ、この余白を狭くする」という指示が書けます。

書き方の基本

HTMLのhead内に「<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">」を必ず入れます。これがないとスマホでPC版を縮小表示してしまいます。次にCSSで「@media (max-width: 767px) { ... }」のように書き、スマホ用のスタイルを並べます。

考え方としては「大きい画面を縮める」より、「小さい画面で読みやすい形を先に作る」ほうが失敗しにくいです。これをモバイルファーストと呼びます。スマホでは1列、画像は画面幅いっぱい、ボタンは指で押しやすくする。そこからタブレットやPC向けに、横並びや広い余白を追加していく流れです。

何に使われている？レスポンシブの主な技術

中高生におすすめの学び方

最初は「PC幅・スマホ幅の2段階」だけでOK。タブレット対応はあとから足せばいいです。F12（開発者ツール）には「デバイスモード」があり、スマホ表示を疑似的に確認できます。これを使って、自分のサイトをスマホ幅にした時にどこが崩れるかチェックする習慣をつけましょう。

慣れてきたらTailwind CSSのようなフレームワークを試すのもおすすめ。クラス名で「sm:」「md:」「lg:」と画面別の指定ができ、media queryを毎回書かなくて済みます。

確認するときは、見た目だけでなく「読めるか」「押せるか」「迷わないか」を見ます。文字が小さすぎないか、横スクロールが出ていないか、画像が重すぎて表示が遅くないか、フォーム入力欄が画面からはみ出していないか。Web制作では、きれいなデザインより先に、使う人が困らないことが土台になります。

気をつけたい落とし穴

将来どう役立つ？

レスポンシブデザインは、Webデザイナー・コーダー・フロントエンドエンジニアの基本スキルです。企業サイト、学校サイト、予約サイト、ネットショップなど、スマホで読みづらいページはそれだけで使われにくくなります。HTML/CSSを学ぶ段階でレスポンシブ対応までできると、「作ったページを実際に人が使える形に整える力」があると伝えやすくなります。

今日からできること

まとめ