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

情報デザインとユーザビリティの一問一答

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

この分野の演習

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

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

問題

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

問12-16・基礎

利用者が製品やサービスを利用する際に感じる「使いやすさ」を、「効果」「効率」「満足」などの観点から総合的に表す言葉はどれか？

①ユーザビリティ
②アクセシビリティ
③ユニバーサルデザイン
④信頼性

答えと解説を見る

正解 ①ユーザビリティ

解説
正解は「ユーザビリティ」。製品やサービスの使いやすさを、効果・効率・満足の3つでとらえた言葉です。

なぜ
国際規格ISO 9241-11（日本の規格はJIS Z 8521:2020）は、ユーザビリティを、特定の利用者が特定の利用状況で目標を達成するときの、効果・効率・満足の度合いとしています。効果は目標を正しく最後まで果たせるか、効率はかかる時間や手間の少なさ、満足は使った人が不満なく受け入れられるか、です。1999年版のJISでは有効さ・効率・満足度と訳していたため、教科書によって言い方が違うことがあります。同じ製品でも、使う人や場面が変われば、使いやすさの度合いも変わります。

ひっかけ注意

・「アクセシビリティ」…年齢や障害の有無などにかかわらず、そもそも利用できるかどうかに重点を置く言葉。Webページの基準は、日本ではJIS X 8341-3。
・「ユニバーサルデザイン」…使いやすさの度合いではなく、初めからできるだけ多くの人が使えるように設計する考え方。建築家ロナルド・メイスが提唱した。
・「信頼性」…故障せずに、決められた働きを続けられる度合い。平均故障間隔（MTBF）が長いほど高く、使いやすさとは測る対象に違いがある。

問22-16・基礎

高齢者や障害者を含むすべての人が、心身の機能や利用環境に関わらず、情報やサービスを利用できるようにすることを何と呼ぶか？

①ユーザビリティ
②アクセシビリティ
③トレーサビリティ
④スケーラビリティ

答えと解説を見る

正解 ②アクセシビリティ

解説
正解は「アクセシビリティ」。高齢者や障害のある人を含め、だれもが情報やサービスを利用できることです。

なぜ
アクセシビリティは、利用しやすさ・近づきやすさという意味です。Webでは、画面の読み上げに対応する、文字を拡大できるようにする、文字と背景の色の差を十分にとる、などの工夫があります。日本では、JIS X 8341シリーズ（第3部がWebコンテンツ）がその基準です。ユーザビリティが使いやすさの度合いなら、アクセシビリティはそもそも利用できるかどうかに重点があります。

ひっかけ注意

・「ユーザビリティ」…使いやすさの度合い。JIS Z 8521:2020では効果・効率・満足の3つでとらえ、利用できることを前提に、その質を問う点が違い。
・「トレーサビリティ」…製品やデータの履歴や流れを、後からたどれること。食品なら生産から販売までの経路を追えるため、問題の原因を探しやすい。
・「スケーラビリティ」…利用者や処理量が増えたとき、機器を足すなどして規模を広げて対応できる度合い。

問32-16・基礎

文化、言語、年齢、能力の違いに関わらず、できるだけ多くの人が利用できるように最初から設計する考え方を何と呼ぶか？

①バリアフリー
②エコデザイン
③ユニバーサルデザイン
④レスポンシブデザイン

答えと解説を見る

正解 ③ユニバーサルデザイン

解説
正解は「ユニバーサルデザイン」。はじめから、できるだけ多くの人が使えるように設計する考え方です。

なぜ
ユニバーサルデザインは、年齢・言語・能力などの違いを前提に、最初から全員を対象にして設計します。アメリカの建築家ロナルド・メイスが提唱しました。自動ドアや、言葉が分からなくても意味が伝わる案内用図記号などが例です。既にある障壁を後から取り除くバリアフリーとは、出発点が違います。

ひっかけ注意

・「バリアフリー」…障害のある人などが直面している障壁を、後から取り除く考え方。段差などの物理的な障壁だけでなく、制度や心理面の障壁も対象になる。
・「エコデザイン」…作る・使う・捨てるまでの環境への負担を減らすように製品を設計する考え方。配慮の対象が人の違いではなく環境である点が違い。
・「レスポンシブデザイン」…画面の幅に合わせてWebページの配置を自動で変える作り方。スマートフォンとパソコンで同じページを見やすくするための技術。

問42-16・標準

ギブソンが提唱し、ノーマンがデザインに広めた、対象物と人との関係から生まれる「どのように取り扱えるか」という性質（例：ドアノブがあれば回せそうに見える）を何と呼ぶか？

