ジャンル判定の仕組み：HTML構造から音楽ジャンルが決まる
SiteTuneは、入力されたWebサイトのHTML構造から自動的に4つの音楽ジャンル（Synthwave / Electropop / Techno / Ambient）のいずれかを選びます。「サイトを見ただけで、なぜ違うジャンルが流れるのか？」その判定アルゴリズムの仕組みを解説します。
4つのジャンルの音色イメージ
まずは、それぞれのジャンルがどんな音楽性を持つかを整理しておきましょう。
| ジャンル | 音色イメージ | 主な楽器構成 |
|---|---|---|
| Synthwave | レトロ・80年代風・ドライブ感 | ファットシンセ・saw+square ベース |
| Electropop | クリーン・明るい・リバーブ多め | synthPluck コード・三角波リード |
| Techno | 四つ打ち・緻密・アシッド | TB-303 風レゾナントベース |
| Ambient | 空間広め・スパース・瞑想的 | パッドシンセ・サブベース |
ジャンル判定の3つの軸
SiteTuneは、HTMLから抽出した特徴量を3つの軸でスコア化し、それを基に4ジャンルから1つを選びます。
軸1: タグ密度（density）
1ページあたりの総タグ数 ÷ ページサイズ（KB）。コンテンツがぎゅっと詰まっているページほど高くなります。
- 低密度（< 5）: ミニマルなランディングページ・検索フォーム中心のサイト
- 中密度（5〜15）: 一般的なブログ・コーポレートサイト
- 高密度（> 15）: 大規模ポータル・SNS・ニュースサイト
軸2: 構造の複雑さ（complexity）
ネスト深度の平均 × タグの種類数。ネストが深く、種類豊富なタグを使っているほど高くなります。
- シンプル（< 30）: 単純な静的ページ
- 標準（30〜100）: テンプレート的な構造のサイト
- 複雑（> 100）: モダンSPA・JSフレームワークで生成されたサイト
軸3: セマンティック度（semantic）
HTML5のセマンティックタグ（article / section / nav / header / footer / main / aside 等）の割合。整理されたコンテンツほど高くなります。
- 低セマンティック（< 5%）: divだらけのサイト
- 中セマンティック（5〜20%）: 一般的なモダンサイト
- 高セマンティック（> 20%）: アクセシビリティを意識したサイト
判定マトリックス
3つの軸の組み合わせで、ジャンルが決まります。簡略化すると以下のようなマッピングです。
| 密度 | 複雑さ | セマンティック | 選ばれるジャンル |
|---|---|---|---|
| 低 | 低 | — | Ambient |
| 低〜中 | 低〜中 | 中以上 | Synthwave |
| 中〜高 | 中 | 中以上 | Electropop |
| 高 | 高 | — | Techno |
境界線上のサイトは、URLのハッシュ値（決定論的乱数源）でいずれかに振り分けられます。これにより同じURLが必ず同じジャンルになります。
具体例：なぜこのサイトはこのジャンルなのか
Google → Ambient
トップページは「ロゴ + 検索ボックス + 数本のリンク」だけ。タグ数は少なく、構造もシンプル、セマンティックタグもほとんど使われていません。低密度・低複雑さの典型例で、Ambientが選ばれます。
個人ブログ → Synthwave
記事一覧、見出し階層、サイドバー、コメント欄など、ある程度の構造があり、HTML5セマンティックタグも多少使われている、というケースが多いです。中密度で、整理感もあるためSynthwaveが選ばれやすくなります。
ニュースサイト → Electropop
記事カードが並び、カテゴリナビ、関連記事、トレンドリストなど、コンテンツ密度は高めだがセマンティック構造も比較的整理されています。Electropopの陽気で多彩な音色がマッチします。
大規模ポータル・SPA → Techno
JavaScript フレームワークで生成された大量のdivと動的コンポーネント。タグ数も種類も非常に多く、ネストも深い。複雑度が極端に高いケースで、Technoの緻密なリズムが似合います。
判定境界線の「揺れ」を意図的に設計
サイトの構造が少し変わっただけでジャンルがコロコロ変わると、ユーザー体験が悪くなります。そのため、SiteTuneでは以下のような「ヒステリシス（履歴依存）」を設けています。
- 境界線付近のサイトは、URLハッシュで決定論的に振り分け
- 1つの軸の変化だけではジャンルが変わらないようにマージンを設定
- 「サイト規模カテゴリ」の中でのジャンル変化を優先（小規模 → 大規模ジャンプは少なく）
同じドメインでもページごとにジャンルが違うことがある
SiteTuneはページ単位で判定するため、同じサイトの中でも、トップページと記事ページでジャンルが違うことがあります:
- トップページ（記事一覧） → Electropop
- 記事ページ（長文記事） → Synthwave
- About ページ（短い文章） → Ambient
これは、「同じドメインでも構造が違う」ことを正直に反映しているためです。サイトの中でも、ページごとに違う音楽指紋を持っています。
ジャンル判定を聴き比べてみる
気になる4サイトを音楽として比較してみましょう。それぞれが、上記のロジックで違うジャンルに分類されているのが分かります。
- Google → Ambient
- GitHub → Synthwave
- Yahoo! JAPAN → Electropop
- Wikipedia → Techno
「あなたのサイトは何系？」気になる方は、ぜひ自分のURLを試してみてください。サイト構造の現状診断として使うのも面白い使い方です。