pro-report-builder

プロレポートビルダー

単体で動作する HTML 形式の洗練されたコンサルティングレポートです。Chrome ヘッドレスを使って PDF にエクスポートできます。

インストール

git clone https://github.com/thatrebeccarae/claude-marketing.git && cp -r claude-marketing/skills/pro-report-builder ~/.claude/skills/

クイックリファレンス

タスク	方法
レポートをゼロから作成する	CSS と HTML のパターンについて、REFERENCE.md を参照します
新しいコンポーネントタイプを追加する	REFERENCE.md にある既存のコンポーネントを組み合わせます
PDF にエクスポートする	Chrome ヘッドレスの --print-to-pdf を使用します（「エクスポート」セクションを参照）
ブランドトークンをカスタマイズする	:root ブロック内の CSS カスタムプロパティを編集します

このスキルと pro-deck-builder の使い分け

	pro-report-builder	pro-deck-builder
形式	8.5x11" の縦向きページ	16:9 の横向きスライド
コンテンツの流れ	複数ページにわたる流し込みテキスト	1 枚のスライドで完結する構成
エクスポート	Chrome ヘッドレスの --print-to-pdf	Puppeteer
用途	監査レポート、評価レポート、文書形式の成果物	プレゼンテーション資料、ピッチ資料

---

始める前に

ステップ 1：依頼内容を把握する

ユーザーに次の点を確認します。

1. どのような種類の文書ですか？ 監査レポート、評価レポート、技術概要、ケーススタディなど。
2. おおよそ何ページですか？ セクションの流れとページ配分を計画するのに役立ちます。
3. どのようなデータがありますか？ 生データ、API のエクスポート、スプレッドシートなど。実際の値がある場合は正確な値を使用し、決して推定しないでください。
4. ファイルの保存先はどこですか？ 既定値：./output/

ステップ 2：文書の構成を計画する

すべてのレポートは次の構成に従います。

Cover Page --> Executive Summary --> Analysis Sections (3-6) --> Prioritized Recommendations --> Quick Wins --> Appendix

各分析セクションは 1～2 ページを占めるようにします。レコメンデーションカードは最も多くのスペースを必要とするコンポーネントなので、慎重に配分してください。

---

デザインシステム

カスタマイズ可能なブランドアイデンティティ

付属のデザインシステムには、プロフェッショナルな既定のデザインが用意されています。すべての色トークン、タイポグラフィ、余白は :root 内の CSS カスタムプロパティで定義されています。ブランドに合わせてこれらを上書きしてください。

色トークン

:root {
  /* Accent -- change this to your brand color */
  --accent:        #3D7A5C;
  --accent-dim:    rgba(61, 122, 92, 0.08);
  --accent-dark:   #2E6B4A;
  --accent-light:  #6AB88A;

  /* Severity */
  --excellent:     #2e8b57;
  --warning:       #D97706;
  --critical:      #c0392b;

  /* Light-mode backgrounds (warm cream) */
  --bg-page:       #FAF7F2;
  --bg-surface:    #F2EDE6;
  --bg-elevated:   #EBE5DD;

  /* Light-mode text */
  --text-primary:  #0f0e0e;
  --text-body:     #57606a;
  --text-muted:    #8b949e;

  /* Borders */
  --border:        rgba(15, 14, 14, 0.1);
  --border-dim:    rgba(15, 14, 14, 0.06);

  /* Callout tints */
  --tint-blue:     #eaf2ed;
  --tint-green:    #eaf5ef;
  --tint-red:      #fef2f2;
  --tint-amber:    #fffbeb;

  /* Dark mode (cover page only) */
  --dark-bg:       #141414;
  --dark-surface:  #1E1E1E;
  --dark-text:     #f0f3f6;
  --dark-muted:    #6e7681;
  --dark-secondary:#9ca3af;
  --dark-border:   rgba(255, 255, 255, 0.08);
}

色のルール：

