alterlab-pptx-posters

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

概要

このスキルは、ユーザーが PowerPoint／PPTX または HTML ポスターを明示的に依頼した場合にのみ使用します。標準的な研究ポスターでは、alterlab-latex-posters がデフォルトです。タイポグラフィをより細かく調整でき、多くの学術会議で期待される形式です。

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

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

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

次の場合にこのスキルを使用します。

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

該当しない場合

シナリオ	代わりに使用
形式の指定がない「ポスター」、「研究ポスター」、「会議ポスター」	alterlab-latex-posters
LaTeX、tikzposter、beamerposter、または baposter への言及がある場合	alterlab-latex-posters
口頭発表用のスライドデッキ	alterlab-scientific-slides
完成した論文からポスター（およびウェブサイト／動画）を直接自動生成する場合	alterlab-paper-2-web
フルポスターではなく、単一のインフォグラフィックやデータストーリーの図版	alterlab-infographics

ビジュアル要素の生成

図やイラストが理解に役立つ場合は、alterlab-scientific-schematics スキル（図／模式図）または alterlab-generate-image スキル（画像）を呼び出します。図版は必須ではありません。明瞭さが向上する箇所にのみ追加してください。

ビジュアルを使ったポスターの実用的なワークフロー：

1. 役立つビジュアル要素（メイン画像、導入、手法、結果、結論）を計画します
2. 上記のスキルを使って必要な図版を生成します
3. HTML テンプレートに図版を組み込みます
4. ビジュアルの周囲にテキストを追加します

一般に、ビジュアルでメッセージの多くを伝え、テキストを簡潔にすると、ポスターは最も読みやすくなります。

---

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

ポスターのビジュアル内のテキストは、ポスターとして読みやすい大きさにする必要があります。ポスターは 4～6 フィート離れて見るため、文字を大きくする必要があります。図版を生成する際は、プロンプトに次の可読性の制約を記述してください。

POSTER FORMAT GUIDELINES:
- Keep to 3-4 elements per graphic (3 is ideal)
- Around 10 words total in the entire graphic
- Avoid complex workflows with 5+ steps (split into 2-3 simple graphics instead)
- Avoid multi-level nested diagrams (flatten to a single level)
- One key point per case study (not multiple sub-sections)
- Large bold text (80pt+ for labels, 120pt+ for key numbers)
- High contrast (dark on white OR white on dark; avoid gradients behind text)
- Generous white space (around 50%)
- Thick lines (5px+), large icons (200px+)
- One single message per graphic

生成前に、プロンプトを確認して要素数を数えます。

• 説明に 5 項目以上ある場合は、複数の図版に分けます
• ワークフローに 5 段階以上ある場合は、上位 3～4 段階のみを示します
• 比較対象の手法が 4 つ以上ある場合は、上位 3 つ、または「自分たちの手法 vs 最良のベースライン」のみにします

例 — 情報過多（7 段階のワークフロー）：「創薬ワークフロー：標的の特定、合成、スクリーニング、リード最適化、検証、臨床試験、FDA 承認、それぞれの指標」— 段階が多すぎるため、文字が小さく読みづらくなります。

例 — 読みやすい（3 つの大きな段階）：「A0 用ポスター形式。極めてシンプルな 3 ボックスのワークフロー：「発見」→「検証」→「承認」。各単語を非常に大きな太字（120pt 以上）で表示。太い矢印（10px）。余白は 60％。この 3 語のみで、下位の手順はなし。12 フィート離れても読めること。」— 同じ内容を、読みやすいポスター形式に簡略化しています。

---

コンテンツのはみ出しを防ぐ

テキストや図版がポスターの端で切れるのは最もよくある不備であり、画面上では見落としやすいため、事前にセクションや単語数を調整し、エクスポート後に四辺すべてを確認してください。

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. ビジュアル要素の生成

上記のとおり、alterlab-scientific-schematics（図）または alterlab-generate-image（画像）を使って図を生成します。ポスターのグラフィックをシンプルで読みやすく保つためのプロンプト例です（figures/ ディレクトリに保存してください）。

• ヒーロー画像 — 「A0 のポスター形式。ヒーローバナー：大きな文字（120pt 以上）で『[TOPIC]』。濃い青のグラデーション背景。象徴的なビジュアルを 1 つ。テキストは最小限。15 フィート離れても読めること。」
• 導入のビジュアル — 「A0 のポスター形式。アイコンは 3 つだけのシンプルなビジュアル：[icon1] → [icon2] → [icon3]。ラベルは 1 語（80pt 以上）。余白は 50％。8 フィート離れても読めること。」
• 手法のフローチャート — 「A0 のポスター形式。ボックスは 4 つだけのシンプルなフローチャート：STEP1 → STEP2 → STEP3 → STEP4。巨大なラベル（100pt 以上）。太い矢印。余白は 50％。サブステップなし。」
• 結果の可視化 — 「A0 のポスター形式。棒は 3 本だけのシンプルな棒グラフ：BASELINE（70％）、EXISTING（85％）、OURS（95％）。棒の上に巨大なパーセンテージ（120pt 以上）。軸なし、凡例なし。余白は 50％。」
• 結論 — 「カードは正確に 3 枚：『95%』（150pt）『ACCURACY』（60pt）、『2X』（150pt）『FASTER』（60pt）、チェックマーク『READY』（60pt）。余白は 50％。ほかのテキストなし。」

