はじめに

ども！Claude関連のブログを週に5本も投稿してしまって燃え尽きている龍ちゃんです。登壇資料完成までもう少しなので、今週の残りを走り切ろうと思います。Claude×技術ブログというテーマでハイペースでブログを執筆しています。

そんな中、今回の登壇資料作成にClaudeが大活躍して、なんと爆速で登壇資料作成が終わったんです！

衝撃の効率化実績

• 従来：40時間/本 × 2本 = 80時間
• 新手法：11時間で2本完成（3時間生成 + 5時間修正 × 2本）
• 結果：約7倍の効率化を実現

45分の登壇資料を3時間で作る、これって革命的じゃないですか？

この記事で得られること

• ブログ記事を登壇資料に変換する実用的な方法
• Claude×Marpによるエンジニア最適化ワークフロー
• 実際に使えるプロンプト例とコード
• 現実的な課題と対処法（包み隠さず全部話します！）

実際の成果物

今回作成したコンテンツはすべて、GitHubとGitHub Pagesに公開しています。ぜひ見てみてください。

基本ワークフロー（シンプルな3ステップ）

Claude×Marpによる登壇資料作成は、以下の3ステップで完了します。Claude Codeの実行環境を準備することで、Marp形式のMarkdownをスムーズに編集・更新できます。

ステップ1：ブログ記事をClaudeに読み込ませる

最初に、既に執筆済みのブログ記事をClaudeに読み込ませ、ドキュメントとして参照できる状態にします。

• 一次情報の活用：すでに執筆済みの内容なので、信頼性が担保されています
• 複数ブログの参照：関連する複数のブログを参照させることで、より充実した登壇資料を短時間で作成できます

ステップ2：登壇情報を明確化してMarp形式で生成

高品質な登壇資料を作成するためには、登壇に関する基本情報を整理することが重要です。

• 対象者：どのようなレベル・バックグラウンドの人か
• 時間：登壇時間はどれくらいか
• 目的：何を伝えたいのか

これらの情報とブログの内容を組み合わせて、ClaudeにMarp形式で登壇資料を生成してもらいます。

メリット：
MarpはMarkdown形式での記述のため、エンジニアにとって操作しやすく、バージョン管理も容易です。

ステップ3：VSCodeで微調整とプレビュー

Claudeが生成した初期草案をベースに、VSCode上でリアルタイムプレビューを確認しながら編集を行います。

主な調整作業：

• 内容の追加・修正：特定の部分を詳しく追記、関連情報の補強
• スライド構成の最適化：情報量の調整、ページ分割の精練
• ビジュアル調整：フォントサイズ、レイアウトの微調整

効率的な作業環境：

VSCodeのMarp拡張機能を使用することで、コード編集とプレゼンテーションのプレビューを同時に行えるため、作業効率が大幅に向上します。

実際の手順（今すぐ試せる具体的方法）

環境準備（5分で完了）

# VSCode拡張機能のインストール
- Marp for VS Code
- Markdown Preview Enhanced（推奨）

Claude用プロンプト例（コピペOK）

以下のブログ記事を基に、45分の技術登壇用資料をMarp形式で作成してください。

【対象者】：エンジニア（経験年数3-5年）
【時間】：45分
【目的】：実践的な知識共有

【ブログ記事】：
[ここにブログ記事をペースト] or [MCP経由で取得]

【要件】：
- スライド数：25-30枚程度
- 実装例やコード例を含める
- 質疑応答用のスライドも追加
- Marp形式で出力

Marpの基本設定

---
marp: true
theme: default
paginate: true
header: '登壇タイトル'
footer: 'あなたの名前 | 日付'
---

生成から完成までの流れ

制約と現実的な対処法

Marpが苦手なこと

Claudeと実際に試してみたところ、いくつか苦手な部分がわかりました：

複雑なレイアウト

• 対処法：シンプルなデザインに徹する
• 個人的に「デザインよりもコンテンツの方が重要」と考えるようになりました

凝った図表作成

• 対処法：図にしたい部分はHTMLで出力してもらい、そのHTMLをベースに図表を作成してSVGで埋め込む
• これは現実的な手法だと思います

情報の詰め込みすぎ

• 一枚のスライドに収まりきらない情報を書いてしまったり
• 図で表現すべき内容を文章で表現してしまうことがあります
• 対処法：何を図にするかという判断には、やはり人間の目が必要

人間による最終調整が必要な部分

現状、Marpで出力した資料をそのまま使えるケースはそれほど多くないと思います。

• 図 vs 文章の判断：AIは文章で説明しがち
• スライド分割：1枚に情報を詰め込む傾向
• フォントサイズ調整：読みやすさの最終確認

ただし、ブログをもとに生成された文章自体は使えるので、図の配置などに関して人間が確認しながら修正すれば十分実用的です。

PowerPointとの使い分け

Marp向き：

• コンテンツ重視
• 情報密度高め
• エンジニア向け技術発表

PowerPoint向き：

• デザイン重視
• 営業資料
• 視覚効果重要な場面

レイアウトにこだわらなければMarpで登壇資料を作るのはすごく効率的です。Marpで資料を作り、それをベースにパワーポイントなどで編集するというのも現実的なアプローチだと個人的に感じています。

実際の成果と品質評価

生成品質

• 文章品質：✅ そのまま使用可能レベル
• 構成力：✅ 論理的で分かりやすい流れ
• 技術精度：✅ ブログベースなので一次情報で正確
• デザイン：⚠️ シンプルだが実用的

時間短縮の内訳

管理面でのメリット

Marpで資料を管理しておくと、通常登壇資料はドライブに保存するだけで参照情報をすべて記録することは少ないものですが、この方法では参照した情報がすべて保存された状態になり、管理の面でも優れています。

また、MarpでVSCodeのデザインファイルを作成できるので、CSSでプロパティを編集して自分の登壇資料のベースデザインを作成できます。CSSを書くのが苦手な人も多いと思いますが、AI入力に適した形式になっていると個人的に感じています。

まとめ

この手法が向いている人

この手法が向いていない場面

今日から始められるアクション

1. VSCodeにMarp拡張機能をインストール
2. 過去のブログ記事を1つ選ぶ
3. 上記のプロンプトをClaudeに投入
4. 5分で最初のスライドを生成体験

将来的な展望

これは将来的な展望になりますが、Marpで第一段階の資料を作成し、その構造化情報をもとに別のAIに入力してデザインを整えてもらうという方法も検討しています。

次回予告

• 具体的な応用例：技術勉強会での実際の使用例
• 高度なカスタマイズ：CSSでのデザイン調整
• チーム運用：複数人でのMarp資料管理

皆さんも、ぜひこの方法で登壇資料作成の効率化にチャレンジしてみてください！

補足情報

参考リンク

• Marp公式サイト
• VS Code Marp拡張機能

動作環境

• VSCode（最新版推奨）
• Node.js（Marp CLI使用時のみ）
• Claude Code