single-slide-ppt

1枚のPowerPointスライドを作成

PptxGenJSを使用して、プロフェッショナルで視覚的に魅力的な1枚のPowerPointプレゼンテーションを作成します。

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

• ユーザーが「PPTを1枚作成」「1枚のスライド」「PPTスライドを作成」と依頼した場合
• 比較を視覚化する場合（ビフォー／アフター、旧／新、問題／解決策）
• 機能を紹介する場合（グリッドレイアウト、機能マトリクス）
• 概念を図解する場合（ワークフロー、アーキテクチャ、フレームワーク）
• 意思決定のフレームワークやプロセスフローを示す場合

基本的なワークフロー

1. コンテンツ構造を把握する

ユーザーの依頼を分析し、次の項目を特定します。

• 主なメッセージ／タイトル
• 重要なポイントやセクション（通常は2～6項目）
• 自然なグループ分け（左右、グリッド、順序）
• 視覚的な比喩（矢印、アイコン、カード）

2. デザインパターンを選択する

コンテンツ構造に合ったレイアウトを選択します。

比較レイアウト（2列）：

• 問題 → 解決策
• ビフォー → アフター
• 旧 → 新
• プラグイン → IDE

グリッドレイアウト（2x2、2x3、3x3）：

• 機能紹介
• 機能マトリクス
• 複数の選択肢の比較

順次フロー：

• プロセスの手順
• タイムライン
• デシジョンツリー

単一の焦点：

• 主要指標
• 中核となる概念
• 引用や声明

3. カラーパレットをデザインする

コンテンツのテーマに合わせて3～5色を選択します。

コンテンツに合わせたパレット：

• テクノロジー：ディープブルー（#1a1a2e）、パープル（#4a00e0）、アクセント（#8e2de2）
• 問題／解決策：問題には赤（#ff6b6b）、解決策には緑（#51cf66）
• プロフェッショナル：ネイビー（#2C3E50）、ティール（#16A085）、ゴールド（#F39C12）
• クリエイティブ：パープル（#722880）、ピンク（#D72D51）、オレンジ（#EB5C18）

色の割り当て：

• 背景：ダーク（#1a1a2e）またはライト（#f5f5f5）
• ヘッダー：ブランドのプライマリーカラーまたはグラデーション
• 問題／ネガティブ：赤／オレンジ系
• 解決策／ポジティブ：緑／青系
• アクセント：強調表示に使う補色

4. 関連画像で強化する（任意）

技術的な概念、製品、比較についてスライドを作成する際は、メッセージを強化するために関連画像の追加を検討します。

画像を使用する場面：

• 技術アーキテクチャ図（公式ドキュメントから）
• 製品のスクリーンショット（ビフォー／アフターの比較）
• ロゴやブランド素材（製品スライド用）
• イラスト（抽象的な概念の説明）
• チャートやグラフ（データの可視化）

画像の検索とダウンロード方法：

// Example: Download VSCode architecture diagram
// Use curl to download images from official sources
const { execSync } = require('child_process');

function downloadImage(url, outputPath) {
  try {
    execSync(`curl -o ${outputPath} "${url}"`, { stdio: 'inherit' });
    console.log(`Downloaded: ${outputPath}`);
    return true;
  } catch (error) {
    console.error(`Failed to download image: ${error.message}`);
    return false;
  }
}

// Example usage:
downloadImage(
  'https://code.visualstudio.com/assets/api/ux-guidelines/examples/architecture-containers.png',
  'workspace/vscode-architecture.png'
);

画像を探すための方法：

1. 公式ドキュメント：「[製品名] architecture documentation」または「[製品名] official API documentation」で検索します
2. GitHubリポジトリ：README.mdやdocs/フォルダー内の図を探します
3. 技術ブログ：信頼できる情報源から説明図を探します
4. search_webとfetch_webを使用：関連コンテンツを検索し、画像のURLを抽出します

スライドへの画像の追加：

