---
name: slide-design-dark
description: 黒地のMarpテーマ（minorun-dark）でスライドを組むときのデザインバランスと検査。余白の測り方、縦のバランス、配色の決め方、表・コード・補足ボックスの確定デザイン、Marp固有の罠、書き出し後の検査手順。「スライドのバランスを整えて」「色を変えて」「余白が変」「黒地のテーマで作って」と言われたら読む。
---

# 黒地スライドのデザインバランス

黒地のスライドは、白地より粗が目立つ。余白の不揃い、沈んだ色、下端に張り付いた図は、投影した瞬間に分かる。このスキルは、作者（みのるん）が黒地テーマで登壇資料を作るなかで固めた規則と検査をまとめたもの。

テーマ本体は `theme/minorun-dark.css`、検査スクリプトは `tools/` にある。

## テーマの基本

```markdown
---
marp: true
paginate: true
theme: minorun-dark
---
```

| クラス | 用途 |
|---|---|
| `top` | タイトルスライド。中央寄せ、下の帯にテーマ色、ページ番号なし |
| `crosshead` | 中扉。上下中央、白文字、ページ番号なし |
| `image-full` | 見出しと大きな画像 |
| `split` | 左に本文、右に画像。`![bg right:40% contain]` と組み合わせる |

- 既定のサイズは、本文26pt、h1 36pt、中扉44pt、表紙52pt。遠くから読める大きさを保つ
- `**太字**` は黄色、`*斜体*` は薄いシアンで表示される
- 共用のテーマCSSは書き換えない。資料ごとの調整は、フロントマター直後の `<style>` か、そのスライドだけの `<style scoped>` に書く

## 余白は測ってから決める

「もう少し上へ」「余白をあけて」と言われて、値を勘で足し引きしない。根拠の無い数字で触ると、直したつもりの箇所が別の要素とぶつかり、同じ指摘を何巡も受ける。

```bash
mutool draw -F stext -o - deck.pdf | rg '<line bbox='   # 本文の行ごとの位置
```

塗りの面（ボックスや帯）はテキスト抽出に出ないので、ページを画像に焼いて色の連なりから取る。測ったら、位置を足し算ではなく規則で決める。

- 横位置は、スライドの中央か、本文の左端に揃える。本文の左右余白より外へ出さない
- 縦位置は、本文の下端からスライド下端までの空きの縦中央に置く。本文の長さが違うスライドごとに値を持ち替える
- 要素どうしは30px以上あける

左右の余白が167対168、上下が60対65のように両側の差が数pxなら、バランスは取れている。ずれていたら、その数字がそのまま直す量になる。

PDFの座標は960×540、MarpのCSSは1280×720が基準なので、係数0.75を掛けて換算する。

素材を差し替えただけで見せない。図や写真を入れ替えたら、同じ作業のなかで幅、四方の余白、見出しとの間隔、隣の要素との重なりまで整える。入れ替えは作業の半分で、残りの半分がレイアウトの調整である。

## 縦のバランス

- 本文は見出しの直下から始める。本文が短くて下が空いても、それが普通の形である。見出しと本文のあいだを広げて中央に見せる組み方はしない
- 空きを作るなら、段落のあいだの改行か、右下の挿絵や箱で埋める
- 図が主役のスライドだけは、図を見出しの直下に貼らない。図の上に36px前後、図の下の本文にも44px前後を取り、図と本文で版面を上下に分ける
- 本文の下に画像や表が来て、その下に何も無いスライドは、画像の上の空きと下の空きを等しくする。上下の空きを実測し、差が6pxを超えたスライドを `position: relative; top: <差の半分>px` で下げる
- Marpの `section` は `display: block` なので、`margin: auto 0` では縦中央に寄らない。表も `display: block` なので、中央へ寄せるには `display: table; width: auto; margin: <上の空き> auto 0` と書く
- 本文の段落は3行まで。3行目に括弧の補足を足すと窮屈になる
- 収まらないときに、フォントサイズを下げない。意味の切れ目で改行するか、文言を削る。1スライドだけ文字が小さいと、通しで見たときに不揃いとして出る
- 横に並べた画像は、高さではなく幅で頭打ちになる。大きくしたいなら、まず画像の数を減らせないかを考える
- 見出しと似た表現の箱を、見出しの直下に置かない。同じことを2回言っているように見える。箱はスライドの最下部へ回す
- 箇条書きの直後に締めの文が続くスライドは、あいだに空行を入れる
- 1語だけが次の行に落ちる折り返しは、全部つぶす。読点や句点の位置で自分で改行する。Marpは素の改行がそのまま反映される

