HTML構造スコアの読み方: tag_count・depth・semantic_ratio

SiteTune は、URLから取得したHTMLを解析し、その構造を音楽イベントへ変換します。このとき重要になるのが、HTML構造スコアです。この記事では、SiteTune が見ている代表的な値と、それが音楽生成やWeb制作レビューにどう役立つのかを整理します。

tag_count: ページの材料の多さ

tag_count は、ページ内のHTML要素数です。要素数が多いほど、SiteTune にとっては音に変換する材料が増えます。ただし、多ければ良いというものではありません。装飾用の div が多すぎるページは情報量が多いのではなく、構造が複雑になっているだけの場合もあります。

音としては、tag_count が多いページほどフレーズやパートの密度が上がりやすくなります。反対に、要素数が少ないページでは、音の変化も少なくなります。

depth_avg / depth_max: 階層の深さ

depth_avg は平均的なDOM階層の深さ、depth_max はもっとも深い場所の階層です。階層が深いページは、カード、リスト、ナビゲーション、入れ子のコンポーネントが多い傾向があります。

階層が深いこと自体は悪ではありません。複雑なUIを持つWebアプリでは自然に深くなります。ただし、単純な記事ページなのに depth_max が極端に高い場合は、不要なラッパーや装飾要素が増えすぎている可能性があります。

semantic_ratio: 意味のあるタグの比率

semantic_ratio は、main、article、section、nav、header、footer など、意味を持つHTML要素の比率です。SiteTune では、ページ構造がどれくらい意味づけされているかの目安として扱っています。

semantic_ratio が高いページは、見出しや本文のまとまりが分かりやすく、音楽上もフレーズの区切りを作りやすくなります。アクセシビリティやSEOの観点でも、意味のあるHTMLは重要です。HTMLの意味づけについては MDN のセマンティクス解説 が参考になります。

heading_count: フレーズの区切り

見出しは、文章における章立てです。SiteTune では h1 〜 h6 を、音楽のフレーズや展開の目印として扱います。見出しがまったくないページは、曲の区切りも作りづらくなります。

ただし、見出しを増やせば良いわけではありません。見出しが本文の内容をきちんと表していること、階層が自然であることが重要です。これは人間にとっての読みやすさと、SiteTune にとっての鳴らしやすさの両方に効きます。

structured_data_score: 機械に意味を伝える情報

JSON-LD などの構造化データは、ページの種類、著者、公開日、パンくずなどを機械に伝えるための情報です。SiteTune では構造化データの有無も特徴量として扱います。検索エンジンに内容を伝えるという意味では、schema.org の語彙が土台になります。

スコアを見るときの注意

SiteTune のスコアは、ページの優劣を断定するものではありません。むしろ、ページの特徴を別の感覚で見るための入口です。音が単調なら本文や見出しが足りないかもしれない。音が過密なら装飾やラッパーが多いかもしれない。そうした仮説を持ってHTMLを見ると、制作レビューが少し楽になります。

レビュー時の見る順番

実際にページを見るときは、まず heading_count と本文量を確認します。記事ページなのに見出しが少ない、本文が短い、一覧だけで終わっている場合は、ユーザーにとっても検索エンジンにとっても情報が足りない可能性があります。

次に depth_max と div_ratio を見ます。必要以上に階層が深い場合、見た目を整えるためのラッパーが増えすぎていることがあります。これは直接悪いことではありませんが、HTMLの意味が読み取りづらくなる原因になります。

最後に semantic_ratio と構造化データを見ます。ページの本文がどこにあり、ナビゲーションやフッターがどこにあるのかを、機械にも人にも伝えられているかを確認します。SiteTune の音は、この確認作業を少し直感的にするための補助線です。

数値と音をセットで見る

数値だけを見ると、どうしても「高いほうが良い」「低いほうが悪い」と考えがちです。しかし、SiteTune では音も一緒に確認します。音が単調でも、ランディングページとしては意図通りかもしれません。音が複雑でも、メディアサイトとしては自然かもしれません。大切なのは、ページの目的と構造が合っているかどうかです。