微信扫一扫Presentation Slide Generator
概要
ユーザーの情報を元に、Kanagawaテーマで統一されたHTMLプレゼン資料を生成するスキル。 Script Firstの原則で決定論的処理を自動化し、Progressive Disclosureで必要なリソースのみを読み込む。
設計原則
| 原則 | 説明 | |------|------| | Script First | 決定論的処理はすべてスクリプトで実行（100%精度） | | LLM for Judgment | LLMは判断・創造が必要な部分のみ担当 | | Progressive Disclosure | 必要な時に必要なリソースのみ読み込み | | Schema Driven | 入出力はJSONスキーマで検証 | | 16:9 Aspect Ratio | すべてのスライドは16:9アスペクト比を厳守 | | A4印刷優先設計 | 印刷時はpt単位フォント・mm単位寸法で確実にA4内に収める |
デフォルト設定
| 項目 | デフォルト値 | 説明 | |------|-------------|------| | テーマ | Kanagawa Light（ライトモード） | 読みやすさと印刷時のインク節約を考慮 | | アジェンダインジケーター | 有効（左上固定表示） | セクション追跡・クリックジャンプ機能付き | | 印刷フォーマット | A4横向き16:9（281mm×158mm） | 100%スケールで最適印刷 | | アスペクト比 | 16:9 | 画面・印刷の両方で一貫した表示 |
モード一覧
| モード | 用途 | 発動条件 | |--------|------|----------| | create | 新規スライド作成 | プレゼン作成要求 | | modify | 既存スライド修正 | structure.md存在 + 修正要求 | | verify | 視覚検証 | HTML生成後 | | pdf | PDF出力 | PDF/印刷要求 |
Part 1: スライド作成ワークフロー
createモードワークフロー
Phase 1: ヒアリング（LLM Task）
┌─────────────────────────────────────────────────────────┐
│ hearing-facilitator │
│ 📖 Read: agents/hearing-facilitator.md (必要時) │
│ │
│ Output: ヒアリング結果 │
└─────────────────────────────────────────────────────────┘
↓
Phase 2: 構成設計（LLM Task + Script Validation）
┌─────────────────────────────────────────────────────────┐
│ structure-designer → [validate-structure.mjs] │
│ 📖 Read: agents/structure-designer.md │
│ 📖 Read: references/strategy.md (構成戦略) │
│ 📖 Read: references/icons.md (アイコン選定時) │
│ │
│ Output: structure.md → ユーザー承認 │
└─────────────────────────────────────────────────────────┘
↓
Phase 3: HTML生成（LLM Task + Script Validation）
┌─────────────────────────────────────────────────────────┐
│ html-generator │
│ 📖 Read: agents/html-generator.md │
│ 📖 Read: references/slide-components.md (スライドタイプ)│
│ 📖 Read: references/theme-style.md (テーマ) │
│ 📖 Read: assets/slide-template.html (テンプレート) │
│ │
│ Output: index.html + deploy-guide.md │
└─────────────────────────────────────────────────────────┘
↓
Phase 3.5: 視覚検証（Script Task - 100%精度）
┌─────────────────────────────────────────────────────────┐
│ [verify-slides.mjs] │
│ │
│ Input: index.html │
│ Output: スクリーンショット + 問題レポート │
│ │
│ 問題発見時 → LLMが修正 → 再検証 │
└─────────────────────────────────────────────────────────┘
↓
Phase 4: 完了（Script Task）
┌─────────────────────────────────────────────────────────┐
│ [log_usage.mjs] → フィードバック記録 │
└─────────────────────────────────────────────────────────┘
凡例: [script] = Script Task (100%精度), 無印 = LLM Task
modifyモードワークフロー
Phase 1: 修正分析（LLM Task）
┌─────────────────────────────────────────────────────────┐
│ slide-modifier │
│ 📖 Read: agents/slide-modifier.md │
│ 📖 Read: 既存structure.md │
│ │
│ Output: 修正案 → ユーザー承認 │
└─────────────────────────────────────────────────────────┘
↓
Phase 2: 修正適用（LLM Task）
┌─────────────────────────────────────────────────────────┐
│ html-generator（再生成） │
│ │
│ Output: 更新されたindex.html + structure.md │
└─────────────────────────────────────────────────────────┘
↓
Phase 3: 視覚検証 + 完了
（createモードと同様）
Part 2: スライドタイプ（23種）
基本タイプ（15種）
| タイプ | クラス名 | 用途 | アニメーション |
|--------|---------|------|---------------|
| タイトル | slide-title | 表紙 | scale + rotation |
| アジェンダ | slide-agenda | 目次 | stagger x軸移動 |
| セクション | slide-section | 見出し | scale + y軸移動 |
| メッセージ | slide-message | 主張 | y軸移動 + fade |
| リスト | slide-list | 箇条書き | stagger x軸移動 |
| 比較 | slide-compare | Before/After | 左右から同時出現 |
| フロー | slide-flow | プロセス | stagger scale |
| タイムライン | slide-timeline | 時系列 | stagger y軸 |
| テーブル | slide-table | データ表 | 行ごとstagger |
| 統計 | slide-stats | 数値強調 | scale + グラデ |
| チャート | slide-chart | グラフ | scaleY |
| 図解 | slide-diagram | 図形 | stagger scale |
| 引用 | slide-quote | 引用文 | y軸移動 + fade |
| 画像 | slide-image | 画像+テキスト | x軸移動 |
| フルイメージ | slide-full-image | 全画面背景 | fade |
拡張タイプ（8種）
| タイプ | クラス名 | 用途 | アニメーション |
|--------|---------|------|---------------|
| ピラミッド | slide-pyramid | 階層構造 | scaleX展開 |
| サークル | slide-circle | 中心+周辺 | 中心→周辺scale |
| グリッド | slide-grid | カード一覧 | stagger scale |
| ハイライト | slide-highlight | 重要値強調 | scale + グラデ |
| アイコングリッド | slide-icon-grid | アイコン一覧 | stagger rotation |
| プロセス（縦） | slide-process | 縦ステップ | stagger x移動 |
| 引用（拡張） | slide-quote-extended | 引用+著者 | mark rotation |
| ヒーロー | slide-hero | CTA見出し | badge→title→cta |
詳細仕様: 📖 references/slide-components.md（HTML生成時に読み込み）
Part 3: Progressive Disclosure リソースマップ
読み込みタイミング
リソースは必要な時のみ読み込む。全てを一度に読み込まない。
agents/ （LLM Task仕様）
| Agent | 読み込み条件 | 責務 | |-------|-------------|------| | hearing-facilitator.md | Phase 1開始時 | ヒアリング・情報収集 | | structure-designer.md | Phase 2開始時 | 構成設計・スライドタイプ判定 | | html-generator.md | Phase 3開始時 | HTML生成・アニメーション実装 | | slide-modifier.md | modifyモード時 | 既存スライド修正 |
schemas/ （入出力スキーマ）
| Schema | 読み込み条件 | 用途 | |--------|-------------|------| | structure-definition.json | 構成設計時 | structure.md検証 | | slide-definition.json | HTML生成時 | スライド定義検証 | | validation-result.json | 検証完了時 | 検証結果検証 |
references/ （詳細知識）
| Reference | 読み込み条件 | 内容 | |-----------|-------------|------| | strategy.md | 構成設計時 | BSEC構成・ボリューム設計 | | writing-rules.md | 構成設計時 | タイトル・メッセージ作成 | | layout-visual.md | HTML生成時 | レイアウト・余白 | | diagram-chart.md | 図解スライド時 | 14種図解・グラフ | | slide-components.md | HTML生成時 | 23種スライドタイプ詳細 | | theme-style.md | HTML生成時 | Kanagawaテーマ・CSS変数 | | icons.md | アイコン選定時 | 18カテゴリ・マッピング | | print-layout.md | PDF出力時 | 印刷用CSS | | llm-script-separation.md | 設計時参照 | 責務分離ガイド |
assets/ （テンプレート）
| Asset | 読み込み条件 | 用途 | |-------|-------------|------| | slide-template.html | HTML生成時 | 完全HTMLテンプレート | | structure-template.md | 構成設計時 | structure.mdテンプレート | | gas-deploy-guide.md | 完了時出力 | GASデプロイ手順 | | print-styles.css | PDF出力時 | 印刷用CSS |
scripts/ （決定論的処理 - 100%精度）
| Script | 用途 | 実行タイミング |
|--------|------|---------------|
| validate-structure.mjs | 構成案検証（23種対応） | Phase 2完了時 |
| verify-slides.mjs | 視覚検証（16:9対応） | Phase 3.5 |
| log_usage.mjs | フィードバック記録 | 完了時 |
Part 4: 必須制約
16:9アスペクト比（最重要）
すべてのスライドは16:9アスペクト比を厳守すること。
必須HTML構造
<div class="slider" id="slider">
<div class="slide-area"> <!-- 16:9強制コンテナ -->
<div class="slider__container">
<!-- スライドHTML -->
</div>
</div>
</div>
必須CSS変数
:root {
--slide-aspect-ratio: 16 / 9;
--slide-max-width: min(100vw, calc(100vh * (16 / 9)));
--slide-max-height: min(100vh, calc(100vw * (9 / 16)));
}
検証コマンド
node scripts/verify-slides.mjs ./index.html --check-ratio
index.html ⇔ structure.md 同期ルール
重要: 両ファイルは常に整合性を維持すること。
【HTML修正時】
index.html 修正 → structure.md 該当セクション更新 → 修正履歴追記
【構成変更時】
structure.md 修正 → ユーザー承認 → index.html 再生成
Part 5: 実行コマンドリファレンス
構成案検証
# JSON形式で検証
node scripts/validate-structure.mjs structure.json
# パイプで検証
echo '{"title":"Test","slides":[...]}' | node scripts/validate-structure.mjs
視覚検証
# スクリーンショット撮影（16:9ビューポート: 1920x1080）
node scripts/verify-slides.mjs ./index.html ./screenshots
# 16:9アスペクト比のみ検証
node scripts/verify-slides.mjs ./index.html --check-ratio
# 検証後に自動削除
node scripts/verify-slides.mjs ./index.html --auto-cleanup
# スクリーンショット削除のみ
node scripts/verify-slides.mjs ./index.html --cleanup
フィードバック記録
node scripts/log_usage.mjs --result success --phase "Phase 3" --agent "html-generator"
Part 6: 出力ディレクトリ構成
デフォルト構成
05_Project/
└── スライド/
└── slide-YYYY-MM-DD-{タイトル}/
├── index.html # プレゼンテーション本体
├── structure.md # 構造化データ（改善・修正用）
└── deploy-guide.md # GASデプロイ手順
Electronアプリ連携
Electronデスクトップアプリ（AIWorkflowOrchestrator）からこのスキルを呼び出す場合、出力ディレクトリはアプリの設定画面から構成可能:
| 設定項目 | 説明 | |----------|------| | outputDirectory | スライド出力先ディレクトリ（OS標準ダイアログで選択） | | autoCreateDirectory | ディレクトリ自動作成フラグ |
取得方法（Electronアプリ内）:
// Renderer Process
const settings = await window.slideSettingsAPI.getAll();
const outputDir = settings.data.outputDirectory;
関連ドキュメント:
- 技術仕様:
docs/technical/slide-settings.md - APIリファレンス:
docs/api/slide-settings-api.md - セキュリティ仕様:
.claude/skills/aiworkflow-requirements/references/security-api-electron.md（slideSettingsAPIセクション）
ベストプラクティス
すべきこと
| 推奨事項 | 理由 | |----------|------| | 1スライド1メッセージ | 明確な伝達 | | 構造化データを先に出力 | 手戻り最小化 | | ユーザー承認後にHTML生成 | 期待値合わせ | | Script検証を必ず実行 | 100%精度 | | index.htmlとstructure.md同期 | 整合性維持 |
避けるべきこと
| 禁止事項 | 問題点 | |----------|--------| | 全リソースを一度に読み込む | コンテキスト浪費 | | 承認なしでHTML生成 | 手戻り発生 | | 同期せずにファイル編集 | 整合性崩壊 | | 定義外のスライドタイプ使用 | アニメーション不具合 |
変更履歴
| Version | Date | Changes |
|---------|------|---------|
| 3.4.1 | 2026-01-23 | GSAP競合対策: 各スライドタイプ別にvisibility: visibleを明示設定、全子要素の可視化ルール追加（表紙・メッセージスライドが印刷されない問題を修正） |
| 3.4.0 | 2026-01-23 | A4印刷優先設計: 設計原則に追加、print-layout.md v3.0.0全面改訂（pt単位フォント・mm単位寸法・スライドタイプ別サイズ指定・サイクル図絶対配置）、print-styles.css全面改訂 |
| 3.3.0 | 2026-01-23 | デフォルト設定セクション追加: ライトモード・アジェンダインジケーター・A4横16:9印刷をデフォルトとして明記、スキーマ追加: structure-definition.json, slide-definition.json, validation-result.json |
| 3.2.0 | 2026-01-23 | 16:9 on A4印刷対応: 100%スケール印刷用に寸法最適化（281mm×158mm）、アジェンダインジケーター: 左上固定・クリックジャンプ機能をデフォルト追加 |
| 3.1.0 | 2026-01-14 | Electronアプリ連携（出力ディレクトリ設定機能）のドキュメント追加 |
| 3.0.0 | 2026-01-13 | skill-creator最新仕様対応: Progressive Disclosure形式にリファクタリング、リソースマップ追加、Schema Driven対応、設計原則明記 |
| 2.5.0 | 2026-01-07 | 整合性維持ルール強化 |
| 2.4.0 | 2026-01-07 | 16:9アスペクト比の厳格化 |
| 2.3.0 | 2026-01-04 | 印刷CSS刷新、LLM/Script責務分離 |
| 2.2.0 | 2026-01-03 | validate-structure.mjs 23種対応 |
| 2.0.0 | 2026-01-03 | ホバーエフェクト・拡張スライドタイプ追加 |
| 1.0.0 | 2026-01-02 | 初版作成 |