create-marp-deck

Marp スライドデッキの作成

以下の既定の規則に従って、Marp の Markdown 形式でプレゼンテーションスライドデッキを作成します。

フェーズ 1：インタビュー

何かを生成する前に、以下の質問を1つずつユーザーに尋ね、次の質問に進む前に毎回答えを待ってください。

質問 1 — 目的とトピック： 次のように尋ねます：「このプレゼンテーションのテーマは何ですか？聴衆に何を理解してもらう、または何ができるようになってもらうことを目指しますか？」

質問 2 — 聴衆： 次のように尋ねます：「聴衆は誰ですか？（例：エンジニアリングチーム、経営陣、社外のクライアント、カンファレンスの参加者）」

質問 3 — 主なポイント： 次のように尋ねます：「取り上げたい主なポイントやセクションは何ですか？大まかな内容でも構わないので、主なアイデアを挙げてください。」

• ユーザーがファイル、URL、参考資料を提供した場合は、続行する前にすべてを十分に確認してください。

質問 4 — データとデモ： 次のように尋ねます：「盛り込みたい具体的なデータ、コード例、図、デモはありますか？すでに用意されていますか、それともこちらで作成しますか？」

質問 5 — 制約： 次のように尋ねます：「何か制約はありますか？スライドの目標枚数、講演時間、避けたい内容、特定のブランド要件などをお聞かせください。」

すべての回答を集めたら、理解した内容を簡潔にまとめ、続行する前に確認を求めてください。

フェーズ 2：デッキの生成

以下の構成と規則に正確に従ってください。

---

フロントマター

すべてのデッキは、次のフロントマターで始めます。

---
marp: true
theme: default
paginate: true
size: 16:9
---

---

CSS スタイルブロック

フロントマターの直後に、以下を含む <style> ブロックを記述します。

1. セクション、テーブル、引用、pre の基本フォントサイズ
2. パンくずリスト形式のナビゲーション用ヘッダースタイル（グレーのテキスト、アクティブなセクションは青）
3. タイトルスライドと各パート／セクションの区切り用のセクションクラス - グラデーション背景と白いテキストを使用します

セクション区切りのカラーパレット（パート数に応じて2〜4色を選択）：