// After downloading the image, add it to the slide
slide.addImage({
  path: 'workspace/downloaded-image.png',
  x: 0.5,    // X position in inches
  y: 1.5,    // Y position in inches
  w: 4.8,    // Width in inches
  h: 2.7     // Height in inches (maintain aspect ratio)
});

// Optional: Add caption
slide.addText('Image caption or source attribution', {
  x: 0.5, y: 4.25, w: 4.8, h: 0.3,
  fontSize: 9, color: '707070', italic: true,
  align: 'center'
});

画像のベストプラクティス：

• ✅ 公式の情報源（企業のウェブサイト、ドキュメント）を使用する
• ✅ サイズ変更時にアスペクト比を維持する
• ✅ 内容を補足するキャプションを追加する
• ✅ 画像がストーリーを支えていることを確認する
• ❌ 解像度の低い画像は使用しない
• ❌ 画像を多用してスライドに詰め込みすぎない
• ❌ 許可なく画像を使用しない

5. PptxGenJSでスライドを作成する

const pptxgen = require('pptxgenjs');
const { execSync } = require('child_process');
const path = require('path');

async function createSlide() {
  const pptx = new pptxgen();
  pptx.layout = 'LAYOUT_16x9';
  pptx.author = 'Your Name';
  pptx.title = 'Slide Title';
  
  const slide = pptx.addSlide();
  
  // Background
  slide.background = { color: '1a1a2e' };
  
  // Header bar
  slide.addShape(pptx.shapes.RECTANGLE, {
    x: 0, y: 0, w: 10, h: 0.8,
    fill: { color: '4a00e0' }
  });
  
  // Title
  slide.addText('Your Title Here', {
    x: 0.5, y: 0.18, w: 9, h: 0.5,
    fontSize: 26, bold: true, color: 'ffffff',
    fontFace: 'Arial'
  });
  
  // Optional: Add downloaded image
  // slide.addImage({
  //   path: 'workspace/image.png',
  //   x: 0.5, y: 1.5, w: 4.8, h: 2.7
  // });
  
  // Content sections...
  // [Add your content here following the patterns below]
  
  await pptx.writeFile({ fileName: 'output.pptx' });
}

createSlide().catch(console.error);

デザインパターンライブラリ

パターン：比較カード（左対右）

// Left section - Problem/Before
slide.addText('🚫 Current State', {
  x: 0.4, y: 1.0, w: 4, h: 0.4,
  fontSize: 14, bold: true, color: 'ff6b6b'
});

// Card with left border accent
slide.addShape(pptx.shapes.RECTANGLE, {
  x: 0.4, y: 1.5, w: 4.2, h: 0.95,
  fill: { color: '2d1f1f' }
});
slide.addShape(pptx.shapes.RECTANGLE, {
  x: 0.4, y: 1.5, w: 0.08, h: 0.95,
  fill: { color: 'ff6b6b' }
});
slide.addText('Issue Title', {
  x: 0.6, y: 1.55, w: 3.8, h: 0.3,
  fontSize: 12, bold: true, color: 'ff6b6b'
});
slide.addText('Detailed description...', {
  x: 0.6, y: 1.85, w: 3.8, h: 0.5,
  fontSize: 9, color: 'a0a0a0', wrap: true
});

// Right section - Solution/After (mirror structure with green)
slide.addText('✅ New State', {
  x: 5.3, y: 1.0, w: 4, h: 0.4,
  fontSize: 14, bold: true, color: '51cf66'
});
// [Add cards using green color scheme]

パターン：機能グリッド（2x3）

const features = [
  { icon: '🔧', text: 'Feature 1' },
  { icon: '⚡', text: 'Feature 2' },
  { icon: '💻', text: 'Feature 3' },
  { icon: '📝', text: 'Feature 4' },
  { icon: '👻', text: 'Feature 5' },
  { icon: '🎨', text: 'Feature 6' }
];

const startX = 1.0;
const startY = 1.5;
const itemW = 2.6;
const itemH = 0.7;
const gapX = 0.15;
const gapY = 0.12;

