LINE マーケティングダッシュボード

1 システム概要

LINE マーケティングダッシュボードは、LINE公式アカウントの「友だち追加経路」データを多角的に分析するWebアプリケーションです。LINE管理画面からCSVをダウンロードしてアップロードするだけで、20種類以上のチャートと自動レポート生成を利用できます。

図1.1: ダッシュボード概要画面 — KPIカード、円グラフ、棒グラフが一覧表示

このツールで何ができるか

KPI一覧 & チャート

獲得数・ブロック数・純増数・ブロック率・成長率・アクティブ経路数の6指標をリアルタイム表示。円グラフ・棒グラフ・ゲージチャート付き。

7種の深掘り分析

ROI分析、BCGマトリクス、健全度レーダー、季節性分析、相関ヒートマップ、コホート分析、ブロック率トラッカー。

自動レポート生成

エグゼクティブサマリー、KPI比較、アクションアイテム、業界ベンチマーク比較を自動で生成。PDF印刷ワンクリック。

予測トレンド

線形回帰による将来予測ライン、経路別推移の積み上げグラフ、ブロック率目標ライン付きトレンド。

技術スタック

技術	用途	バージョン
`HTML5`	マークアップ（セマンティック構造）	—
`CSS3`	スタイリング + レスポンシブデザイン	—
`JavaScript (ES5)`	ロジック（iOS Safari 13以前も対応）	ES5互換
`ECharts`	20種以上のチャート描画	v5.x
`Tailwind CSS`	ユーティリティスタイリング	CDN版
`Font Awesome`	アイコン	v6.4.0
`RESTful Table API`	データ永続化・CRUD	—

図1.2: システムアーキテクチャ — LINE管理画面 → CSV → ダッシュボード → API

2 クイックスタート

以下の3ステップだけで分析を開始できます。技術的な知識は不要です。

LINE管理画面からCSVをダウンロード
LINE Official Account Manager にログイン → 統計情報 → 友だち → CSVダウンロード
ダッシュボードにCSVをアップロード
「データ管理」タブまたはヘッダーの「CSVアップロード」ボタンから、ドラッグ＆ドロップまたはファイル選択でアップロード
各タブで分析結果を確認
概要、経路分析、トレンド、アドバイス、深掘り分析、レポートの各タブを切り替えて閲覧

ファイル名に期間情報（例: friends_20250101_20250131.csv）が含まれていれば、開始日・終了日が自動検出されます。手動入力も可能です。

ダッシュボードを開く

3 CSVデータの準備

LINE管理画面からのダウンロード手順

図3.1: LINE Official Account Manager の統計情報画面（イメージ）

LINE Official Account Manager にログイン
https://manager.line.biz/ にアクセスし、対象アカウントを選択
「統計情報」→「友だち」を選択
左メニューの「統計情報」をクリック → 「友だち」タブを選択
期間を設定してCSVをダウンロード
分析したい月の範囲を設定 → 「ダウンロード」ボタンをクリック → CSVファイルが保存されます

CSVフォーマット仕様

ダウンロードされるCSVには以下のカラムが含まれます：

カラム名	日本語名	内容
`path` / `経路`	友だち追加経路	ホームタブ、検索、URL、QRコード等
`origin_point` / `流入元`	流入ポイント	具体的な流入元（空白の場合あり）
`campaign` / `キャンペーン`	キャンペーン名	設定済みキャンペーン（空白の場合あり）
`gained` / `獲得`	獲得数	友だち追加数（数値）
`blocked` / `ブロック`	ブロック数	ブロックされた数（数値）

カラム名の自動対応：日本語・英語どちらのカラム名でも自動認識されます。CSVファイルの文字コードはUTF-8を推奨しますが、Shift-JISにも対応しています。

期間設定について

アップロード時に期間（開始日〜終了日）を指定する必要があります。以下の方法で設定できます：

自動検出：ファイル名に 20250101_20250131 のような日付が含まれていれば自動設定
手動入力：アップロード画面の日付入力欄に直接入力

同じ期間のデータを再アップロードすると、上書きの確認ダイアログが表示されます。上書きすると以前のデータは削除されます。

4 データアップロード

図4.1: CSVアップロード画面 — ドラッグ＆ドロップとデータ履歴テーブル

アップロード方法（2通り）

方法A：データ管理タブから