①シグニファイア
②マッピング
③フィードバック
④アフォーダンス

答えと解説を見る

正解 ④アフォーダンス

解説
正解は「アフォーダンス」。モノと人との関係から生まれる、そのモノでできる行為の可能性のことです。

なぜ
アフォーダンスは、心理学者ギブソンが作った言葉です。ノーマンが1988年にこれをデザインに取り入れました。平らな板は押せそう、取っ手はつかんで引けそう、というように、形などが人にできる行為を示します。ノーマンは後に、行為の手がかりを知らせる表示や目印を、アフォーダンスと区別してシグニファイアと呼びました。

ひっかけ注意

・「シグニファイア」…どこをどう操作すればよいかを知らせる表示や目印（押す、と書いた札など）。ノーマンが2008年の論考で、アフォーダンスと分けて使うよう強調した。
・「マッピング」…操作するものと結果の対応関係。コンロのつまみを火口と同じ並びに置けば、どのつまみがどの火口か迷わないため使いやすい。
・「フィードバック」…操作の結果を利用者に知らせること（ボタンを押すと音が鳴るなど）。操作した後に返す情報である点が違い。

問52-16・基礎

Webページのデザインにおいて、文字色と背景色の明るさの差を十分にとり、読みやすくすることを何の確保と言うか？

①コントラスト比
②アスペクト比
③解像度
④彩度

答えと解説を見る

正解 ①コントラスト比

解説
正解は「コントラスト比」。文字色と背景色の明るさの差を数値で表したものです。

なぜ
文字と背景の明るさの差が小さいと、視力の弱い人や、屋外で画面を見る人には読みにくくなります。JIS X 8341-3（WCAG 2.0と同じ内容）の達成基準1.4.3では、通常の文字で4.5対1以上、大きな文字（18ポイント以上、太字なら14ポイント以上）で3対1以上を求めています。コントラスト比は、同じ色どうしの1対1から、白と黒の21対1までの値をとります。W3CのWCAG 2.2でも、この基準は変わっていません。

ひっかけ注意

・「アスペクト比」…画面や画像の横と縦の長さの比。テレビやパソコンの画面では16対9がよく使われ、色の明るさとは関係がない。
・「解像度」…画像や画面をどれだけ細かい点（画素）で表すかの度合い。横1920×縦1080画素のように表し、多いほどなめらか。
・「彩度」…色の三属性の1つで、色の鮮やかさの度合い。白・灰色・黒は彩度のない無彩色で、明るさの差を表すものではない。

問62-16・基礎

色覚の多様性に配慮し、色だけで情報を伝えず、形や文字などを併用して誰にでも分かりやすくする考え方を何と呼ぶか？

①RGBカラーモデル
②カラーユニバーサルデザイン
③CMYKカラーモデル
④グレースケール

答えと解説を見る

正解 ②カラーユニバーサルデザイン

解説
正解は「カラーユニバーサルデザイン」。色の見え方が違う人にも情報が正しく伝わるように配慮する考え方です。

なぜ
赤と緑の区別がつきにくいなど、色の見え方は人によって違います。そのため、色の違いだけで意味を伝えると、伝わらない人が出ます。グラフの線を実線と点線で分ける、ランプの状態を点滅と点灯でも区別する、などの工夫をします。Webの基準WCAG 2.0（JIS X 8341-3と同じ内容）の達成基準1.4.1でも、色だけで情報を伝えないことを求めています。

ひっかけ注意

・「RGBカラーモデル」…光の三原色（赤・緑・青）を混ぜて色を表す方法（加法混色）。ディスプレイで使い、3色を最も強く混ぜると白になる。
・「CMYKカラーモデル」…印刷で使う4色（シアン・マゼンタ・イエロー・黒）のインクで色を表す方法（減法混色）。色を重ねるほど暗くなる。
・「グレースケール」…色味をなくし、白から黒までの明るさの段階だけで表す方法。1画素8ビットなら256段階になる。

問72-16・基礎

Webサイトなどで、現在利用者がサイト内のどこにいるかを階層構造で示した表示（例：ホーム > 製品 > パソコン）を何と呼ぶか？

①サイトマップ
②ナビゲーションバー
③パンくずリスト
④フッター

答えと解説を見る

正解 ③パンくずリスト

解説
正解は「パンくずリスト」。サイトの中で今どこにいるかを、階層の順に並べて示すリストです。