features.forEach((feat, idx) => {
  const col = idx % 3;
  const row = Math.floor(idx / 3);
  const x = startX + col * (itemW + gapX);
  const y = startY + row * (itemH + gapY);
  
  slide.addShape(pptx.shapes.ROUNDED_RECTANGLE, {
    x, y, w: itemW, h: itemH,
    fill: { color: '1a2a1a' },
    line: { color: '51cf66', width: 0.5 },
    rectRadius: 0.08
  });
  
  slide.addText(feat.icon + ' ' + feat.text, {
    x: x + 0.1, y: y + 0.15, w: itemW - 0.2, h: itemH - 0.3,
    fontSize: 11, color: 'e0e0e0', valign: 'middle'
  });
});

パターン：視覚的な比較ボックス

// Before box (dashed border)
slide.addShape(pptx.shapes.RECTANGLE, {
  x: 1.5, y: 3.0, w: 2.5, h: 1.5,
  fill: { color: '2a1a1a' },
  line: { color: 'ff6b6b', width: 1, dashType: 'dash' }
});
slide.addText('Before', {
  x: 1.5, y: 3.1, w: 2.5, h: 0.3,
  fontSize: 12, bold: true, color: 'ff6b6b', align: 'center'
});
slide.addText('🧩', {
  x: 1.5, y: 3.5, w: 2.5, h: 0.5,
  fontSize: 32, align: 'center'
});
slide.addText('Old approach', {
  x: 1.5, y: 4.0, w: 2.5, h: 0.3,
  fontSize: 9, color: '888888', align: 'center'
});

// After box (solid border)
slide.addShape(pptx.shapes.RECTANGLE, {
  x: 6.0, y: 3.0, w: 2.5, h: 1.5,
  fill: { color: '1a2a1a' },
  line: { color: '51cf66', width: 2 }
});
slide.addText('After', {
  x: 6.0, y: 3.1, w: 2.5, h: 0.3,
  fontSize: 12, bold: true, color: '51cf66', align: 'center'
});
slide.addText('👑', {
  x: 6.0, y: 3.5, w: 2.5, h: 0.5,
  fontSize: 32, align: 'center'
});
slide.addText('New approach', {
  x: 6.0, y: 4.0, w: 2.5, h: 0.3,
  fontSize: 9, color: '888888', align: 'center'
});

パターン：矢印コネクター

// Arrow between sections
slide.addText('➔', {
  x: 4.5, y: 2.5, w: 0.8, h: 0.6,
  fontSize: 36, color: '8e2de2',
  align: 'center', valign: 'middle'
});

ビジュアルデザインのベストプラクティス

タイポグラフィ

• タイトル：22～28pt、太字、高コントラスト
• セクション見出し：12～16pt、太字
• 本文：9～11pt、ミディアムウェイト
• キャプション：8～9pt、明るめの色

余白と配置

• ヘッダーの高さ：0.7～0.9インチ
• セクションの余白：端から0.4～0.5インチ
• カードのパディング：内側に0.1～0.15インチ
• グリッドの間隔：0.08～0.15インチ

色の使用

• スライドあたり最大5色
• rgba(R,G,B,0.1)はRRGGBBと明るい塗りつぶしに変換して、レイヤー表現に透明度を使用します
• テキストのコントラスト比が4.5:1を超えるようにします（暗い背景には#e0e0e0のテキストを使用します）

視覚的な階層

1. タイトル／ヘッダー（最も大きく、コントラストが最も高い）
2. セクションヘッダー（中程度のサイズで、色分け）
3. コンテンツカード（グループ化し、枠線で囲む）
4. 補足テキスト（最も小さく、コントラストを抑える）

一般的なスライドの種類

1. 問題 → 解決策のスライド

• 左：問題カード（赤を基調としたテーマ）
• 中央：矢印コネクター
• 右：解決策の特長（緑を基調としたテーマ）
• 下部：中核となる価値提案

2. 特長紹介

• 製品名を含むヘッダー
• 特長を2x3または3x3のグリッドで配置
• 各セル：アイコン＋短い説明
• 任意：下部に主要なメリットのカード