ダッシュボードの「データ管理」タブをクリック
緑のドロップゾーンにCSVファイルをドラッグ＆ドロップ
（または「ファイル選択」ボタンをクリック）
期間が自動検出されない場合は、手動で「開始日」「終了日」を入力
アップロード完了メッセージが表示されたら成功

方法B：ヘッダーのクイックアップロード

画面右上の「CSVアップロード」ボタンをクリック
モーダルダイアログが開くので、同様にファイルを選択
期間を設定して完了

複数期間のデータがあると分析が充実します。月次でCSVをダウンロードし、毎月アップロードすることで、トレンド分析、予測ライン、コホート分析など全ての機能が利用可能になります。

データ履歴管理

アップロードされたデータは「データ履歴」テーブルに一覧表示されます：

期間：データの集計期間（開始〜終了）
獲得 / ブロック / 純増 / 率：集計値のサマリー
操作（削除）：不要なデータを個別に削除可能

期間選択フィルター

ダッシュボード上部の「期間選択」バーで、表示データの範囲を切り替えられます：

ボタン	動作
全期間	すべてのデータを表示
最新月	最も新しい期間のデータのみ表示
直近3ヶ月	最新から3ヶ月分を表示
直近6ヶ月	最新から6ヶ月分を表示
直近1年	最新から1年分を表示
カスタム年月	開始年/月〜終了年/月を任意に指定

5 概要タブの使い方

概要タブはダッシュボードのメイン画面で、全体のKPIとチャートが一覧表示されます。

KPIカード（6種）

KPI	説明	目安
総獲得数	選択期間中の友だち追加数合計	月100以上が目安
ブロック数	選択期間中のブロック数合計	少ないほど良い
純増数	獲得数 − ブロック数	プラスが必須
ブロック率	ブロック数 ÷ 獲得数 × 100	20%以下が理想
成長率	前期比の獲得数変化率	プラスが望ましい
アクティブ経路	獲得が1件以上ある経路の数	多いほどリスク分散

チャート一覧

円グラフ

友だち追加経路の内訳を視覚化。各経路の獲得数シェアが一目でわかります。

棒グラフ

経路別の獲得数 vs ブロック数を比較。効率の良い/悪い経路が明確に。

ゲージチャート

全体ブロック率を速度計のように表示。20%ラインが理想の目安。

経路ランキング

獲得数上位5経路をバーグラフ付きで表示。注力すべき経路が明確に。

ファネルチャート

友だち追加のコンバージョンファネル。獲得→残存の流れを視覚化。

6 経路分析 / トレンド

経路分析タブ

経路分析タブでは、友だち追加の経路構造を階層的に可視化できます。

チャート	表示内容	活用方法
サンバーストチャート	経路→流入元→キャンペーンの階層構造	どの経路のどの流入元が多いかを把握
ツリーマップ	経路の面積比較（獲得数比率）	主要経路と小規模経路のバランス把握
詳細テーブル	全経路の獲得/ブロック/ブロック率一覧	個別経路の詳細数値を確認

トレンドタブ

図6.1: トレンドタブ — 月次推移、経路別推移、ブロック率推移

チャート	表示内容	活用方法
月次推移グラフ	獲得/ブロック/純増の月次推移 + 予測ライン	成長トレンドと将来予測を把握
経路別推移	上位5経路の積み上げ棒グラフ	主要経路のバランス変化を追跡
ブロック率推移	月次ブロック率 + 目標20%ライン	ブロック率の改善/悪化傾向を監視

予測トレンドラインについて：線形回帰（最小二乗法）で算出されます。3期間以上のデータがあると、より精度の高い予測になります。点線で表示される部分が予測値です。

7 深掘り分析

深掘り分析タブには7種類の高度な分析チャートが用意されています。経営判断やマーケティング施策の立案に直結する情報が得られます。

図7.1: 深掘り分析 — ROI分析、健全度レーダー、相関ヒートマップ、BCGマトリクス

① 経路ROI分析

散布図で各経路の「獲得数（横軸）」と「ブロック率（縦軸）」をプロット。右下エリア（高獲得・低ブロック率）が理想ゾーンです。

緑ゾーン：効率的な経路（獲得多い＋ブロック少ない）
左上ゾーン：改善が必要（獲得少ない＋ブロック多い）
バブルのサイズは獲得数に比例

② BCGマトリクス

横軸=シェア、縦軸=成長率で4象限に分類：

