pptx-posters

PPTX 研究ポスター（HTML ベース）

概要

⚠️ ユーザーが PPTX／POWERPOINT 形式のポスターを明示的にリクエストした場合に限り、このスキルを使用してください。

標準的な研究ポスターには、より優れたタイポグラフィ制御を提供し、学術会議での標準となっている latex-posters スキルを使用してください。

このスキルでは HTML/CSS を使用して研究ポスターを作成し、PDF にエクスポートしたり、PowerPoint 形式に変換したりできます。ウェブベースのアプローチには、次の利点があります。

• モダンでレスポンシブなレイアウト
• AI 生成ビジュアルを簡単に組み込める
• ブラウザーで素早く反復・プレビューできる
• ブラウザーの印刷機能で PDF にエクスポートできる
• 必要に応じて PPTX に変換できる

このスキルを使用する場面

次の場合に限り、このスキルを使用してください。

• ユーザーが「PPTX poster」、「PowerPoint poster」、または「PPT poster」を明示的にリクエストした場合
• ユーザーが HTML ベースのポスターを具体的に求めている場合
• 作成後に PowerPoint でポスターを編集する必要がある場合
• LaTeX を利用できない、またはユーザーが LaTeX 以外の方法を求めている場合

次の場合は、このスキルを使用しないでください。

• ユーザーが形式を指定せずに「ポスター」を求めている場合 → latex-posters を使用してください
• ユーザーが「研究ポスター」または「学会ポスター」を求めている場合 → latex-posters を使用してください
• ユーザーが LaTeX、tikzposter、beamerposter、または baposter に言及している場合 → latex-posters を使用してください

AI によるビジュアル要素の生成

標準ワークフロー：HTML ポスターを作成する前に、主要なビジュアル要素をすべて AI で生成します。

視覚的に魅力のあるポスターを作成するため、次の方法を推奨します。

1. 必要なビジュアル要素をすべて計画する（ヒーロー画像、導入、手法、結果、結論）
2. scientific-schematics または Nano Banana Pro を使用して各要素を生成する
3. 生成した画像を HTML テンプレートに配置する
4. ビジュアルの周囲にテキストを追加する

目標：ポスター面積の 60～70％を AI 生成ビジュアル、30～40％をテキストにします。

---

重要：ポスターサイズのフォント要件

⚠️ AI 生成ビジュアライゼーション内のテキストは、すべてポスター上で読みやすいサイズにする必要があります。

ポスター用のグラフィックを生成するときは、すべてのプロンプトにフォントサイズの指定を必ず含めてください。ポスターのグラフィックは 4～6 フィート離れた場所から見られるため、テキストは大きくする必要があります。

ポスター用グラフィックのすべてのプロンプトに必須の要件：

POSTER FORMAT REQUIREMENTS (STRICTLY ENFORCE):
- ABSOLUTE MAXIMUM 3-4 elements per graphic (3 is ideal)
- ABSOLUTE MAXIMUM 10 words total in the entire graphic
- NO complex workflows with 5+ steps (split into 2-3 simple graphics instead)
- NO multi-level nested diagrams (flatten to single level)
- NO case studies with multiple sub-sections (one key point per case)
- ALL text GIANT BOLD (80pt+ for labels, 120pt+ for key numbers)
- High contrast ONLY (dark on white OR white on dark, NO gradients with text)
- MANDATORY 50% white space minimum (half the graphic should be empty)
- Thick lines only (5px+ minimum), large icons (200px+ minimum)
- ONE SINGLE MESSAGE per graphic (not 3 related messages)

⚠️ 生成する前に：プロンプトを見直し、要素の数を確認してください

• 説明に項目が 5 つ以上ある場合 → 作業を中止し、複数のグラフィックに分けてください
• ワークフローに段階が 5 つ以上ある場合 → 作業を中止し、主要なステップを 3～4 個だけ表示してください
• 比較対象の手法が 4 つ以上ある場合 → 作業を中止し、上位 3 つ、または「自分たち vs 最良のベースライン」だけを表示してください

