Marpスライドクリエーター

7つのあらかじめ設計されたテーマとベストプラクティスを備えた、専門的で視覚的に魅力的なMarpプレゼンテーションスライドを作成します。

このスキルを使用する場合

このスキルは、ユーザーが以下のような場合に使用します:

• プレゼンテーションスライドまたはMarpドキュメントの作成をリクエストする
• 「スライドを良い感じにして」または「スライドデザインを改善して」と尋ねる
• 「良い感じにして」または「かっこよく」などの曖昧な指示を提供する
• 講義またはセミナー資料を作成したい
• 時折画像を含む箇条書き中心のスライドが必要

クイックスタート

ステップ1: テーマを選択

まず、ユーザーのリクエストとコンテンツに基づいて適切なテーマを決定します。

テーマ選択のクイックガイド:

• 技術/デベロッパーコンテンツ → techテーマ
• ビジネス/企業 → businessテーマ
• クリエイティブ/イベント → colorfulまたはgradientテーマ
• アカデミック/シンプル → minimalテーマ
• 一般/不明確 → defaultテーマ
• ダーク背景が必要 → darkまたはtechテーマ

詳細なテーマ選択ガイダンスについては、references/theme-selection.mdを参照してください。

ステップ2: スライドを作成

1. 最初に関連するリファレンスを読む:

   • 常にreferences/marp-syntax.mdで基本的な構文を確認
   • 画像について: references/image-patterns.md(公式Marpit画像構文)
   • 高度な機能(数式、絵文字)について: references/advanced-features.md
   • カスタムテーマについて: references/theme-css-guide.md

2. 適切なテンプレートファイルからコンテンツをコピー:

   • assets/template-basic.md - Defaultテーマ(最も一般的)
   • assets/template-minimal.md - Minimalテーマ
   • assets/template-colorful.md - Colorfulテーマ
   • assets/template-dark.md - ダークモードテーマ
   • assets/template-gradient.md - Gradientテーマ
   • assets/template-tech.md - Tech/codeテーマ
   • assets/template-business.md - Businessテーマ

3. 品質ガイドラインのためreferences/best-practices.mdを読む

4. ベストプラクティスに従ってコンテンツを構成:

   • <!-- _class: lead -->を使用したタイトルスライド
   • 簡潔なh2タイトル(日本語で5-7文字)
   • スライドごとに3-5個の箇条書き
   • 適切な余白

5. 必要に応じてreferences/image-patterns.mdのパターンを使用して画像を追加

6. .md拡張子で/mnt/user-data/outputs/に保存

利用可能なテーマ

1. Defaultテーマ

カラー: ベージュ背景、紺色のテキスト、青いヘッディング スタイル: 装飾的なラインを備えたクリーンで洗練された外観 使用場面: 一般的なセミナー、講義、プレゼンテーション テンプレート: template-basic.md

2. Minimalテーマ

カラー: 白い背景、グレーのテキスト、黒いヘッディング スタイル: 装飾が最小限、広い余白、ライトなフォント 使用場面: コンテンツ重視のプレゼンテーション、アカデミックトーク テンプレート: template-minimal.md

3. Colorfulテーマ

カラー: ピンクグラデーション背景、マルチカラーアクセント スタイル: 鮮やかなグラデーション、大胆なフォント、虹色のアクセント 使用場面: ユーティスト向けイベント、クリエイティブプロジェクト テンプレート: template-colorful.md

4. ダークモードテーマ

カラー: 黒い背景、シアン/紫のアクセント スタイル: グロー効果を備えたダークテーマ、目に優しい 使用場面: 技術プレゼンテーション、夜間トーク、モダンな外観 テンプレート: template-dark.md

5. グラデーション背景テーマ

カラー: 紫/ピンク/青/緑のグラデーション(スライドごとに異なる) スタイル: スライドごとに異なるグラデーション、白いテキスト、影 使用場面: ビジュアル重視、クリエイティブなプレゼンテーション テンプレート: template-gradient.md

6. Tech/Codeテーマ