⭐ Star	高シェア×高成長	最重要！投資を継続
💰 Cash Cow	高シェア×低成長	安定収益源。維持重視
❓ Question Mark	低シェア×高成長	伸びしろあり。テスト投資
🐕 Dog	低シェア×低成長	撤退または改善が必要

③ 経路健全度レーダー

5つの指標でLINE経路運用の健全性を総合評価します：

ブロック率：低いほど高スコア
多様性：経路が分散しているほど高スコア
集中度：上位経路への集中度（適度な集中が◎）
ボリューム：獲得数の絶対量
成長性：前期比の成長率

④ 季節性分析

月別の平均獲得数を棒グラフで表示。年間平均を点線で重ね、ピーク月・オフシーズン・ツアーシーズンとの連動を自動分析。沖縄観光のハイシーズン（7-9月）との相関も確認できます。

⑤ 経路相関ヒートマップ

経路間の相関係数を色で可視化。赤=正の相関（一緒に増減）、青=負の相関（片方が増えると片方が減少）。連動して動く経路ペアを発見し、施策の相乗効果を分析できます。

⑥ コホート分析

経路（縦軸）× 期間（横軸）のマトリクスヒートマップ。各セルの色の濃さが獲得数を表し、どの経路がどの期間に強かったかを一目で把握できます。成長トレンドや衰退の兆候を早期に発見。

⑦ ブロック率改善トラッカー

上位5経路のブロック率推移を折れ線グラフで追跡。全体平均も重ねて表示。施策実施前後のブロック率変化を検証する際に活用できます。

8 レポート / アドバイス

アドバイスタブ

アドバイスタブでは、データに基づいた自動分析とマーケティング改善提案が表示されます：

総合スコア（100点満点）：獲得数、ブロック率、多様性、集中度を総合評価
キーインサイト：データから自動検出された重要ポイント
アドバイスカード：優先度（高/中/低）付きの具体的改善提案

レポートタブ

図8.1: 月次レポート — エグゼクティブサマリー、KPI比較、アクションアイテム

レポートタブでは、月次マーケティングレポートが自動生成されます。以下の内容が含まれます：

セクション	内容
エグゼクティブサマリー	今期の概況を数行で自動要約
KPI比較テーブル	今期 vs 前期の主要指標比較（増減率付き）
経路別ランキング	獲得数順の経路一覧（シェア%表示）
アクションアイテム	データから自動生成された改善施策リスト
業界ベンチマーク	観光業界平均値との比較表

PDF保存・印刷

レポートタブの「印刷 / PDF保存」ボタンをクリック
印刷プレビューが開きます
「PDF として保存」を選択するとPDFファイルとして保存
プリンターを選択すると紙に印刷

9 プログラム構成（開発者向け）

図9.1: プロジェクトのファイル構成

ファイル一覧

ファイル	サイズ目安	役割
`index.html`	~39KB	メインHTML（7タブのUI構造）
`css/style.css`	~7KB	カスタムスタイル（レスポンシブ対応）
`js/app.js`	~60KB	メインロジック（KPI、チャート、CSV処理、期間フィルター）
`js/deep-analysis.js`	~48KB	深掘り分析＆レポート生成モジュール
`manual.html`	—	このマニュアル
`README.md`	~6KB	プロジェクト概要ドキュメント

app.js の主要関数マップ

                    app.js 関数構成
                    JavaScript ES5
                
// === 初期化 ===
DOMContentLoaded
  ├── setupDragDrop()         // ドラッグ&ドロップ設定
  ├── loadAllData()           // API から全データ取得
  └── renderAll()             // 全チャート描画

// === データ管理 ===
loadAllData()                 // line_friend_path + line_monthly_summary
getFilteredPathData()         // 期間フィルタ適用
getMainPaths(data)            // origin_point/campaign を除外
getUniquePeriods()            // ユニーク期間リスト

// === 期間選択 ===
updatePeriodSelector()        // 年月ドロップダウン生成
setPeriodPreset(preset)       // プリセット切替
onCustomPeriodChange()        // カスタム年月フィルタ
clearCustomPeriod()           // リセット

// === 描画 ===
renderKPIs()                  // 6つのKPIカード
renderPieChart()              // 円グラフ
renderBarChart()              // 棒グラフ
renderGaugeChart()            // ゲージ
renderRanking()               // TOP5ランキング
renderFunnelChart()           // ファネル
renderSunburst()              // サンバースト
renderTreemap()               // ツリーマップ
renderPathTable()             // 経路テーブル
renderTrends()                // トレンド3種
renderAdvice()                // アドバイスエンジン

