xiaohongshu-dashboard

Xiaohongshu ダッシュボードスキル

Xiaohongshu のクリエイターセンターからエクスポートした Excel ファイルをもとに、テック系ミニマリストなダークモードの分析ダッシュボードを生成します。

出力

以下を含む単一の index.html ファイルです。

• 5つの KPI 指標カード（インプレッション数、CTR、インタラクション数、有用性比率、フォロワー獲得数）
• ノーススタートレンドチャート（期間中のインプレッション数とフォロワー数）
• フォロワー増加トレンド（累計＋日別棒グラフ）
• フォロワー転換効率トップ10（インプレッション1,000回あたりのフォロワー数）
• タブ付きの投稿ランキングリスト（インプレッション数／インタラクション数／フォロワー数別）
• タイトルのキーワード分析（高エンゲージメント＋高コンバージョンのキーワード）
• 期間フィルター（月選択）
• 完全レスポンシブ対応（デスクトップ／iPad／iPhone）

技術スタック：バニラ HTML/CSS/JS ＋ Chart.js CDN。ビルドツールは不要です。

ワークフロー

ステップ 1：Excel ファイルを収集する

Xiaohongshu のクリエイターセンターからエクスポートしたデータ Excel ファイル（.xlsx）をユーザーに提供してもらいます。

Excel には通常、次のような列が含まれます。

• タイトル／コンテンツタイトル
• 公開日
• コンテンツの種類（画像とテキスト／動画）
• インプレッション数／閲覧数／CTR
• いいね／コメント／コレクション／シェア
• フォロワー獲得数
• 平均視聴時間

ステップ 2：データを処理する

scripts/process_excel.py を実行して Excel を読み込み、JSON データの塊を出力します。

python scripts/process_excel.py <path-to-excel-file>

スクリプトは次の処理に対応しています。

• 柔軟な列名マッチング（Xiaohongshu のエクスポート形式のバージョンによって列名が異なります）
• 日付の解析と月の抽出
• CTR の正規化（パーセンテージ形式と小数形式）
• タイトルの中国語キーワードの N-gram 分析
• JSON を標準出力に出力

pandas/openpyxl がインストールされていない場合は、先にインストールしてください。

pip install pandas openpyxl

ステップ 3：ダッシュボードを生成する

1. assets/template.html を読み込みます
2. プレースホルダー __RAW_DATA_PLACEHOLDER__ をステップ 2 の JSON 出力に置き換えます
3. 結果を、ユーザーが選択した出力ディレクトリに index.html として書き込みます

ステップ 4：プレビューを開く

生成された index.html をユーザーのデフォルトブラウザーで開き、すぐにプレビューできるようにします。

デザイン仕様

• テーマ：テック系ミニマリストなダークモード（Linear/Vercel/Raycast に着想を得たデザイン）
• 背景：微細なグリッドパターンをあしらった zinc-950（#09090b）
• カード：backdrop-filter blur を使ったグラスモーフィズム
• アクセント：主要指標にはネオンレッド（#FF4D6D）、増加指標にはネオングリーン（#10B981）
• フォント：Google Fonts CDN の Inter（サンセリフ）＋ JetBrains Mono（等幅）
• チャート：グラデーション塗りつぶし、カスタムツールチップ、等幅フォントの軸ラベルを使用した Chart.js

カスタマイズ

ユーザーがダッシュボードをカスタマイズしたい場合：

• 色：:root 内の CSS 変数を変更します
• 指標：metrics-grid セクションで指標カードを追加／削除します
• チャート：<script> セクションの Chart.js 設定を変更します