Presentation Maker

プレゼンテーションメーカー

Presentation Maker スキルを使うと、カスタムレイアウト、テーマ、グラフ、画像、マルチメディアを備えたプロフェッショナルな PowerPoint プレゼンテーション（.pptx）を自動で作成できます。pptxgenjs などのライブラリを使用し、シンプルなスライドデッキから、データの可視化やアニメーションを含む複雑なプレゼンテーションまで、あらゆる作業に対応します。

ピッチデッキ、研修資料、レポート、プロジェクトの進捗報告など、あらゆるプレゼンテーションコンテンツをプログラムで作成できます。マスタースライド、テーマ、グラフ、表、画像、図形、発表者ノートに対応しており、プレゼンテーション自動化のための包括的なソリューションです。

主なワークフロー

ワークフロー 1：基本的なプレゼンテーションを作成する

目的： タイトルスライドとコンテンツスライドを含むシンプルなプレゼンテーションを作成します

手順：

1. pptxgenjs をインポートし、Presentation インスタンスを作成します
2. プレゼンテーションのプロパティ（タイトル、作成者、会社）を定義します
3. 会社のブランディングを施したタイトルスライドを追加します
4. 箇条書きを含むコンテンツスライドを追加します
5. 一貫性のあるテーマとフォントを適用します
6. スライド番号を追加します
7. .pptx ファイルにエクスポートします

実装：

const PptxGenJS = require('pptxgenjs');

function createBasicPresentation(content, outputPath) {
  const pptx = new PptxGenJS();

  // Set presentation properties
  pptx.author = 'Company Name';
  pptx.company = 'Company Name';
  pptx.subject = content.subject;
  pptx.title = content.title;

  // Title slide
  let slide = pptx.addSlide();
  slide.background = { color: '2C3E50' };
  slide.addText(content.title, {
    x: 0.5,
    y: 2.5,
    w: '90%',
    h: 1.5,
    fontSize: 44,
    bold: true,
    color: 'FFFFFF',
    align: 'center'
  });
  slide.addText(content.subtitle, {
    x: 0.5,
    y: 4.0,
    w: '90%',
    fontSize: 24,
    color: 'BDC3C7',
    align: 'center'
  });

  // Content slides
  content.slides.forEach(slideData => {
    let slide = pptx.addSlide();

    // Title
    slide.addText(slideData.title, {
      x: 0.5,
      y: 0.5,
      w: '90%',
      h: 0.75,
      fontSize: 32,
      bold: true,
      color: '2C3E50'
    });

    // Bullet points
    slide.addText(slideData.bullets, {
      x: 0.5,
      y: 1.5,
      w: '90%',
      h: 4.0,
      fontSize: 18,
      bullet: true,
      color: '34495E'
    });

    // Slide number
    slide.addText(`${pptx.getSlideNumber()}`, {
      x: 9.0,
      y: 7.0,
      w: 0.5,
      h: 0.3,
      fontSize: 12,
      color: '95A5A6',
      align: 'right'
    });
  });

  pptx.writeFile({ fileName: outputPath });
}

ワークフロー 2：グラフとデータの可視化を追加する

目的： データから埋め込みグラフを含むスライドを作成します

手順：

1. プレゼンテーションを作成します
2. グラフデータ（ラベルと値）を準備します
3. タイトル付きのグラフスライドを追加します
4. グラフの種類（棒、折れ線、円、散布図など）を定義します
5. グラフのオプション（色、凡例、軸）を設定します
6. データラベルと書式を追加します
7. スライド上にグラフを配置します

実装：

