メインコンテンツへ移動
AIチュートリアル

minorun-marp-skillでMarpのプレゼンスライドをより良く作成する

minorun-marp-skillをMarpやClaude CodeなどのAIエージェントと組み合わせて、より完成度の高いプレゼンテーション資料を作成する方法を解説します。インストール、テーマ、フォント、イラスト素材、PDFとSVGの検証、ストーリー構成・図解・ビジュアルデザインのバランスを取るテクニックを紹介します。

約11分で読了
minorun-marp-skillでMarpのプレゼンスライドをより良く作成する

minorun-marp-skillの概要

minorun-marp-skillは、Marpでプレゼンテーションスライドを作成するための、再利用可能なガイダンスと検査ツールのコレクションです。見た目が整っているだけでなく、明確なストーリー、有用な図、バランスの取れたデザインを備えたスライドをAIエージェントが作成できるよう設計されています。

このプロジェクトは、作者のMinoru Ondaが繰り返し活用してきたプレゼンテーション改善の知見をまとめ、Claude CodeなどのAIエージェントが読み取れるスキルとしてパッケージ化したものです。Marp Markdownを自分で記述する人も、この資料を直接利用できます。

サンプルデッキ

リポジトリの構成

リポジトリでは、執筆ガイダンス、ビジュアルデザイン、テーマ、検証ツール、サンプルを分離しています。

  • skills/slide-storyでは、フック、セクション開始スライド、段階的な情報開示、見出しのスタイル、締めくくり、プレゼンテーションの長さの見積もりを扱います。
  • skills/slide-figuresでは、図の情報密度を下げる方法、SVG図の描画、最小文字サイズの設定、イラストの配置について説明します。
  • skills/slide-design-darkでは、余白の計測、垂直方向のバランス、暗い背景、表、コードブロック、Marp固有の注意点を扱います。
  • theme/minorun-dark.cssは、シアンのアクセントを備えた暗色のMarpテーマを提供します。
  • tools/には、出力されたPDFとSVGを計測するスクリプトが含まれています。
  • examples/sampleにはサンプルデッキが、examples/brokenにはチェックが問題を検出できることを確認できるよう、意図的に問題を含むデッキが収録されています。

インストールとセットアップ

Claude Code用のスキルをコピーする

Claude Codeを使用する場合は、3つのスキルディレクトリを個人用のClaudeスキルディレクトリにコピーします。