---

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

ステージ 1：計画

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

ステージ 2：ビジュアル要素の生成（AI 活用）

生成する図はそれぞれ、メッセージは 1 つ、要素は少数にしてシンプルに保ってください。情報量の多いグラフィックは、ポスターを閲覧する距離では文字が読めなくなるためです。

mkdir -p figures

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

ステージ 3：HTML ポスターの作成

1. このスキルの assets/ ディレクトリからテンプレートをコピーします。

   cp assets/poster_html_template.html poster.html
   

2. コンテンツを更新します。

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

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

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

ステージ 4：PDF へのエクスポート

テンプレートの @page ルール（テンプレートの <style> に追加済み）で PDF のページサイズがポスターのサイズに固定されるため、エクスポート結果が Letter/A4 に合わせて切り抜かれることなく、ポスターの寸法で出力されます。

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

1. Chrome で poster.html を開きます
2. 印刷します（Cmd/Ctrl + P）
3. 「PDF として保存」を選択します
4. 用紙サイズ：@page ルールで設定されたサイズのままにするか、ポスターに合ったカスタムサイズを選択します
5. 余白：なし
6. 「背景のグラフィック」を有効にします（有効にしないと、グラデーションとブロックの背景が出力されません）

コマンドライン（Chrome ヘッドレス）：

# Use the new headless mode (Chrome 132+ ships old --headless only as the
# separate chrome-headless-shell binary). On macOS the binary lives at:
#   /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
  --headless=new \
  --no-pdf-header-footer \
  --print-to-pdf=poster.pdf \
  "file://$PWD/poster.html"

--no-pdf-header-footer は以前の --print-to-pdf-no-header に代わるものです。バージョン約 118 より前の Chrome では、以前のフラグ名を使用してください。ページサイズと余白ゼロの設定は CLI フラグではなく、テンプレートの @page ルールによって決まります。

ステージ 5：PPTX に変換する（必要な場合）

「PPTX」に求められる内容に応じて方法を選んでください：

オプション 1 — 画像 1 枚のスライド（高速、編集不可）。 書き出した PDF ページ（またはラスタライズした PNG）を、ポスターサイズのスライドに全面表示の画像として配置します。ユーザーが投影や提出のための .pptx コンテナ を求めているだけの場合に適した選択肢です。LibreOffice の PDF インポートでは PDF が描画として扱われるため、スライドの内容は実質的に統合された画像となり、PowerPoint でテキストを編集することはできません。

# Rasterize the PDF to a PNG, then place it as one slide (see python-pptx below).
# A direct `libreoffice --convert-to pptx poster.pdf` produces a non-editable,
# image-like slide and often misplaces content — prefer the python-pptx path.
magick -density 150 poster.pdf poster.png

オプション 2 — python-pptx を使ったネイティブ PPTX（編集可能）。 ユーザーが PowerPoint でポスターを編集したい場合に使用します。同じ figures/ とテキストからスライドを作成し、各要素が PowerPoint の実際の移動可能なオブジェクトになるようにします。スライドのサイズをポスターの向きに合わせます。テンプレートは縦向き、幅 36 インチ × 高さ 48 インチです：

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

prs = Presentation()
prs.slide_width = Inches(36)   # portrait: width < height (match the template)
prs.slide_height = Inches(48)

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

# Add images from figures/ (positions in inches from top-left)
slide.shapes.add_picture("figures/hero.png", Inches(0), Inches(0), width=Inches(36))
# ... add text boxes and other images for each section

prs.save("poster.pptx")

uv pip install python-pptx（または uvx）でインストールします。magick は ImageMagick です。

---

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

---

品質チェックリスト

ステップ 0：生成前のレビュー

予定している図をそれぞれ確認してください：

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

次のパターンは避けてください：

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

ステップ 2b：生成後のレビュー

生成した図をそれぞれ 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 個に統合
• ❌ 視覚的な階層が明確でない → 重要な発見を目立たせる

---

他のスキルとの連携

このスキルは次と連携して使用できます：

• alterlab-scientific-schematics：ポスターの図やフローチャート
• alterlab-generate-image：メイン画像やスタイライズされたグラフィック
• alterlab-latex-posters：ポスター作成のデフォルトスキル（PPTX／PowerPoint または HTML が明示的に求められていない限り、こちらを使用）

---

テンプレートアセット

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：レイアウトの原則とグリッドシステム

AlterLab Academic Skills スイートの一部です。