• すべての本文ページの背景には、ウォームクリーム（#FAF7F2）を使用します。白は使用しません。これはブランドの差別化要素です。
• ダークモード（#141414）は表紙ページのみに使用します。
• アクセントカラーは、アクセントライン、テーブルヘッダー、箇条書きマーカー、優先度バナーのアクセント、レコメンデーションカード左側のストライプに使用します。意図的に使用し、装飾目的では使用しません。
• 深刻度を示す色（緑／アンバー／赤）は、パフォーマンス指標のみに使用します。装飾目的では使用しません。
• コールアウトの色合い（青／緑／赤／アンバー）は、深刻度に合わせた左枠付きコールアウトボックスに使用します。

タイポグラフィ

役割	フォント	ウェイト	サイズ	字間	備考
表紙タイトル	Switzer	Light (300)	36pt	-0.03em	暗い表紙に表示するドキュメント名。
表紙サブタイトル	Switzer	Regular (400)	16pt	normal	表紙タイトルの下に配置します。色：--dark-muted。
表紙タグ	Cartograph CF	Regular (400)	8pt	+0.15em	すべて大文字。色：--accent。タイトルの上に配置します。
セクションタイトル	Switzer	Regular (400)	18pt	-0.02em	コンテンツページの h2。下にアクセントラインを配置します。
サブセクションタイトル	Switzer	SemiBold (600)	12.5pt	normal	コンテンツページの h3。
本文	Switzer	Regular (400)	9.5pt	normal	段落、説明文。行の高さ：1.6。
テーブルヘッダー	Cartograph CF	SemiBold (600)	7.5pt	+0.05em	すべて大文字。アクセント背景に白い文字。
テーブル本文	Switzer	Regular (400)	8.5pt	normal	行ごとに背景色を交互にします。
KPI 値	Cartograph CF	SemiBold (600)	16pt	-0.02em	KPI カードの数値。
KPI ラベル	Cartograph CF	Regular (400)	6.5pt	+0.06em	すべて大文字。KPI 値の下に配置します。
推奨カードラベル	Cartograph CF	SemiBold (600)	7.5pt	+0.04em	すべて大文字。フィールドラベル。
優先度バナー	Cartograph CF	SemiBold (600)	9pt	+0.08em	すべて大文字。優先度レベルのラベル。
ページフッター	Switzer	Regular (400)	7pt	+0.03em	中央揃え。色：--text-muted。

重要なタイポグラフィのルール：

1. 表紙タイトルには Light (300) を使用し、Bold は使用しないでください。 大きなサイズでの Light は、自信と高級感を演出します。
2. 数値／データの内容にはすべて等幅フォントを使用してください。 KPI 値、テーブルヘッダー、推奨カードラベル、優先度バナーが対象です。
3. 本文は 9.5pt、行の高さは 1.6 にします。 スライドではなく、読みやすさを重視したドキュメントです。
4. テーブルヘッダーは、アクセント背景に等幅フォントですべて大文字で表示します。 独特なテーブルスタイルです。

フォントのデフォルト（変更可能）：

• Switzer：Fontshare CDN から読み込み（無料）。フォールバック：system-ui, sans-serif
• Cartograph CF：商用フォント。local() 経由で読み込みます。フォールバック：JetBrains Mono, monospace

ページ寸法

Width:   8.5in
Height:  11in
Orientation: Portrait

間隔

領域	値
コンテンツのパディング	0.6in 0.75in 0.7in
表紙ページのパディング	0 1in 1in（下揃え）
ページフッター	絶対位置指定、bottom: 0、padding: 10px 0.75in 14px
セクションタイトルの下マージン	4px（その後、アクセントラインが下に 20px の余白を追加）
サブセクションタイトルのマージン	上 20px、下 8px

---

コンポーネントライブラリ

すべてのコンポーネントの HTML と CSS の詳細は REFERENCE.md に記載されています。利用できるコンポーネントは次のとおりです。

ページ構造

コンポーネント	クラス	用途
ページコンテナー	.page	影付きの 8.5x11" ページ。
表紙ページ	.cover-page	コンテンツを下揃えで配置した暗い表紙。
コンテンツ領域	.content	ページ内のパディングされたコンテンツ領域。
ページフッター	.page-footer	ドキュメント名とページ番号を中央揃えで表示するフッター。
セクションタイトル	.section-title + .accent-rule	アクセントの下線付きセクション見出し。
続きのセクション	.section-continued	複数ページにわたるセクションの「（続き）」タグ。

