HTMLの構造がどう音楽に変わるのか
SiteTuneは「HTMLが音楽になる」サービスですが、具体的にどのHTML要素が、どんな音楽パラメータに変換されているのでしょうか。この記事では、その対応関係をできるだけ平易に解説します。
変換の全体像
HTMLは「タグ・属性・テキスト・階層」という4つの基本要素からできています。SiteTuneはこれらを以下の順序で音楽に変換します:
- HTMLをパース（DOMツリーに変換）
- 各タグの出現数・階層・属性を集計
- 集計結果を音楽パラメータに割り当て
- 音楽イベントとしてJSONに出力
タグ → 楽器の対応
大まかに、以下のような対応関係があります（実装の核心は伏せますが、概念的にはこのイメージです）:
| HTML要素 | 音楽要素 |
|---|---|
| h1, h2, h3… | コード進行 / メロディの主軸 |
| p（段落） | テンポ / 全体の長さ |
| a（リンク） | メロディの音価・装飾 |
| img（画像） | パッド / 雰囲気の彩り |
| ul, ol, li | ドラムパターンの密度 |
| div / span（構造タグ） | サイトの「複雑さ」スコア → ジャンル決定に影響 |
| code / pre | テクニカルなアクセント音 |
タグの数 → スケール（音の組み合わせ）
HTMLタグの「種類数」を見ます。タグの種類が少ないシンプルなページはペンタトニックスケール（5音）に、多種類のタグを使う複雑なページはマイナースケール（7音）など、より表現の幅が広いスケールに割り当てます。
結果として、シンプルなランディングページは「素朴なメロディ」に、情報量の多いポータルは「より複雑なハーモニー」に変換されます。
段落数 → テンポ（BPM）
段落（p）の総数とページ全体のサイズから、楽曲のBPM（テンポ）を決めます。
- 段落が少ないページ → 速め（120〜140 BPM）
- 段落が多いページ → 遅め（90〜110 BPM）
「読み込みに時間がかかるサイトは、ゆっくりと味わう曲」というイメージです。
見出し階層 → コード進行
h1〜h6の見出しが文書中にどんな順序で並んでいるかを、4小節 × 4ループのコード進行として読み取ります。h1が連続するページでは安定したルートコード中心、h3〜h6が深く入り組んだページでは複雑な代理コードを使った進行になります。
ドメイン名 → キー（調）
同じURLからは必ず同じ曲が出る決定論性を保つため、ドメイン名そのもののハッシュ値を使ってキー（C・D・E・F・G・A・B …とそのシャープ／フラット）を決めます。
「https://example.com」と「https://example.org」は、ドメインのハッシュが違うため、同じ構造でも違うキーで再生されます。
サイトの「複雑さスコア」 → ジャンル
タグの種類数 × 平均ネスト深度 × 総タグ数 を組み合わせた「複雑さスコア」によって、最終的に4ジャンルから1つが選ばれます:
- 低スコア → Ambient（ミニマル、空間広め）
- 中低スコア → Synthwave（レトロ、メロディアス）
- 中高スコア → Electropop（明るい、リバーブ多め）
- 高スコア → Techno（四つ打ち、緻密）
結果として何が起きるか
HTMLの構造を変えると、音楽も確実に変わります:
- 段落を1つ追加 → 微妙にテンポが変わる、メロディの一部が変化
- 新しい見出しを追加 → コード進行が変わる
- サイト全体のリニューアル → ジャンルやキーごと変わるかも
逆にいえば、SiteTuneで生成された曲は、そのサイトの「ある時点の構造」を音楽として記録したスナップショットでもあります。
ぜひ自分のサイトで試してみてください
自分が運営しているサイトのURLを入れてみると、思いがけない発見があります。「自分のブログがこんな音だったのか」と感じる体験は、SiteTuneでしか得られません。
HTMLを音に変えるときの考え方
SiteTuneでは、HTMLタグを単純にドレミへ置き換えているわけではありません。ページ全体の構造をいくつかの特徴量に分け、それぞれをテンポ、音域、パート密度、フレーズの区切り、音色の明るさへ割り当てています。たとえば、見出しは曲の区切り、本文量はフレーズの材料、リンクやナビゲーションはリズム上のアクセントとして扱いやすい要素です。
変換の大まかな流れ
- URLからHTMLを取得する
- タグ数、階層、見出し、本文量、リンク数を数える
- 値を一定範囲に正規化する
- ジャンル、BPM、スケール、パート密度を決める
- WebAudio APIで音として再生する
この流れにしている理由は、同じページから同じ曲を生成できるようにするためです。ランダムな音ではなく、ページ構造に由来する音にすることで、サイト改善の前後比較にも使いやすくなります。本文を増やす、見出しを整理する、意味のあるHTML要素を使うといった変更が、音の変化として表れます。
HTMLの意味づけについては、MDNのセマンティクス解説も参考になります。SiteTuneの音は、そうしたHTMLの意味を体験的に捉えるための補助線です。