marp-slides

MARP スライド v2

前提条件

• VS Code 拡張機能「Marp for VS Code」
• 設定：markdown.marp.enableHtml: true + markdown.marp.allowLocalFiles: true
• エクスポート：npx @marp-team/marp-cli slides.md --pdf --allow-local-files

サンプルデッキ（重要 — 生成前にお読みください）

examples/ フォルダーには、厳選された22個の参考デッキが含まれています。デッキを生成する前に、リクエストされたスタイルに合うサンプルを2〜3個お読みください。 これらが品質基準です。構成、余白、視覚的な密度を合わせてください。カテゴリ別の主なサンプル：

カテゴリ	読むサンプル
データ／ダッシュボード	marp_facebook-ads.md、marp_fitness.md、marp_comparison.md
ライフスタイル／エディトリアル	marp_coffee.md、marp_wine-tasting.md、marp_cocktail.md
ガイド／ハウツー	marp_garden.md、marp_houseplant.md、marp_home-gym.md
楽しい／クリエイティブ	marp_kids-party.md、marp_board-game.md、marp_film-director.md
旅行／ロケーション	marp_travel.md、marp_walking-tour.md、marp_road-trip.md
ショーケース／ヒーロー	marp_hero.md、marp_apartment.md、marp_wardrobe.md
リファレンス／サンプラー	marp_sample.md（コンポーネントのショーケース）

基本ルール

• スライドは --- で区切ります
• YAML フロントマターでテーマ／ページ番号／スタイルを制御します
• enableHtml により、SVG、カード、チャート、アニメーション、インタラクティブ要素が使えるようになります
• デフォルトは16:9（1280x720）です

ダークスターターテンプレート

ダークテンプレートでは、見出しに Outfit 800、本文に Raleway 100-200 を使用します。CSS 変数：

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700;800&family=Raleway:wght@100;200;300&display=swap');

