「全部光って意味がない」——巨大な毛玉グラフをJaccard係数で解きほぐすまで｜MDツール開発ログ Vol.13
こんにちは、ノックスリョウです！
・ 今は薬剤師。アパレル業界に飛び込み、MD（マーチャンダイザー）×クリエイターとして奮闘中。
・ ファッション市場の「次のトレンド」をいち早く掴むための分析ツールを、コード経験ほぼゼロからAIと一緒に開発しています。
・ このシリーズは、その泥臭い開発過程をリアルタイムで公開する「プロセスエコノミー」型の連載です。
ここまでの軌跡を一気読みしたい方は→ 総集編（Vol.1〜10まとめ）をどうぞ！
前回は「3回直しても表示されなかったスパークライン」を、
よく分かんないけど、無理くり表示できるようにしました！
スパークラインって何？って方は是非前回記事を読んでみてくださいね！
それにしても口なじみ無さすぎて違和感ありますね。スパークライン。
今回は、グラフそのものの構造に潜んでいた爆弾の話です。
この記事はマガジンにまとめています。
こちらの記事も読んでみてね！
【今回までの進捗】
✅ ニュース記事の自動収集（スクレイピング）
✅ 単語の抽出と頻度カウント
✅ 仕分けアプリ（スカウト型UI）の完成
✅ グレーリスト＋3層構造の設計
✅ Tinder風→エクセル型への転換
✅ 裏方と表舞台の接続
✅ ノードに推移グラフを仕込む
🔄 ← 今ここ：グラフのUI強化（フォーカス・コロニー化・検索）
【立ちはだかる壁】「クリックしたら光る」はずが——全部光って意味がない問題
前回までで、トレンドグラフは「ノードにカーソルを合わせると推移が見える」ようになりました。
でも、この画面を眺めているうちに、
もうひとつの不満がむくむくと湧いてきた。
「特定の単語の、仲のいい人をみたい」
たとえば「GU」をクリックしたら、
GUと関係の深い「コラボ」「新作」「ユニクロ」だけが浮かび上がって、
残りは暗くなる——。
映画館の客席照明が落ちて、
主役にスポットライトが当たる、あのイメージ。
「フォーカス機能」を実装するために、Gemini先生へ相談。
仕様は明快。
クリックしたノードと、線で繋がった関連ワードだけを明るく表示。
関係ないノードはグレーアウトして沈める。
背景をクリックすると元に戻る。
実装を指示して、グラフを開く。
ノードをクリックしてみると——
ちゃんとグレーアウトした！
理想は、クリックしたノードをグラフの中心へ移動させたかった。
が、現環境では手間がかかりすぎるので、今の形に。
——ここまではよかった。
問題は、そのスポットライトの「光漏れ」だった。
【激闘と解決】「巨大な毛玉」を解きほぐす。Jaccard係数による大手術
第1幕：すべてが繋がる罠「ヘアボール現象」との遭遇
フォーカス機能は動いた。
でも、使えば使うほど違和感が募る。
どのノードをクリックしても、ほぼ全部のノードが光る。
「GU」をクリックしても、「コラボ」をクリックしても、
画面の8割がハイライトされたまま。
スポットライトどころか、舞台全体がベタっと照明で照らされている状態に。
原因は見てのとおりで、
全部のノードが、全部のノードとつながっている。
蜘蛛の巣のように、どの単語にも線がびっしり張り巡らされていて、
特に「アイテム」「新作」みたいな一般的な単語が中心にドンと居座り、
周りの単語を全部引きずり込んでいた。
これ、データ分析の世界では「ヘアボール」って呼ばれる現象らしい。**
これまたホントかよって名称を出される。
自分の作ったトレンドグラフが、
巨大な毛玉だと思うと面白いけど…
ツールとして使えないよな〜。
キレイに情報が整理されていると思ってたのに、
実態は「全部がぐちゃっとくっついたもつれ」だったわけです。
第2幕：「何回一緒にいたか」ではなく「どれくらいの確率で一緒にいるか」
Geminiに「このヘアボールをどうにかしたい」と相談する。
問題は、グラフの線の引き方。
今までは「出現数ベース」——
つまり、「AとBが10回一緒に記事に出たら線を引く」方式だった。
でもこれだと、
「アイテム」みたいなそもそも出現数が多い単語が、
あらゆる単語と「回数的には」一緒に出ているので、全部とつながってしまう。
たとえるなら、学校の人気者。
クラスの全員と1回ずつ話したことがある人気者は、
全員と「つながりがある」ことになる。
でも、その中で本当の親友は誰なのか？
それを見分けるのに使うのが、Jaccard係数（ジャッカード係数）という考え方。
ナンソレ？。数Aのやつか？
今まで：「AとBが10回一緒に出た → つなぐ」
これから：「AとBは、お互いにとってどれくらいの確率で一緒にいるか？」
出現数が多いだけの「人気者ワード」は、
誰とでも浅く広くつながっているのでスコアが下がる。
逆に「デニム」と「ワイドパンツ」みたいな、
出るときはいつも一緒の組み合わせは、スコアが高くなる。
これにより、浅い関係が自然に消えて、
本当に濃い関係（コロニー）だけが残る。
仕様書を書いて、実装を指示。
実行結果を開く——
すこーしだけあの毛玉が、島（コロニー）に分かれ始めた。
……ただし、副作用あり。
ノードが異常にデカくなった！
サイズ計算式がJaccard係数の変更に追いついていなかったらしい。
パラメータ調整のパッチを急いで当てて、ノードの大きさを適正化。
ここは力技で修正しました。
第3幕：コロニー化の副作用と、検索・ズーム機能の実装
ヘアボールが解消されてコロニーが生まれたことで、
グラフは多少見やすくなりました。
でも——新しい問題が発生。
「あれ、"デニム"ってどこにあるの？」
毛玉時代は、全部が中心にぎゅっと集まっていたから、
目を凝らせばなんとか見つかった。
でもコロニー化して散らばったことで、
特定の単語がグラフのどこにいるのかが分からない。
Geminiから提案されたのが、キーワード検索＆ズーム機能。
画面左上に検索ボックスを設置。
単語を入力すると候補がドロップダウンで表示される。
選択して「GO」を押すと、カメラがその単語のノードへ「グイーン」と自動ズーム。
さらに、前に実装したフォーカス機能が連動して起動する。
実装して、テスト。
検索窓に「GU」と入力。
ドロップダウンから選択して、GOボタンを押す——
きたーー！
カメラがスーッとGUのノードに寄っていき、
周辺のコロニーだけがハイライトされた！
……ただし、ズームが近すぎて周りが見えないｗ
まぁ、これはパラメータ調整で直せる範囲。
機能として動いていることが何より大事。
【開発の真髄】「毛玉」に気づけるかどうかが分岐点
今回の開発で一番怖かったのは、
「毛玉」に気づかないまま運用していた可能性があったということ。
グラフが蜘蛛の巣状だったとき、
見た目は「すごい！いっぱい繋がってる！」って感じだった。
情報がぎっしり詰まっている＝価値がある、と錯覚していた。
でも実際には、何も分析できない「ただのノイズ」だった。
フォーカス機能を実装したからこそ、
「全部光る＝全部つながってる＝つまり何も整理されてない」
という本当の問題が可視化された。
新しい機能を追加したら、前の設計のボロが出る。
ボロを直したら、次の課題が見える。
この「前進→破壊→再構築」のサイクルこそが、
開発の本質なんだと、改めて思いましたね。**
【次回予告と「余白」】
フォーカス機能、コロニー化、検索機能。
3つのUI強化で、トレンドグラフはようやく「見る」から「使う」ツールに進化し始めました。
でも、コロニーがちゃんと意味のある塊になっているかは、まだ未検証。
「デニムとワイドパンツが同じ島にいるのは分かる。
でも、なぜこの2つは別の島に分かれたのか？」
次回は、このコロニーの意味づけに踏み込んでいきます。
皆さんが普段使っているツールで、
「見た目はすごいけど実は整理されてなかった」みたいな経験、ありますか？
ここまでお読みいただき、ありがとうございます！
それでは、また！
【後注】
前回、3回直しても表示されなかったスパークラインをなんやかんやした話はこちら！
