長文記事では、見出し構造が目次の代わりになります。WebP品質比較の記事をサンプルに、ページタイトルからまとめまでが同じ階層で読めるかをビルド結果から確認しました。

この記事の目次
  1. 検証条件
  2. 計測結果
  3. 記事タイトルと本文章が分離できた
  4. 長文化で見出しを細分化する
  5. 長文化後に変わった見出し構成
  6. この検証で確かめたかったこと
  7. 一次情報として残したもの
  8. 結果を読むときの注意
  9. 実際の制作でどう判断したか
  10. 同じ確認を再現する手順
  11. 次に確認する項目
  12. アクセシビリティ記事の公開前チェック
  13. まとめ

検証条件

  • 品質比較記事のビルド済みHTMLを対象
  • h1とh2の開始タグを集計
  • サイドバーのstrong要素は見出し件数へ含めない
  • 見出し直後に対応する本文があるか目視した

計測結果

記事ページの見出し件数
要素件数内容
h1 1件記事タイトル
h2 5件条件・結果・考察・まとめ
空見出し 0件該当なし

記事タイトルと本文章が分離できた

h1は記事固有のタイトルだけで、サイト名はリンク内のテキストとして配置されています。本文の各章はh2で同じ階層に揃っていました。

サイドバーの小見出しはstrongを使っていますが、内容が増えて独立した領域になる場合はh2やh3への変更を検討します。

長文化で見出しを細分化する

本文を3000文字以上へ増やすと一つの章が長くなるため、必要に応じてh3を追加します。ただし短い段落ごとに見出しを付け、文章を細切れにはしません。

見出しは検索語を詰め込む場所ではなく、読者が途中から必要な箇所へ移動できる短い案内として書きます。

長文化後に変わった見出し構成

初期監査時は本文h2が五件でしたが、現在は固有考察、再現手順、公開前チェックを加えています。記事の厚みを増したことで見出し数も増え、以前の計測値は履歴として扱う必要が生じました。

章が増えても、検証条件、結果、解釈、再現、まとめという順序は維持します。読者が数値だけ確認する場合と、追試まで行う場合の双方で必要箇所を見つけやすくするためです。

この検証で確かめたかったこと

今回の出発点は「記事ページの見出しを監査。h1が1件、本文h2が5件で扱う値を、現在のサイトと公開ファイルから再現できる形で確認できるか」という疑問です。Web制作の記事では推奨値だけが独り歩きしやすく、条件が異なる結果を並べても判断材料になりません。そこで対象を当サイトの実ファイルへ限定し、変更した項目と固定した項目を分けました。数値が小さいか大きいかを競うのではなく、現在の構成で次の作業を決められるかを目的にしています。

想定している読者は、アクセシビリティを自分のサイトでも具体的に点検したい人です。完成済みの大規模サイトではなく、少数の記事や画像から始める個人サイトでも追試できるよう、特別な計測サービスを前提にしていません。結果だけを持ち帰るのではなく、対象の選び方、単位、除外した要素まで確認すると、自分の環境との差を整理しやすくなります。

一次情報として残したもの

「記事ページの見出しを監査。h1が1件、本文h2が5件」で明示した対象をビルド済みHTML、CSS、画像、設定ファイルから読み取り、品質比較記事のビルド済みHTMLを対象という条件を変えずに記録したことを記録の中心にしました。記事内の表は、その記録から必要な値だけを転記しています。一般的な解説を先に置いて数字を当てはめるのではなく、先に対象ファイルを決め、取得できた値から考察を書く順序です。元データと公開本文の数字が食い違わないよう、単位はbyte、px、件数など測定時の形式をできるだけ保ちました。

「記事ページの見出しを監査。h1が1件、本文h2が5件」の計測日は2026年6月10日です。Astro 5で静的出力した時点のファイルを対象としているため、素材やテンプレートを変更すれば値も変わります。この記事は永続的な基準値ではなく、アクセシビリティの状態を残したスナップショットです。再測定で結論が変わる場合は、更新日と変更理由を追記します。

結果を読むときの注意

「記事ページの見出しを監査。h1が1件、本文h2が5件」は当サイト一件の測定であり、別のアクセシビリティ環境へ同じ数値をそのまま一般化できないという限界があります。一つの指標だけで「速い」「使いやすい」「正しい」と断定しないことが重要です。たとえば容量が小さくても表示が崩れれば採用できず、規格上の目安を満たしても実際の操作が難しい場合があります。表の値は判断の入口であり、最終的な利用体験の代わりではありません。

このアクセシビリティ検証で差が出なかった場合も、作業の優先度を下げる根拠になります。反対に大きな差が出た場合は、「記事ページの見出しを監査。h1が1件、本文h2が5件」で明示した対象をビルド済みHTML、CSS、画像、設定ファイルから読み取り、品質比較記事のビルド済みHTMLを対象という条件を変えずに記録したという記録へ戻り、条件の混入や数え方を再確認します。都合のよい値だけを採用せず、対象、式、除外項目を本文へ残すのはそのためです。

