カテゴリビジュアルレポートジェネレーター
Atlas ビジュアルワークフロー手法に基づき、あらゆるクロスボーダーEC商品カテゴリに対して、標準化された12章構成のビジュアル戦略HTMLレポートを生成します。
コア機能
- 完全な方法論：9つの主要参照モジュールが、競合分析からビジュアル意思決定までの全プロセスをカバーします
- すぐに使えるテンプレート：HTMLテンプレート + CSSスタイル + Chart.jsグラフツールを内蔵。コピーしてすぐに使用可能
- 12章の標準構造：市場分析→キーワード→メイン画像→サブ画像→ユーザーインサイト→FABE→A+→動画→ブランドストア→データ診断→行動計画
- 6種類のグラフタイプ：棒グラフ、横棒グラフ、レーダーチャート、ドーナツ/円グラフ。データ駆動型の可視化
テンプレートリソースの場所
テンプレートファイルは assets/report-template/ にあります。
assets/report-template/
├── index.html # 12章完全HTMLテンプレート（インラインのグラフJSを含む、すべての内容は{{プレースホルダー}}でマーク）
└── assets/
└── report-base.css # オレンジテーマのベーススタイル（デザイントークン + 全コンポーネント）
Chart.js はCDNから読み込まれます。グラフツール関数はHTMLにインラインで含まれており、すぐに使用できます。
使用方法：assets/report-template/ ディレクトリ全体を作業ディレクトリにコピーし、index.html 内の {{プレースホルダー}} と下部のグラフデータを置き換えるだけです。
レポート生成フロー
ステップ1：情報収集
レポート生成を開始する前に、以下の情報を収集します：
- カテゴリ情報：カテゴリ名（中英文）、対象プラットフォーム（Amazon/自社ECサイトなど）
- 市場データ：価格帯分布、主要ブランド一覧（最低5つ）、各ブランドのセールスポイントとビジュアルスタイル
- キーワードデータ：コアキーワード/ロングテールキーワード/シチュエーションキーワード、および検索ボリューム、競合度
- レビューデータ：肯定的/否定的な高頻出単語、トップペインポイント一覧
- 製品情報：自社製品の特性、強み、ターゲットユーザーのポジショニング
ユーザーが完全なデータを提供しない場合は、カテゴリの常識と一般的な市場状況に基づいて妥当なプレースホルダー分析を生成し、「実際のデータに基づいて検証が必要」と注記します。
ステップ2：レポート生成
assets/report-template/を作業ディレクトリにコピー- チャプター順に
index.html内の{{プレースホルダー}}を置き換え - 下部の
<script>内のグラフデータを置き換え - 12のチャプターすべての内容が完全に埋まっていることを確認
create_htmlツールを使用してアクセス可能なオンラインページとしてデプロイ
ステップ3：品質チェック
納品前に確認：
- 12チャプターすべてが埋められ、
{{プレースホルダー}}が残っていない - 6つのグラフデータが対応するカテゴリデータに置き換えられている
- コアインサイトと戦略提案が具体的で実行可能
- FABEマトリックスに最低5つの完全なメリットチェーンが含まれている
- 行動計画に明確な優先順位とタイムラインがある
- レポート言語は中国語で、専門的かつ簡潔
方法論リファレンス
詳細な方法論ドキュメントは references/ にあり、必要に応じて読み込まれます：
| ドキュメント | 内容 | 読み込みタイミング |
|---|---|---|
atlas-workflow.md | Atlas 10ステップビジュアルワークフロー完全プロセス | 分析開始前、全体フレームワークを理解するため |
user-insight.md | ユーザーインサイト6次元、レビュー分析法、購買決定ペルソナ | ユーザーインサイトおよびレビュー分析チャプターを作成する際 |
fabe-model.md | FABEモデル、3つの構造、クロスカテゴリ事例 | FABEメリット変換チャプターを作成する際 |
main-image-strategy.md | メイン画像の3要素、5つの落とし穴、カテゴリ適応 | メイン画像戦略チャプターを作成する際 |
image-gallery-strategy.md | サブ画像5ステップ配置法、6大モジュール、よくある間違い | サブ画像戦略チャプターを作成する際 |
a-plus-strategy.md | A+6セクション構造、コンテンツ発掘、AI補助 | A+ページチャプターを作成する際 |
video-strategy.md | 動画コンテンツマトリックス、ゴールデンスクリプト、配置場所 | 動画戦略チャプターを作成する際 |
brand-store-strategy.md | ブランドストア6大モジュール、ブランドビジュアルシステム | ブランドストアチャプターを作成する際 |
data-diagnosis.md | コア指標、診断方法、最適化クローズドループ | データ診断チャプターを作成する際 |
グラフツールの使用
report-charts.js は4種類の一般的なグラフをカプセル化しています。呼び出し方法：
// 棒グラフ
ReportCharts.bar({ canvasId, labels, datasets, title });
// 横棒グラフ
ReportCharts.horizontalBar({ canvasId, labels, datasets, title });
// レーダーチャート
ReportCharts.radar({ canvasId, labels, datasets, title });
// ドーナツ/円グラフ
ReportCharts.doughnut({ canvasId, labels, data, title });
すべてのグラフはデフォルトでオレンジテーマを使用し、自動的にレスポンシブになります。
実行原則
- 調査してから出力——漠然と生成せず、可能な限りカテゴリの常識と市場法則に基づく
- データは交換可能——すべてのデータは変数/プレースホルダー思考で整理し、ユーザーが簡単に交換できるようにする
- 戦略は実行可能——各戦略提案には具体的な方法を含め、漠然としない
- 完全なクローズドループ——分析から戦略、行動計画まで、完全なクローズドループを形成する
- ビジュアルの専門性——テンプレートのカード、テーブル、インサイトボックス、グラフなどのコンポーネントを最大限に活用し、ビジュアル品質を確保する