pomelo-digital/pomelo-deck

Pomelo Deck Template

Pomeloブランドの.pptxデッキをPptxGenJSで構築するための再利用可能なテンプレート。デザインシステムを毎回再導出する必要がありません。

使用するタイミング

「Pomeloスタイルでデッキを作成/リスタイルして」というタスクが発生したとき — クライアントのパフォーマンスレポート、ピッチ、プロポーザルなど。ユーザーが既存のデッキをアップロードしてリスタイルを依頼した場合は、すべてのデータをそのまま保持し、レイアウトのみをこのシステムに変更します。

セットアップ（セッションごと）

1. 作業ディレクトリに以下のファイルが存在することを確認: pomelo.js、pomelo_logo.png（参考としてexample.jsも）。
2. 必要に応じてエンジンをインストール: npm install -g pptxgenjs し、スクリプトは NODE_PATH=$(npm root -g) node build.js で実行。
3. 最初に example.js を読む — すべてのスライドビルダーをエンドツーエンドで示しています。それをコピーして開始点としてください。

デザインシステム（既にpomelo.jsにエンコードされています — 手動で実装しないでください）

• キャンバス: 10" × 5.625"（16:9）、白背景。
• フォント: Georgia = 見出し/数字; Calibri = 本文、ラベル、表。
• 色: ink 1F2A2E（タイトル）、body 3D4A4E、muted 8A9498（キャプション/ページ番号）、coral EB6B4F（主要アクセント/アイブロウ/数字/アーク/ロゴ）、mint 76BBA8 + green 4F8B7B（副アクセント）、sand E8E5DD / light sand F7F6F3（パネルと合計行）、hairline D9D7D0。
• アイブロウラベル: 9pt Calibri、coral色、大文字、charSpacing:3。
• スライドタイトル: Georgia ~24pt（カバーセクションは28、区切りスライドは40、カバーは50）。
• モチーフ: コーナーからはみ出すネストされたリング（外側の色 + 白い内側）。arcsTR/arcsBL = 大（カバー/クロージング）; smallArcTR = 控えめ（コンテンツスライド）。
• フッター: pómelo ロゴを右下に; ページ番号 NN / TOTAL を左下に muted gray で表示。

API（const { PomeloDeck, TOKENS } = require('./pomelo')）

作成: const d = new PomeloDeck({ total: N, title, logo:'pomelo_logo.png' }) — total がページ番号を生成します。

スライドビルダー（各スライドを返すので、カスタムコンテンツを追加できます）:

• d.cover({ kicker, title, subtitle, sub2, stats:[[num,label,sub]], footer }) — stats は5列ストリップとしてレンダリング; 長い値は自動縮小。
• d.divider({ kicker, title, sub, accent }) — セクション区切り。accent = TOKENS.CORAL（デフォルト）または TOKENS.MINT。
• d.content({ kicker, title, note, size, arc, page }) — 標準コンテンツスライド（アイブロウ＋タイトル＋フッター）。スライドを返すので、本文は自分で構成します。
• d.closing({ kicker, title, subtitle, footer })。

コンポーネント（スライド上で呼び出し）:

• d.statGrid(s, [[num,label,sub,color]], { x,y,w,cols,gh,gapx,gapy,numSize }) — KPIカード。
• d.statCell(s,x,y,w,num,label,sub,color,numSize) — 単一KPI。
• d.metricRows(s,x,y,w,[[label,val]]) — ラベル/値の行（ヘアライン付き。クリエイティブ画像の横に適しています）。
• d.table(s, head, rows, { x,y,w,colW,fs,hfs,rowH,totalLast,boldFirst,margin }) — Pomeloテーブル（ダークヘッダー、ゼブラ行、sand合計行）。
• d.eyebrow / d.title / d.note / d.line — プリミティブ。

保存: await d.save('out.pptx')。

注意点（苦労して学んだこと — これらを尊重してください）

• 長い数字は折り返します。 約1.74"の統計セル内で、6文字を超える値（例: ₹1,27,629、2,652,386）はデフォルトの30ptで折り返します。statGrid に numSize:20 を渡してください — カバーは自動的に処理します。
• 幅が広い/長いテーブルは下部にはみ出します。 全幅テーブルは rowH:0.235 で約13データ行に収まります。テーブルがそれより長い場合、または統計グリッドの下にある場合は、行を縮小して読みにくくする代わりに、2つの横並びテーブル（それぞれ約4.4"幅、colW 5列）に分割してください。n-SHIELDスライド20のパターンを参照。
• カバーを装飾しすぎないでください。 全幅コンテンツ（統計ストリップなど）が左下のリングと衝突する場合は、arcsTR のみを使用し（arcsBL はスキップ）。
• リスタイル時にはクライアントデータをそのまま保持 — 数学的に間違っているように見える数値も含めて。それらはユーザーに別途フラグを立ててください。決して黙って「修正」しないでください。

ワークフロー

1. example.js を読み、build.js にコピー。
2. 上記のビルダーでスライドを構築し、クライアントのクリエイティブ画像はネイティブのアスペクト比で再利用。
3. 毎回画像にレンダリングしてQA: soffice --convert-to pdf してから pdftoppm -jpeg、または thumbnail.py。納品前には必ず目視確認 — 折り返された数字やあふれたテーブルがないかチェック。
4. 最終的な .pptx を outputs にコピーして提出。