例 — 誤り（7 段階のワークフロー）：

# ❌ Creates tiny unreadable text
python scripts/generate_schematic.py "Drug discovery workflow: Stage 1 Target ID, Stage 2 Synthesis, Stage 3 Screening, Stage 4 Lead Opt, Stage 5 Validation, Stage 6 Clinical Trial, Stage 7 FDA Approval with metrics." -o figures/workflow.png

例 — 正しい（3 つの主要段階）：

# ✅ Same content, simplified to readable poster format
python scripts/generate_schematic.py "POSTER FORMAT for A0. ULTRA-SIMPLE 3-box workflow: 'DISCOVER' → 'VALIDATE' → 'APPROVE'. Each word in GIANT bold (120pt+). Thick arrows (10px). 60% white space. ONLY these 3 words. NO substeps. Readable from 12 feet." -o figures/workflow_simple.png

---

重要：コンテンツのはみ出し防止

⚠️ ポスターの端でテキストやコンテンツが切れてはいけません。

防止ルール：

1. セクション数を制限する（最大 5～6 セクション）：

✅ GOOD - 5 sections with room to breathe:
   - Title/Header
   - Introduction/Problem
   - Methods
   - Results (1-2 key findings)
   - Conclusions

❌ BAD - 8+ sections crammed together

2. 文字数の上限：

• セクションごと：最大 50～100 語
• ポスター全体：最大 300～800 語
• コンテンツがさらに多い場合：削るか、配布資料を作成してください

---

主な機能

1. HTML/CSS ポスターのデザイン

HTML テンプレート（assets/poster_html_template.html）には、次の要素が含まれています。

• ポスターの固定サイズ（36×48 インチ = 2592×3456 pt）
• グラデーションスタイルのプロ仕様ヘッダー
• 3 列のコンテンツレイアウト
• モダンなスタイルのブロックベースのセクション
• 参考文献と連絡先情報を含むフッター

2. ポスターの構成

標準レイアウト：

┌─────────────────────────────────────────┐
│  HEADER: Title, Authors, Hero Image     │
├─────────────┬─────────────┬─────────────┤
│ Introduction│   Results   │  Discussion │
│             │             │             │
│   Methods   │   (charts)  │ Conclusions │
│             │             │             │
│  (diagram)  │   (data)    │   (summary) │
├─────────────┴─────────────┴─────────────┤
│  FOOTER: References & Contact Info      │
└─────────────────────────────────────────┘

3. ビジュアルの統合

各セクションでは、AI 生成ビジュアルを目立つように配置してください。

ヒーロー画像（ヘッダー）：

<img src="figures/hero.png" class="hero-image">

セクションのグラフィック：

<div class="block">
  <h2 class="block-title">Methods</h2>
  <div class="block-content">
    <img src="figures/workflow.png" class="block-image">
    <ul>
      <li>Brief methodology point</li>
    </ul>
  </div>
</div>

4. ビジュアル要素の生成

HTML を作成する前に、ビジュアル要素をすべて生成してください。

# Create figures directory
mkdir -p figures

# Hero image - SIMPLE, impactful
python scripts/generate_schematic.py "POSTER FORMAT for A0. Hero banner: '[TOPIC]' in HUGE text (120pt+). Dark blue gradient background. ONE iconic visual. Minimal text. Readable from 15 feet." -o figures/hero.png

# Introduction visual - ONLY 3 elements
python scripts/generate_schematic.py "POSTER FORMAT for A0. SIMPLE visual with ONLY 3 icons: [icon1] → [icon2] → [icon3]. ONE word labels (80pt+). 50% white space. Readable from 8 feet." -o figures/intro.png

# Methods flowchart - ONLY 4 steps
python scripts/generate_schematic.py "POSTER FORMAT for A0. SIMPLE flowchart with ONLY 4 boxes: STEP1 → STEP2 → STEP3 → STEP4. GIANT labels (100pt+). Thick arrows. 50% white space. NO sub-steps." -o figures/workflow.png