デザインの直し方を発明しない。バランスが悪いと言われたら、まず同じ構成のスライドを過去のデッキから探して真似る。新しいCSSの型を作るのは最後の手段で、作るなら先に1スライドだけ試して見せる。

## 配色

感覚で色を選び直さない。黒との明度比、トーン、面積の3つの物差しで決める。

### 黒と同化するかは明度比で測れる

```python
def lin(c):
    c /= 255
    return c/12.92 if c <= 0.03928 else ((c+0.055)/1.055)**2.4
def L(h):
    h = h.lstrip('#'); r,g,b = (int(h[i:i+2],16) for i in (0,2,4))
    return 0.2126*lin(r) + 0.7152*lin(g) + 0.0722*lin(b)
def vs_black(h): return (L(h)+0.05)/0.05      # 黒背景との比
def vs_white(h): return 1.05/(L(h)+0.05)      # 上に乗せる白文字との比
```

| 用途 | 黒との明度比の目安 |
|---|---|
| 見出し、線、枠（黒の上の文字と細い線） | 10〜12 |
| ベタ塗りの面（上に白文字を乗せる） | 6〜7 |
| 図の主役の箱の地（白文字あり） | 4.5〜5.5 |
| 本文に置く補足ボックスの地 | 2.5〜3.0 |
| 図の中の脇役の箱の地 | 1.5前後 |

基準として、シアン `#00c4e4` は10.0、純黄 `#ffff00` は19.6である。見出しの色が10を切ると、濃く沈んで見える。

本文に置いて読ませる補足ボックスを、脇役の箱と同じ1.5で作らない。背景と同化する。作者の例では `#2f2f37`（1.58）が沈み、`#555561`（2.86）で枠が立った。上限を決めるのは枠の中に置く強調色で、黄色の強調を載せるなら、地と黄色の比が6を切らないところで止める。

### 面の明るさの上限は、上に乗る白文字が決める

面を明るくするほど白文字が読めなくなる。白の大きな太字（25pt前後）を乗せるなら白との比3.0が下限、図の中の小さめの文字（17〜19px）なら4.0以上。白文字のまま面をもっと明るく、という要望は両立しないので、上限にあることを数字で示してから文字色を変える案を出す。

### 同じ色でも、面は明るく、線は暗く見える

同じ色を、大きな塗りの面と細い文字の両方に使うと、面は明るく、文字は沈んで見える。「表紙の色はいいのに本文の色が濃い」と言われたら、まずこれを疑う。文字と細い線に使う色を、面の色より1〜2段明るくする。明度比が倍近く違っても、画面ではだいたい同じ明るさに見える。

### 2色が喧嘩する原因は、色相よりトーン

色相環の距離だけで判断しない。明度と彩度が揃っていないほうが、原因として多い。片方が白を含む淡い色で、もう片方が原色だと、色相が近くてもぶつかる。

直す順番は、まず明度と彩度を相手に寄せる、それでも駄目なら色相を離す、である。色相を動かすと色の意味まで変わる（黄色の強調を緑にすると「成功」に読める）ので、最後の手段にする。

### メリハリは色を足さず、主役以外を落とす

黒地の表や図がのっぺりして見えるなら、全部が白（明度比21）になっている。主役の色は動かさず、見出し、罫線、ラベルのほうを落として段差を作る。段差は倍々が目安（21 → 10 → 6 → 3）。1.5倍以内では変えた気がしない。投影する資料のヘッダは10前後で止める。会場のプロジェクタは黒が浮くので、7を切ると読みにくい。罫線は色と一緒に太さも落とす。

### 製品を紹介するデッキは、その製品のブランド色を使う

公式サイトのCSSやドキュメントの設定から色コードを取る。ブランド色をそのまま文字に使うと黒地では読みづらいので、用途で明度を変える。

- 文字に使う色は明度を上げる（見出し、強調、注記の順に淡く）
- 図形の地は逆に濃くして、文字を白で抜く。明るい地に濃い文字は、図形の色が薄く見える
- 表紙の帯だけは、ブランド色そのままでよい

