共通テスト情報Ⅰ・2-18

ユニバーサルデザインとWebの一問一答

共通テスト「情報Ⅰ」の「情報社会とデザイン」から、ユニバーサルデザインとWebに関する4択問題を10問。「答えと解説を見る」を開くと、正解とその理由がその場で読めます。会員登録は不要です。

この分野の演習

全10問／解説付き・基本無料

アプリ形式で解く（全800問）情報社会とデザインの要点解説を読む

問題

上から順に解いてみてください。答えは各問の下で確認できます。

問12-18・標準

バリアフリーの考え方の説明として、最も適切なものはどれか。

①年齢や能力を問わず初めから誰もが使えるように作る
②利用者が迷わず効率よく満足して使えるかを高める
③障害のある人などが日々直面している障壁を取り除く
④見た目から使い方が自然に分かるように形を工夫する

答えと解説を見る

正解 ③障害のある人などが日々直面している障壁を取り除く

解説
正解は「障害のある人などが日々直面している障壁を取り除く」。既にある段差などの障壁（バリア）をなくす考え方です。

なぜ
バリアフリーは、今ある障壁に対して後から手を打つ考え方です。例えば、階段の横にスロープを付けます。対象は段差などの物理的な障壁だけでなく、制度や心理面の障壁も含みます。ユニバーサルデザインは、初めから誰もが使いやすいように設計する考え方で、出発点が違います。

ひっかけ注意

・「年齢や能力を問わず初めから誰もが使えるように作る」…ユニバーサルデザインの説明。障壁が生まれる前に、最初から多様な人を対象にする点が違い。
・「利用者が迷わず効率よく満足して使えるかを高める」…ユーザビリティの説明。現行のJIS Z 8521:2020では、効果・効率・満足の3つでとらえる（1999年版の訳語は有効さ・効率・満足度）。
・「見た目から使い方が自然に分かるように形を工夫する」…アフォーダンスやシグニファイア（使い方の手がかり）に関わる説明。取っ手の形で引くと分かるようにするなど、操作性を高めるための工夫。

問22-18・標準

「ユニバーサルデザイン」という言葉を提唱した人物はだれか。

①ドナルド・ノーマン
②ヤコブ・ニールセン
③ティム・バーナーズ＝リー
④ロナルド・メイス

答えと解説を見る

正解 ④ロナルド・メイス

解説
正解は「ロナルド・メイス」。アメリカの建築家で、ユニバーサルデザインという言葉を提唱しました。

なぜ
メイスは、障害のある人だけのための特別な設計ではなく、初めからできるだけ多くの人が使える設計を目指しました。彼が設立したノースカロライナ州立大学のユニバーサルデザインセンターでは、1997年に研究者たちがユニバーサルデザインの7原則（だれでも公平に使える、使い方が簡単で分かりやすい、など）をまとめました。

ひっかけ注意

・「ドナルド・ノーマン」…認知科学者。1988年にアフォーダンスをデザインの分野に持ち込み、後にシグニファイアという語も広めた。
・「ヤコブ・ニールセン」…Webなどのユーザビリティの研究者。使いやすさを点検する10の経験則（1990年に作り1994年に改めた）で知られる。
・「ティム・バーナーズ＝リー」…1989年、欧州の研究所CERNでWWW（ワールドワイドウェブ）を考案した人物。

問32-18・標準

高齢者や障害者などに配慮した設計指針「JIS X 8341 シリーズ」のうち、JIS X 8341-3 が対象としているものはどれか。

①ウェブコンテンツ
②事務機器
③電気通信機器
④パーソナルコンピュータ

答えと解説を見る

正解 ①ウェブコンテンツ

解説
正解は「ウェブコンテンツ」。JIS X 8341-3 は、Webページなどを誰もが利用できるようにするための規格です。

なぜ
JIS X 8341 シリーズは、高齢者や障害のある人などに配慮した、情報通信の機器・ソフトウェア・サービスの設計指針です。部ごとに対象を分けています。第3部のJIS X 8341-3:2016は、国際規格ISO/IEC 40500:2012、つまりW3CのWCAG 2.0と同じ内容です。達成基準は、知覚可能・操作可能・理解可能・堅牢の4つの原則のもとに整理され、適合レベルはA・AA・AAAの3段階（Aが最低限）です。なお、W3Cはその後WCAG 2.1・2.2も勧告しており、WCAG 2.2は2025年にISO/IEC 40500:2025になりました（JIS X 8341-3は2016年版が現行）。

ひっかけ注意

・「事務機器」…コピー機・複合機・プリンタなどの事務機器は、第5部（JIS X 8341-5）の対象。
・「電気通信機器」…電話機などの電気通信機器は、第4部（JIS X 8341-4）の対象。
・「パーソナルコンピュータ」…パソコン本体は、第2部（JIS X 8341-2）の対象。第1部は全体に共通する指針。

問42-18・基礎

HTMLで画像を表示するimg要素に、画像の内容を文字で表した「代替テキスト」を指定するときに使う属性はどれか。