cp -r skills/* ~/.claude/skills/

これで、Claude Codeはスライドの作成や修正を支援する際に、リポジトリのslide-story、slide-figures、slide-design-darkのガイダンスを利用できるようになります。

テーマとツールをスライドのリポジトリにコピーする

theme/とtools/のディレクトリを、デッキを含むリポジトリにコピーします。これにより、テーマと検証スクリプトを、プレゼンテーションで使用するMarkdownやアセットと同じ場所で管理できます。

必要なツールをインストールする

検査スクリプトは、Marp CLI、Google Chrome、poppler、mupdf-tools、Python 3、Pillowに依存します。Marp CLIは次のコマンドでインストールします。

npm i -g @marp-team/marp-cli

macOSでは、PDFユーティリティを次のコマンドでインストールします。

brew install poppler mupdf-tools

check-svg-box-fit.mjsは、Marp CLIにバンドルされているpuppeteer-coreを使用します。モジュールやChromeの実行ファイルが自動的に見つからない場合は、MARP_NODE_MODULESとCHROME_PATHを使って場所を指定してください。

フォントを準備する

このテーマは丸ゴシック系のフォントを想定しています。Zen Maru Gothicをインストールすると、推奨の見た目になります。利用できないmacOS環境では、代わりにヒラギノ丸ゴシックで表示されます。フォントの有無によって最終的なデッキの見た目が変わる可能性があるため、スライドを書き出す前にフォントをインストールして確認してください。

デッキを作成して書き出す

deck.mdなどのMarp Markdownファイルにスライドを記述します。付属の暗色テーマとローカルファイルのサポートを使って、PDFに書き出します。

marp --no-stdin deck.md --pdf --theme theme/minorun-dark.css --allow-local-files

--themeオプションは、リポジトリの暗色でシアンのアクセントを備えたデザインを適用します。--allow-local-filesオプションを指定すると、書き出し時にデッキから参照されるローカル画像などのアセットを読み込めます。

書き出したスライドを検証する

書き出した後、生成されたPDFとSVG図に対してチェックを実行します。これらのチェックは、Markdownのソースでは見落としやすく、レンダリング後のプレゼンテーションでは明らかな問題を検出するためのものです。

余白を確認する

python3 tools/check-dark-margins.py deck.pdf

このチェックでは、スライドコンテンツの下端と右端にある空白を計測します。

見本デッキ

要素間の間隔を確認する

python3 tools/check-dark-gaps.py deck.pdf

このチェックを使うと、図やボックスが隣接するテキストに近すぎないか確認できます。

図内のテキストを確認する

python3 tools/check-figure-text.py deck.pdf

このチェックでは、図内の小さなテキストや、ボックスの端に詰まりすぎているテキストを検出します。

SVGボックスへの収まりを確認する

node tools/check-svg-box-fit.mjs images/*.svg

このチェックでは、SVGボックス内のテキストがボックスに収まっているか確認します。図をスライドのMarkdownとは別に生成または編集する場合に特に役立ちます。

再利用したスライドを確認する

python3 tools/check-reuse-diff.py new.md old.md

スライドを再利用する場合は、この比較を実行します。新旧のMarkdownファイルにおける見出しと図の関係を確認し、再利用したビジュアルの内容が周囲のメッセージと合わなくなっていないか気づけるようにします。

イラストを追加する

サンプルプレゼンテーションでは、Irasutoyaのイラストをよく使用していますが、これらの画像はリポジトリに含まれていません。サンプルデッキを書き出す前に、次のコマンドでダウンロードしてください。

sh examples/sample/fetch-illustrations.sh

ダウンロードしたイラストを使用する前に、適用される利用条件を自分で確認してください。サンプルデッキの概要に表示されるイラストはIrasutoyaの著作物であり、このリポジトリのApache License 2.0の対象ではありません。

実践的なAI支援ワークフロー

  1. ストーリーから始める。 AIエージェントにslide-storyのガイダンスを使わせ、導入のフック、セクション間のつなぎ、アイデアの段階的な提示、見出しのスタイル、結び、推定講演時間を定義します。
  2. 図を計画する。 slide-figuresを使い、各図を聴衆に必要な情報だけに絞り、読みやすい文字サイズを選び、SVGとイラストのどちらが適切かを判断します。
  3. ビジュアルシステムを適用する。 slide-design-darkとminorun-dark.cssを使い、余白、垂直方向のバランス、暗い背景とのコントラスト、表とコードの一貫したスタイルを維持します。
  4. 早い段階で書き出す。 Markdownソースやエディターのプレビューだけに頼らず、MarpでPDFを生成します。
  5. 出力を確認する。 PDFとSVGのチェックを実行し、図のラベルが詰まっている、余白が不十分、端を使いすぎているといった実際の描画上の問題に基づいてスライドを修正します。
  6. 講演全体を見直す。 スライド資料に一貫した流れがあり、各図が単なる装飾ではなく、そのスライドの見出しを支えていることを確認します。

高度なヒント

壊れた例を回帰テストとして使う

examples/brokenディレクトリには、意図的に問題を含むスライド資料が収録されています。これを使って、検査スクリプトが正しくインストールされ、検出対象として設計されたレイアウト問題に反応することを確認できます。

ソースMarkdownだけでなくPDFを検証する

Marpでの描画では、フォントの有無、ボックスサイズ、ローカルアセット、最終ページのレイアウトによる変化など、ソースコードからは分かりにくい問題が明らかになることがあります。書き出したPDFを検査対象の成果物として扱ってください。

図のテキストを読みやすく保つ

図に情報を詰め込みすぎた場合は、まず文字を小さくするのではなく、詳細を削るか後回しにします。図のガイダンスとcheck-figure-text.pyを組み合わせることで、ライブプレゼンテーション中も図を読みやすく保てます。

見出しと図の整合性を保つ

以前のスライドを再利用する場合は、見出しと視覚的な説明の両方を更新します。再利用差分チェックにより、スライドのメッセージが変わったのに古い図が残っているケースを特定できます。

ライセンスの境界を忘れない

このリポジトリはApache License 2.0の下で公開され、Minoru Ondaに著作権が帰属します。外部のフォントやイラストには別の利用条件が適用される場合があるため、スライド資料を配布する前に、それぞれのライセンスを個別に確認してください。

まとめ

minorun-marp-skillは、Marp向けのプレゼンテーションに関する知見を、再利用可能なAIエージェントスキル、ダークテーマ、サンプル、具体的な出力チェックへとまとめます。スキルをClaude Codeにコピーし、テーマとツールをスライド資料のそばに配置して、Marpで書き出し、描画されたPDFとSVGファイルを確認してください。このワークフローにより、スライドの完成度を最後の仕上げとして扱うのではなく、ナラティブ、図、ビジュアルデザインを連携させやすくなります。