白地のデッキから黒地版を派生させるとき、図の色だけを機械置換して済ませない。白地向けの濃い青のグラデーションの図形や、明るい色のベタ塗りの箱は、黒地では浮く。図形は暗いグレーの面（上から下へ `#2c2c35`→`#18181e`、枠 `#3c3c46`）に白文字にし、主役の1つだけを濃いティール（`#00788c`）のベタ塗りに白抜きで立てる。

### 候補は実物のページに当てて見せる

色見本や数字だけでは決まらない。同じページを候補の数だけ書き出して、2×2のグリッドに並べる。本文の強調が乗るスライドと、図の中で使われるスライドの2つで比べる。1つだけだと、図の中の他の色との相性を見落とす。

フォントも同じで、言葉で相談せず書き出して見せる。候補ごとに表紙・箇条書き・表の3ページを書き出して並べる。

### 色の一括置換

「気にしない色」を除外条件にした検索を使わない。同じ行に対象の色と除外する色が両方あると、行ごと消えて見落とす。置き換える色そのもので探し、置換後に旧色が0件になることを確かめる。SVGに残りやすい。

```bash
rg -n -i '#00c4e4|#5ec4d0|#a8e0e8' deck.md images/*.svg
```

## 強調

- 1スライドに1か所まで。デッキ全体では、本文2〜3スライドに1か所。残すのは各パートのパンチライン（柱の名前、締めの一言、鍵になる数字）だけで、説明文の中の便利な語句には付けない
- 表の1列をまとめて塗る用法は、列として揃っていれば1か所と数える
- 数字を3つ並べるスライドは、次のスライドへつながる1つだけを塗る
- 表のセルの中で `**太字**` を使わない。テーマ既定の表はセルがグレーなので、黄色が沈む

## 確定デザイン

どれも、何度か作り直して落ち着いた形である。

### 表は地を塗らず、罫だけ

テーマ既定のグレー地の表も、黒いカード地にテーマ色の小見出しを付けた表も、洗練されて見えなかった。通ったのは、地を塗らず細い罫だけの形。

```css
table { width:100%; border-collapse:collapse !important; background:transparent !important; border:none !important; font-size:22pt; }
table thead, table tbody, table tr { background:transparent !important; border:none !important; }
table th { background:transparent !important; color:#a09aa4 !important; font-weight:600; font-size:18pt; letter-spacing:.06em;
  text-align:left; padding:0 .7em .55em; border:none !important; border-bottom:1px solid #3a3640 !important; }
table td { background:transparent !important; color:#e9e6ec !important; padding:.5em .7em; line-height:1.4;
  border:none !important; border-bottom:1px solid #221f28 !important; vertical-align:top; }
table tr:last-child td { border-bottom:none !important; }
table td:first-child { color:#ffffff !important; font-weight:700; white-space:nowrap; }
```

- `td` だけを透明にすると、テーマ既定の `tr` の背景が透けて、白地に白文字になる。`table / thead / tbody / tr` にも必ず当てる
- セルは1行に収める。`white-space: nowrap` を当てて、はみ出したら文言を削る。自動の折り返しに任せると、最後の1文字だけが2行目に落ちる
- 列に色の階層をつける。1列目は白の太字、説明の列はグレー、主役の列はテーマ色の太字。全部が白だと、どこを見ればよいか分からない
- 注目させる行は薄い黄色の網掛け（`rgba(255,226,120,.16)`）。6行以上の比較表では必須
- 6行を超える表は下端に届く。行を減らすか、`td` の padding を詰める
- 表の下に、灰色の小さい注記を置かない

### コードは半透明のパネルに、文字はモノトーン

テーマ既定の白地の `pre` も、黒いウィンドウに信号機のドットを付けた形も、通らなかった。通ったのは、半透明のグラデーションの地に、上端へテーマ色のラインを引き、文字はモノトーンで要点だけ色を付けた形。

```css
.win { position:relative; border-radius:18px; margin:8px 0 28px; padding:22px 0 4px; overflow:hidden;
  background:linear-gradient(165deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.045) 100%);
  border:1px solid rgba(255,255,255,.14); box-shadow:0 18px 44px rgba(0,0,0,.45); }
.win::before { content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg, #00c4e4 0%, #7fe3f5 45%, rgba(127,227,245,0) 100%); }
.win pre { background:transparent !important; box-shadow:none; margin:0; padding:0 28px 16px; font-size:21.5pt; line-height:1.15; }
.win pre code { color:#f2f1f5; }
```

