Initial commit

2025-11-30 08:56:44 +08:00
commit 5e6eb99dc0
25 changed files with 4597 additions and 0 deletions
--- a/skills/marp-slide/references/best-practices.md
+++ b/skills/marp-slide/references/best-practices.md
@@ -0,0 +1,160 @@
+# 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メッセージか
+- [ ] テキスト量は適切か
+- [ ] 余白は十分か
+- [ ] 画像は効果的に使われているか
+- [ ] 全体の統一感はあるか
+- [ ] スライド枚数は適切か