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（277mm×156mm）	100%スケール・右端切れ防止4mmバッファ付き
アスペクト比	16:9	画面・印刷の両方で一貫した表示

モード一覧

モード	用途	発動条件
create	新規スライド作成	プレゼン作成要求
modify	既存スライド修正	structure.md存在 + 修正要求
verify	視覚検証	HTML生成後
pdf	PDF出力	PDF/印刷要求

Part 1: スライド作成ワークフロー

createモードワークフロー

code

Phase 1: ヒアリング（LLM Task）
┌─────────────────────────────────────────────────────────┐
│ hearing-facilitator                                     │
│ 📖 Read: agents/hearing-facilitator.md (必要時)         │
│                                                         │
│ Output: ヒアリング結果                                   │
└─────────────────────────────────────────────────────────┘
                            ↓
Phase 2: 構成設計（LLM Task + Script Validation）
┌─────────────────────────────────────────────────────────┐
│ structure-designer → [validate-structure.js]           │
│ 📖 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.js]                                     │
│                                                         │
│ Input: index.html                                       │
│ Output: スクリーンショット + 問題レポート               │
│                                                         │
│ 問題発見時 → LLMが修正 → 再検証                         │
└─────────────────────────────────────────────────────────┘
                            ↓
Phase 3.6: 印刷品質検証（Script Task - 100%精度）
┌─────────────────────────────────────────────────────────┐
│ [validate-print.js]                                     │
│                                                         │
│ Input: index.html                                       │
│ Output: 12項目検証レポート（P01-P12）                   │
│                                                         │
│ 検証項目: Chrome拡張非表示・data-total動的化・           │
│ print-color-adjust・pt単位フォント・mm寸法・             │
│ ページネーション色・isolation・グラデーション等           │
│                                                         │
│ 問題発見時 → LLMが修正 → 再検証                         │
└─────────────────────────────────────────────────────────┘
                            ↓
Phase 3.7: UI/UXレビュー（LLM Task）
┌─────────────────────────────────────────────────────────┐
│ uiux-reviewer                                           │
│ 📖 Read: agents/uiux-reviewer.md                        │
│ 📖 Read: references/print-layout.md (印刷レビュー時)    │
│                                                         │
│ レビュー対象:                                            │
│ ① HTML画面表示のUI/UX（テキスト量・カードバランス）     │
│ ② A4印刷のUI/UX（溢れ・切れ・外部UI混入）              │
│                                                         │
│ Output: レビュー結果 + 改善提案（優先度付き）           │
│ 問題発見時 → LLMが修正 → 再レビュー                     │
└─────────────────────────────────────────────────────────┘
                            ↓
Phase 4: 完了（Script Task）
┌─────────────────────────────────────────────────────────┐
│ [log_usage.js] → フィードバック記録                    │
└─────────────────────────────────────────────────────────┘

凡例: [script] = Script Task (100%精度), 無印 = LLM Task

modifyモードワークフロー