- コードのフォントは21.5ptを下限にする（PDFの実寸で16pt）。1行は半角60文字まで。収まらないなら行を分けるか文言を削る
- サンプルは1つに絞り、1行に1プロパティで書く。複数のプロパティを1行に畳むと読めない
- ifの連鎖を空白で桁揃えしない。普通のブロックで書く
- 箱の下端は、ページの下端から60px以上あける

### 補足ボックス

本文の下の空きへ、濃い灰色の角丸ボックスを置き、補足の1行を入れる型。

```css
.gbox { position: absolute; left: 0; right: 0; margin: 0 auto;
        width: fit-content; min-width: 990px; max-width: 1088px;
        bottom: 64px; background: #555561;
        border-radius: 18px; padding: 16px 70px; text-align: center; }
.gbox, .gbox p { font-size: 27pt; line-height: 1.38; }
.gbox p { margin: 0; }
.gbox.up { bottom: 104px; }        /* 本文が短く、下の空きが広いスライド */
```

- `left:50%` と `translateX(-50%)` で中央に寄せない。使える幅が画面の右半分だけになり、収まるはずの文が折り返す
- `min-width` で、複数のスライドのボックス幅を揃える。いちばん長いスライドの自然な幅を測って下限にする
- `font-size` は `.gbox` と `.gbox p` の両方に当てる。div の中のMarkdownは `<p>` が生成されないことがある

### 結論と引用の箱

結論や引用の箱を、明るい色のベタ塗りに濃い色の文字で作らない。黒地では浮いて見える。薄い網掛けも沈んで読めない。面は半透明の白を上から下へ薄くしていくガラス調にして、テーマ色は細い線だけに使う。文字は白系の太字にする。

```css
/* 結論：ガラス調の面に、上端のテーマ色の線 */
.callout { position: relative; border-radius: 16px; padding: 22px 40px;
           background: linear-gradient(165deg, rgba(255,255,255,.10), rgba(255,255,255,.045));
           border: 1px solid rgba(255,255,255,.14); box-shadow: 0 18px 44px rgba(0,0,0,.45); overflow: hidden; }
.callout::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
                   background: linear-gradient(90deg, #00c4e4, rgba(0,196,228,0)); }
/* 引用：枠線なし。左端のテーマ色の縦線 */
.quote { position: relative; border-radius: 4px 12px 12px 4px; padding: 18px 36px;
         background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.02)); }
.quote::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
                 background: linear-gradient(180deg, #00c4e4, rgba(0,196,228,0)); }
```

箱の形は好みが割れやすい。同じスライドに2〜3案を当てて並べ、選んでもらう。

### 比較のスライドは大きい数字を2つだけ

「0.35秒と1.34秒」のような比較は、数字を88ptで2つ並べ、下に1行。細い縦線1本で左右を分ければ足りる。料金の行や注記を足すと、文字が詰まり配色が崩れる。

### 図のラベルは箱の外の上に置く

箱の中には中身だけを入れる。箱が何であるかの名前は、箱の上14pxに小さく置く。

### スクリーンショット

`![bg right:40%]` で置くと右端に密着する。`![w:720 center]` で中央に置き、`border-radius:14px` を掛ける。2枚を左右に並べるときは、縦横比を揃える。片方だけ縦長だと、説明の開始位置が左右でずれる。

### 見せ方のリズム

- 文章のスライドが5つ続くと単調になる。引用だけのスライド、2カラム、挿絵、スクリーンショットの中央置きを混ぜる
- 同じ型の図のスライドが6つ続くのも同じ。図のスライドと、文章と挿絵のスライドを交互にする

## Marp固有の罠

- 全角の開き括弧（「『（）に隣接する `**強調**` は効かず、アスタリスクがそのまま出る。`<strong>` で書く。書き出したPDFで確かめる

  ```bash
  mutool draw -F stext -o - deck.pdf | grep -c 'c="\*"'   # 0 が正常
  ```

