Marp×MCPでPowerPointを卒業！見切れ問題を解決する7つのコツ

/* custom-theme.css */
section {
  padding: 40px 60px; /* デフォルトより広めに */
  font-size: 28px; /* 少し大きめのフォント */
}

h1, h2 {
  margin-bottom: 30px; /* 見出し下の余白を確保 */
}

ul, ol {
  margin-left: 1em; /* リストのインデントを調整 */
  line-height: 1.8; /* 行間を広めに */
}

「custom-theme.cssを作成して、Marpで見切れないような余白設定を入れて」

/* yaoyoroztheme.css */
/* Marp for 生成AIとMarpで資料作成効率化プロジェクト */

/* 下記「@」テーマ宣言コメントは触らないでください */
/* @theme yaoyoroztheme */

---
marp: true
theme: custom-theme
---

<!-- _class: safe-area -->

# タイトルは上部20%以内に

- 本文は画面の80%以内に収める
- 下部10%は空けておく
- 左右も5%ずつ余白を確保

<!-- これで見切れ知らず！ -->

![bg right:40% contain](image.png)

<!-- 
- bg: 背景として配置
- right:40%: 右側40%のエリアに
- contain: アスペクト比を保持して収める
-->

<!-- ❌ ダメな例 -->
![](huge-image.png)
<!-- 巨大画像がスライドを破壊 -->

<!-- ✅ 良い例 -->
![width:600px](huge-image.png)
<!-- サイズを明示的に指定 -->

---
marp: true
style: |
  section {
    font-family: 'Meiryo UI', 'Yu Gothic UI', sans-serif;
    /* 日本語環境で安定するフォント */
  }
  code {
    font-family: 'Consolas', 'Monaco', monospace;
    /* コードは等幅フォントで */
  }
---

{
  "markdown.marp.enableHtml": true,
  "markdown.marp.pdf.noteAnnotations": false,
  "markdown.marp.pdf.displayHeaderFooter": false,
  "markdown.marp.exportType": "pdf",
  "markdown.marp.pdf.margin": {
    "top": "0.5cm",
    "bottom": "0.5cm",
    "left": "1cm",
    "right": "1cm"
  }
}

| 項目 | Before | After |
|:-----|-------:|------:|
| 作成時間 | 30分 | 5分 |
| 見切れ修正 | 15分 | 0分 |
| 合計 | 45分 | 5分 |

<!-- 表は自動的に幅調整されるが、
     内容が多い場合は改行を入れる -->

以下のMarpスライドをチェックして、見切れそうな箇所を指摘して：
- 長すぎる行はないか
- 画像サイズは適切か
- 余白は十分か
- 表がはみ出していないか

---
marp: true
theme: custom-theme
paginate: true
header: '資料 - 2025年7月'
footer: 'YaroTech Inc.'
---

<!-- _class: title -->

# 資料タイトル
## サブタイトル

2025年7月15日
発表者：YaroTech

---

## アジェンダ

1. 導入（5分）
2. 本編（20分）
3. 実習（15分）
4. まとめ（5分）

<!-- 箇条書きは短く、1行以内に -->

---

## ポイント解説

:::: {.columns}
::: {.column width="60%"}
### 説明文
- 重要なポイント1
- 重要なポイント2
- 重要なポイント3
:::
::: {.column width="40%"}
![](diagram.png)
:::
::::

<!-- 2カラムレイアウトで見やすく -->