3. ビフォー／アフター比較

• 変化を説明するタイトル
• 横並びの比較ボックス
• 視覚的な指標（絵文字／アイコン）
• 変化の流れを示す矢印

4. プロセスフロー

• 番号付きのカードを順番に配置
• ステップ間に矢印を配置
• 色を段階的に変化させる（グラデーション）
• 最終状態を強調表示

5. 技術アーキテクチャのスライド（画像付き）

• アーキテクチャ名を含むヘッダー
• 公式アーキテクチャ図（ドキュメントからダウンロード）
• 出典を明記したキャプション
• 主要なポイントや制限事項をカードで強調表示

例：VSCode 拡張機能の制限事項スライド

const pptxgen = require('pptxgenjs');
const { execSync } = require('child_process');
const path = require('path');

async function createTechnicalSlide() {
  const pptx = new pptxgen();
  pptx.layout = 'LAYOUT_16x9';
  
  // Download VSCode architecture image
  const imageUrl = 'https://code.visualstudio.com/assets/api/ux-guidelines/examples/architecture-containers.png';
  const imagePath = 'workspace/vscode-architecture.png';
  
  try {
    execSync(`curl -o ${imagePath} "${imageUrl}"`, { stdio: 'inherit' });
  } catch (error) {
    console.log('Image download failed, continuing without image');
  }
  
  const slide = pptx.addSlide();
  slide.background = { color: 'FFFFFF' };
  
  // Header
  slide.addShape(pptx.shapes.RECTANGLE, {
    x: 0, y: 0, w: 10, h: 0.8,
    fill: { color: 'fc5a1f' }
  });
  
  slide.addText('VSCode 插件架构限制', {
    x: 0.5, y: 0.18, w: 9, h: 0.45,
    fontSize: 26, bold: true, color: 'ffffff',
    fontFace: 'Arial'
  });
  
  // Left: Architecture image
  slide.addImage({
    path: imagePath,
    x: 0.5, y: 1.2, w: 4.8, h: 2.7
  });
  
  slide.addText('VSCode 只对插件开放固定的"插槽"（Containers）', {
    x: 0.5, y: 4.0, w: 4.8, h: 0.3,
    fontSize: 10, color: '707070', italic: true,
    align: 'center'
  });
  
  // Right: Limitation cards
  slide.addText('API 限制', {
    x: 5.5, y: 1.2, w: 4.2, h: 0.4,
    fontSize: 18, bold: true, color: 'fc5a1f'
  });
  
  // Add limitation cards...
  
  await pptx.writeFile({ fileName: 'technical-slide.pptx' });
}

createTechnicalSlide().catch(console.error);

実行チェックリスト

• コンテンツを分析して構成を特定する
• 適切なデザインパターンを選ぶ
• テーマに合ったカラーパレットを選ぶ
• 関連する画像を検索する（技術／製品のコンテンツで必要な場合）
• curl または Web ツールを使って画像をダウンロードする
• PptxGenJS スクリプトを作成する（画像パスを含める）
• スクリプトを実行して .pptx を生成する
• サムネイルプレビューを生成する
• 視覚的な品質を検証する
• ファイルとプレビューをユーザーに提供する

ファイル出力

専用のワークスペースにファイルを保存します：

mkdir -p workspace
cd workspace
node generate-slide.js

プレビューを生成します：

python3 /path/to/pptx/scripts/thumbnail.py output.pptx preview --cols 1

既存の PPT ファイルを変更する

PptxGenJS で既存のファイルを編集できない理由

技術的な理由：

1. 設計方針：PptxGenJS は、PPT をゼロから作成することを目的とした「生成」ライブラリです
2. 複雑なファイル構造：.pptx ファイルは、複数の XML ファイルを含む ZIP アーカイブです（Office Open XML 形式）
3. リレーションシップの処理：編集には、スライド、図形、メディアなどの間の複雑なリレーションシップを解析する必要があります

解決策：既存ファイルの編集には pptx-automizer を使用する

