実測データで見る Google・GitHub・MDN の聴き比べ

SiteTune の面白さは、同じ「Webサイト」でも、HTML構造によってまったく違う音が鳴るところにあります。今回は、Google、GitHub、MDN Web Docs の3つを SiteTune の解析 API で読み取り、どのような構造差が音楽に反映されるのかを見ていきます。

この記事は一般論ではなく、実際に SiteTune で取得した特徴量をもとにしています。対象サイトは日々更新されるため数値は変わる可能性がありますが、サイトごとの傾向を理解するには十分な比較になります。

比較した項目

今回見るのは、要素数、階層の深さ、見出し数、本文量、生成ジャンル、BPM です。SiteTune ではこれらの値を直接そのまま音にするのではなく、複数のスコアとして組み合わせ、ジャンルやテンポ、パート密度へ反映します。

Google: 余白が多く、情報量は少ない

Google のトップページは、要素数が非常に少なく、見出しもほとんどありません。検索フォームを中心にしたページなので当然ですが、SiteTune から見ると「音に変換する材料が少ないページ」です。こうしたページは、フレーズの変化が少なく、シンプルなループとして聴こえやすくなります。

GitHub: 要素数と階層が大きい

GitHub は tag_count が 1835、depth_max が 24 と非常に大きく、HTML構造が密です。ナビゲーション、CTA、説明セクション、フッターなど、多くの要素が組み合わさっています。SiteTune ではこの密度が、テンポやパート数、音の動きとして表れやすくなります。

MDN Web Docs: ドキュメントらしい区切りがある

MDN Web Docs は本文量と見出しがあり、ドキュメントサイトらしい構造を持っています。GitHub ほど要素数は多くありませんが、見出しと本文のまとまりがあるため、フレーズの区切りとして扱いやすいページです。

聴き比べで分かること

SiteTune は、デザインの美しさを採点するツールではありません。けれど、HTMLの構造が整理されているか、情報量がどれくらいあるか、見出しがフレーズとして働くかを、音の変化として感じられるようにしています。

自分のサイトを聴いたときに音が単調なら、本文量、見出し階層、セクション分けが少ない可能性があります。逆に音が忙しすぎる場合は、ナビゲーションや装飾要素が多すぎるのかもしれません。耳で聴いた違和感を、HTML構造を見直す入口にする。それが SiteTune の使い方のひとつです。

制作レビューに使うなら

この比較は、完成した曲の良し悪しを競うものではありません。制作レビューで使う場合は、まずトップページ、記事ページ、固定ページをそれぞれ聴き、音の密度や展開の違いをメモします。そのうえで、HTMLの見出し数、本文量、DOM階層、ナビゲーション量を確認すると、音で感じた違和感を構造上の課題に変換しやすくなります。

たとえば、トップページだけが極端に忙しく、記事ページがほとんど変化しない場合、トップページには装飾やカードが多く、記事には本文や見出しが足りない可能性があります。反対に、すべてのページが似た音になる場合は、ページごとの役割や情報設計が似すぎているのかもしれません。

まとめ

Google、GitHub、MDN は見た目も用途も違いますが、SiteTune で見るとHTML構造の差がよりはっきりします。要素が少ないページ、階層が深いページ、見出しと本文が整理されたページ。それぞれの違いを音として聴くことで、Webサイトの構造を別の角度から捉えられます。

関連する技術背景は MDN の Web Audio API ドキュメント でも確認できます。

比較結果を読むときの注意

Google、GitHub、MDN Web Docs の比較では、数値が大きいサイトほど優れているという意味ではありません。Googleのようにシンプルなページは、目的が検索フォームに集中しているため、HTMLの材料が少なくても自然です。GitHubのように多機能なページは、ナビゲーションや説明セクションが多いため、要素数や階層が大きくなります。

SiteTuneで見るべきなのは、ページの目的と構造が一致しているかです。ドキュメントサイトで見出しが少なすぎる、サービス紹介ページで本文がほとんどない、記事ページなのに一覧やカードばかりが目立つ、といった状態は、音にも偏りとして出やすくなります。

自分のサイトで同じ比較をする方法

1. トップページを再生する
2. 代表的な記事ページを再生する
3. AboutやFAQなどの固定ページを再生する
4. 音の密度、展開、単調さをメモする
5. それぞれのHTML構造と本文量を見比べる

この手順で見ると、ページごとの差がはっきりしているかを確認できます。すべてのページが似た音になる場合は、テンプレートだけが目立ち、本文やページ固有の情報が少ない可能性があります。AdSense審査前のサイトでは、この「ページ固有の情報があるか」が特に重要です。