Lycolog

前回のジャンル::調査の記事（2025/05/14執筆）から一年半ほど、久々の調査記事だ。今回は前々から気になっていたが調べてこなかったことについて調べたので、そのことを書いてゆく。

一個前の記事にもあるとおり、ここ最近CMSの開発を続けていて、どうしても記事本文の見出しレベルを上げて使えるHタグを一つでも増やしたい思いが募っていたので、これの実現性について調べることにした。

先に断っておくと私はWebアクセシビリティの専門家ではないし、単なる素人だ。よってこの記事に書いてあることはすべて素人判断である。

考え始めたきっかけ

現在このサイトでは記事本文中に書いた見出し構文(#)はH3から始まることになっており、H2から始めたい思いがあった。これは単に使える見出しの深さが増えるからだ。HタグはH6までしかないので、使えるHタグの数が増えるのは嬉しいことだった。

Hタグが足りない問題はLyndbaumより前、adiaryよりもっと前、WordPressを使っていたころから、ずっと思っていた。これは私がやたら長文を書いてしまったり文章構成がへたくそな部分も大いにあると思うが、深いHタグが欲しくなるケースが多々あったのだ。今でもそうだ。仕事で使っていたDocBaseに対して使えるHeadingの階層を増やしてほしいと要望を出したこともあるくらいだ。

私は見出しに対して非常に執着心があり、5年前にはRedmineの見出し目次を追従させるuser.jsを書いてたほどで、その魂は見出し追従機能を持つLyndbaumの標準テーマにも引き継がれている。

それゆえに使える見出しの階層を増やすことができないかというのは長年の悩みだった。

もし左の構造を右の構造に転換できればH3始まりをH2に始まりにできるわけだ。

ただ、この案には一つ引っかかる点があった。記事ページだけを見れば、H1は記事タイトルの一つだけになるので何の問題もない。しかしこのサイトは一覧ページに記事全文が並ぶ古典的なレイアウトなので、一覧ページでは記事の数だけH1が並ぶことになる。私の理解ではH1は1ページに一つ、ページタイトルに対して使うものであり、これを愚直にやってしまうとHTMLセマンティクスを壊してしまう懸念があった。

しかし、私は同時に「サイトの中にH1を複数配置することは問題ない」という相反する情報も持っていた。いつ見聞した情報かは全く記憶にないが、頭の中にあった情報だ。

そこでまず、この情報の真偽を調べることにした。

H1タグは何であり、どう使うことができるのか？

こういう時に頼りになるのはMDNだと思って私はすぐに<h1>–<h6> セクション見出し要素 - HTML | MDNを開いてみたが、核心的な情報はなかった。

<h1>～<h6>はHTMLの要素で、セクションの見出しを6段階で表します。<h1>が最上位で、<h6>が最下位です。

MDNに書かれていたH1、もといHタグの説明は大まかにはこの一行だった。あとは精々次のような注意書きがあっただけである。

1つのページに複数の<h1>要素を使用しない

1つのページに複数の<h1>要素を使用することはHTML標準では認められていますが（入れ子でない限り）、これはよい習慣とはみなされません。

つまりH1とは見出しである。1つのページに複数の<h1>要素を使用することは、HTML標準では認められていても、よい習慣ではないと書いてあるだけだ。何が良くないのかは全く書かれていない。

ひとまず私は1つのページにH1を複数配置することは問題になる可能性があるということを覚えた。

世間がHタグをどのように使っているか調べてみた

MDNに具体的な説明がないので困った私は適当に思いついたサイトをピックアップして、Hタグがどのように使われているかを簡単に調べてみることにした。すると面白い発見があった。

20個のサイトでHタグの使用状況を調べた

調べたサイトの数が20個なのは、これ以上良いサイトがぱっと出てこなかったからである。部分的な項目についてはこの表にないサイトも見ている。

サイトのリンク先には不適切なものも含まれるため注意。リンクは後から足したため、確認したページと異なる可能性がある。参考程度の情報。また1サイト数分で見ている*1ため内容には誤りがある可能性がある。

20個のサイトで確認した、使用割合の結果

調べた結果、次のことが分かった。

つまり過半数のサイトでサイトタイトルにH1が使われていないし、過半数のサイトで記事ページで記事タイトルがH1だし、過半数のサイトは記事の最初に出てくるHタグがH2なのだ。

これは記事ページに限って言えば、私がやろうとしている構成は多数派に属するということを意味する。残る論点は、全文が並ぶ一覧ページでH1が複数になることだけだ。

その一覧ページについては、一覧の記事タイトルをH1にしているサイトは2つしかなかった。ただし、一覧に記事全文を出しているサイトが20サイト中5サイトしかないので、そもそもの母数が小さい。

この少ない母数に入るサイトの中でDaring Fireballとるるせなーれは、私にとってはかなり理想形だった。何故なら、サイトタイトルがHなし、一覧と記事ページの記事タイトルがH1で、本文中に出現する最初のHタグはH2だったからだ。これがあるべき姿なのかどうかは議論の余地がありそうだが、運命みたいなものは感じた。だって私がやろうとしてるのはサイトのH階層を浅くして、MarkdownパーサーのH階層を一段上げることだからだ。

もう一つがはてなブログだ。個人的にはSEOに強い印象がなく、かつて使っていた限りでは、ろくにインデックスされた記憶もない。しかし、はてなブログはこの形式でも一応インデックス自体はされているので、つまり検索エンジンのクローラーが読んでくれる可能性があるということだ。あとは評価がどうなるかという部分にはなってくる。

サイトタイトルについていえばGitHubもBulmaやMaterial UIの公式サイトもいわゆるヒーローバナーのタイトルにH1は入っていない。つまりここは削れる公算が大きい。そもそも<title>に書いてあることと同じ文字列にH1が必要かどうかは一つ疑問でもある。

H1タグが1ページに複数あるサイトは検索エンジンからどう評価されるのか？

Google公式SEOスターターガイド | Google検索セントラルによると、Googleはセマンティクスをそもそも評価していないらしい。それも見出しに焦点を当てて説明がされているほどにだ。

見出しの数や順序
見出しを意味的な順番にすることは、スクリーンリーダーにとっては素晴らしいことですが、Google検索にとっては順番どおりに使われていなくても問題ありません。ウェブは一般に正しくないHTMLで書かれています。そのため、Google検索がHTML規格に潜むセマンティックスの意味に依存することはめったにありません。

また、ページごとに魔法の見出し数や理想的な見出し数といったものが存在することもありません。ただ、リンクの数が多すぎると感じる場合、実際にそうである可能性が高いと言えます。

つまり見出しの意味はGoogleにとって無価値な可能性があり、ページにH1が複数あっても、SEO上はほとんど問題にならないかもしれない。

アクセシビリティ上はどうか？

Googleの説明にもある通り、見出しの構造が一番有用になってくるのはスクリーンリーダーだと考えている。なので本来ここが一番大事な論点なのだが、正直なところ私には確かなことが言えない。私はスクリーンリーダーのユーザーではないので、自分で良し悪しを判断できない。そして調べても確定的な情報を得ることはできなかった。

私の認識ではHタグはスクリーンリーダー向け以外にはほとんど役に立っておらず、目が見えていれば、かなりどうでもいいものだと思う。何故なら文字を大きくする目的だけでHタグが使われるのはよくあることだからだ。つまり誰も気にしてなんかいない。

何よりモダンなブログのように記事一覧がタイトルとようやくで並んでない古典的レイアウトのサイトで考えることではないだろうし、ひとまずH1の多用がHTMLとしてVALIDなのであれば、それはもう必要以上に気にしても仕方がないような気がした。

出来る範囲で配慮したほうがいいとは思うが、WCAGを守ることは義務ではない。インターネットは自由だ。映画館やホール、スタジアムの座席がすべて車いす対応でないように、K2やエベレスト、富士山に車いすスロープがないように、アクセシビリティは必ず何もかもすべてが満たす義務はない。大抵の家には階段しかなく、エレベーターはない。

しかしソフトウェアの開発者であれば守るべきかもしれない。しかしはてなブログは守っていない。どこまで拘るか、これは決めの問題でしかない。ならば、私はH2を本文で使いたい、そう思えた。

WCAGは何といっているか？

軽く見た範囲では何も言ってなさそうだった。全部は見てない。

少なくともH42: 見出しを特定するために、h1 要素～ h6 要素を使用するやF43: 達成基準 1.3.1 の失敗例 － コンテンツにおける関係を表さない方法で、構造的なマークアップを使用しているには1ページに複数のH1を書くなとはどこにもない。階層を守れ、飛ばすなくらいしか書かれていない。

LLMは何と言っているか？

Claude Opus 5.5によると記事一覧の記事タイトルがH1であることはスクリーンリーダー利用者によって記事タイトルだけを飛ばし読みする場合に有益な場合があると言っていた。本当かどうかは知らない。何故なら私はスクリーンリーダー使用者ではないからだ。

なら自分がスクリーンリーダーを使ってみればいいのでは？

もちろん、私もスクリーンリーダーを導入すれば使うこと自体はできる。ただその使い方が視覚障害者と同じであるかどうかは、私にはわからない。これは聾者とコミュニケーションをとるときに筆談すれば伝わりやすいという誤謬と同じだ。

筆談ができる聾者は少なくないが、得意であるとは限らない。書き言葉は音声言語を土台にしており、言葉は本来、耳から聞いた情報をもとに身につくものだからだ。つまり筆談は、もともと聴覚を持っている人を前提とした手段であり、先天的な聾者には必ずしも当てはまらないとされている。この点は「特集／聴覚障害者のコミュニケーション　ろう者コミュニケーションの諸問題」などに詳しい。

同様に、晴眼者がスクリーンリーダーを使ったところで、視覚障害者と同等の経験が得られるかといえば、私は疑問に思う。理解できたとしても、それはあくまで晴眼者の範疇での理解にとどまるだろう。

はてなブログを利用している視覚障害者は存在するのか？

手っ取り早い方法としてH1まみれのはてなブログを利用している視覚障害者がもし存在すれば、それはつまりスクリーンリーダー的に問題がない可能性があるというので調べてみた。すると利用者を確認することができた。

neputa noteというブログははてなブログで作られており、ロービジョンの方が運営されているとある。DOM構造もサイトタイトルがH1、一覧の記事タイトルがH1、記事本文の最小見出しはH2だ。

もちろん、このサイトの存在を以って直ちに問題ないと判断することはできない。何故なら失礼な話、このサイトの運営者がロービジョンであることを確かめる術が私にはないからだ。とはいえ、妙な広告なども見られないので書いてあることは正しいようにも見える。

結論

サイトタイトルはHなし、記事タイトルはH1、本文中の最小見出しはH2にすることで私の理想が叶うのではないかと思った。恐らくSEOには大きく影響せず、ある程度のマシンリーダブル性も担保できるのではないかと考えた。

もちろん確たる根拠も何もない。あくまで今回の簡易な調査で分かったことでしかないし、アクセシビリティの専門家は異を唱えるかもしれない。しかし、これは結局のところ決めの問題だ。Lyndbaumの開発者たる私がそう決めたら終わる話なのだ。

というわけで次回のバージョンでMarkdownパーサーとテンプレートに手を入れ、サイトタイトルをHなし、記事タイトルをH1、本文の最小見出しをH2にしようと思うのであった。