// === CSV処理 ===
processCSVFile(file, isModal) // CSVパース→保存→再描画
parseCSV(text)                // テキスト→オブジェクト配列
saveCSVData(rows, start, end) // API POST

deep-analysis.js の主要関数マップ

                    deep-analysis.js 関数構成
                    JavaScript ES5
                
// === 深掘り分析 ===
renderDeepAnalysis()
  ├── renderROIChart()        // 経路ROI散布図
  ├── renderBCGMatrix()       // BCGマトリクス
  ├── renderPathHealthRadar() // 健全度レーダー
  ├── renderSeasonality()     // 季節性分析
  ├── renderCorrelationMap()  // 相関ヒートマップ
  ├── renderCohortAnalysis()  // コホート分析
  └── renderBlockTracker()    // ブロック率トラッカー

// === レポート生成 ===
renderReport()
  ├── renderExecutiveSummary()  // エグゼクティブサマリー
  ├── renderKPIComparison()     // KPI比較テーブル
  ├── renderPathRanking()       // 経路ランキング
  ├── renderActionItems()       // アクションアイテム
  └── renderBenchmark()         // 業界ベンチマーク

printReport()                   // 印刷/PDF出力

グローバル変数

変数名	型	説明
`allPathData`	Array	line_friend_path の全レコード
`allSummaryData`	Array	line_monthly_summary の全レコード
`currentPeriod`	String	現在選択中の期間フィルター値
`charts`	Object	EChartsインスタンスのマップ
`API_BASE`	String	APIのベースURL (`'tables'`)
`COLORS`	Object	テーマカラー定数
`CHART_COLORS`	Array	チャート用カラーパレット

10 データモデル / API仕様

テーブル構造

テーブル1: `line_friend_path`

CSVからアップロードされた個別経路データを格納します。

フィールド	型	必須	説明
`id`	text	自動	ユニークID（UUID）
`period_start`	text	✅	集計開始日 (YYYY-MM-DD)
`period_end`	text	✅	集計終了日 (YYYY-MM-DD)
`path`	text	✅	友だち追加経路名
`origin_point`	text	—	流入ポイント（空白可）
`campaign`	text	—	キャンペーン名（空白可）
`gained`	number	✅	獲得数
`blocked`	number	✅	ブロック数

テーブル2: `line_monthly_summary`

期間ごとの集計サマリーを格納します（CSVアップロード時に自動生成）。

フィールド	型	必須	説明
`id`	text	自動	ユニークID（UUID）
`period_start`	text	✅	集計開始日
`period_end`	text	✅	集計終了日
`total_gained`	number	✅	総獲得数
`total_blocked`	number	✅	総ブロック数
`net_gained`	number	✅	純増数（total_gained − total_blocked）
`block_rate`	number	✅	ブロック率（%）
`top_path`	text	✅	最多獲得経路名
`upload_date`	text	✅	アップロード日

RESTful API エンドポイント

すべてのデータ操作は以下のAPIエンドポイントを通じて行われます：

メソッド	エンドポイント	説明
GET	`tables/{table}?page=1&limit=100`	レコード一覧取得（ページネーション）
GET	`tables/{table}/{id}`	個別レコード取得
POST	`tables/{table}`	レコード作成
PUT	`tables/{table}/{id}`	レコード全体更新
PATCH	`tables/{table}/{id}`	レコード部分更新
DELETE	`tables/{table}/{id}`	レコード削除

API呼び出し例

                    データ取得の例
                    JavaScript
                
// 全経路データの取得
var response = await fetch('tables/line_friend_path?limit=1000');
var result = await response.json();
// result.data → レコード配列
// result.total → 総件数

// 新規レコード作成
var response = await fetch('tables/line_friend_path', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
        period_start: '2025-01-01',
        period_end: '2025-01-31',
        path: 'ホームタブ',
        gained: 45,
        blocked: 3
    })
});

// レコード削除
await fetch('tables/line_friend_path/' + recordId, {
    method: 'DELETE'
});

11 ゼロから再構築する方法

同じダッシュボードを新たに構築する場合の完全な手順です。他の方が同じシステムを再現する際にお使いください。

この手順は、GenSpark のAI Sparkページ（静的サイトビルダー）上での構築を前提としています。同等のホスティング環境（RESTful Table API 対応）が必要です。