# Results visualization - ONLY 3 bars
python scripts/generate_schematic.py "POSTER FORMAT for A0. SIMPLE bar chart with ONLY 3 bars: BASELINE (70%), EXISTING (85%), OURS (95%). GIANT percentages ON bars (120pt+). NO axis, NO legend. 50% white space." -o figures/results.png

# Conclusions - EXACTLY 3 key findings
python scripts/generate_schematic.py "POSTER FORMAT for A0. EXACTLY 3 cards: '95%' (150pt) 'ACCURACY' (60pt), '2X' (150pt) 'FASTER' (60pt), checkmark 'READY' (60pt). 50% white space. NO other text." -o figures/conclusions.png

---

PPTX ポスター作成のワークフロー

ステージ 1：計画

1. PPTX が明示的にリクエストされていることを確認する
2. ポスターの要件を決定する：
   • サイズ：36×48 インチ（最も一般的）または A0
   • 向き：縦（最も一般的）
3. コンテンツのアウトラインを作成する：
   • 中心となるメッセージを 1～3 個特定する
   • ビジュアル要素を 3～5 個計画する
   • テキストを最小限に抑えて下書きする（合計 300～800 語）

Stage 2: ビジュアル要素の生成（AI を活用）

重要：内容を最小限に抑えたシンプルな図を生成してください。

mkdir -p figures

# Generate each element with POSTER FORMAT specifications
# (See examples in Section 4 above)

Stage 3: HTML ポスターの作成

1. テンプレートをコピーします：

   cp skills/pptx-posters/assets/poster_html_template.html poster.html
   

2. 内容を更新します：

   • 仮のタイトルと著者を置き換えます
   • AI で生成した画像を挿入します
   • 補足テキストを最小限に抑えて追加します
   • 参考文献と連絡先情報を更新します

3. ブラウザーでプレビューします：

   open poster.html  # macOS
   # or
   xdg-open poster.html  # Linux
   

Stage 4: PDF へのエクスポート

ブラウザーの印刷機能を使う方法：

1. Chrome または Firefox で poster.html を開きます
2. 印刷します（Cmd/Ctrl + P）
3. 「PDF として保存」を選択します
4. 用紙サイズをポスターの寸法に合わせます
5. 余白を削除します
6. 「背景のグラフィック」を有効にします

コマンドライン（Chrome が利用可能な場合）：

# Chrome headless PDF export
google-chrome --headless --print-to-pdf=poster.pdf \
  --print-to-pdf-no-header \
  --no-margins \
  poster.html

Stage 5: PPTX への変換（必要な場合）

オプション 1：PDF から PPTX への変換

# Using LibreOffice
libreoffice --headless --convert-to pptx poster.pdf

# Or use online converters for simple cases

オプション 2：python-pptx による PPTX の直接作成

from pptx import Presentation
from pptx.util import Inches, Pt

prs = Presentation()
prs.slide_width = Inches(48)
prs.slide_height = Inches(36)

slide = prs.slides.add_slide(prs.slide_layouts[6])  # Blank

# Add images from figures/
slide.shapes.add_picture("figures/hero.png", Inches(0), Inches(0), width=Inches(48))
# ... add other elements

prs.save("poster.pptx")

---

HTML テンプレートの構成

提供されているテンプレート（assets/poster_html_template.html）には、次の内容が含まれています。

カスタマイズ用 CSS 変数

/* Poster dimensions */
body {
  width: 2592pt;   /* 36 inches */
  height: 3456pt;  /* 48 inches */
}