カラー: GitHubスタイルのダーク背景、青/緑のアクセント スタイル: コードフォント、Markdownスタイルのヘッダー(#シンボル付き) 使用場面: プログラミングチュートリアル、技術ミートアップ、デベロッパーコンテンツ テンプレート: template-tech.md

7. Businessテーマ

カラー: 白い背景、紺色のヘッディング、青いアクセント スタイル: コーポレートプレゼンテーションスタイル、上部ボーダー、テーブルサポート 使用場面: ビジネスプレゼンテーション、提案資料、レポート テンプレート: template-business.md

スライド作成プロセス

基本的なワークフロー

1. 要件を理解

   • コンテンツを特定: タイトル、トピック、主要なポイント
   • ターゲットオーディエンスを決定
   • 形式レベルを評価

2. テーマを選択

   • 上記のクイック選択ルールを使用
   • 不明確な場合はreferences/theme-selection.mdを参照
   • 確実でない場合はdefaultテーマにデフォルト

3. テンプレートを適用

   • assets/から適切なテンプレートを読み込む
   • CSSはすでに埋め込まれている - 外部ファイルは不要
   • テンプレート構造を維持

4. コンテンツを構成

   • タイトルスライド: <!-- _class: lead --> + h1
   • コンテンツスライド: h2タイトル + �条書き
   • タイトルを5-7文字に保つ(日本語)
   • スライドごとに3-5個の箴言を使用

5. 品質を調整

   • references/best-practices.mdを読む
   • 適切な余白を確保
   • 一貫性を維持
   • テキストを簡潔に保つ(1行あたり15-25文字)

6. 画像を追加

   • 必要な場合はreferences/image-patterns.mdを参照
   • 一般的: ![bg right:40%](image.png)を使用して側面に画像配置
   • 適切なMarp画像構文を使用

7. 出力ファイル

   • /mnt/user-data/outputs/に保存
   • presentation.mdなどの説明的なファイル名を使用

「良い感じにして」というリクエストの処理

ユーザーが「良い感じにして」、「かっこよく」、または「make it cool」などの曖昧な指示を出した場合:

1. コンテンツからテーマを推測:

   • ビジネスコンテンツ → businessテーマ
   • 技術コンテンツ → techまたはdarkテーマ
   • クリエイティブコンテンツ → gradientまたはcolorfulテーマ
   • 一般的 → defaultテーマ

2. 自動的にベストプラクティスを適用:

   • タイトルを5-7文字に短縮
   • 箴言を3-5項目に制限
   • 適切な余白を追加
   • 一貫した構造を使用

3. 視覚的階層を強化:

   • 必要に応じてh3をサブセクション用に使用
   • 密集したテキストを複数のスライドに分割
   • 論理的な流れを確保(導入 → 本文 → 結論)

4. プロフェッショナルなトーンを維持:

   • 形式レベルをコンテンツに合わせる
   • リストで並列構造を使用
   • 技術用語の一貫性を保つ

画像統合

画像を含むスライドについては、詳細な構文のためreferences/image-patterns.mdを参照してください。

一般的なパターン:

• 側面の画像: ![bg right:40%](image.png) - 右に画像、左にテキスト
• 中央揃え: ![w:600px](image.png) - 特定の幅で中央揃え
• フル背景: ![bg](image.png) - 全画面背景
• 複数の画像: 複数の![bg]宣言

例の講義パターン:

## スライドタイトル

![bg right:40%](diagram.png)

- 説明ポイント1
- 説明ポイント2
- 説明ポイント3

ファイル出力

最終的なMarpファイルは常に/mnt/user-data/outputs/に.md拡張子で保存します:

• presentation.md
• seminar-slides.md
• lecture-materials.md

品質チェックリスト

スライドを提供する前に、以下を確認します:

• テーマがコンテンツに適切に選択されている
• CSSテーマがファイルに埋め込まれている
• タイトルスライドが<!-- _class: lead -->を使用している
• すべてのh2タイトルが簡潔(5-7文字)
• 箴言がスライドごとに3-5項目
• 画像が適切なMarp構文を使用している
• ファイルが出力ディレクトリに保存されている
• コンテンツがベストプラクティスに従っている

リファレンス

コアドキュメント

• Marp構文: references/marp-syntax.md - 基本的なMarp/Marpit構文(ディレクティブ、frontmatter、ページネーション等)
• 画像パターン: references/image-patterns.md - 公式の画像構文(bg、フィルター、分割背景)
• テーマCSS ガイド: references/theme-css-guide.md - Marpit仕様に基づいたカスタムテーマの作成方法
• 高度な機能: references/advanced-features.md - 数式、絵文字、フラグメント化されたリスト、Marp CLI、VS Code
• 公式テーマ: references/official-themes.md - default、gaia、uncoverテーマドキュメント

品質・選択ガイド

• テーマ選択: references/theme-selection.md - コンテンツに適したテーマを選択する方法
• ベストプラクティス: references/best-practices.md - 「かっこいい」スライドの品質ガイドライン

テンプレート・アセット

• テンプレート: assets/template-*.md - 各テーマの埋め込みCSS付きスタートポイント(7テーマ)
• スタンドアロンCSS: assets/theme-*.css - 参照用CSSファイル(テンプレートに既に埋め込まれている)

公式外部リンク

• Marp公式サイト: https://marp.app/
• Marpit ディレクティブ: https://marpit.marp.app/directives
• Marpit 画像構文: https://marpit.marp.app/image-syntax
• Marpit テーマCSS: https://marpit.marp.app/theme-css
• Marp Core GitHub: https://github.com/marp-team/marp-core
• Marp CLI GitHub: https://github.com/marp-team/marp-cli