gh-shin902-shi-marketplace-marp-slide/skills/marp-slide/references/best-practices.md

Marpスライド作成ベストプラクティス

「かっこいい」高品質なスライドを作成するためのガイドライン。

スライドタイトル（h2）

✅ 良い例

• 簡潔に：5-7文字程度
• 分かりやすく：内容が一目で理解できる
• 一貫性：同じ階層では同じ文体を使う

## 導入
## 課題
## 解決策
## 効果

❌ 悪い例

## この章では導入について説明します
## 私たちが直面している課題とは何か

箇条書き

✅ 良い例

• 3-5項目：多すぎない
• 簡潔に：1行あたり15-25文字程度
• 並列性：同じ階層では同じ文法構造

- シンプルで分かりやすい
- 統一感のあるデザイン
- 効果的な情報伝達

❌ 悪い例

- これは非常に長い説明文で、一行に収まりきらないため読みにくくなってしまいます
- 短い
- 次の項目は文章形式になっています。このように統一感がないと読みにくいです。

スライド構成

基本構造

1. タイトルスライド（<!-- _class: lead -->）

   • タイトル
   • 発表者名
   • 日付

2. アジェンダスライド

   • 全体の流れを示す
   • 3-5項目程度

3. 本文スライド

   • 1スライド = 1メッセージ
   • タイトルで内容を要約

4. まとめスライド

   • 要点を再確認
   • 感謝の言葉

スライド枚数の目安

• 5分プレゼン：5-8枚
• 10分プレゼン：10-15枚
• 20分プレゼン：15-25枚

テキスト量

✅ 良いバランス

## 製品の特徴

- 高速処理
- 直感的なUI
- 拡張性の高い設計

❌ 詰め込みすぎ

## 製品について

この製品は、最新のテクノロジーを活用して開発されました。
主な特徴として、以下の7点が挙げられます：
- 特徴1: 詳細な説明が長々と続く...
- 特徴2: さらに詳しい説明...
（以下省略）

余白の使い方

• 適度な余白：情報を詰め込みすぎない
• 視線誘導：重要な情報に自然と目が向く配置
• 呼吸：スライド間にも適度な「間」を

色の使い方

テーマで定義された色を活用：

• 背景色：#f8f8f4（明るいベージュ）
• テキスト色：#3a3b5a（濃いネイビー）
• 見出し色：#4f86c6（青）
• アクセント色：#000000（黒）

追加の色を使う場合

<span style="color: #c62828;">重要なポイント</span>

控えめに使用し、過度な装飾を避ける。

画像の使用

効果的な使い方

• 目的を明確に：装飾ではなく、理解を助けるため
• 高品質：解像度の高い画像を使用
• 適切なサイズ：大きすぎず小さすぎず

配置のコツ

# 左にテキスト、右に画像
![bg right:40%](image.png)

- ポイント1
- ポイント2

フォントサイズの目安

テーマで定義済み：

• h1: 56px（タイトルスライドのみ）
• h2: 40px（通常スライドのタイトル）
• h3: 28px（サブ見出し）
• 本文: 22px

アニメーションとトランジション

Marpは基本的にアニメーション非対応。 シンプルなスライド遷移に集中する。

チェックリスト

スライド完成後、以下を確認：

• タイトルは簡潔か（5-7文字）
• 箇条書きは3-5項目か
• 1スライド1メッセージか
• テキスト量は適切か
• 余白は十分か
• 画像は効果的に使われているか
• 全体の統一感はあるか
• スライド枚数は適切か