:root {
  --accent: #ff6b1a; --accent-hover: #ff8c4a;
  --dark: #000; --card: #080808; --border: #111;
  --body: #999; --label: #666; --muted: #555; --light: #fff;
  --green: #22c55e; --red: #ef4444; --yellow: #f5a623;
}
section { background: var(--dark); color: var(--light); font-family: 'Raleway', sans-serif; font-weight: 200; padding: 56px 72px; }
h1 { font-family: 'Outfit'; font-weight: 800; font-size: 3em; color: var(--light); }
h2 { font-family: 'Raleway'; font-weight: 100; font-size: 1.3em; color: #888; }
h3 { font-family: 'Outfit'; font-weight: 600; font-size: 0.6em; color: var(--muted); text-transform: uppercase; letter-spacing: 0.2em; }
strong { color: var(--accent); font-weight: 300; }
section.lead { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
header { text-align: right; } header img { margin: 0; }
.row:hover { background: #0c0c0c; } .row { transition: background 0.2s; border-radius: 6px; }
details { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px 18px; margin-top: 8px; }
details summary { color: var(--accent); font-family: 'Outfit'; font-weight: 600; font-size: 0.8em; cursor: pointer; }
details p { color: var(--body); font-size: 0.78em; margin-top: 8px; }
.tag { font-family: 'Outfit'; font-weight: 600; font-size: 0.55em; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 10px; border-radius: 4px; }
abbr { text-decoration: none; border-bottom: 1px dotted #333; cursor: help; }

フロントマターには次を含めます：header: '![w:100](./logo.png)'

ライトテーマ

変数を次のように置き換えます：--accent: #2563eb; --dark: #fafafa; --card: #fff; --border: #eee; --body: #666; --label: #bbb; --light: #1a1a1a; Space Grotesk + IBM Plex Mono または Plus Jakarta Sans を使用します。

見出しの階層

• h1 = タイトルスライド（白、大きめ）
• h2 = サブタイトル（グレー、細字）
• h3 = セクションラベル（控えめ、大文字、小さめ）

フォントの組み合わせ（検証済み）

見出し	本文	用途
Outfit 800	Raleway 100	ダッシュボード、データ（デフォルト）
DM Serif Display	DM Sans 300	レシピ、エディトリアル
Space Grotesk 700	IBM Plex Mono 300	旅行、ライトテーマ
Sora 700	Sora 200	製品比較
Urbanist 800	Urbanist 100	音楽、Spotify スタイル
Plus Jakarta Sans 800	Plus Jakarta Sans 200	振り返り、チームデッキ

画像

重要：相対パスのみを使用してください。./image.png は機能します。絶対パスはプレビューで機能しません。

• ロゴのヘッダー：header: '![w:100](./logo.png)' — スライドごとに非表示にするには ``
• 背景写真：![bg brightness:0.15](https://unsplash.com/photo-ID?w=1400)
• 分割：![bg right:35% brightness:0.2 blur:3px](url) または ![bg left:30%](url)
• CDN ロゴ：<img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/png/name.png" style="width:200px;" />
• 中央揃えのインライン画像：画像を <div style="display:flex; justify-content:center;"> で囲み、角丸と枠線を付けます

ダッシュボードのコンポーネント

メトリックカード（上部にグラデーションの枠線）

position:relative; overflow:hidden; を指定したカードを作り、上部に background:linear-gradient(90deg, var(--accent), transparent); height:2px; を指定した絶対配置の div を置きます。アイコン + ラベル + 大きな数値 + トレンド矢印を配置します。

ステータスドット

インライン SVG の円：緑（#22c55e）= アクティブ、黄（#f5a623）= 学習中、赤（#ef4444）= 一時停止中。 <svg width="8" height="8" viewBox="0 0 8 8"><circle cx="4" cy="4" r="4" fill="#22c55e"/></svg>

判定タグ

<span class="tag" style="background:#22c55e12; color:var(--green); border:1px solid #22c55e22;">Scale</span> 赤（停止）と黄（要確認）に色を置き換えます。

ホバー行

ホバー時のハイライト効果を付けるには、コンテンツを <div class="row"> で囲みます。

SVG チャート

折れ線／面グラフ

折れ線には SVG の polyline を使用し、線の下の領域には linearGradient で塗りつぶした polygon を使います。グリッド線、破線の目標線、円形のデータポイントを追加します。preserveAspectRatio="none" を指定した viewBox="0 0 900 240" を使用します。

円グラフ／ドーナツグラフ

各セグメントは、stroke-dasharrayとstroke-dashoffsetを設定した個別の円です。計算式：円周 = 2pir。r=110の場合：約691。セグメント = (pct/100)*691。オフセットは負の値で累積します。stroke-widthでリングの太さを調整します。必ずtransform="rotate(-90 cx cy)"を指定します。

ゲージ／半円メーター

背景用のSVGパスの円弧と、値を示す色付きの円弧を使います。中央から伸びる針の線と、円形の支点を配置します。スコアは0～100です。stroke-linecap="round"を指定します。

ドーナツリング

stroke-dasharrayを設定した単一の円を使います。円周 = 2pir。オフセット = circ - (circ * pct/100)。r=74の場合：circ=465。89%の場合：offset=51。

スパークライン（インラインのミニグラフ）

<svg width="50" height="16"><polyline points="0,14 8,12 16,10 24,8 50,2" fill="none" stroke="#22c55e" stroke-width="1.2"/></svg>

積み上げ棒グラフ

色付きの幅指定パーセントのセグメントを持つFlex div。border-radiusとoverflow:hiddenを設定します。

縦棒グラフ

align-items:flex-endを指定したFlexコンテナを使います。グラデーションの棒：background:linear-gradient(180deg, var(--accent), #cc5515); border-radius:3px 3px 0 0;

レーダーチャート／スパイダーチャート

六角形のグリッドをSVGポリゴンで描き、データの形状にはfill-opacity:0.1とstrokeのアウトラインを設定します。

インタラクティブ要素

• 折りたたみ：<details><summary>タイトル</summary><p>内容</p></details>
• ツールチップ：<abbr title="全文">用語</abbr>
• スライダー：<input type="range" style="accent-color:var(--accent);" />
• チェックボックス：<input type="checkbox" checked style="accent-color:var(--accent);" />
• 進捗バー：<progress value="76" max="100" style="accent-color:var(--accent);"></progress>

レイアウトコンポーネント

• ビフォー／アフター分割 — 2つのFlexパネル。上罫線は赤と緑にします
• ターミナルのモックアップ — 信号機の点と等幅フォントの本文
• ブラウザーのモックアップ — 点とURLバーのdiv
• チャットバブル — ユーザー（左）＋エージェント（右、オレンジ系）
• フローチャート — ボックスとSVGの矢印コネクター
• タイムライン — 左側の縦罫線と丸い点
• カードの行 — display:flex; gap:14px; を指定し、子要素にflex:1を設定

SVGアイコン

すべて<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="1.5">で囲みます。サイズ：インライン=16、カード=44、機能=32。

ドル：path d="M12 2v20M17 5H9.5a3.5 3.5 0 1 0 0 7h5a3.5 3.5 0 1 1 0 7H6" 心拍：polyline points="22 12 18 12 15 21 9 3 6 12 2 12" チェック（#22c55e）：path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" + polyline points="22 4 12 14.01 9 11.01" 上向き矢印（#22c55e）：polyline points="18 15 12 9 6 15" 下向き矢印（#ef4444）：polyline points="18 9 12 15 6 9" ×印の円（#ef4444）：circle cx=12 cy=12 r=10 + 交差する2本の線 時計：circle cx=12 cy=12 r=10 + polyline points="12 6 12 12 16 14" 目：path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" + circle cx=12 cy=12 r=3 稲妻：path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" 警告（#f5a623）：三角形のパス 検索：circle cx=11 cy=11 r=8 + 角へ伸びる線 棒：3本の縦線のパス ユーザー：ユーザーのシルエットのパス + 円 地球儀：円 + 水平線 + 縦向きの楕円パス ロック：rect + アーチのパス 本：本の形を描く2本のパス

アニメーション（HTMLエクスポートとプレビューのみ）

float：translateY(0)から-8pxへ移動して戻る glow：アクセントカラーでbox-shadowを点滅 blink：カーソルのborder-colorを切り替える

遅延を設定してずらします：animation: float 4s ease-in-out 0.5s infinite;

エクスポート

npx @marp-team/marp-cli slides.md --pdf --allow-local-files npx @marp-team/marp-cli slides.md --pptx --allow-local-files npx @marp-team/marp-cli slides.md --html --allow-local-files --pptx-editableにはLibreOfficeが必要です。アニメーションとdetailsはHTMLでのみ使用できます。

デザインルール

1. スライド1枚につきアイデアは1つです。あふれた内容は警告なしに切り取られます。
2. h1は白にします。アクセントカラーはデータの強調にのみ使います。
3. 本文は#999、ラベルは#666にします。#555より暗い色は使いません。
4. リストスライドは最大6行にします。
5. 数字よりグラフを使います。スライドごとにビジュアルの種類を変えます。
6. 画像には相対パスのみを使います。
7. 必ずプレビューし、ソースにオーバーフローの警告がないことを確認します。
8. スライドごとのオーバーライド：_backgroundColor、_header、_paginate、_footer

カスタム寸法：section { width: 540px; height: 720px; }（サイズはCSSではなくフロントマターで指定します）。 縦向き：縦に積み重ね、15～20%縮小します。