ENECHANGE Developer Blog

ENECHANGE開発者ブログ

ClaudeCodeを使ってパワポ資料をMarkdown（Marp）に置き換えてブラッシュアップしてみた

AIエージェント活用リレーブログ Claude Code Marp

こんにちは。Energy Data Dev1チームのマネージャーの宮尾です。

ENECHANGE AIエージェント活用リレーブログ、前回は岩本さんの「Software Design誌にMCPの記事を寄稿しました」でした。「学びをアウトプットしていれば、次のチャレンジにつながるかもしれない」という言葉に、とても共感しました。

今回は、社内のプレゼン資料作成でClaudeCodeを活用し、PowerPointからMarkdown（Marp）へ移行した経験について書きます。単なる形式変換ではなく、この機会にプレゼン内容も含めてブラッシュアップしようと考え、ClaudeCodeと二人三脚で取り組んだ話です。

背景

以前、外部イベントで「500万件に向けた課題と未来」というタイトルでデータ基盤構築について発表したことがありました。今回、同様の内容を別のイベントでも発表する機会をいただいたのですが、以前の資料を見返すと課題が見えてきました：

  • 文字が多すぎる: テキスト中心で視覚的な訴求力に欠ける
  • 構成が分かりにくい: 論理的な流れが伝わりにくい
  • バージョン管理が困難: PowerPointファイルの履歴管理ができない
  • 再利用性が低い: 部分的な修正や流用が面倒

「どうせ作り直すなら、AIの力を借りてもっと良い資料にしたい」と思い、ClaudeCodeを活用してMarkdownベースのプレゼンツール「Marp」での作り直しにチャレンジすることにしました。

ClaudeCodeとの作業の流れ

1. 既存PowerPoint資料の内容整理

まず、ClaudeCodeに既存のPowerPoint資料をPDFとして読み込ませました。「この『500万件に向けた課題と未来』の資料をMarp用のMarkdownに変換しつつ、視覚的にもっと分かりやすくブラッシュアップしてください」とお願いしました。

ClaudeCodeとのやり取りは20回以上に及びました。最初は「スライド全体を一括で変換してほしい」という曖昧なリクエストでしたが、「この自己紹介スライドをもっと見やすくしたい」「Apache Sparkの説明図を追加できないか」「検証結果をもっと印象的に表現したい」といった具体的な改善相談に発展していきました。

2. 既存のENECHANGE Marpテンプレートを活用

社内で作業を始める前に、ENECHANGEで既にMarpテンプレートが用意されていることを知っていたのでそちらを活用しました。

ClaudeCodeに「ENECHANGEの既存Marpテンプレートを使って、500万件データ処理基盤の技術発表用資料を作りたい」と相談したところ、既存のテンプレート構造を活用した効率的な方法を提案してくれました。

「車輪の再発明」をせずに済んだのは、大きなメリットでした。

3. 視覚的要素の改善

PowerPoint版では手動でグラフを作成していましたが、Marpではより見やすいレイアウトやアイコンを活用できることを知りました。ClaudeCodeに「500万件のデータ処理改善をもっと印象的に表現したい」と相談したところ、視覚的に分かりやすい表現方法を提案してくれました。

実際の変化を比較

実際に変換した資料の改善点を具体的に比較してみます。対象となったのは、「500万件に向けた課題と未来」というタイトルのデータ基盤構築に関する外部発表用プレゼンテーション資料です。

PowerPoint版からMarp版への主な変化

項目 PowerPoint版 Marp版 改善効果
タイトルスライド 赤い三角形デザイン 青いグラデーション + 電力アイコン ブランド統一感向上
構成管理 目次が見づらい 番号付きリスト形式 構造の明確化
自己紹介 写真 + 長文 タイムライン形式 視認性大幅改善
データ可視化 手作業グラフ Mermaid/チャート自動生成 メンテナンス効率化
技術説明 テキスト中心 アーキテクチャ図追加 理解しやすさ向上

特に印象的だった改善点

1. スライドの見た目大変身

PowerPoint版では写真の横に長文の経歴が並んでいるだけでしたが、Marp版ではタイムライン形式に整理し、アイコンも追加。見た目が劇的に改善されました。 1枚目は実際にMarpに読み込ませた直後の状態で、2枚目がClaudeCodeがデザインを修正してくれたスライドです。 読み込ませただけだとレイアウトが崩れることもあるので、最終的な調整は必要でしたが、全体の構成はClaudeCodeがうまくまとめてくれました。

自己紹介スライド：

before
after

背景スライド：

before
after

2. データ表現の改善