/* Color scheme - customize these */
.header {
  background: linear-gradient(135deg, #1a365d 0%, #2b6cb0 50%, #3182ce 100%);
}

/* Typography */
.poster-title { font-size: 108pt; }
.authors { font-size: 48pt; }
.block-title { font-size: 52pt; }
.block-content { font-size: 34pt; }

主なクラス

クラス	用途	フォントサイズ
.poster-title	メインタイトル	108pt
.authors	著者名	48pt
.affiliations	所属機関	38pt
.block-title	セクション見出し	52pt
.block-content	本文	34pt
.key-finding	ハイライト枠	36pt

---

品質チェックリスト

Step 0: 生成前のレビュー（必須）

計画した図を1つずつ確認します：

• 3～4項目以内で説明できますか？（5項目以上は不可）
• シンプルなワークフローですか？（3～4ステップ。7ステップ以上は不可）
• テキスト全体を10語以内で説明できますか？
• 伝えるメッセージは1つだけですか？（複数のメッセージは不可）

次のパターンは使用しないでください：

• ❌ 「7段階のワークフロー」→「3つの大きな段階」に簡略化します
• ❌ 「複数のケーススタディ」→ 図1つにつきケース1つにします
• ❌ 「2015～2024年の年次タイムライン」→「重要な年を3つだけ」にします
• ❌ 「6つの手法を比較」→「2つだけ：自分たちの手法と最良の手法」にします

Step 2b: 生成後のレビュー（必須）

生成した図を1つずつ25%のズームで確認します：

✅ 合格基準（すべて満たす必要があります）：

• テキストをすべてはっきり読める
• 要素数：3～4個以内
• 余白：50%以上
• 2秒で理解できる
• 5段階以上の複雑なワークフローではない
• 入れ子になった複数のセクションがない

❌ 不合格基準（1つでも該当する場合は再生成）：

• テキストが小さい、または読みにくい → 「150pt+」を指定して再生成します
• 要素が4つを超える → 「要素は3つだけ」と指定して再生成します
• 余白が50%未満 → 「余白を60%」と指定して再生成します
• 複雑な多段階構成 → 図を2～3個に分割します
• 複数のケースが詰め込まれている → 別々の図に分割します

エクスポート後

• 4辺のどこにも内容が切れていない（注意深く確認します）
• すべての画像が正しく表示される
• 色が想定どおりに表示される
• 25%の縮尺でもテキストが読める
• グラフィックがシンプルに見える（複雑な7段階のワークフローのようではない）

---

避けるべきよくある問題

AI 生成グラフィックでの問題：

• ❌ 要素が多すぎる（10項目以上）→ 最大3～5項目に抑えます
• ❌ テキストが小さすぎる → プロンプトで「巨大（100pt+）」を指定します
• ❌ 余白がない → すべてのプロンプトに「余白50%」を追加します
• ❌ 複雑なフローチャート（8ステップ以上）→ 4～5ステップ以内に制限します

HTML／エクスポートでの問題：

• ❌ 内容がポスターの寸法を超えている → ブラウザーでオーバーフローを確認します
• ❌ PDF に背景グラフィックが含まれていない → 印刷設定で有効にします
• ❌ PDF の用紙サイズが異なる → ポスターの寸法に正確に合わせます
• ❌ 画像の解像度が低い → 最低300 DPIを使用します

内容に関する問題：

• ❌ テキストが多すぎる（1000語超）→ 300～800語に減らします
• ❌ セクションが多すぎる（7つ以上）→ 5～6つにまとめます
• ❌ 視覚的な階層が明確でない → 重要な知見を目立たせます

---

他のスキルとの連携

このスキルは次のスキルと連携します：

• Scientific Schematics：ポスターの図やフローチャートをすべて生成します
• Generate Image / Nano Banana Pro：スタイル付きのグラフィックやメイン画像を作成します
• LaTeX Posters：ポスター作成のデフォルトスキルです（PPTX を明示的に求められていない限り、こちらを使用してください）

---

テンプレートアセット

assets/ ディレクトリで利用できます：

• poster_html_template.html：メインの HTML ポスターテンプレート（36×48 インチ）
• poster_quality_checklist.md：提出前の検証チェックリスト

参考資料

references/ ディレクトリで利用できます：

• poster_content_guide.md：コンテンツの構成と執筆ガイドライン
• poster_design_principles.md：タイポグラフィ、色彩理論、視覚的階層
• poster_layout_design.md：レイアウトの原則とグリッドシステム