データ表示

コンポーネント	クラス	用途
KPI 行	.kpi-row / .kpi-card	大きな数値を表示するカードの 4 列グリッド。
KPI カード（リスク）	.kpi-card--risk	リスク／マイナスの KPI 向けの赤みがかったバリエーション。
データテーブル	深刻度クラス付きの table	ストライプの行、アクセント色のヘッダー、深刻度の色。

コンテンツブロック

コンポーネント	クラス	用途
コールアウトボックス	.callout + .callout-{color}	左側に境界線があるインサイト用ボックス（青／緑／赤／アンバー）。
本文	.body-text	標準的な段落テキスト。
箇条書き	.bullet-list	アクセント色のドットを使った箇条書き。
番号付きリスト	.numbered-list	アクセント色の等幅フォントの番号。

推奨事項

コンポーネント	クラス	用途
優先度バナー	.priority-banner + レベルクラス	優先度ラベル（CRITICAL／HIGH／MEDIUM／LOW）。
推奨カード	.rec-card + レベルクラス	左側にアクセントストライプを備えた複数項目のカード。
クイックウィンテーブル	.qw-num を使用したテーブル	番号付きアクション項目のテーブル。

---

ドキュメントの構成

必須ページ

すべてのレポートに次の内容を含める必要があります。

1. 表紙（.cover-page） -- 暗い背景、ドキュメントのタイトル、メタデータ（日付、アカウント、期間）
2. エグゼクティブサマリー -- KPI の行 + 主要な調査結果のコールアウト + 簡潔な説明
3. 推奨事項 -- 優先度別にグループ化した優先度順の rec-card
4. クイックウィン -- すぐに実行できる短いアクションテーブル

コンテンツページの種類

種類	使用する場面	主なコンポーネント
データテーブル + 説明	在庫、ベンチマーク	テーブル + .body-text + .bullet-list
コールアウトスタック	特定項目の詳細分析	複数の .callout ボックス（緑／赤／アンバー）
テーブル + コールアウト	インサイトを含むパフォーマンスデータ	テーブル + 要約用の単一のコールアウト
Rec-Card スタック	優先度順の推奨事項	.priority-banner + .rec-card スタック
複合分析	複数部分からなるセクション	テーブル + コールアウト + 箇条書き + サブセクション

---

説明文のルール

1. 可能な限り、1ページにつき1セクションにします。 セクションが複数ページにわたる場合は、後続のページに「（続き）」を付けます。
2. データから始めます。 説明文より前に、テーブルと KPI カードを配置します。
3. 根拠の後にコールアウトを配置します。 すべてのデータテーブルの後に、主要なインサイトを要約するコールアウトを配置します。
4. 実績値がある場合は推定しません。 データに正確な値がある場合は、正確な合計を算出します。
5. すべてをベンチマークと比較します。 指標と併せて、必ず業界ベンチマークを示します。
6. 深刻度の色で状態を示します。 緑／アンバー／赤は、パフォーマンス指標にのみ使用します。
7. コールアウトの色は深刻度に合わせます。 強みには .callout-green、問題には .callout-red、警告には .callout-amber、中立的なインサイトには .callout-blue を使用します。
8. セクションタイトルの下にアクセントルールを配置します。 すべての .section-title の後に <hr class="accent-rule"> を配置します。
9. rec-card の項目を統一します。 すべての推奨カードに、最低限、タイトルバーと ISSUE、ACTION の各フィールドを含めます。

---

ページのはみ出し防止

ページの高さは 11in に固定されています。ページコンテナーからはみ出したコンテンツは、PDF 上で見える状態になります。各ページを作成する前に、必ずコンテンツの配置を計画します。

高さの予算

領域	高さ
コンテンツの余白（上部 + 下部）	約1.3in
ページフッター	約0.4in
利用可能なコンテンツ領域	約9.3in

コンポーネント密度の上限

コンポーネント	1ページあたりの最大項目数	高密度モードでの調整
Rec-card（全フィールド）	3カード	4カード以上の場合は任意のフィールドを削除
Rec-card（最小構成）	4～5カード	マージンを 8px 0 12px に縮小
データテーブル	10～12行	13行以上の場合はフォントを 7.5pt、パディングを 3px 8px に縮小
コールアウトボックス	1ページあたり3～4個	パディングを 10px 14px に縮小
箇条書き	6～8項目	説明を短くする

