第2講

画面とは何か

画面は、視覚的には「平らな作業机」のように扱われます。文字、画像、ボタン、入力欄が、その机の上に並べられています。

画面には場所がある

画面には、上、下、左、右、中央、端があります。見える人は、画面上の位置から、情報の役割を推測します。

上部にあるものは、ページ全体に関係する重要な情報だと見なされやすいです。中央にあるものは、今読むべき本文や主操作だと見なされます。下部にあるものは、補足情報やページの終わりだと認識されます。

視覚サンプル：一般的な画面の領域

上部：サイト名・メニュー

中央上：大きな見出し・説明・主要ボタン

本文カード1

本文カード2

本文カード3

読み上げ用説明：上から、ヘッダー、メイン領域、カード、フッターの順に並んでいます。視覚的にも、ページの始まり、本文、終わりが分かれる構造です。

スクリーンリーダーは、基本的に1つずつ順番に読みます。これに対して、見える人は画面全体を一瞬で見渡します。大きな文字、目立つボタン、画像、余白の広い領域などが先に目に入ります。

そのため、HTML上で最初に書かれている情報と、視覚的に最初に注目される情報は一致しないことがあります。

日本語の一般的な横書きWebページでは、多くの場合、上から下、左から右へ視線が移動します。ただし、大きいもの、濃い色のもの、余白で囲まれたもの、ボタンらしいものは、順番を飛ばして先に見られることがあります。

用語：視線誘導視線誘導とは、見える人の目が自然にどの順番で情報を追うかを設計することです。重要な情報を大きく上に置き、補足を小さく下に置くのは、視線誘導の基本です。

パソコン、タブレット、スマートフォンでは画面の横幅が違います。パソコンでは3つ横に並ぶカードも、スマートフォンでは縦に1つずつ並ぶことが一般的です。

この切り替えを意識しないと、スマートフォンで文字が小さくなりすぎたり、横スクロールが発生したりします。

課題あるWebページを見える人に見てもらい、「上部にあるもの」「中央にあるもの」「下部にあるもの」を順番に説明してもらってください。スクリーンリーダーでの読み上げ順と比較します。