①src
②alt
③href
④title

答えと解説を見る

正解 ②alt

解説
正解は「alt」。音声読み上げソフトは、画像の代わりにaltに書かれた文字を読み上げます。

なぜ
目の見えない人や、画像が表示されない環境の人にも、画像が何を伝えているかを文字で届けるためのものです。altは英語のalternative（代わりの）の略です。WCAG 2.0の達成基準1.1.1（レベルA）が、画像など文字以外のものに代替テキストを付けることを求めています。

ひっかけ注意

・「src」…表示する画像ファイルの場所（URL）を指定する属性。画像の中身を文字で伝えるためのものではない。
・「href」…a要素などで、リンク先のURLを指定する属性。画像にリンクを付けるときは、img要素をa要素で囲む。
・「title」…補足情報を指定する属性。マウスを乗せると表示されることがある。代替テキストにはaltを使うため、titleで代わりにはしない。

問52-18・標準

図のように、Webページで、虫眼鏡の絵の画像だけが、検索ページへのリンクになっている。この画像の代替テキストとして最も適切なものはどれか。

自作の模式図

①虫眼鏡の画像
②search.png
③検索
④画像

答えと解説を見る

正解 ③検索

解説
正解は「検索」。リンクになっている画像では、見た目ではなく、押すと何ができるか（目的）を書きます。

なぜ
図のリンクには文字が無く、虫眼鏡の絵しかありません。音声読み上げで、虫眼鏡の画像と聞いても、押すと何が起きるか分かりません。リンクの中身が画像だけのときは、代替テキストでリンクの目的を伝えます。

ひっかけ注意

・「虫眼鏡の画像」…見た目の説明だけで、リンクの目的（検索）が伝わらない。WCAG 2.0の達成基準2.4.4は、リンクの目的が分かることを求めている。
・「search.png」…ファイル名は利用者にとって意味のある情報ではない。altを書かない場合に読み上げソフトがファイル名を読むことがあり、それと同じ状態になる。
・「画像」…何の画像で、どこへ行くリンクなのかが分からないため、リンクの目的を伝えられない。

問62-18・標準

図のように、Webページの見出しの横に、飾りとしてだけ置いた小さな模様の画像がある。音声読み上げソフトの利用者に配慮した代替テキストの扱いとして、最も適切なものはどれか。

自作の模式図

①模様の形や色をalt属性で細かく説明しておく
②alt属性に画像のファイル名を書いておく
③alt属性に『画像』とだけ書いておく
④alt属性を空にして読み飛ばされるようにする

答えと解説を見る

正解 ④alt属性を空にして読み飛ばされるようにする

解説
正解は「alt属性を空にして読み飛ばされるようにする」。内容のない飾りの画像は、読み上げない方が利用者の負担になりません。

なぜ
図の模様は見出しを飾っているだけで、伝える内容がありません。alt="" のように中身を空にすると、読み上げソフトはその画像を飛ばします。飾りの画像まで毎回読み上げられると、大事な情報を聞き取るじゃまになります。なお、alt属性そのものを書かないと、ファイル名などが読み上げられることがあります。

ひっかけ注意

・「模様の形や色をalt属性で細かく説明しておく」…内容のない飾りを細かく読み上げると、聞く人の時間をむだにする。達成基準1.1.1は、飾りを支援技術が無視できるように作ることを求めている。
・「alt属性に画像のファイル名を書いておく」…ファイル名は意味のない情報で、耳で聞いても役に立たない。altを省いたときも、ファイル名が読まれることがある。
・「alt属性に『画像』とだけ書いておく」…役に立たない言葉が毎回読み上げられるだけ。飾りなら alt="" のように空にする。

問72-18・標準

学校のWebサイトを、図のように、トップページから「学校紹介」「部活動」「行事」のページに分け、「部活動」のページからさらに各部のページに分けて、リンクでつないだ。このような階層構造でページをつなぐ利点として、最も適切なものはどれか。

自作の模式図

①分類をたどって、目的のページを探しやすい
②決めた順番どおりに、全ページを読ませやすい
③どのページからも、全ページへ直接移れる
④全ページの見た目を、まとめて変えやすい

答えと解説を見る

正解 ①分類をたどって、目的のページを探しやすい

解説
正解は「分類をたどって、目的のページを探しやすい」。大きな分類から小さな分類へ順にたどれるので、目的の情報に着きやすくなります。

なぜ
情報を順序・階層・分類で整理することを構造化といいます。学習指導要領解説は、構造化の例として、Webサイトの階層構造やハイパーリンク（ページどうしをつなぐリンク）を挙げています。図のような階層構造にすると、利用者はサイト全体の組み立てと、今いる位置をつかみやすくなります。パンくずリストは、この階層の中の現在位置を示す表示です。

ひっかけ注意

