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

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

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

## スライドタイトル（h2）

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

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

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

## 箇条書き

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

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

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

## スライド構成

### 基本構造

1. **タイトルスライド**（`<!-- _class: lead -->`）
   - タイトル
   - 発表者名
   - 日付

2. **アジェンダスライド**
   - 全体の流れを示す
   - 3-5項目程度

3. **本文スライド**
   - 1スライド = 1メッセージ
   - タイトルで内容を要約

4. **まとめスライド**
   - 要点を再確認
   - 感謝の言葉

### スライド枚数の目安

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

## テキスト量

### ✅ 良いバランス

```markdown
## 製品の特徴

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

### ❌ 詰め込みすぎ

```markdown
## 製品について

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

## 余白の使い方

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

## 色の使い方

テーマで定義された色を活用：
- **背景色**：`#f8f8f4`（明るいベージュ）
- **テキスト色**：`#3a3b5a`（濃いネイビー）
- **見出し色**：`#4f86c6`（青）
- **アクセント色**：`#000000`（黒）

### 追加の色を使う場合

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

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

## 画像の使用

### 効果的な使い方

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

### 配置のコツ

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

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

## フォントサイズの目安

テーマで定義済み：
- h1: 56px（タイトルスライドのみ）
- h2: 40px（通常スライドのタイトル）
- h3: 28px（サブ見出し）
- 本文: 22px

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

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

## チェックリスト

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

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