- div の中でMarkdownの強調を効かせるには、開きタグの直後と閉じタグの直前に空行を入れる
- `</div>` の直後に空行なしで `---` を書くと、スライドの区切りとして認識されず、ページが1つ減る。スクリプトでタグを削除したあとは、ページ数を確かめる
- `<img>` のインライン `style` 属性は落とされる。クラスで書く
- mdを `\n---\n` で分割すると、先頭はフロントマターになる。最初のスライドは2番目の要素で、そこにはデッキ全体の `<style>` が同居していることが多い。表紙を作り直すつもりで丸ごと置き換えると、全ページのスタイルが消える。症状は表紙ではなく他のページに出る
- スクリプトでスライドを削除や挿入するときは、番号の降順で処理する。実行前に、対象の中身を `assert` で確かめる
- 「p36を直して」のpは、書き出したPDFのページ番号である。原稿の `---` を数えて対応付けると、フロントマターの区切りの分だけずれる。そのページだけ画像に焼き、写っている文言で原稿を検索して直す

  ```bash
  pdftoppm -png -r 80 -f 36 -l 36 deck.pdf /tmp/p36
  ```

- 標準フォントしか使えない会場では、`<style scoped>` の独自フォント指定を標準フォントへ差し替える
- 生のHTMLブロック（`<p>…</p>`）の中の改行は、Marp の改行（breaks）として扱われず無視される。意図した位置で折るなら、タグで囲まず素のMarkdownの行として書く

## 書き出したら検査する

Marpは、版面からコンテンツがあふれてもエラーを出さない。書き出すたびに検査を通す。

```bash
marp --no-stdin deck.md --pdf --theme theme/minorun-dark.css --allow-local-files

python3 tools/check-dark-margins.py deck.pdf          # 中身の下端と右端の空き。60px未満でNG
python3 tools/check-dark-gaps.py deck.pdf             # 画像、図、コードの箱と隣の本文の間隔。36px未満でNG
python3 tools/check-figure-text.py deck.pdf           # 図の中の16pt未満の文字、縁まで14px未満の文字
node tools/check-svg-box-fit.mjs images/*.svg         # SVGを描画して文字と枠の余白を実測
```

黒地の下端は、テキストの位置ではなく、黒でないピクセルの最下行で測る。コードの箱も図も挿絵も拾える。

NGは全件を列挙してから要約する。先に要約すると、3件目を見落とす。

### 機械検査のあとに、自分の目で見る

検査が全部OKでも、目視は省けない。検査は存在する要素を測る仕組みなので、要素が丸ごと描かれなかった崩れは1つも検出できない。検査OKの報告と、目視の報告は分けて書く。

```bash
pdftoppm -png -r 55 deck.pdf /tmp/all/p    # 全ページを小さく焼き、数ページずつ貼り合わせて順に見る
```

目視でしか捕まらないものは、文字と挿絵や図形の重なり、下方向の余白のつぶれ、矢印の軸が隠れて矢尻しか見えない状態、見出しの大きさや位置のページ間の不揃い、不自然な改行、挿絵の入れ忘れである。

吹き出しのしっぽ、矢印、帯のように、別の図形を要素の上に重ねたものは、縮小した全ページ画像では合格に見える。崩れるのは付け根や継ぎ目の数pxで、そこは縮小画像では1〜2ピクセルにつぶれている。重ねたページだけ高解像度で焼き直し、付け根の周囲を300%に拡大して見る。

```bash
mutool draw -r 200 -o hi.png deck.pdf 2
magick hi.png -crop 420x300+880+500 +repage -resize 300% tail.png
```

貼り合わせた一覧画像で見たことを「全ページ崩れなし」と報告しない。写真と罫線の重なり、余分な空白、文字のはみ出しは、この解像度では消える。崩れなしと書いてよいのは、1ページずつ150dpi以上で見たときだけである。見ていないなら「一覧で通して見た。原寸では未確認」と書く。

一覧画像を作るときは、各ページの画像の幅を揃える。解像度の違う画像を先頭のページの幅のキャンバスへ並べると、広いページの右端が切れて、はみ出しているように見える。

1ページを直したら、同じ観点で全ページを点検してから報告する。1ページの指摘は、そのページの指摘ではなく検査の指示である。同じ条件を全ページに機械で当て、一覧を出してから直す。直したら同じ検査をもう一度全ページに当て、0件になったことを報告に書く。