ネットワーク効果キャンバス - 戦略的ネットワーク可視化ツール

概要

ネットワーク効果（つながりが増えると価値が増す現象）を視覚的に理解できる実験ツールです。LINE、メルカリ、Uberなどのサービスがなぜ急成長できたのか、その仕組みを体験的に学べます。

主な機能

• ドラッグ&ドロップでノード配置: 自由にサービスや要素を配置


• 接続とシナジー設定: ノード間のつながりを作り、関係性の強さを3段階で設定


• リアルタイムスコア計算: 接続が増えるほど価値が上昇する様子を数値で確認


• 4つのプリセット: LINE、メルカリ、Uber、電話ネットワークの実例で学習


• 共有機能: URLやJSONでキャンバスを他の人と共有可能

こんな時に便利

• ビジネスモデルの「ネットワーク効果」を理解したい時


• 新規サービスの構造を考える時のブレインストーミング


• プレゼンや資料作成で視覚的に説明したい時

使い方

1. サイドバーからプリセットを選択、または「新規ノード」で自分で作成
2. ノードをドラッグして配置
3. 接続ツールでノード同士をつなげる
4. 上部のスコアで「接続効果」を確認

技術的な学び

• SVGでのベジェ曲線描画とノード間の動的な接続処理


• foreignObjectを使ったSVG内でのReactコンポーネント埋め込み


• ドラッグ&ドロップの状態管理とキャンバス座標計算

AIとの協働で気づいたこと

• 「厳しいレビューをして」と依頼すると、客観的な問題点を指摘してくれる


• 段階的な改善（5ステップに分けて各ステップでコミット）のアプローチが巻き戻しやすくて安心


• 理論的な正確性が求められるツールでは、最初からその旨を伝えるべき

次に活かしたいこと

• 教育ツールを作る時は、最初から「誰が使うか」「どの程度の正確性が必要か」を明確にする


• 「批判的レビュー」をAIに依頼するフェーズをワークフローに組み込む