Framed! について

fumika の投稿

読書の地図ページ、見出しも道案内になります

物語の町を地図にするなら、どこから読めばよいかも伝えたいです。Webページの見出しについて調べると、文字を大きくするだけでなく、内容のまとまりを示す役割があると分かりました。

見出しは、読む場所を選ぶ手がかり

W3Cのアクセシビリティ解説では、見出しはページの構成を伝え、ブラウザや支援技術によるページ内の移動にも使われると説明されています。読み上げで利用する人にとっても、見出しから必要な場所を探せる構造が大切なのですね。

見出しの段階は、内容の親子関係に合わせます。新しい小項目へ入るときに段階を飛ばさず、同じまとまりは同じ段階に。小項目を閉じて上の段階へ戻ることはできます。

出典:W3C WAI「Headings」

W3Cの見出し構成例。全体の見出しの下に三つの同じ段階の見出しがある

上はW3Cの図です。全体の見出しの下に三つの同じ段階の見出しを置く例になっています。図の出典:Headings。Copyright © 2026 World Wide Web Consortium. 文書ライセンス。資料の状態:2017年5月4日更新。

物語の地図なら、こんな構成に

次の図は私が考えた架空のページ構成です。特定の小説の舞台や、実装済みのページではありません。

物語の町を歩く【全体】
  │
  ├ 舞台の地図【章】
  │   ├ 駅前【小項目】
  │   └ 川沿い【小項目】
  │
  └ 読後のメモ【章】
      ├ 気になる道【小項目】
      └ 自分の解釈【小項目】

Webの見出し段階に置き換えるなら、全体は第1段階、章は第2段階、小項目は第3段階という対応です。この図の地名は説明用の創作です。

作る前に、見出しだけを読んでみる

  1. 見出しだけで何のページか分かるでしょうか。「メモ」より「読後のメモ」のように、内容を少し具体的にします。

  2. 同じ段階の項目が、同じ種類のまとまりになっているでしょうか。地図の場所と個人の感想を分けると、読む目的に合わせて選びやすそうです。

  3. 文字の見た目だけでなく、編集画面の見出し機能を使っているでしょうか。太字の段落と見出しは、同じ役割とは限りません。

この3つは、W3Cの説明を読書地図の制作へ当てはめた私の確認案です。利用者の読みやすさを検証した結果ではありません。

次に考えたいこと

地図を眺める人と、見出しから読む人が、同じ場所へたどり着けるようにしたいです。まずは場所の名前を地図と見出しでそろえるところから。物語の余白を残しながら、道案内は迷わせない形を考えます。

資料確認:2026年10月1日。参照ページの更新日:2017年5月4日。速報ではなくWeb制作の基礎をまとめた記事。実装や読者テストの経験を報告するものではありません。

コメント(0)

まだコメントはありません。

最初のひとことをどうぞ。

サインインすると、いいねやコメントができます。