function createPresentationWithCharts(data, outputPath) {
  const pptx = new PptxGenJS();

  // Bar chart slide
  let slide = pptx.addSlide();
  slide.addText('Quarterly Revenue', {
    x: 0.5, y: 0.5, w: '90%', fontSize: 32, bold: true
  });

  const chartData = [
    {
      name: 'Revenue',
      labels: data.quarters,
      values: data.revenue
    }
  ];

  slide.addChart(pptx.ChartType.bar, chartData, {
    x: 1.0,
    y: 1.5,
    w: 8.0,
    h: 4.5,
    chartColors: ['2E74B5'],
    showTitle: false,
    showLegend: true,
    legendPos: 'b',
    valAxisMaxVal: Math.max(...data.revenue) * 1.2,
    dataLabelFormatCode: '$#,##0',
    showValue: true
  });

  // Pie chart slide
  slide = pptx.addSlide();
  slide.addText('Market Share', {
    x: 0.5, y: 0.5, w: '90%', fontSize: 32, bold: true
  });

  const pieData = [
    { name: 'Product A', labels: ['Share'], values: [35] },
    { name: 'Product B', labels: ['Share'], values: [28] },
    { name: 'Product C', labels: ['Share'], values: [22] },
    { name: 'Others', labels: ['Share'], values: [15] }
  ];

  slide.addChart(pptx.ChartType.pie, pieData, {
    x: 2.0,
    y: 1.5,
    w: 6.0,
    h: 4.5,
    showPercent: true,
    chartColors: ['2E74B5', '5DA5DA', '60BD68', 'F17CB0']
  });

  // Line chart for trends
  slide = pptx.addSlide();
  slide.addText('Growth Trend', {
    x: 0.5, y: 0.5, w: '90%', fontSize: 32, bold: true
  });

  const lineData = [
    {
      name: '2024',
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
      values: [10, 15, 13, 18, 22, 25]
    },
    {
      name: '2025',
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
      values: [12, 18, 16, 22, 27, 32]
    }
  ];

  slide.addChart(pptx.ChartType.line, lineData, {
    x: 1.0,
    y: 1.5,
    w: 8.0,
    h: 4.5,
    lineSmooth: true,
    chartColors: ['2E74B5', 'E74C3C']
  });

  pptx.writeFile({ fileName: outputPath });
}

ワークフロー 3：テンプレートからプレゼンテーションを作成する

目的： マスタースライドのテンプレートを使って、一貫性のあるブランディングを実現します

手順：

1. マスタースライドのレイアウトを読み込むか、定義します
2. テーマの色とフォントを設定します
3. スライドレイアウト（タイトル、コンテンツ、2 段組みなど）を定義します
4. 事前定義したレイアウトを使用してスライドを作成します
5. 会社のブランディングを一貫して適用します
6. すべてのスライドにフッターとロゴを追加します
7. テンプレートを適用してエクスポートします

実装：

function createFromTemplate(content, outputPath) {
  const pptx = new PptxGenJS();

  // Define theme colors
  pptx.defineLayout({ name: 'CUSTOM', width: 10, height: 5.625 });
  pptx.layout = 'CUSTOM';

  // Define master slide
  const masterSlide = pptx.defineSlideMaster({
    title: 'MASTER_SLIDE',
    background: { color: 'FFFFFF' },
    objects: [
      // Company logo
      { image: { x: 0.5, y: 0.2, w: 1.0, h: 0.4, path: 'company-logo.png' } },
      // Footer
      { text: { text: 'Company Confidential', options: { x: 0.5, y: 5.0, fontSize: 10, color: '95A5A6' } } }
    ]
  });

  // Use master slide for content
  content.slides.forEach(slideData => {
    let slide = pptx.addSlide({ masterName: 'MASTER_SLIDE' });

    slide.addText(slideData.title, {
      x: 2.0, y: 0.5, w: 7.5, fontSize: 28, bold: true, color: '2C3E50'
    });

    slide.addText(slideData.content, {
      x: 2.0, y: 1.5, w: 7.5, fontSize: 16, color: '34495E'
    });
  });

  pptx.writeFile({ fileName: outputPath });
}

ワークフロー 4：画像とメディアを追加する

目的： 画像、図形、マルチメディアコンテンツを含めます

手順：

1. プレゼンテーションを作成します
2. キャプション付きの画像スライドを追加します
3. 画像のサイズを変更し、配置します
4. 図形（四角形、円、矢印）を追加します
5. z-index を使って要素を重ねます
6. 画像にハイパーリンクを追加します
7. 動画プレースホルダーを挿入します（対応している場合）

実装：

