情報デザイン

関連する要素を近くに配置する近接、位置や基準線をそろえる整列、共通する表現を繰り返す反復、違いをはっきり見せる対比があります。

例えば、同じ役割のボタンに共通の形を使うことは反復に当たります。重要な見出しだけ大きさや太さを変えて目立たせることは対比の考え方です。

近接は関連する情報をまとめること、整列は配置の基準をそろえることです。

近接・整列・反復・対比を区別する

シグニファイアは、利用者にどのような操作ができるかを伝える知覚可能な手掛かりです。押せそうに見えるボタンや、ドラッグできることを示す取っ手などが例です。

利用者が迷わず操作できるようにするには、機能そのものだけでなく、その機能の存在や使い方が伝わる表示が重要です。

シグニファイアは操作方法を示す手掛かり

ユニバーサルデザインは、年齢や文化、身体的な特性などの違いにかかわらず、できるだけ多くの人が利用しやすいように設計する考え方です。

アクセシビリティは、さまざまな能力や特性を持つ人が情報やサービスを利用できる度合いや、そのための配慮を表します。文字の読み上げへの対応や、キーボードだけでも操作できる設計などがあります。

ピクトグラムは意味を図記号で表現し、言語だけに頼らず情報を伝える方法です。インフォグラフィックは数値や関係を図やグラフなどで視覚的に表します。

違いのある利用者にも使いやすい設計を目指す

基本の問題(このページのために作った問題・本番と同じ四肢択一)

関連する入力欄とその説明を近くに配置し、別の内容とは間隔を空けて見せる設計は、デザインの四つの原則のうちどれに最も当てはまるか。

1. 近接
2. 整列
3. 反復
4. 対比

答えと解説を見る

正解: 近接

関連する要素を近づけて一つのまとまりとして見せる考え方は近接である。

まちがえやすい点: 整列は、要素の左端や基準線などをそろえる考え方である。

基本の問題(このページのために作った問題・本番と同じ四肢択一)

シグニファイアの例として最も適切なものはどれか。

1. クリックできることが分かるようにリンク文字を視覚的に区別する
2. 操作後に処理が完了したことをメッセージで利用者へ知らせる
3. 頻繁に使う機能を画面上部の見つけやすい位置に配置する
4. 入力項目の形式が誤っているときにエラー内容を表示する

答えと解説を見る

正解: クリックできることが分かるようにリンク文字を視覚的に区別する

シグニファイアは、どの部分をどのように操作できるかを利用者へ示す知覚可能な手掛かりである。処理結果やエラーの通知はフィードバックに当たる。

まちがえやすい点: 操作可能性を示す手掛かりと、操作結果を知らせるフィードバックを区別する。

基本の問題(このページのために作った問題・本番と同じ四肢択一)

アクセシビリティに配慮したWebサイトの設計として最も適切なものはどれか。

1. 色の違いだけで入力エラーの箇所を利用者に伝える
2. 画像内の文字だけで重要な情報を利用者に伝える
3. キーボード操作でも主要な機能を利用できるようにする
4. マウスを使う操作だけで全ての機能を利用するようにする

答えと解説を見る

正解: キーボード操作でも主要な機能を利用できるようにする

キーボードでも主要な機能を操作できる設計は、さまざまな利用者の操作手段に配慮したアクセシビリティ向上策である。色だけに頼る表示やマウスだけを前提とする設計は利用できる人を限定しやすい。

まちがえやすい点: 特定の感覚や入力装置だけに依存しない設計を意識する。