pptx-automizer は、既存の .pptx ファイルの編集と結合専用に設計された、強力な Node.js ライブラリです。

インストール

npm install pptx-automizer
# or
yarn add pptx-automizer

主な機能

機能	説明
テンプレートの読み込み	既存の .pptx ファイルをテンプレートとしてインポート
スライドの結合	複数のテンプレートからスライドを選択して追加
要素の変更	名前または creationId で図形を検索して変更
テキストの変更	テキストの置換、タグベースの置換
画像の変更	画像ソースの置換、サイズ変更
表の変更	表データとスタイルの更新
グラフの変更	グラフデータの更新（拡張グラフタイプを含む）
スライドマスターのインポート	元のスタイルとレイアウトを維持
PptxGenJS との統合	PptxGenJS を使ってテンプレート上に要素を作成

基本例：既存の PPT を読み込んで変更する

import Automizer from 'pptx-automizer';

const automizer = new Automizer({
  templateDir: 'path/to/templates',
  outputDir: 'path/to/output',
  // Keep existing slides (don't truncate)
  removeExistingSlides: false,
});

let pres = automizer
  // Load root template (output will be based on this)
  .loadRoot('MyPresentation.pptx')
  // Load same file again to modify its slides
  .load('MyPresentation.pptx', 'myPres');

// Add slide 2 from template and modify it
pres.addSlide('myPres', 2, (slide) => {
  // Modify element by shape name
  slide.modifyElement('Title', [
    modify.setText('Updated Title Text'),
  ]);
  
  slide.modifyElement('ContentBox', [
    modify.replaceText([{
      replace: '{{placeholder}}',
      by: { text: 'Dynamic Content' }
    }])
  ]);
});

// Write output
pres.write('UpdatedPresentation.pptx').then(summary => {
  console.log(summary);
});

既存の PPT の単一スライドを変更する

import Automizer, { modify, ModifyTextHelper } from 'pptx-automizer';

async function modifySingleSlide(inputFile, slideNumber, modifications) {
  const automizer = new Automizer({
    templateDir: './',
    outputDir: './',
    removeExistingSlides: true, // Start fresh
  });

  // Load the file twice - as root and as template
  let pres = automizer
    .loadRoot(inputFile)
    .load(inputFile, 'source');

  // Get all slide numbers
  const slideNumbers = await pres
    .getTemplate('source')
    .getAllSlideNumbers();

  // Re-add all slides, modifying only the target slide
  for (const num of slideNumbers) {
    if (num === slideNumber) {
      // Apply modifications to target slide
      pres.addSlide('source', num, modifications);
    } else {
      // Keep other slides unchanged
      pres.addSlide('source', num);
    }
  }

  // Write to new file (or same file)
  await pres.write(inputFile.replace('.pptx', '-modified.pptx'));
}

// Usage:
await modifySingleSlide('plugin-to-ide.pptx', 1, (slide) => {
  slide.modifyElement('Title', [
    ModifyTextHelper.setText('New Title'),
  ]);
});

既存の PPT のグラフデータを変更する

import Automizer, { modify } from 'pptx-automizer';

pres.addSlide('charts', 2, (slide) => {
  slide.modifyElement('ColumnChart', [
    modify.setChartData({
      series: [
        { label: 'Q1 Sales' },
        { label: 'Q2 Sales' },
      ],
      categories: [
        { label: 'Product A', values: [150, 180] },
        { label: 'Product B', values: [200, 220] },
        { label: 'Product C', values: [130, 160] },
      ],
    }),
  ]);
});

既存の PPT の画像を置き換える

import Automizer, { ModifyImageHelper, ModifyShapeHelper, CmToDxa } from 'pptx-automizer';

const automizer = new Automizer({
  templateDir: 'templates',
  outputDir: 'output',
  mediaDir: 'images', // Directory for external images
});

let pres = automizer
  .loadRoot('Template.pptx')
  .loadMedia(['new-image.png']) // Load external image
  .load('Template.pptx', 'template');