実際の制作でどう判断したか

この結果を受け、当サイトでは「今回の結果をアクセシビリティの公開前チェックへ組み込み、変更時には同じ手順で差分を確認する」と判断しました。数値を掲載するだけではサイト改善につながらないため、CSS、画像の書き出し、記事テンプレート、公開前チェックのいずれかへ反映します。採用理由を文章にしておくと、後から別の設定へ変えるときにも、以前の判断を検証できます。

ただし「今回の結果をアクセシビリティの公開前チェックへ組み込み、変更時には同じ手順で差分を確認する」という判断を全ページへ一律適用するわけではありません。今回の対象と、トップ、記事、固定ページでは利用目的が異なります。「記事ページの見出しを監査。h1が1件、本文h2が5件」は当サイト一件の測定であり、別のアクセシビリティ環境へ同じ数値をそのまま一般化できないという限界もあるため、共通ルールを作ったうえで例外の理由を残す方が、数値だけを守るより保守しやすいと考えています。

同じ確認を再現する手順

再検証するときは、品質比較記事のビルド済みHTMLを対象という対象条件と、h1とh2の開始タグを集計を固定して同じ確認を行うのが基本手順です。最初に対象ファイルを複製するかビルド結果を保存し、変更前の値を残します。次に一度に変更する条件を絞り、同じ単位で変更後を取得します。最後に差分を計算し、画面上の見え方や操作も確認します。複数の変更を同時に入れると、どの変更が結果へ効いたのか分からなくなります。

自分のサイトで「記事ページの見出しを監査。h1が1件、本文h2が5件」と同じ確認を行っても、同じ数字になる必要はありません。重要なのは、品質比較記事のビルド済みHTMLを対象という対象条件と、h1とh2の開始タグを集計を固定して同じ確認を行うという条件を変更前後で揃えることです。OS、ツールの版、画面幅、対象URLなど結果へ影響する情報を残せば、数値が異なっても比較可能な一次記録になります。

次に確認する項目

今回扱わなかった要素は、「記事ページの見出しを監査。h1が1件、本文h2が5件」は当サイト一件の測定であり、別のアクセシビリティ環境へ同じ数値をそのまま一般化できないという点です。次回は対象を広げるのではなく、この不足を一つずつ切り分けます。ファイル容量の次に表示時間、寸法の次に実機操作というように、異なる種類の指標を組み合わせると、単独の数値による誤解を減らせます。

「記事ページの見出しを監査。h1が1件、本文h2が5件」を再現できないという連絡や数値の指摘が届いた場合は、「記事ページの見出しを監査。h1が1件、本文h2が5件」で明示した対象をビルド済みHTML、CSS、画像、設定ファイルから読み取り、品質比較記事のビルド済みHTMLを対象という条件を変えずに記録したという一次記録と本文を照合します。結論へ影響する修正では更新日を変更し、何が変わったかを残します。アクセシビリティの記事を完成品として固定せず、サイトの変更とともに追試できる記録として維持します。

アクセシビリティ記事の公開前チェック

アクセシビリティの記事では、個別の結果に加えて「見た目以外の手掛かりでも構造と操作方法が伝わり、拡大や支援技術で内容を失わないか」を公開前の共通確認点にしています。今回の表だけが良好でも、関連する画面やファイルへ悪影響があれば採用しません。変更前の状態を残し、記事で扱った指標と実際の利用場面を往復して確認します。

このチェックは「記事ページの見出しを監査。h1が1件、本文h2が5件」の文字数を増やすためではなく、測定から公開判断までの抜けを減らすために使います。自動検査の候補を目視で確認する、キーボードとタッチの双方を試す、色、寸法、文言を一つの指標だけで判定しないを確認し、自動検査だけでは判断できない箇所を画面と文章で読み直します。読者が追試できない説明なら、数値が基準内でも公開しません。

アクセシビリティの記事を更新するときは、結論だけを新しい値へ置き換えず、検証条件、表、本文の参照値、タイトル、descriptionを順番に照合します。以前の手順を再現できなくなった場合は、「記事ページの見出しを監査。h1が1件、本文h2が5件」は当サイト一件の測定であり、別のアクセシビリティ環境へ同じ数値をそのまま一般化できないという制約がどう変わったかも記録します。どの変更で結果が動いたかを追える状態を優先します。

  • 自動検査の候補を目視で確認する
  • キーボードとタッチの双方を試す
  • 色、寸法、文言を一つの指標だけで判定しない

まとめ

サンプル記事はh1一件と本文h2五件で整理されていました。長文化後はh3の必要性と、見出しだけを読んだ際の理解しやすさを再確認します。