function createWithMedia(content, outputPath) {
  const pptx = new PptxGenJS();

  // Image slide
  let slide = pptx.addSlide();
  slide.addText(content.title, {
    x: 0.5, y: 0.5, fontSize: 32, bold: true
  });

  // Add image
  slide.addImage({
    path: content.imagePath,
    x: 1.5,
    y: 1.5,
    w: 7.0,
    h: 4.0,
    sizing: { type: 'contain', w: 7.0, h: 4.0 }
  });

  // Add caption
  slide.addText(content.caption, {
    x: 1.5,
    y: 5.7,
    w: 7.0,
    fontSize: 14,
    italic: true,
    align: 'center',
    color: '7F8C8D'
  });

  // Slide with shapes
  slide = pptx.addSlide();

  // Background shape
  slide.addShape(pptx.ShapeType.rect, {
    x: 0.5,
    y: 1.5,
    w: 9.0,
    h: 4.5,
    fill: { color: 'ECF0F1' },
    line: { color: '3498DB', width: 2 }
  });

  // Arrow shapes for process flow
  slide.addShape(pptx.ShapeType.rightArrow, {
    x: 1.0,
    y: 3.0,
    w: 2.0,
    h: 1.0,
    fill: { color: '3498DB' }
  });

  slide.addText('Step 1', {
    x: 1.3, y: 3.3, w: 1.4, fontSize: 16, color: 'FFFFFF', bold: true, align: 'center'
  });

  pptx.writeFile({ fileName: outputPath });
}

ワークフロー 5：表とデータを追加する

目的： 構造化データを表形式で表示します

手順：

1. スライドを作成します
2. 表の構成（行と列）を定義します
3. スタイルを設定したヘッダー行を追加します
4. データ行に値を入力します
5. セルの書式（色、枠線、配置）を適用します
6. 列幅を設定します
7. 表のタイトルを追加します

実装：

function createWithTables(data, outputPath) {
  const pptx = new PptxGenJS();

  let slide = pptx.addSlide();
  slide.addText('Project Status', {
    x: 0.5, y: 0.5, fontSize: 32, bold: true
  });

  // Define table rows
  const tableData = [
    [
      { text: 'Task', options: { bold: true, fill: '2C3E50', color: 'FFFFFF' } },
      { text: 'Owner', options: { bold: true, fill: '2C3E50', color: 'FFFFFF' } },
      { text: 'Status', options: { bold: true, fill: '2C3E50', color: 'FFFFFF' } },
      { text: 'Due Date', options: { bold: true, fill: '2C3E50', color: 'FFFFFF' } }
    ]
  ];

  // Add data rows
  data.tasks.forEach(task => {
    const statusColor = task.status === 'Complete' ? '27AE60' :
                       task.status === 'In Progress' ? 'F39C12' : 'E74C3C';

    tableData.push([
      { text: task.name },
      { text: task.owner },
      { text: task.status, options: { fill: statusColor, color: 'FFFFFF' } },
      { text: task.dueDate }
    ]);
  });

  slide.addTable(tableData, {
    x: 0.5,
    y: 1.5,
    w: 9.0,
    colW: [3.0, 2.0, 2.0, 2.0],
    border: { pt: 1, color: 'BDC3C7' },
    fontSize: 14,
    align: 'center',
    valign: 'middle'
  });

  pptx.writeFile({ fileName: outputPath });
}

ワークフロー 6：発表者ノートを追加する

目的： 各スライドに発表者ノートを含めます

手順：

1. コンテンツを含むスライドを作成します
2. 各スライドに発表者ノートを追加します
3. 要点となる説明内容をノートに書式設定します
4. 時間配分の提案を含めます
5. 参考資料と出典を追加します
6. ノートを含めてエクスポートします

実装：

content.slides.forEach(slideData => {
  let slide = pptx.addSlide();

  slide.addText(slideData.title, {
    x: 0.5, y: 0.5, fontSize: 32, bold: true
  });

  slide.addText(slideData.content, {
    x: 0.5, y: 1.5, fontSize: 18, bullet: true
  });

  // Add speaker notes
  slide.addNotes(`
    Key Points:
    - ${slideData.notes.keyPoints.join('\n    - ')}

    Timing: ${slideData.notes.timing}

    Additional Context:
    ${slideData.notes.context}
  `);
});

クイックリファレンス

操作	コマンド／トリガー
プレゼンテーションを作成	"create powerpoint with [slides]"
グラフスライドを追加	"add chart to presentation"
画像を挿入	"add image [file] to slide"
表を作成	"add table with [data]"
テンプレートを使用	"use template for presentation"
図形を追加	"add shapes to slide"
発表者ノート	"add notes to slides"
エクスポート	"save presentation as [name]"

