問題
問60
レスポンシブ Web デザインに関する記述として,適切なものはどれか。
- PC,スマートフォンなど,多くの種類の端末で,見やすく,かつ操作しやすくなるように,表示する端末の画面サイズなどに応じて Web サイトの画面レイアウトが変化する。
- Web ブラウザで動画コンテンツをストリーミング再生するとき,サーバやネットワークの負荷が軽減されるように,複数のコンテンツ配信サーバのうち,利用者に適したサーバに接続させてデータを取得する。
- スマートフォンなどの端末向けの Web アプリケーションにおいて,歩数や移動速度などを計測できるように,端末に内蔵された加速度センサーやジャイロセンサーのデータを使用する。
- 操作説明書を読まなくても Web サイトの使用方法を理解できるように,Web ブラウザの利用者がマウスポインタを Web コンテンツに重ねたとき,ポップアップを用いて機能の説明,対象の状態などを表示する。
[出典:ITパスポート試験 令和8年度 問60]
正解
正解は「ア」です。
解説
正解は「ア」です。レスポンシブ Web デザインとは、一つのWebサイト用ファイル(HTML)を使いながら、パソコンやスマートフォン、タブレットなど、閲覧するデバイスの画面横幅(サイズ)に合わせて、レイアウトを自動的に最適化する制作手法のことです。
例えば、画面の広いPCでは情報を横に3つ並べて表示し、画面の狭いスマホではそれらを縦一列に並べ替えるといった調整を自動で行います。 これを日常生活に例えると「形を変える水」のようなものです。同じ水であっても、細長いコップに入れれば縦長になり、平たい皿に入れれば横に広がります。中身(コンテンツ)は同じでも、器(画面サイズ)に合わせて形を変えることで、ユーザーは文字を拡大したり横にスクロールしたりする手間がなくなり、非常に快適に情報を閲覧できるようになります。
以前はPC用とスマホ用で別々のサイトを作ることもありましたが、現在は管理のしやすさや検索エンジン(SEO)への評価の観点から、このレスポンシブ形式が世界的な主流となっています。どんな大きさの画面で見ても「ちょうど良い」配置になるのが最大の特徴です。
イ(動画を最適なサーバから取得する):
これはCDN(コンテンツデリバリネットワーク)の説明です。負荷分散や配信効率化を目的とした仕組みであり、デザインの手法ではありません。
ウ(センサーのデータを使用する):
これはデバイスに内蔵された物理的なセンサーを活用する機能の説明です。画面レイアウトの制御とは直接の関係はありません。
エ(マウスポインタで説明を表示する):
これはツールチップと呼ばれるUI(ユーザーインターフェース)の機能説明です。使いやすさを高める工夫の一つですが、レスポンシブデザインとは異なります。
難易度
ITの専門知識がなくても、私たちが日常的にスマートフォンでウェブサイトを閲覧している際、パソコン版と同じURLなのにスマホで見やすいレイアウトに切り替わっている現象そのものを指しています。用語の「レスポンス(反応する)」という意味をイメージできれば、未経験の方でも直感的に正解を選べる、非常に解きやすい問題と言えます。
用語補足
レスポンシブ Web デザイン:
画面サイズに応じて配置を自動変更する技術です。例:PCでは3列のニュース記事が、スマホでは読みやすく1列に並び変わる仕組み。
ストリーミング:
データを少しずつ受信しながら同時に再生する方式です。例:YouTubeで動画のダウンロード完了を待たずにすぐに視聴し始められること。
ジャイロセンサー:
物体の向きや回転を検知する装置です。例:スマホを横に傾けると、画面内の写真や動画も自動で横向きに回転して表示される機能。
ポップアップ:
現在の画面の上に重なるようにして、新しく表示される小さな窓のことです。例:サイトを閉じようとした時に「お得な情報はこちら」と出てくる広告。
対策
「画面サイズに応じて」「レイアウトが変化する」というキーワードをセットで覚えるのがポイントです。試験では、レスポンシブデザインのメリットとして「URLが一つで済むため管理が楽」「どの端末でも見やすい」という点も問われやすいため、合わせて理解しておきましょう。実生活でスマホを使いながら、サイトがどう変化するか観察するのも良い対策になります。

