サンプル楽曲集

有名なWebサイトから生成される音楽を聴き比べてみましょう。それぞれのサイトの構造的な特徴が、ジャンル・テンポ・コード進行の違いとなって現れます。

ニュース・ポータル系

多数のニュース見出しと多階層メニューを持つ大規模ポータル。多くのh2〜h3要素と短い段落の組み合わせから、リズミカルで明るいElectropopが生成されます。

整然とした見出し階層と長めの記事構造から、落ち着いた4つ打ちのTechnoが生成されます。深いネストが特徴的なリズムを作ります。

シンプルでミニマルなトップページから、スパースで広がりのあるAmbientが生成されます。要素が少ないからこそ、一音一音が引き立ちます。

Googleと同様にミニマルですが、わずかに異なるmeta構成が音楽の「色」を変えます。Googleとの違いを聴き比べてみてください。

豊富なリンク要素・SPA的な構造・複雑なナビゲーションから、ドライブ感のあるSynthwaveが生成されます。テクノロジー感あふれる音色が特徴です。

大量のdivとcode要素を持つQ&A構造から、刻みの強いTechnoが生成されます。タグごとのカテゴライズが反映されています。

テキスト中心で長文の段落が多く、決まったフォーマットの記事構造から、安定したリズムのTechnoが生成されます。淡々と続くベースラインが印象的です。

整理された見出し構造と詳細な技術解説から、メロディアスなSynthwaveが生成されます。リファレンスドキュメントの整然さが音にも現れます。

多数のリンクとリスト要素から、賑やかで多彩なElectropopが生成されます。スレッドの活発さがリズムに反映されます。

シンプルなテキストリストから、ミニマルだが芯のあるSynthwaveが生成されます。装飾の少なさが音楽の純度を上げています。

このリストにないサイトでも、URLを入力すれば音楽が生成されます。トップページから、お気に入りのサイトのURLを試してみてください。

同じ「Webサイト」でも、HTML構造が変わると生成される音楽の印象は大きく変わります。以下は、SiteTune の解析 API で公開ページを取得したときの一例です。取得タイミングや対象サイトの更新によって数値は変化しますが、サイトごとの構造差を見るための目安になります。

サイト	tag_count	depth_max	heading_count	生成ジャンル	BPM
Google	73	12	0	Techno	135
GitHub	1835	24	30	Techno	151
MDN Web Docs	828	16	13	Techno	144

Google のトップページは要素数が少なく、余白の多い構造です。GitHub は要素数と階層が多く、変化量の大きい曲になりやすい傾向があります。MDN Web Docs はドキュメントサイトらしく本文量と見出しがあり、情報の区切りが音にも出やすい構造です。

このように、SiteTune では「見た目の派手さ」だけでなく、HTMLの密度、階層、見出し、構造化データの有無が音楽の材料になります。自分のサイトを聴いたときに音が単調に感じる場合は、ページ内の見出し構造や本文量、セクション分けを見直すヒントになります。