レスポンシブWEBデザイン
① ストーリーでわかる「レスポンシブWEBデザイン」
放課後のパソコン部。デザインが得意なユウキが、学校の文化祭サイトを作っていた。
そこに先生が声をかけた。
先生：「お、ユウキ。サイト作ってるのか。どれどれ？」
ユウキ：「はい！パソコンではバッチリなんですけど…スマホで見ると文字が小さくて読みにくいんです。」
先生：「ああ、それは“レスポンシブWEBデザイン（Responsive Web Design）”を使っていないからだね。」
ユウキ：「レスポンシブ？英語が苦手で、、どういう意味ですか？」
先生：「“レスポンシブ”には“反応する、適応性がある”という意味があるんだ。つまり、画面サイズに反応してデザインが変わるサイトの作り方のことだよ。」
ユウキ：「へえ〜！スマホやタブレットでも自動で見やすくなるんですか？」
先生：「その通り。たとえば、PCでは横並びだった画像が、スマホでは縦に並んで表示されるように設定できる。同じHTMLでも、CSSというスタイル指定でレイアウトを変えるんだ。」
ユウキ：「なるほど！じゃあ、パソコン用とスマホ用で別のサイトを作らなくてもいいんですね！」
先生：「そのとおり。昔は“マルチデバイス対応”といって、example.com/pcとexample.com/spみたいに別のページを作ってた。でもレスポンシブなら、1つのHTMLで全部に対応できる。」
✅ レスポンシブデザインと従来方式の違い
| 項目 | レスポンシブWEBデザイン | PC/スマホ別サイト |
|---|---|---|
| HTMLファイル | 1つ | 2つ以上 |
| デザイン切替 | CSSの指定で自動切替 | サイトを切り替えて表示 |
| 保守のしやすさ | 高い（1つを更新すればOK） | 低い（両方修正が必要） |
| SEO（検索順位） | 有利（URLが統一される） | 不利（評価が分散しやすい） |
ユウキ：「すごい！あまり気にしていなかったけどスマホでもパソコンでも同じURLでOKなんですね！」
先生：「そう。しかもGoogleもレスポンシブデザインを推奨しているんだ。だからSEO（検索エンジン対策）的にも有利なんだよ。」
ユウキ：「確かに文化祭サイトでもスマホで見る人の方が多いですもんね！」
先生：「そうだね。最近ではCSSで“メディアクエリ”という仕組みを使って、画面幅によってデザインを変えるんだ。たとえば、こう書く。」
ユウキ：「おおっ、これがスマホ用の設定なんですね！」
先生：「そのとおり。1つのサイトが、まるでカメレオンのように見る端末に合わせて姿を変える。それがレスポンシブWEBデザインの魅力なんだ。」
レスポンシブWEBデザイン（Responsive Web Design）とは、画面サイズやデバイスに応じてレイアウトを自動的に最適化するWEBデザインの手法。HTMLは共通で、CSSのメディアクエリなどを用いて見た目を変化させる。スマホ・タブレット・PCなど複数の端末に柔軟に対応できる。
② 実際の事例：企業・自治体での活用例
近年、企業や行政の多くがレスポンシブWEBデザインを採用している。
たとえば、東京都公式サイトは、スマホやタブレットでも見やすいレスポンシブデザインを採用。フォントサイズや画像の配置が自動調整され、災害時などでも見やすいデザインとなっている（参考：東京都公式サイト）。
また、ユニクロ公式サイトもレスポンシブデザインを導入しており、スマホ・PC・タブレットのすべてでスムーズに商品検索・購入ができるようになっている。買い物中にデバイスを切り替えても、同じページを引き継げるのが特徴だ（参考：UNIQLO公式サイト）。
さらに、政府広報オンラインも2017年にレスポンシブ化を実施。多様なユーザーが利用する行政サイトでは、「誰でも見やすいユニバーサルデザイン」としても注目されている（出典：内閣府 政府広報オンラインリニューアル情報）。
レスポンシブWEBデザインは、ユーザー体験（UX）向上と保守コスト削減の両方を実現する、現代のWEB制作の標準スタイルになっている。
③ レスポンシブWEBデザインの理解をチェック！3択クイズ
クイズ1
レスポンシブWEBデザインの目的として最も正しいものは？
A. 画面サイズに合わせてレイアウトを自動調整すること
B. PC専用ページを作ること
C. サイトの色を自動で変えること
クイズ2
従来のPC・スマホ別サイトと比べたレスポンシブWEBデザインの利点はどれ？
A. 更新が1回で済むため保守が楽になる
B. それぞれ別々に作るためデザインが自由
C. URLが増えるのでアクセス数が上がる
クイズ3
レスポンシブWEBデザインで主に使われる技術はどれ？
A. SQL
B. メディアクエリ（Media Query）
C. Java
【答え】
クイズ1：A → 画面幅に合わせてレイアウトを自動調整するのがレスポンシブの基本。
クイズ2：A → 1つのHTMLで複数端末に対応できるので管理が容易。
クイズ3：B → CSSのメディアクエリを使ってレイアウトを変更する。
レスポンシブWEBデザインは、まるで“変身できるサイト”。
スマホでもPCでも、誰にでも見やすく表示される優しさを持つデザインなのです。