• 青：linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 100%)
• 緑：linear-gradient(135deg, #064e3b 0%, #047857 100%)
• 琥珀色：linear-gradient(135deg, #7a4a1a 0%, #a66b2e 100%)
• 紫：linear-gradient(135deg, #3d1e5c 0%, #5a2d8e 100%)
• タイトルスライド（常にダークネイビー）：linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%)

テンプレート：

<style>
section {
  font-size: 22px;
}
table {
  font-size: 18px;
}
blockquote {
  font-size: 22px;
}
pre {
  font-size: 16px;
}
header {
  font-size: 14px;
  color: #999;
}
header strong {
  color: #2563eb;
}
section.title-slide {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
}
section.part-FIRST,
section.part-SECOND,
section.part-THIRD,
section.title-slide {
  --h1-color: #fff;
  --heading-strong-color: #fff;
  --fgColor-default: rgba(255, 255, 255, 0.95);
  --fgColor-muted: rgba(255, 255, 255, 0.7);
  color: white;
}
section.part-FIRST {
  background: linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 100%);
}
section.part-SECOND {
  background: linear-gradient(135deg, #064e3b 0%, #047857 100%);
}
section.part-THIRD {
  background: linear-gradient(135deg, #3d1e5c 0%, #5a2d8e 100%);
}
</style>

FIRST、SECOND、THIRD を、各パートを表す簡潔で説明的な名前（例：part-context、part-results、part-summary）に置き換えます。

---

スライド構成

デッキは、次の順序に正確に従います。

1. タイトルスライド

# Main Title
## Subtitle

**Key detail 1**: value
**Key detail 2**: value
**Date**: Month Year

2. 質問／目標スライド

デッキで答える質問を3〜5個、太字の導入句を付けた番号付きリストで列挙します。

3. アジェンダスライド

# Agenda

### Part 1: Name
Short description

### Part 2: Name
Short description

### Part 3: Name
Short description

4. 各パート：セクション区切り + 内容スライド

セクション区切り（画面全体に広がる色付き背景）：

# Part N: Section title

**One-line description**

内容スライド（パンくずリスト形式のヘッダー付き）：

# Slide title

Content here

パンくずリストには、デッキ内の現在位置を示します。アクティブなセクションは **太字** で囲みます。ヘッダーのディレクティブは変更されるまで有効なので、各セクションの最初の内容スライドで一度設定するだけでかまいません。各セクション区切りの前に `` でリセットします。

5. 最終スライド

最後のセクション内で、まとめや要点を示すスライドで締めくくります。

---

書式ルール

1. すべての見出しはセンテンスケースにします - 最初の文字と固有名詞のみ大文字にします（例：「Get Started in 5 Minutes」ではなく「Get started in 5 minutes」）。パンくずリスト形式のヘッダーも同じルールに従います
2. 箇条書き、テキスト行、テーブルセルの末尾に句点を付けません
3. 括弧的な区切りには、ダッシュを2つ（--）ではなく1つ（-）使います
4. プログラム名、ファイル名、技術識別子にはバッククォートを使います（太字にはしません）
5. 重要なフレーズや知見の強調には太字を使います
6. データの比較にはテーブルを使い、簡潔にまとめます
7. 重要な補足や区別には引用（>）を使います
8. 1枚のスライドにつきアイデアは1つにします - スライドの内容が密になってきたら、2枚に分けます
9. スライド1枚あたりの箇条書きは最大3〜5項目にします
10. 絶対に必要な場合を除き、スライド本文に括弧付きの注記を入れません

---

エクスポート

スライドデッキを作成したら、HTML と PPTX の両方にエクスポートします。

npx @marp-team/marp-cli@latest --no-stdin FILENAME.md -o FILENAME.html
npx @marp-team/marp-cli@latest --no-stdin --pptx FILENAME.md -o FILENAME.pptx

marp が標準入力で停止しないよう、必ず --no-stdin を使用してください。

---

モバイル向けウェブエクスポート

デッキをライブで発表するのではなく、リンク（Netlify、GitHub Pages、Slack）として共有する場合は必須です。

Marp の HTML エクスポートでは、各スライドが固定サイズの 1280×720 ステージとしてレンダリングされます。スマートフォンではステージ全体が約 30% に縮小されるため、本文の 22px のテキストは約 7px になります。スライドの ステージ に CSS を適用しても解決しません。スライド自体が小さいため、テキストも小さくなるのです。ステージを縮小したり、スクロールスナップを適用したりしても、読めないままスクロールするデッキになるだけです。

解決策は、異なる 2 つのファイルを提供することです。

ファイル	内容	表示対象
index.html	通常のスライドショーです。矢印キー、スワイプ、全画面表示に対応しています。変更はありません	デスクトップとタブレット
mobile.html	デッキのコンテンツをレスポンシブなドキュメントに再構成したものです。スマートフォン向けの文字サイズで表示され、スライドごとにカードが 1 枚表示されます	スマートフォン（自動リダイレクト）

mobile.html は、スライドショーを縮小したものではありません。このスキルに同梱されている scripts/marp-mobile.py は、デッキの Markdown を再解析して通常の HTML ドキュメントを生成します。画面幅に合わせて折り返される 17px の本文テキスト、スライドごとに 1 枚のカード、デッキ独自の <style> ブロックから読み取ったグラデーションを使うセクション区切りとタイトルスライド（同じ規則を使うあらゆるデッキに適応します）、ナビゲーション行として表示されるパンくずヘッダー、スライド番号、横スクロール可能な独立コンテナーに入ったテーブル、ダークモードに対応した表示を生成します。

# 1. Desktop slideshow (unchanged)
npx @marp-team/marp-cli@latest --no-stdin --html FILENAME.md -o SITE_DIR/index.html

# 2. Reflowed mobile document
python3 scripts/marp-mobile.py FILENAME.md -o SITE_DIR/mobile.html --slideshow-href "./"

# 3. Send phones to the mobile view — inject right after <head>, before anything renders
python3 - <<'EOF'
import io
p = 'SITE_DIR/index.html'
html = io.open(p, encoding='utf-8').read()
redirect = "<script>if(matchMedia('(pointer:coarse)').matches&&Math.min(screen.width,screen.height)<700)location.replace('mobile.html')</script>"
assert '<head>' in html
io.open(p, 'w', encoding='utf-8').write(html.replace('<head>', '<head>' + redirect, 1))
EOF

markdown-it-py が必要です（pip install markdown-it-py）。

注意事項：

• リダイレクトには meta refresh ではなく JS を使用してください。ポインターと画面のテストが必要なためです。最小寸法が < 700px かどうかを確認することで、タブレットでは通常のスライドショーが表示されます。location.replace を使うと、戻るボタンが機能します。
• mobile.html には、ホバーに対応したデバイスでのみ index.html に戻る「Slideshow ↗」リンクが表示されるため、デスクトップの訪問者がこのページにアクセスしても行き詰まりません。
• Netlify のきれいな URL の後処理では href 属性は書き換えられますが、JS の文字列は書き換えられないため、'mobile.html' へのリダイレクト先はデプロイ後も維持されます。
• このスクリプトは、Marp のレンダリング結果ではなく Markdown を再構成します。レンダラーレベルの機能（![bg] の背景画像、複数列の CSS、位置を指定した画像の表示）は引き継がれません。コンポーネントを多用したデッキでは、モバイル表示をプレーンテキストにするか、代わりに PDF を共有してください。
• デプロイ前に、mobile.html を直接スクリーンショットに撮って確認してください。ヘッドレス Chrome はファインポインターを報告するため、index.html からはリダイレクトされません。 chrome-headless-shell --headless --screenshot=/tmp/m.png --window-size=390,900 file://…/mobile.html

---

編集可能な PPTX へのエクスポート（任意）

ユーザーが編集可能な PPTX（PowerPoint または Google Slides で編集可能なテキスト）を求めた場合は、次の追加手順を実行してください。この手順には LibreOffice と python-pptx がインストールされている必要があります。

# PPTX - editable text (experimental, requires LibreOffice)
npx @marp-team/marp-cli@latest --no-stdin --pptx --pptx-editable --allow-local-files FILENAME.md -o FILENAME-editable.pptx
python3 -c "
from pptx import Presentation
from pptx.util import Emu
prs = Presentation('FILENAME-editable.pptx')
margin = Emu(747720)
for slide in prs.slides:
    for shape in slide.shapes:
        if shape.has_text_frame and shape.shape_type == 17:
            tf = shape.text_frame
            if not tf.text.strip() or tf.text.strip().isdigit():
                continue
            font_size = None
            if tf.paragraphs and tf.paragraphs[0].runs:
                font_size = tf.paragraphs[0].runs[0].font.size
            if not font_size:
                continue
            new_width = prs.slide_width - margin - shape.left
            if new_width > shape.width:
                shape.width = new_width
            min_height = int(font_size * 1.4) * 2
            if shape.height < min_height:
                shape.height = min_height
            tf.word_wrap = True
prs.save('FILENAME-editable.pptx')
"

注意事項：

• ローカル画像には --allow-local-files が必要です。
• --pptx-editable を使うには LibreOffice のインストールが必要です。
• python-pptx による後処理では、LibreOffice での変換時に発生するテキストボックスのサイズの問題を修正します。
• marp が標準入力で停止しないよう、必ず --no-stdin を使用してください。