Phase 1: プロジェクト作成とテーブル設定

新規プロジェクトの作成
GenSpark Sparkページで新規プロジェクトを作成します。
データベーステーブルの定義
以下の2つのテーブルスキーマを作成します。

                    テーブル1: line_friend_path
                    Schema Definition
                
// テーブル名: line_friend_path
// 説明: 友だち追加経路の個別データ
{
  "name": "line_friend_path",
  "fields": [
    { "name": "id",           "type": "text" },
    { "name": "period_start", "type": "text" },
    { "name": "period_end",   "type": "text" },
    { "name": "path",         "type": "text" },
    { "name": "origin_point", "type": "text" },
    { "name": "campaign",     "type": "text" },
    { "name": "gained",       "type": "number" },
    { "name": "blocked",      "type": "number" }
  ]
}

                    テーブル2: line_monthly_summary
                    Schema Definition
                
// テーブル名: line_monthly_summary
// 説明: 月次集計サマリー
{
  "name": "line_monthly_summary",
  "fields": [
    { "name": "id",            "type": "text" },
    { "name": "period_start",  "type": "text" },
    { "name": "period_end",    "type": "text" },
    { "name": "total_gained",  "type": "number" },
    { "name": "total_blocked", "type": "number" },
    { "name": "net_gained",    "type": "number" },
    { "name": "block_rate",    "type": "number" },
    { "name": "top_path",      "type": "text" },
    { "name": "upload_date",   "type": "text" }
  ]
}

Phase 2: フロントエンド構築

index.html を作成
7つのタブ構造（概要、経路分析、トレンド、アドバイス、深掘り分析、レポート、データ管理）を含むHTMLを構築。CDNライブラリ（Tailwind CSS, ECharts, Font Awesome, Google Fonts）を読み込みます。
css/style.css を作成
ナビゲーションタブ、KPIカード、ランキングバー、アドバイスカード等のカスタムスタイルを定義。レスポンシブ対応のメディアクエリを含みます。
js/app.js を作成
メインロジック：データ読み込み、期間フィルター、KPI計算、EChartsチャート描画、CSV解析・保存、履歴管理。全てES5互換の構文で記述します。
js/deep-analysis.js を作成
深掘り分析モジュール：ROI分析、BCGマトリクス、健全度レーダー、季節性分析、相関ヒートマップ、コホート分析、ブロック率トラッカー、レポート自動生成。

Phase 3: CDNライブラリの設定

index.html の <head> に追加するCDN HTML

<script src="https://cdn.tailwindcss.com"></script>  <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css">  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

Phase 4: Tailwind カスタムカラー設定

                    tailwind.config
                    JavaScript
                
tailwind.config = {
    theme: {
        extend: {
            colors: {
                line:  { DEFAULT: '#06C755', dark: '#05a348', light: '#e8f9ef' },
                ocean: { DEFAULT: '#0077B6', dark: '#005f92', light: '#e0f2fe' },
                coral: { DEFAULT: '#FF6B6B', dark: '#e55555', light: '#ffe0e0' },
                sand:  { DEFAULT: '#F4A261', dark: '#d98b4a', light: '#fef3e2' }
            }
        }
    }
}

Phase 5: デプロイ＆テスト

Publishタブでデプロイ
GenSpark Sparkページの「Publish」タブからワンクリックでデプロイ。ライブURLが発行されます。
テストデータのアップロード
LINE管理画面からダウンロードしたCSVをアップロードして動作確認。全7タブの表示を検証します。

ES5互換の理由：iOS Safari 13以前（iPhone 6sなど旧端末）でも動作するよう、const/let→var、アロー関数→function、オプショナルチェイン?.→手動チェックに変換しています。お客様のスマートフォン対応のためです。

12 カスタマイズガイド

テーマカラーの変更

アプリのカラーテーマを変更する場合は、以下の箇所を編集します：

                    js/app.js — COLORS定数
                    JavaScript
                
var COLORS = {
    line:    '#06C755',  // LINE公式グリーン
    ocean:   '#0077B6',  // オーシャンブルー
    coral:   '#FF6B6B',  // コーラルレッド
    sand:    '#F4A261',  // サンドオレンジ
    purple:  '#8B5CF6',  // パープル
    teal:    '#14B8A6',  // ティール
};
// これらの値を変更するとチャート全体の配色が変わります

新しい分析チャートの追加

新しいチャートを追加するための手順：

