最高の1本を見つけるため、スコッチのサイトを作った話

こんにちは、KukimiCanです。

とあるきっかけでウイスキー、特にスコッチが好きになってしまったのですが、何分知識がないので好きそうな銘柄を探し出すのに苦労しているわけです。

数えきれないくらいありますからね、種類が。

そこで、自分用にサイトを作り始めました。「Scotch Atlas」です。

どんなサイトか

銘柄や蒸留所がノードになっていて、それぞれが線でつながってネットワークを形成しています。気になるノードをクリックすると、似ている銘柄が集まってきて、ネットワークが再構築されます。右側のパネルにはその銘柄や蒸留所の詳細が出ます。

詳細の「樽」や「香味」を押すとそれが新しい軸となって、同じ特性を持つ銘柄が集まってきます。

好きな銘柄や蒸留所から、似たものを次々にたどっていくことで新しい一本と出会うきっかけを作ってくれます。

どうやって作ったか

CodexとClaude Codeに手伝ってもらいました。こういうのが欲しいと伝えて、触ってみて、気になったところを直してもらう。それだけです。

バイブコーディングで自分の好きなものを短い時間ですぐ形にできるようになりました。いい時代ですね。

使用したスタックとしてはReact、TypeScript、Vite、d3-force、Canvas、Supabase、Vercelあたりです。

ノードの動きへのこだわり

押したときに点がぱっと切り替わる、だと少しさみしいので、ばねで引っ張って、全体的に弾性を感じられるようなデザインにしました。

node.vx += (k  (node.tx - node.x) - c  node.vx) * dt;
node.x += node.vx * dt;

kがばねの強さで、cがブレーキです。ブレーキが弱いと揺れ続けて、強いとぴたっと止まります。点は少しだけ弾むように、そして画面全体を動かすカメラは弾まないようにしています。

似ている、とは？

近くに置く銘柄は、蒸留所、香味、産地、樽などがどれだけ共通しているかで決めています。蒸留所を一番重くして、「シングルモルト」みたいな大きな括りは軽めです。そうしないと、シングルモルト同士というだけで全部似てしまうので。

仕組みをもう少しだけ書くと、まず銘柄ごとに「この蒸留所」「シェリー樽」「柑橘っぽい」みたいな特徴を、当てはまるなら1、当てはまらないなら0で並べたリストを作ります。そこに項目ごとの重みを掛けて、2本のリストがどれくらい同じ向きを向いているか（コサイン類似度）で、似ている度合いを出しています。

重みは今のところこんな感じです。

const weights = {
  distillery: 1.3, // 蒸留所
  flavor: 1.0,     // 個別の香味
  region: 0.9,     // 産地
  cask: 0.7,       // 樽
  family: 0.55,    // 香味の大分類
  category: 0.45,  // シングルモルトなど
};

共通点の数をそのまま数えるだけだと、情報がたくさん書いてある銘柄ほど何にでも似てしまうので、リストの長さで割って揃えています。

香味には「フルーティー」みたいな大きな分類と、「柑橘」「りんご・洋梨」みたいな細かい分類があります。細かいところが違っても、大きな分類が同じなら少しだけ近くなる、という具合です。

ちなみに、記録がない項目も0になるので、「香味が書いてない」が「その香味がしない」と同じ扱いになってしまいます。データを増やすほど地図がまともになっていく、ということでもあります。