AI資料作成ツール - PoC

レイアウト固定化による高精度PPTX生成

Claude APIを使用してテキストからプレゼンテーション資料を自動生成します。

🎬 デモ動画

テキスト入力から約30秒でPPTX生成まで完了します。

🎯 特徴

レイアウト固定化による精度向上

レイアウトを4種類に限定・完全固定化することで、安定した高品質な出力を実現しています。

固定レイアウト

1. title - 表紙（グラデーション背景、タイトル + サブタイトル）
2. bullets - 箇条書き（最大5項目、ヘッダー帯付き）
3. two-column - 2カラム比較（各最大4項目、左右に枠）
4. table - 表形式データ（2-4列×1-5行、ヘッダー強調）
5. summary - まとめ（最大3項目、オレンジ強調）

精度向上の仕組み

• ✅ 座標・フォントサイズ完全固定 → 出力の安定性
• ✅ プロフェッショナルな配色デザイン → 青系統一、ヘッダー帯、枠線
• ✅ 文字数・項目数の厳密な制約 → Claudeの出力精度向上
• ✅ Zodによる型安全なバリデーション → エラーの早期発見
• ✅ 詳細なプロンプト設計 → レイアウト選択の精度向上

🚀 クイックスタート

1. 環境構築

# 依存パッケージのインストール
npm install

# .envファイルを作成
cat > .env << EOF
ANTHROPIC_API_KEY=sk-ant-xxxxx
PORT=3000
CORS_ORIGIN=http://localhost:3000
EOF

2. 起動

# 開発モード
npm run dev

# ブラウザでアクセス
open http://localhost:3000

3. 使い方

1. テキストを入力（200〜5000字）
2. スライド枚数を指定（1〜10枚）
3. 「PPTX生成」ボタンをクリック
4. 自動的にPPTXファイルがダウンロードされます

📊 デモ用サンプル

「サンプル挿入」ボタンで、営業提案の例文が自動入力されます。 約1200字のテキストから、5枚のスライドが生成されます（30秒以内）。

生成されるスライド例

1. 表紙（title）- 濃い青背景、白文字
2. 背景と課題（bullets）- ヘッダー帯、箇条書き
3. 従来 vs 新方式（two-column）- 左右に枠付き比較
4. コスト比較（table）- 表形式、数値データ
5. まとめ（summary）- オレンジ強調、重要ポイント

💡 上司への説明ポイント

懸念への回答

Q: 「精度が出ないのでは？」

A: レイアウト固定化により、精度を確保しています

• 4種類のレイアウトに限定することで、出力の安定性を実現
• 座標・フォントサイズを完全固定（pptxgenjsのブレを排除）
• 文字数制約（28字、32字など）を厳密に適用

Q: 「期待値調整が難しい」

A: 明確な制約で「できること/できないこと」を提示

できること：

• シンプルな箇条書き資料の自動生成
• 基本的な比較表現（2カラム）
• 一貫性のあるデザイン

できないこと（現時点）：

• 複雑なグラフ・図表の生成
• 画像の自動挿入
• 高度なデザインカスタマイズ

→ PoCとして位置づけ、段階的な拡張を提案

Q: 「実務で使える品質か？」

A: まずは簡易資料から開始

• 社内報告用の簡易資料から開始
• 限定的なユースケースに特化
• フィードバックを得ながら段階的にレイアウトを追加

デモで見せるべきポイント

1. 生成速度：30秒以内でPPTX完成
2. デザインの一貫性：すべてのスライドが統一されたレイアウト
3. 拡張性：新しいレイアウトは同じパターンで追加可能
4. 実装コスト：最小構成（約300行）で実現

🏗️ アーキテクチャ

[HTML UI] → [Express API] → [Claude API] → [pptxgenjs] → [PPTX File]
                ↓
          [Zodバリデーション]

ファイル構成

├── src/
│   ├── server.ts      # Express API
│   ├── claude.ts      # Claude API + Zodスキーマ
│   └── ppt.ts         # レイアウト固定化ロジック
├── public/
│   └── index.html     # フロントエンドUI
├── package.json
├── tsconfig.json
└── .env               # APIキー（要作成）

📝 技術仕様

Claude API

• モデル: claude-3-5-sonnet-20241022（バージョン固定）
• 出力: 厳格なJSON（discriminated union）
• プロンプト: 詳細な制約と判断基準を明示

pptxgenjs

• 16:9スライド
• 座標単位: インチ（固定値）
• フォント非埋込（互換性優先）

バリデーション

• Zodによる型安全な検証
• 文字数・配列長の厳密なチェック
• エラーメッセージに違反内容を含める

🔧 開発コマンド

# 開発モード（ホットリロード）
npm run dev

# ビルド
npm run build

# 本番実行
npm start

🎯 次のステップ（拡張案）

1. レイアウト追加

   • 画像+テキスト
   • 簡易グラフ（棒グラフ・円グラフ）
   • タイムライン

2. テーマ機能

   • カラースキーム選択
   • 会社ロゴ挿入

3. テンプレート機能

   • 業種別テンプレート
   • 目的別テンプレート

4. 品質向上

   • Claude出力の評価・再生成
   • ユーザーフィードバック収集

📄 ライセンス

MIT