PowerPoint版では文字のみで表現していた処理時間の改善も、Marp版では数値を強調した視覚的なレイアウトに変更しました：

  • 従来処理: 140分 → 新処理: 17分（88%短縮）
  • コスト: 月額$154 → $7.5（95%削減）

このように、数値の変化をより印象的に表現できるようになりました。

3. 技術説明の改善

Apache Sparkの説明では、PowerPoint版のテキスト中心の説明から、Marp版では構造化された説明に変更しました。技術的な概念をより分かりやすく整理し、システム構成を図解で表現することで理解しやすくなりました。

予想外の効果

元々はブラッシュアップが目的でしたが、実際の作業を通じて思わぬ効果も得られました：

1. プレゼン構成の見直し

Markdownで資料を作り直す過程で、「本当に必要なスライドは何か」を考え直すことになりました。以前の資料は文字が多すぎて伝わりにくかったのですが、Markdownでは文章として論理的な流れを意識するようになりました。

結果、39枚あった元のスライドを33枚に絞り込み、より的確な内容になりました。

2. バージョン管理の改善

GitHubでMarkdownファイルを管理することで、変更履歴が一目瞭然になりました。PowerPointでは困難だった「どの部分をどう修正したか」がdiffで確認でき、今後の発表資料作成にも役立ちそうです。

3. 再利用性の向上

既存のENECHANGE Marpテンプレートを基に、同じフォーマットで他の発表資料も作成できるようになりました。ClaudeCodeに「今度は別のテーマでプレゼンする際も、この統一されたテンプレートを使いたい」と依頼し、一貫性のある資料体系ができました。

注意点・所感

  • Marpの学習コストは意外に低く、基本的なMarkdownが書ければすぐに使えます。
  • 自己紹介スライドのbeforeのように、一部レイアウト崩れもあったので、細かい調整は手動で行いました。
  • Marp for VS Codeを使ったのですが、最終的にPDFにする際にエラーで苦労しました。
    • 下記のエラーが発生してPDF出力できない問題に遭遇： Failure to export: [ProtocolError] Protocol error (Page.printToPDF): Printing failed
    • こちらの記事を参考に試行錯誤した結果、VS Codeの設定でBrowserを「firefox」に変更することで解決しました。Chrome/Chromiumでは環境によってPDF出力時にエラーが発生することがあるようです。

settings

まとめ

ClaudeCodeを活用してPowerPointからMarpへ移行した結果、当初の目的通りプレゼン全体の質が向上しました。特に「視覚的な分かりやすさ」「内容の論理性」「バージョン管理」「再利用性」の面で大きなメリットを感じています。

AIエージェントは「やりたいこと」を明確にして相談すると、思いがけないアイデアや改善案を提示してくれます。今回も「文字ばかりの資料をもっと見やすくしたい」という相談から、Marpへの移行と合わせてプレゼン全体の大幅な改善を実現できました。

発表のお知らせ

今回ご紹介した「500万件に向けた課題と未来」のスライドは、実際に以下のイベントで発表予定です！

社会インフラ基盤開発に関わるアーキテクチャ設計を学ぶ会！

データ基盤構築やアーキテクチャ設計に興味のある方は、ぜひご参加ください。Marpで作成した改良版スライドを使って、ENECHANGEのデータ処理基盤の課題と解決策について詳しくお話しします。

参考：最終的にできたMarpファイル

最終的にできたMarpファイルの冒頭部分を紹介します：

---
marp: true
theme: enechange
paginate: true
footer: <img class="logo" src="../../images/enechange.png" />
class: normal-slide top
---

<!--
_class: title-slide
_paginate: false
_footer: ""
-->

## 社会インフラ基盤開発に関わるアーキテクチャ設計を学ぶ会！

# 500万件に向けた課題と未来

<img class="logo" src="../../images/enechange.png" />

**2025年8月28日**

<img class="side-image" src="../../images/title.png" />

---

<!--
_class: agenda-slide
_footer: ""
-->

# INDEX

- **自己紹介**
- **背景**  
- **現状のシステム構成**
- **現状の課題**
- **主要なボトルネックと改善案**
- **新アーキテクチャによるバッチ処理の検証結果**
- **今後のアクションプランと課題**

---

このように、ENECHANGEの既存テンプレート（enechangeテーマ）を活用し、統一感のあるデザインでプレゼンテーション資料を作成できました。ClaudeCodeと20回以上のやり取りを経て、約3〜4時間でPowerPoint版の39枚から33枚に絞り込み、視覚的な改善と内容の整理を両立できました。