なぜ
童話のヘンゼルとグレーテルが、帰り道が分かるようにパンくずを落としていった話が名前の由来です。利用者は現在の位置が分かり、上の階層にすぐ戻れます。Webアクセシビリティの基準WCAG 2.0でも、達成基準2.4.8（現在位置）を満たす方法の1つとして挙げられています。

ひっかけ注意

・「サイトマップ」…サイト全体のページ構成を一覧にしたページ。全体を見渡すためのもので、今いる位置を示すものではない。
・「ナビゲーションバー」…主なページへのリンクを並べたメニュー。どのページでも同じ場所に置き、主な入口へすぐ移れるようにするためのもの。
・「フッター」…ページの一番下にある領域。著作権表示や問い合わせ先などを置く場所で、階層の道筋を示すためのものではない。

問82-16・基礎

文字に装飾的な「うろこ（飾り）」がついている書体を何と呼ぶか？

①サンセリフ体（ゴシック体）
②等幅フォント
③プロポーショナルフォント
④セリフ体（明朝体）

答えと解説を見る

正解 ④セリフ体（明朝体）

解説
正解は「セリフ体（明朝体）」。文字の線の端に小さな飾り（セリフ）がある書体です。

なぜ
セリフは欧文書体の線の端の飾りです。日本語の明朝体にも、うろこと呼ばれる三角の飾りがあり、セリフ体の仲間に分けられます。Webの見た目を指定するCSSの仕様でも、明朝体は serif、ゴシック体は sans-serif の仲間とされています。明朝体は横線が細く縦線が太いなど、線の太さに強弱があります。

ひっかけ注意

・「サンセリフ体（ゴシック体）」…飾りのない書体。サンは、ないという意味。線の太さがほぼ一定である点も明朝体との違い。
・「等幅フォント」…どの文字も同じ幅で並ぶ書体。縦の位置がそろうため、プログラムの表示などに使う。飾りの有無による分け方ではない。
・「プロポーショナルフォント」…文字ごとに幅を変えた書体（iは狭く、Wは広い）。幅の違いによる分類で、飾りの有無による分け方ではない。

問92-16・基礎

非常口のマークのように、文字を使わずに意味や情報を直感的に伝えるために図案化された記号を何と呼ぶか？

①ピクトグラム
②ロゴタイプ
③インフォグラフィックス
④ダイヤグラム

答えと解説を見る

正解 ①ピクトグラム

解説
正解は「ピクトグラム」。文字を使わず、図で意味を伝える記号です。

なぜ
ピクトグラムは、言葉が分からない人にも、一目で意味を伝えられます。非常口、トイレ、車いす使用者用の設備などの案内に使われます。日本ではJIS Z 8210で案内用図記号として定められています。細かい部分を省いて特徴だけを残すので、情報デザインの手法では抽象化の例です。

ひっかけ注意

・「ロゴタイプ」…会社名や商品名の文字を、決まった形にデザインしたもの。文字そのものを使う点が、文字を使わないピクトグラムとの違い。
・「インフォグラフィックス」…データや情報を、図・記号・グラフを組み合わせて1つにまとめて表したもの。記号1つではなく、全体で説明する点が違い。
・「ダイヤグラム」…路線図のように、ものごとのつながりや流れを線や矢印で単純化して表した図。1つの意味を示す記号ではなく、関係全体を示すための図。

問102-16・基礎

情報を視覚的に表現して分かりやすく伝える「インフォグラフィックス」の例として、適切でないものはどれか？

①駅の並びを示した路線図
②撮影したままの風景写真
③等圧線を描いた天気図
④円グラフや棒グラフ

答えと解説を見る

正解 ②撮影したままの風景写真

解説
正解は「撮影したままの風景写真」。見た目は絵でも、情報を整理して図にしたものではないので、インフォグラフィックスではありません。

なぜ
インフォグラフィックスとは、データや情報を整理し、図・記号・グラフなどで分かりやすく表したものです。大切なのは、伝えたい情報を選んで形にしている点です。写真をそのまま載せただけでは、情報の整理や図解になっていません。

ひっかけ注意

・「駅の並びを示した路線図」…実際の距離や形より、駅の順番と路線のつながりが分かることを優先して単純化した図。細部を省くため、抽象化の例でもある。
・「等圧線を描いた天気図」…気圧や前線などの観測データを、等圧線や記号で図にしたもの。数値の表のままより、全体の様子をつかむために使う。
・「円グラフや棒グラフ」…円グラフは全体に占める割合、棒グラフは量の大小を比べるときに向く。数値を目に見える形にする可視化の例。

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

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

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

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