こんにちは、座禅いぬです。時間がないので下書き掲載、あとで修正します。
今回は、Claude Codeの「skills」機能を使ってプレゼン作成フローを自動化した話をします。最初はカスタムコマンドから始めて、skillsへの移行、そして編集可能なPPTX出力まで、対話しながら実装した体験をお伝えします。
プレゼン作成、毎回同じことやってませんか
LTや勉強会で発表する機会が増えると、スライド作成の頻度も上がります。僕は月に3〜4回は何かしら発表しているのですが、毎回同じような作業を繰り返していることに気づきました。構成を考えて、Marpでマークダウンを書いて、デザインを調整して、PDFに出力して...この流れ、もう少し効率化できないかなと思っていました。
特に面倒だったのが「デザイン調整」です。Marpは便利なのですが、毎回CSSをコピペしたり、テーマを適用したりする作業が地味に時間を取ります。あと、PowerPointで微調整したい場面も多いのですが、Marpから直接PPTXに出力すると画像になってしまって編集できない。これが結構ストレスでした。
まずはカスタムコマンド「/marp」を作った
Claude Codeにはカスタムコマンド機能があります。.claude/commands/にマークダウンファイルを置くと、/コマンド名で呼び出せるようになります。最初はこれを使って、Marpスライドの生成を自動化しました。
.claude/commands/marp.md
コマンドの中身は、スライド作成のルールブックです。「1スライド1メッセージ」「タイトルは疑問形か断定形」「結論は#### →で書く」といったルールを定義しておくと、Claude Codeがそれに従ってスライドを生成してくれます。
これだけでもかなり便利でした。「〇〇についてLTスライド作って」と言うだけで、構成からデザインまで一気に作ってくれる。毎回ルールを説明する必要がなくなりました。
skillsの存在を知った
カスタムコマンドで満足していたのですが、ある日「skills」という機能があることを知りました。Claude Codeと対話しながら調べてみると、カスタムコマンドとは違う特徴があることがわかりました。
カスタムコマンドは、ユーザーが/コマンド名で明示的に呼び出すもの。一方skillsは、Claude Codeが状況に応じて自動的に判断して使うものです。「スライド作りたい」と言っただけで、skillsの説明文を見て「これを使おう」と判断してくれます。
もう一つの違いは、skillsは複数ファイルで構成できること。テンプレートやスクリプト、参考資料などを同じディレクトリにまとめて置けます。これは大きなメリットでした。
/marpをskillsに移行してみた
さっそくカスタムコマンドをskillsに移行することにしました。ディレクトリ構造はこんな感じです。
.claude/skills/marp/
├── SKILL.md # メインの説明ファイル
├── templates/
│ ├── lt.md # LT用テンプレート
│ ├── study.md # 勉強会用テンプレート
│ └── mtg.md # MTG用テンプレート
├── scripts/
│ └── check_quality.py # 品質チェックスクリプト
└── references/
└── example_slide.md # 参考スライド
SKILL.mdにはdescriptionフィールドがあり、ここに「Marpスライドを生成する。スライド作りたい、LTの資料作って、などの依頼時に使用」と書いておくと、Claude Codeが自動的にこのskillを選んでくれます。
テンプレートを用途別に分けたことで、「LT用」「勉強会用」と指定するだけで適切な構成が適用されるようになりました。品質チェックスクリプトも追加して、文字数オーバーや構成の問題を自動検出できるようにしました。
仕上げ用のskillも作った
スライドの下書きができたら、次はデザインの仕上げです。これも別のskillとして切り出しました。
.claude/skills/marp-finisher/
├── SKILL.md
└── themes/
├── dark.css # 技術発表向け
├── default.css # セミナー向け
├── tech.css # GitHub風
└── business.css # ビジネス向け
「このスライド仕上げて」「デザインを整えて」と言うと、marp-finisher skillが起動して、コンテンツに合ったテーマを提案してくれます。7種類のテーマを用意しておいて、好みを伝えるとCSSを適用してくれる仕組みです。
これで「下書き → レビュー → 仕上げ」という流れがスムーズになりました。
編集可能なPPTXが欲しい
ここまでで満足していたのですが、一つ問題が残っていました。Marpから直接PPTXに出力すると、スライドが画像になってしまうんです。文字の微調整や配置の変更ができない。これは困る。
調べてみると、PptxGenJSというライブラリを使えばJavaScriptからPowerPointファイルを生成できることがわかりました。しかもテキストとして出力されるので、後から編集できます。
Claude Codeと対話しながら、Marpマークダウンをパースしてpptxgenjs形式に変換するスクリプトを書きました。
// marp_to_pptx.js（抜粋）
const slides = parseMarpMarkdown(content);
const pptx = new PptxGenJS();
slides.forEach(slideData => {
const slide = pptx.addSlide();
slide.addText(slideData.title, { ... });
slide.addText(slideData.bullets, { ... });
});
await pptx.writeFile({ fileName: outputPath });
Marpのデザインを自動継承するようにした
最初のバージョンでは、プリセットのテーマ（dark、default、techなど）から選ぶ方式でした。でも、せっかくMarpでデザインを作り込んだのに、それが反映されないのはもったいない。
そこで、MarpのCSSから色を自動抽出する機能を追加しました。section { background } から背景色、h1, h2 { color } からタイトル色、strong { color } から強調色...という具合にパースして、PPTXに反映させます。
# テーマ指定なしで実行すると、MarpのCSSから自動抽出
node marp_to_pptx.js slide.md output.pptx
これで、Marpで作り込んだデザインがそのままPPTXに反映されるようになりました。
既存PPTXからテンプレートを抽出する
さらに欲が出てきました。「いつも使っているPPTXのレイアウトを再現したい」という要望です。会社や団体で決まったフォーマットがあると、それに合わせる必要がありますよね。
PPTXファイルは実はZIPアーカイブで、中にXMLファイルが入っています。ppt/theme/theme1.xmlにカラースキームが、ppt/slideMasters/にレイアウト情報が格納されています。これを解析して、テンプレートとして保存する機能を追加しました。
# 既存PPTXからテーマを抽出
node extract_template.js mytemplate.pptx
# 抽出したテーマで変換
node marp_to_pptx.js slide.md output.pptx --template mytemplate
対話しながら実装する体験
今回の実装で面白かったのは、Claude Codeと対話しながら機能を追加していった過程です。「こういうことできる？」と聞くと、技術的な選択肢を提示してくれる。「こっちがいい」と伝えると、実装を始めてくれる。
エラーが出たら一緒にデバッグして、動いたら「次はこれも欲しい」と追加要望を出す。この繰り返しで、最初は単純なスクリプトだったものが、テンプレート抽出やCSS自動解析まで対応した本格的なツールに育っていきました。
特に印象的だったのは、スクリーンショットを見せながら「この理想のレイアウトに近づけて」と依頼したときです。画像を分析して、「ヘッダーは左上端に密着、メイン提言は紺背景に白文字、テキストボックスは右カラムにグレー背景...」と要素を分解して、座標レベルで実装してくれました。
まとめ
Claude Codeのskillsを使ってプレゼン作成フローを自動化してみました。カスタムコマンドから始めて、skills化、デザイン仕上げの分離、編集可能なPPTX出力、既存テンプレートの抽出と、対話しながら機能を追加していきました。
正直なところ、最初は「スライド生成が楽になればいいな」程度の期待でした。でも対話を重ねるうちに、当初想像もしていなかった機能が実現できました。「こういうことできる？」と聞いてみる姿勢が大事なんだと改めて感じています。
skillsの良いところは、一度作れば何度でも再利用できること、そして複数のファイルやスクリプトをまとめて管理できることです。プレゼン作成に限らず、繰り返し行う作業があれば、skillsとして整備しておくと業務効率化に貢献してくれそうです。