ITパスポート 令和8年度 問60｜レスポンシブWebデザインに関する問題

答えは a です。

同じWebサイトでも、大きいパソコンの画面と小さいスマホの画面では見やすい形がちがいますよね。レスポンシブWebデザインは、見ている画面の大きさに合わせて、文字や写真の並びを自動でちょうど良い形に変えてくれる作り方です。

服が体に合わせて伸び縮みするゴムのように、レイアウトが画面に“合わせて変わる”イメージです。

👉 覚え方：レスポンシブ＝画面サイズに「反応して」レイアウトが変わる。

ほかの選択肢：b 近いサーバーから動画を配信＝CDNという仕組み／c 加速度センサーで歩数計測＝センサー活用の話／d マウスを重ねると説明が出る＝ツールチップ（ポップアップ）。

なぜこれが正解か

正解は a。レスポンシブWebデザインとは、PC・タブレット・スマートフォンなど画面サイズの異なる多様な端末に対し、1つのWebページが画面幅に応じてレイアウトを自動で最適化する設計手法。端末ごとに別ページを用意せず、見やすさ・操作しやすさを保てる。

各選択肢の解説

• b：利用者に最適なサーバへ接続させて配信するのはCDN（コンテンツ配信網）。
• c：加速度・ジャイロセンサーのデータ活用はセンサー応用で、デザイン手法ではない。
• d：マウスを重ねたとき説明を表示するのはツールチップ／ポップアップ。
• a：画面サイズに応じてレイアウトが変化する＝レスポンシブ（正解）。

覚え方・ひっかけ注意

「レスポンシブ＝responsive＝反応する」＝画面サイズに反応してレイアウトが変わる、と語源で覚える。b/c/dは“Web技術っぽい別概念”を並べた引っかけ。キーワードは「1つのページで画面幅に応じて変化」。

理論的背景

レスポンシブWebデザイン（RWD：Responsive Web Design）は2010年にイーサン・マーコットが提唱したWebデザイン哲学・技術であり、CSSのメディアクエリ（@media）・フレキシブルグリッドレイアウト・フレキシブルイメージの3技術を組み合わせて実現される。本問正解aは「表示端末の画面サイズに応じてWebサイトのレイアウトが変化する」という定義の核心を正確に捉えている。

CSSメディアクエリの実装例：`@media (max-width: 768px) { .container { width: 100%; } }` のように、画面幅・高さ・解像度・向き（縦横）等の条件に応じてスタイルを切り替える。ブレイクポイント（xs/sm/md/lg/xl）を設定したBootstrap・Tailwind CSSなどのCSSフレームワークがRWDの実装を標準化している。

RWDと類似技術の区別：アダプティブWebデザイン（AWD）はサーバ側でデバイスを判定し異なるHTMLを返す方式（RWDはクライアント側のCSS制御で1つのHTMLを使い回す）。PWA（Progressive Web App）はネイティブアプリに近い体験を提供するWeb技術の総称。AMPはモバイル向け高速表示に特化した技術。

実務での使われ方

現代のWebサイト構築においてRWDはデファクトスタンダードであり、Google SEOの「モバイルファーストインデックス（MFI）」対応の必須技術となっている。GoogleはMFIにおいてモバイル版コンテンツをインデックスの基準とするため、モバイル非対応サイトは検索ランキングで著しく不利になる。WordPressのテーマ・Next.js・Nuxt.js等の現代的Webフレームワークは全てRWD対応を前提に設計されている。

Web会議ツール（Zoom・Teams）のWebクライアント・Eコマースサイト・SaaSのダッシュボードでは、PC・タブレット・スマートフォンのすべての解像度で適切なレイアウトを提供するためにRWDとCSSグリッド・Flexboxを活用したレスポンシブデザインシステムが実装されている。

試験での位置づけ

レスポンシブWebデザインはITパスポートのテクノロジー系「テクノロジー要素」（Web技術分野）で毎年出題されるトピック。2022年以降、スマートフォン普及率の向上・Google MFI対応の重要性を反映し、RWDに関する問題の出題頻度が増している。識別キーワード：「画面サイズに応じてレイアウト変化」「メディアクエリ」「PC/スマホ対応」。誤り選択肢bのCDN（Content Delivery Network）技術、cのセンサー活用技術、dのツールチップ・ポップアップ表示との区別が問われる。基本情報技術者試験ではCSS仕様（フレキシブルボックス・グリッドレイアウト・CSS変数）・ブレイクポイント設計・Core Web Vitals（LCP・FID・CLS）のパフォーマンス指標との関係まで踏み込んだ問題が出題される。

選択肢の発展補足

選択肢bが描写するCDN（Content Delivery Network）はAkamai・CloudFront・Cloudflare等のサービスが代表例。地理的に分散したサーバにコンテンツをキャッシュし、ユーザーに最も近いサーバから配信することでレイテンシを低減する技術。動画ストリーミング配信での負荷分散に特に有効だが、これはRWDとは全く別の技術領域。選択肢cの加速度センサー・ジャイロセンサー活用はジオロケーション・AR（拡張現実）・健康管理アプリ等での活用例であり、Web APIの一つであるDeviceMotion API・DeviceOrientation APIで実現される。HTML5の仕様に含まれるこれらのAPIはRWDとは独立した機能。選択肢dのポップアップ（ツールチップ）はHTML5のtitle属性やCSSのホバー効果で実装されるUI要素であり、アクセシビリティ（WCAG準拠）の観点から適切な実装が求められるが、画面サイズへの適応（RWD）とは異なる概念。