Webアクセシビリティに配慮したページレイアウトでは、見た目の整い方だけでなく、情報の順序と操作方法をページ間で予測できることが大切です。
同じ役割の要素が同じ名前と位置関係で現れれば、利用者は一度覚えた操作方法を別のページでも使えます。
設計時に確認する対象は、ナビゲーション、見出し、本文の順序、ボタン、エラーメッセージ、レスポンシブ表示です。
ページ間の一貫性が利用を助ける理由
認知的負荷を抑える
認知的負荷とは、情報を理解し、次の操作を判断するために必要な注意や記憶の負担です。
ページごとにメニューの場所やボタンの名前が変わると、利用者は内容を読む前に操作方法を覚え直さなければなりません。
共通部分を一定に保つと、その負担を減らし、目的の情報や操作に注意を向けやすくなります。
現在位置と次の操作を予測しやすくする
サイト名、ページタイトル、ナビゲーション、本文、フッターの関係が安定していると、利用者は「いま何を見ているか」と「次にどこへ進めるか」を判断しやすくなります。
一貫性は、すべてのページを同じ見た目にすることではありません。
ページ固有の内容を変えながら、共通要素の役割、名前、相対的な順序を不用意に変えないことです。
支援技術でも構造を追いやすくする
スクリーンリーダーは、画面の情報やHTMLの構造を音声などで伝える支援技術です。
見出しの階層と主要領域の順序が整っていれば、画面を目で見なくてもページの構成を把握しやすくなります。
見た目だけをCSSで並べ替え、HTML上の順序を別のままにすると、視覚上の流れと読み上げの流れが一致しなくなるため注意が必要です。
見た目とHTML構造を分けて整える
共通領域の役割と順序をそろえる
ページの骨格は、ヘッダー、ナビゲーション、メインコンテンツ、フッターのように、役割がわかる領域へ分けます。
ロゴ、メニュー、検索、本文などの並びは、サイト内で同じ関係を保つと予測しやすくなります。
ただし、すべてのページに不要な機能まで置く必要はありません。
共通機能を置く場合に、その意味や操作方法をそろえることが一貫性につながります。
セマンティックHTMLで構造を示す
セマンティックHTMLとは、見た目ではなく内容の役割に合うHTML要素を使う設計です。
<header>、<nav>、<main>、<footer>を使い分けると、ページの主要領域をHTML上でも区別できます。
<body>
<header>
<p class="site-title">サンプル株式会社</p>
<nav>
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/about">会社情報</a></li>
</ul>
</nav>
</header>
<main>
<h1>サービス紹介</h1>
<section>…</section>
</main>
<footer>サンプル株式会社</footer>
</body>見出しは文字サイズだけで決めず、ページタイトルをh1、その大区分をh2、補足する小区分をh3という順で組み立てます。
レスポンシブ表示でも情報の流れを保つ
レスポンシブ設計では、画面幅に応じて列数やメニューの表示方法が変わります。
その場合も、サイト名、ナビゲーション、本文という情報の関係と、HTML上の自然な順序は保ちます。
見た目を一列に並べ替えるだけでなく、キーボード操作や読み上げでたどる順序も確認すると、構造のずれを見つけやすくなります。
一貫性を点検する基準
| 対象 | 確認すること | 利用者への効果 |
|---|---|---|
| ナビゲーション | 同じ機能が同じ名前で示され、位置関係が不必要に変わっていないか | 移動方法を覚え直す負担を減らす |
| サイト名とページタイトル | サイトと現在のページを区別できる位置と見出しになっているか | 現在位置を判断しやすくする |
| 見出し | h1、h2、h3の階層が内容のまとまりと一致しているか | 本文の全体像をつかみやすくする |
| ボタンとリンク | 同じ操作に同じ名前、外観、配置のルールを使っているか | 操作結果を予測しやすくする |
| 色、文字、余白 | ページごとに読みやすさの基準が変わっていないか | 情報の区切りを見つけやすくする |
| エラーメッセージ | 表示位置と表現がそろい、次に直す内容がわかるか | 入力エラーから戻りやすくする |
| レスポンシブ表示 | 画面幅が変わっても情報と操作の順序が不自然にならないか | 端末が変わっても同じ流れで利用できる |
ばらつきのある実装を置き換える
ページごとに構成が異なる例
- トップページでは上部にあるメニューが、別のページでは説明なく左側へ移る。
- 同じ送信操作なのに、ページによってボタンの名前や外観が異なる。
- ページタイトルの見た目は同じでも、使われている見出しレベルが異なる。
- スマートフォン表示で、本文より先に読むべき要素がHTML上では後ろに置かれている。
この状態では、利用者は新しいページへ移るたびに操作方法と情報の読み方を確かめ直すことになります。
共通ルールで整えた例
- ヘッダー、ナビゲーション、メインコンテンツ、フッターの役割と順序をそろえる。
- 同じ操作には同じ名前とデザインのボタンを使う。
- ページタイトルと見出しの階層を共通ルールに沿って実装する。
- 画面幅が変わっても、情報の関係と操作順序を保つ。
共通ルールがあると、例外が必要なページも「どこを、なぜ変えるのか」を判断しやすくなります。
一貫性を運用で保つ方法
共通コンポーネントを再利用する
ヘッダー、フッター、ナビゲーション、ボタン、エラーメッセージは、共通テンプレートやUIコンポーネントとして管理します。
同じ部品を再利用すれば、名称や見た目の変更を各ページへ個別に反映する作業を減らせます。
ただし、部品を共通化しただけでは内容の順序まで自動的に整うとは限らないため、ページ全体の構造も確認します。
デザインシステムに判断基準を残す
デザインシステムは、色、文字、余白、部品の使い方を、再利用できるルールとしてまとめたものです。
見た目の指定だけでなく、ボタンの名前、見出しの使い方、エラーの示し方、レスポンシブ時の順序も記録すると、実装とレビューで同じ判断基準を使えます。
変更時のチェックリストを決める
UIを変更するときは、変更したページだけでなく、同じ部品を使うページへの影響も確認します。
- 主要なページで共通領域の順序と名称を比較する。
- パソコンとスマートフォンの両方で表示順を確認する。
- 見出しの階層とHTML上の順序を確認する。
- 同じ操作のボタンとエラーメッセージを比較する。
- 例外を設けた場合は、その理由と対象範囲を記録する。
公開前に確認するチェックリスト
- ページ本文に、内容を特定できるページタイトルがある。
- h2とh3が順番に使われ、見た目だけで見出しを表現していない。
- ナビゲーションの名前と位置関係が他の主要ページとそろっている。
- 同じ機能のボタンとリンクに、共通の名前とデザインを使っている。
- エラーメッセージの位置と表現が統一されている。
- スマートフォン表示でも、情報と操作の順序が自然につながる。
- 色、文字、行間、余白がページごとに大きく変わっていない。
- 共通部品を変更したあと、関連するページも確認している。
ページレイアウトの一貫性は、装飾をそろえる作業だけではありません。
利用者が情報の場所と操作結果を予測できるように、見た目、HTML構造、共通部品、運用ルールを同じ方針で整えることです。