改ページの方針

1. PDF にエクスポートする前に、ブラウザーですべてのページを確認します
2. はみ出しが発生した場合は、ページ間でコンテンツを再配置します
3. 各 <div class="page"> は PDF の1ページです
4. 複数ページに分割すべきでないコンポーネントには .keep-together を使用します
5. コンテンツを再配置した場合は、それ以降のページ番号をすべて更新します

---

アンチパターン（絶対に行わないこと）

1. 白い背景は使用しないでください。 コンテンツページには常に #FAF7F2（暖かみのあるクリーム色）を使用してください。
2. セクションタイトルを太字にしないでください。 .section-title には Regular（400）を使用してください。
3. 装飾用のアクセントバーは追加しないでください。 セクションタイトルの下にある幅40pxのアクセントルール以外は使用しないでください。
4. レポートに絵文字を使用しないでください。 ユーザーから明示的に依頼された場合を除きます。
5. コンテンツページをダークモードにしないでください。 ダークテーマは表紙ページのみで使用します。
6. 長文をひとまとまりにしないでください。 長い文章は箇条書きに分けてください。コールアウトは最大3文にしてください。
7. 数値を未フォーマットのまま使用しないでください。 常に $X,XXX または $XXXK の形式を使い、tabular-nums を適用してください。
8. クラスがある場合、インラインスタイルを使用しないでください。 コンポーネントライブラリを使用してください。
9. ページフッターに等幅フォントを使用しないでください。 フッターには本文フォントを使用してください。
10. rec-cardを単独で配置しないでください。 優先度ティアバナーと最初のカードは同じページに配置してください。
11. アクセントルールを省略しないでください。 すべての .section-title の直後に <hr class="accent-rule"> を配置してください。

---

PDFのエクスポート

自動エクスポート（推奨）

信頼性の高い8.5x11インチの縦向きPDFを生成するには、Chromeのヘッドレスモードを使用してください。

"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
  --headless \
  --disable-gpu \
  --print-to-pdf="/OUTPUT/PATH/report.pdf" \
  --no-pdf-header-footer \
  --print-to-pdf-no-header \
  "file:///PATH/TO/report.html"

手動エクスポート（フォールバック）

1. HTMLファイルをChromeで開きます
2. Cmd+P --> 「PDFとして保存」を選択します
3. 余白を「なし」に設定します
4. 「背景のグラフィック」を有効にします
5. 用紙サイズを「レター（8.5" x 11"）」に設定します

必須の印刷用CSS

すべてのレポートに、この @page ルールと @media print ブロックを含める必要があります。

@page { size: 8.5in 11in; margin: 0; }
@media print {
  * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  body { background: white; margin: 0; }
  .page {
    margin: 0;
    box-shadow: none;
    page-break-after: always;
    page-break-inside: avoid;
    width: 8.5in;
    min-height: 11in;
  }
  .page:last-child { page-break-after: avoid; }
}

---

QAチェックリスト

提出前に、以下を確認してください。

データの正確性

• すべての数値が正確で、相互に整合しています
• パーセンテージの合計が、合計すべき箇所で一致しています
• 収益の数値が、エグゼクティブサマリーのKPI、表、rec-card内の参照箇所で一致しています

ページのはみ出し（すべてのページを確認）

• コンテンツがページの境界からはみ出していません
• rec-cardのページには、フィールドがすべて表示されるカードが最大3枚あります
• 13行以上のデータテーブルでは、密度の高い表示モードを使用しています

視覚的な一貫性

• すべてのコンテンツページに、正しいページ番号を記載した .page-footer があります
• 表紙ページには .page-footer がありません
• すべての .section-title の直後に <hr class="accent-rule"> があります
• 複数ページにわたるセクションに「（続き）」と記載されています
• コールアウトの色が、その重大度と一致しています
• 優先度バナーに正しいレベルのクラスを使用しています

PDFのエクスポート

• size: 8.5in 11in を指定した @page ルールがあります
• 全体に print-color-adjust: exact が適用されています
• すべての背景色がPDFに表示されています