code

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: 視覚検証 + UI/UXレビュー + 完了
（createモードのPhase 3.5 → 3.7 → 4と同様）

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モード時	既存スライド修正
uiux-reviewer.md	Phase 3.7（HTML生成後）	画面表示+A4印刷のUI/UXレビュー

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.js`	構成案検証（23種対応）	Phase 2完了時
`verify-slides.js`	視覚検証（16:9対応）	Phase 3.5
`validate-print.js`	印刷品質検証（12項目・P01-P12）	Phase 3.6
`build-single-html.js`	HTML/CSS/JavaScript結合（GASデプロイ用）	Phase 3完了時/デプロイ時
`log_usage.js`	フィードバック記録	完了時

Part 4: 必須制約

16:9アスペクト比（最重要）

すべてのスライドは16:9アスペクト比を厳守すること。

必須HTML構造

html

<div class="slider" id="slider">
  <div class="slide-area">  <!-- 16:9強制コンテナ -->
    <div class="slider__container">
      <!-- スライドHTML -->
    </div>
  </div>
</div>

必須CSS変数

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)));
}

検証コマンド

bash

node scripts/verify-slides.js ./index.html --check-ratio

index.html ⇔ structure.md 同期ルール

重要: 両ファイルは常に整合性を維持すること。

code

【HTML修正時】
index.html 修正 → structure.md 該当セクション更新 → 修正履歴追記

【構成変更時】
structure.md 修正 → ユーザー承認 → index.html 再生成

Part 5: 実行コマンドリファレンス

構成案検証

bash

# JSON形式で検証
node scripts/validate-structure.js structure.json

# パイプで検証
echo '{"title":"Test","slides":[...]}' | node scripts/validate-structure.js

視覚検証

bash

# スクリーンショット撮影（16:9ビューポート: 1920x1080）
node scripts/verify-slides.js ./index.html ./screenshots

# 16:9アスペクト比のみ検証
node scripts/verify-slides.js ./index.html --check-ratio

# 検証後に自動削除
node scripts/verify-slides.js ./index.html --auto-cleanup

# スクリーンショット削除のみ
node scripts/verify-slides.js ./index.html --cleanup

フィードバック記録

bash

node scripts/log_usage.js --result success --phase "Phase 3" --agent "html-generator"

Part 6: 出力ディレクトリ構成

デフォルト構成

分離構成（推奨）

code

05_Project/
└── スライド/
    └── slide-YYYY-MM-DD-{タイトル}/
        ├── index.html        # HTML（CSS/JavaScriptは外部参照）
        ├── styles.css        # CSS分離ファイル
        ├── scripts.js        # JavaScript分離ファイル
        ├── index-single.html # 結合版（GASデプロイ用、build-single-html.jsで生成）
        ├── structure.md      # 構造化データ（改善・修正用）
        └── deploy-guide.md   # GASデプロイ手順

1ファイル構成（従来）

code

05_Project/
└── スライド/
    └── slide-YYYY-MM-DD-{タイトル}/
        ├── index.html      # HTML/CSS/JavaScript全てインライン
        ├── structure.md    # 構造化データ（改善・修正用）
        └── deploy-guide.md # GASデプロイ手順

注: GASでは外部ファイル参照（<link href="styles.css">等）が動作しません。分離構成の場合は build-single-html.js で結合するか、GASテンプレート方式でデプロイします。詳細は assets/gas-deploy-guide.md を参照。

Electronアプリ連携

Electronデスクトップアプリ（AIWorkflowOrchestrator）からこのスキルを呼び出す場合、出力ディレクトリはアプリの設定画面から構成可能:

設定項目	説明
outputDirectory	スライド出力先ディレクトリ（OS標準ダイアログで選択）
autoCreateDirectory	ディレクトリ自動作成フラグ

取得方法（Electronアプリ内）:

typescript

// 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.7.0	2026-02-05	印刷品質自動検証スクリプト追加: validate-print.js（12項目P01-P12の決定論的検証）を新規作成。Phase 3.6追加: 視覚検証（Phase 3.5）とUI/UXレビュー（Phase 3.7）の間に印刷品質検証フェーズを挿入。LLM/Script責務分離強化: 印刷品質の判断をLLMの主観から決定論的スクリプト検証に移行。.mjs→.js統一: 全スクリプトを.js拡張子に統一（package.json `"type": "module"` 追加）
3.6.0	2026-02-05	UI/UXレビューエージェント追加: Phase 3.7にuiux-reviewer（画面表示+A4印刷の2軸レビュー）を追加。動的ページ数対応: スライドカウンターを`attr(data-total)`で動的化（ハードコード禁止）。質問バッジ: `.question-badge`コンポーネント追加（アイコン+「質問」テキスト）。Chrome拡張非表示: `body>:not(.slider)`で外部UI要素を印刷から除外。質問トーン改善: 「有効か？」→「方針共有+追加アドバイス依頼」形式に統一。print-styles.css強化*: question-badge/single-col/alert/solution/summary-list/isolation追加
3.5.0	2026-02-05	印刷右端切れ修正: スライド寸法281mm×158mm→277mm×156mmに変更（ボーダー+プリンタ余白で右端切れ防止）、分離構成対応: HTML/CSS/JavaScript分離出力、build-single-html.js追加、GASデプロイ2方式: 方法A（1ファイル結合）・方法B（GASテンプレート）をgas-deploy-guide.mdに追加
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.js 23種対応
2.0.0	2026-01-03	ホバーエフェクト・拡張スライドタイプ追加
1.0.0	2026-01-02	初版作成