NetworkAtlas - 人脈相関図＆紹介チェーン可視化ツール

【目的・対象】営業職・フリーランス・起業家・士業向けに、名刺交換や紹介で広がった人脈を「誰が誰を紹介したか」まで含めてネットワークグラフとして可視化する業務支援アプリ。既存の名刺管理アプリが持たない『関係の構造』の見える化に特化する。
【主要機能】1) 人物・企業ノード登録(名前・会社・役職・タグ・紹介者・関係の強さ1-5・メモ) 2) Canvas自前実装のフォースダイレクテッド・ネットワークグラフでドラッグ移動/ズーム/パン/クリック詳細表示 3) 紹介チェーン検索:起点と終点の人物を選ぶと最短経路をネオンラインでハイライトし『誰を介して繋がっているか』を表示 4) 影響力ランキング:次数中心性・媒介中心性の簡易計算でハブとなる人物Top10をバッジ付きで表示 5) 会社・タグ・関係強度によるフィルタとハイライト検索 6) 推測困難な6桁共有コードで複数端末同期、CSVエクスポート、グラフのPNGスナップショット保存。
【画面構成】①ダッシュボード(グラフ全体プレビュー+総人数/総つながり数/ハブTop3の統計カード) ②人物登録・編集モーダル ③メインのグラフ探索画面(フルスクリーンCanvas+右サイドに詳細パネルとフィルタ) ④紹介チェーン検索画面(2人選択→パスアニメーション表示) ⑤影響力ランキング画面(カード型リスト+バッジ) ⑥共有コード発行・データ管理設定画面。
【データ構造】workspaces(id, share_code, created_at), contacts(id, workspace_id, name, company, title, tags, memo, created_at), connections(id, workspace_id, from_contact_id, to_contact_id, relation_type, strength, introduced_date)。PHP+MySQLでAPI経由CRUD、フロントはCanvas2DでSVGライクな描画とアニメーションを実装。
【デザイン】ダークネイビー背景にネオンブルー・パープルの発光ノードとグローライン、半透明ガラスモーフィズムのカード型UI、清潔なサンセリフフォント。ノードは会社ごとに色分けし、ハブ人物は金色のグローを付与。操作時に軽やかなクリック音、グラフ探索画面ではアンビエントBGM(Cメジャー/Aマイナー中心、86BPM、4/4拍子、パッド+アルペジオ、8小節Aで静かに始まり8小節Bで薄いベースとハイハットが加わる展開、4小節ごとにフィルサウンドでアクセント)をWeb Audio APIでAudioContext.currentTime基準に先読み生成しループ再生。BGM/SE個別音量スライダーとミュート、画面遷移時にノード解放とゲイン0フェードで停止する。

## BGM品質要件
- アプリの雰囲気に合うジャンル・BPM・拍子を定め、ドラム、ベース、和声、メロディの4層で構成する
- 最低8小節またはA/Bの2展開を作り、休符、アクセント、フィル、フレーズ変化を入れる
- Web Audio APIはAudioContext.currentTime基準で先読みし、BGM/SE別音量・ミュート・停止処理を実装する
- 単一オシレーターの持続音や1〜3音だけの反復はBGMとして不可

## ビジュアル品質要件
- 生成済み素材を仕様内の用途・表示場所で実際に使用し、未使用素材を残さない
- 画風・配色・キャラクター比率を全画面で統一し、文字はHTML/CSSで重ねる
- PC・スマホで画像の欠け、引き伸ばし、文字との重なりがないことを開発完了前に確認する