pres.addSlide('template', 1, (slide) => {
  slide.modifyElement('ImagePlaceholder', [
    // Replace image source
    ModifyImageHelper.setRelationTarget('new-image.png'),
    // Optionally adjust size
    ModifyShapeHelper.setPosition({
      w: CmToDxa(8),
      h: CmToDxa(6),
    }),
  ]);
});

pres.write('UpdatedWithNewImage.pptx');

タグベースのテキスト置換を使用する

PowerPoint の図形には、次のように置換される {{title}} などのプレースホルダータグを含めることができます。

pres.addSlide('template', 1, (slide) => {
  slide.modifyElement('TextWithTags', [
    modify.replaceText([
      { replace: 'title', by: { text: 'My Dynamic Title' } },
      { replace: 'date', by: { text: '2026-02-28' } },
      { replace: 'author', by: { text: 'Your Name' } },
    ]),
  ]);
});

比較：PptxGenJS と pptx-automizer

機能	PptxGenJS	pptx-automizer
ゼロから作成	✅ 優秀	⚠️ 限定的（PptxGenJS をラップ）
既存ファイルの編集	❌ 不可	✅ 可能
テンプレートの結合	❌ 不可	✅ 可能
スタイルの維持	❌ 該当なし	✅ 可能
グラフの変更	❌ 不可	✅ 可能
タグ置換	❌ 不可	✅ 可能
学習曲線	低い	中程度

推奨ワークフロー

新しい PPT を作成する場合：PptxGenJS を使用 既存の PPT を編集する場合：pptx-automizer を使用 ハイブリッドなワークフローの場合：PptxGenJS との統合機能を備えた pptx-automizer を使用

// pptx-automizer can wrap PptxGenJS for creating new elements
pres.addSlide('template', 1, (slide) => {
  // Use pptxgenjs to add new shapes from scratch
  slide.generate((pptxGenJSSlide, pptxGenJs) => {
    pptxGenJSSlide.addText('New Text Box', {
      x: 1, y: 1, w: 3, h: 0.5,
      fontSize: 14, color: '333333'
    });
    
    pptxGenJSSlide.addChart(pptxGenJs.ChartType.bar, chartData, {
      x: 4, y: 1, w: 5, h: 3
    });
  });
});

図形の選択方法

図形名で指定（シンプル）

slide.modifyElement('MyShapeName', [ /* modifiers */ ]);

creationId で指定（堅牢）

// More stable - survives slide rearrangement
slide.modifyElement('{E43D12C3-AD5A-4317-BC00-FDED287C0BE8}', [ /* modifiers */ ]);

フォールバック付き

slide.modifyElement({
  creationId: '{E43D12C3-AD5A-4317-BC00-FDED287C0BE8}',
  name: 'MyShapeName', // Fallback if creationId not found
}, [ /* modifiers */ ]);

ベストプラクティス

1. テンプレート管理：デザイン性の高い .pptx テンプレートのライブラリを用意します
2. 図形の命名：PowerPoint で図形にわかりやすい名前を付けます（選択ウィンドウを開くには ALT+F10 を押します）
3. タグ規則：{{tagName}} のような一貫したタグ形式を使用します
4. バージョン管理：テンプレートの変更を git で管理します
5. 編集後のプレビュー：変更を確認するため、必ずサムネイルを生成します
6. エラー処理：図形が見つからない場合も適切に処理します

注意事項

• 色に # を付けない：「"#ff6b6b"」ではなく「"ff6b6b"」を使用します（破損の原因になります）
• Web セーフフォントのみ：Arial、Helvetica、Times New Roman、Georgia、Courier New、Verdana
• 絵文字のサポートをテスト：一部の絵文字はすべてのプラットフォームで表示されるとは限りません
• アスペクト比 16:9：ほとんどのプレゼンテーションで標準です（10 x 5.625 インチ）
• pptx-automizer：既存の .pptx ファイルの編集に使用します
• PptxGenJS：プレゼンテーションをゼロから新規作成する場合に使用します