・「決めた順番どおりに、全ページを読ませやすい」…ページを1列に順番につなぐ構造（直線的な構造）の利点。手順の説明のように、順に読んでほしい場合に向く。
・「どのページからも、全ページへ直接移れる」…ページどうしを網の目のようにつなぐ構造の特徴。自由に移れる一方、今いる位置は分かりにくくなる。
・「全ページの見た目を、まとめて変えやすい」…構造（HTML）と見た目（CSS）を分けたときの利点。ページのつなぎ方とは関係がない。

問82-18・基礎

Webページ作成で、見出しや段落などの文書の構造はHTMLで表す。これに対して、文字の色や大きさ・配置などの見た目を指定するために使うものはどれか。

①HTTP
②CSS
③URL
④DNS

答えと解説を見る

正解 ②CSS

解説
正解は「CSS」。スタイルシートとも呼ばれ、ページの見た目（デザイン）を指定します。

なぜ
HTMLは、ここは見出し、ここは段落、という文書の骨組みを表します。CSSは、その骨組みにどんな色・大きさ・配置を付けるかを決めます。

ひっかけ注意

・「HTTP」…WebブラウザとWebサーバがデータをやりとりするときの約束事（プロトコル）。暗号化して送るものはHTTPS。
・「URL」…Webページなどがインターネット上のどこにあるかを示す文字列。見た目ではなく、場所を指定するために使う。
・「DNS」…ドメイン名をIPアドレスに変換する仕組み。人が覚えやすい名前から、通信相手の場所を探すために使う。

問92-18・標準

文書の構造をHTMLで、見た目をCSSで、と役割を分けてWebサイトを作る利点として、最も適切なものはどれか。

①通信が暗号化され、盗み見を防ぎやすい
②画像のデータ量が小さく圧縮されやすい
③全ページの見た目をまとめて変えやすい
④サーバが故障しても、表示を続けやすい

答えと解説を見る

正解 ③全ページの見た目をまとめて変えやすい

解説
正解は「全ページの見た目をまとめて変えやすい」。共通のCSSファイルを1か所直せば、それを読み込む全ページの見た目が変わります。

なぜ
見た目の指定がHTMLの中にばらばらに書かれていると、デザインを変えるたびに全ページを直す必要があります。構造と見た目を分けておけば、利用者が文字の大きさや色を自分に合わせて変えることもしやすくなります。

ひっかけ注意

・「通信が暗号化され、盗み見を防ぎやすい」…通信の暗号化はHTTPS（TLSで暗号化したHTTP）の役割。CSSは見た目の指定だけを受け持つ。
・「画像のデータ量が小さく圧縮されやすい」…画像の圧縮はJPEG（非可逆圧縮）やPNG（可逆圧縮）などの形式の役割で、ファイル形式を選ぶときに決まる。
・「サーバが故障しても、表示を続けやすい」…故障への備えは、機器を二重にしておくなどの役割。ページの作り方とは関係がない。

問102-18・標準

Webページで、見出しを見出しとして、読み上げソフトなどの機械にも正しく伝えたい。作り方として最も適切なものはどれか。

①見出しをp要素で書き、CSSで文字を大きく太くする
②見出しの語をstrong要素で囲み、重要だと示す
③見出しの文を画像にし、alt属性にその文を書く
④見出しをh2などの要素にし、見た目はCSSで整える

答えと解説を見る

正解 ④見出しをh2などの要素にし、見た目はCSSで整える

解説
正解は「見出しをh2などの要素にし、見た目はCSSで整える」。h1〜h6要素は見出しを表し、数字が小さいほど上位の見出しです。

なぜ
目で見る人は、大きく太い文字を見出しだと感じます。しかし読み上げソフトは、HTMLの要素で文書の構造を判断します。見出しをh1〜h6要素で示すと、見出しだけをたどって目的の場所へ移動することもできます。WCAG 2.0の達成基準1.3.1（情報及び関係性）も、見た目で伝わる構造を、機械にも分かる形で示すことを求めています。

ひっかけ注意

・「見出しをp要素で書き、CSSで文字を大きく太くする」…p要素は段落を表す。見た目は見出しでも、機械には段落として伝わるため、見出しだけをたどる移動ができない。
・「見出しの語をstrong要素で囲み、重要だと示す」…strong要素は文章の中の重要な部分を示す要素。重要さは伝わっても見出しとは伝わらないため、構造の指定にならない。
・「見出しの文を画像にし、alt属性にその文を書く」…altで文字の内容は伝わるが、見出しであることは伝わらない。画像を使う場合も、h2などの要素の中に置く必要がある。

当サイトは、独立行政法人大学入試センターとは一切関係のない、非公式の学習サイトです。試験に関する最新情報は、大学入試センターの公式サイトでご確認ください。

共通テスト情報Ⅰ 基礎完全対策（全800問）に戻る

※本ページでは、アクセス解析（Googleアナリティクス）と、広告の配信・成果の計測（A8.net）のためにCookie等を利用し、閲覧に関する情報をGoogle LLC・株式会社ファンコミュニケーションズへ送信しています。詳しくはプライバシーポリシーをご覧ください。

※本ページの問題・解説は、生成AI（人工知能）を活用して作成しています。