ベストプラクティス

• 一貫性： テンプレートとマスタースライドを使い、見た目を統一します
• シンプルさ： スライドをすっきり保ち、テキストを最小限にします（6x6ルール：箇条書きは最大6項目、各項目は6語）
• ビジュアル： グラフや画像を使って、情報を効果的に伝えます
• 配色： ブランドに合わせた主要な色を2～3色に絞ります
• フォントサイズ： 本文は最小18pt、見出しは28pt以上にします
• コントラスト： 背景に対してテキストが読みやすいことを確認します
• スライド枚数： 発表時間1分につきスライド1枚を目安にします
• データの可視化： データに適したグラフの種類を選びます
• 余白： スライドに情報を詰め込みすぎず、余白を効果的に使います
• アニメーション： 控えめに使い、価値を高める場合にのみ使用します（pptxgenjsではサポートされていません）
• ファイルサイズ： 埋め込む前に画像を圧縮します
• アクセシビリティ： 可能な場合は画像に代替テキストを追加します

よくあるパターン

ピッチデック：

const pitchSlides = [
  { type: 'title', title: 'Company Name', subtitle: 'Investor Pitch' },
  { type: 'content', title: 'Problem', bullets: ['Pain point 1', 'Pain point 2'] },
  { type: 'content', title: 'Solution', bullets: ['Our approach', 'Key benefits'] },
  { type: 'chart', title: 'Market Size', chartType: 'bar' },
  { type: 'content', title: 'Business Model', bullets: ['Revenue streams'] },
  { type: 'chart', title: 'Financial Projections', chartType: 'line' },
  { type: 'content', title: 'Team', image: 'team-photos.png' },
  { type: 'content', title: 'Ask', bullets: ['Funding amount', 'Use of funds'] }
];

トレーニング用プレゼンテーション：

slides.forEach((slide, idx) => {
  let s = pptx.addSlide();
  s.addText(slide.title, { x: 0.5, y: 0.5, fontSize: 28, bold: true });
  s.addText(slide.content, { x: 0.5, y: 1.5, fontSize: 16 });
  if (slide.example) {
    s.addText('Example:', { x: 0.5, y: 4.0, fontSize: 14, italic: true });
    s.addText(slide.example, { x: 0.5, y: 4.4, fontSize: 14 });
  }
  s.addNotes(slide.trainerNotes);
});

依存関係

必要なパッケージをインストールします：

npm install pptxgenjs

代替ライブラリ：

npm install officegen  # Legacy option
npm install node-pptx  # Another alternative

エラー処理

• ファイルパス： スライドに追加する前に、画像のパスが存在することを確認します
• データ検証： グラフのデータが適切にフォーマットされていることを確認します
• メモリ： 高解像度画像を多数使用するプレゼンテーションでは、メモリ使用量を監視します
• 互換性： PowerPoint、Google Slides、Keynoteで出力をテストします
• グラフの制限： グラフの種類によっては、データポイント数に制限があります
• テキストのはみ出し： スライド上でテキストがはみ出さないよう、長さを監視します

パフォーマンスのヒント

• プレゼンテーションに追加する前に画像を圧縮します
• 同じ画像を複数のスライドで使う場合は、画像オブジェクトを再利用します
• スライドの作成処理をまとめて実行します
• ウェブ向けに最適化された画像を使用します（画面表示では72～96 DPIで十分です）
• 1つのファイル内のスライド枚数を100枚未満に抑えます

高度な機能

カスタムレイアウト：

const layout = pptx.defineSlideMaster({
  title: 'TWO_COLUMN',
  background: { color: 'FFFFFF' },
  objects: [
    { rect: { x: 0, y: 0, w: 5, h: 5.625, fill: 'F0F0F0' } },
    { rect: { x: 5, y: 0, w: 5, h: 5.625, fill: 'FFFFFF' } }
  ]
});

ハイパーリンク：

slide.addText('Visit Website', {
  x: 1, y: 3, fontSize: 18,
  hyperlink: { url: 'https://example.com', tooltip: 'Click to visit' },
  color: '0000FF',
  underline: true
});

グラデーション：

slide.background = {
  fill: { type: 'solid', color: '2C3E50' },
  transparency: 0
};