index.htmlに新しい <div> コンテナ（IDを指定）を追加
deep-analysis.js に描画関数（renderXXX()）を追加
renderDeepAnalysis() 内で新しい関数を呼び出し
ECharts のオプション設定を記述（ECharts公式例を参考に）

                    新しいチャート追加のテンプレート
                    JavaScript
                
function renderNewChart() {
    var container = document.getElementById('chartNew');
    if (!container) return;
    
    var data = getFilteredPathData();
    var mainPaths = getMainPaths(data);
    
    if (mainPaths.length === 0) {
        container.innerHTML = '<p>データがありません</p>';
        return;
    }
    
    var chart = echarts.init(container);
    charts['newChart'] = chart;
    
    var option = {
        // ECharts オプションを設定
        title: { text: '新しいチャート' },
        // ... series, xAxis, yAxis など
    };
    
    chart.setOption(option);
}

会社情報の変更

他の企業で使用する場合は、以下の箇所を変更してください：

変更箇所	ファイル	内容
ヘッダー社名	`index.html`	「沖縄コミュニケーションサービス株式会社」を変更
フッターコピーライト	`index.html`	© 2025 〇〇株式会社
レポートの業界ベンチマーク	`js/deep-analysis.js`	観光業→該当業界の平均値に変更
季節性分析のシーズン定義	`js/deep-analysis.js`	沖縄観光→該当業界のピーク月に変更

CSVカラム名の追加対応

新しいCSVフォーマットに対応するには、js/app.js の saveCSVData() 関数内のカラム名マッピングを編集します：

                    CSVカラム名のマッピング
                    JavaScript
                
// saveCSVData() 関数内
// 以下のキー名でCSVカラムを認識
var pathData = {
    path:         row['path']         || row['経路']     || '',
    origin_point: row['origin_point'] || row['流入元']   || '',
    campaign:     row['campaign']     || row['キャンペーン'] || '',
    gained:       parseInt(row['gained'] || row['獲得']) || 0,
    blocked:      parseInt(row['blocked'] || row['ブロック']) || 0
};
// 新しいカラム名を || で追加するだけでOK

今後の拡張アイデア

AI分析の統合

LLM APIと連携して、データに基づいた自然言語のアドバイスを自動生成

複数アカウント比較

複数のLINE公式アカウントのデータを並列で比較分析

メッセージ連携

メッセージ配信データとの統合分析で、メッセージ内容と友だち増減の相関を把握

LTV推定モデル

経路別の顧客生涯価値（LTV）を推定し、投資対効果を最大化

LINE マーケティングダッシュボード完全マニュアル

1 システム概要

このツールで何ができるか

KPI一覧 & チャート

7種の深掘り分析

自動レポート生成

予測トレンド

技術スタック

2 クイックスタート

3 CSVデータの準備

LINE管理画面からのダウンロード手順

CSVフォーマット仕様

期間設定について

4 データアップロード

アップロード方法（2通り）

方法A：データ管理タブから

方法B：ヘッダーのクイックアップロード

データ履歴管理

期間選択フィルター

5 概要タブの使い方

KPIカード（6種）

チャート一覧

円グラフ

棒グラフ

ゲージチャート

経路ランキング

ファネルチャート

6 経路分析 / トレンド

経路分析タブ

トレンドタブ

7 深掘り分析

8 レポート / アドバイス

アドバイスタブ

レポートタブ

PDF保存・印刷

9 プログラム構成（開発者向け）

ファイル一覧

app.js の主要関数マップ

deep-analysis.js の主要関数マップ

グローバル変数

10 データモデル / API仕様

テーブル構造

テーブル1: line_friend_path

テーブル2: line_monthly_summary

RESTful API エンドポイント

API呼び出し例

11 ゼロから再構築する方法

Phase 1: プロジェクト作成とテーブル設定

Phase 2: フロントエンド構築

Phase 3: CDNライブラリの設定

Phase 4: Tailwind カスタムカラー設定

Phase 5: デプロイ＆テスト

12 カスタマイズガイド

テーマカラーの変更

新しい分析チャートの追加

会社情報の変更

CSVカラム名の追加対応

今後の拡張アイデア

AI分析の統合

複数アカウント比較

メッセージ連携

LTV推定モデル

マニュアルをダウンロード

LINE マーケティングダッシュボード
完全マニュアル

テーブル1: `line_friend_path`

テーブル2: `line_monthly_summary`