Slide Design Dark

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

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

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

テーマの基本

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

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

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

余白は測ってから決める

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

mutool draw -F stext -o - deck.pdf | rg '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 ` が生成されないことがある

強調枠を薄い網掛けにしない。黒地では沈んで読めない。テーマ色のベタ塗りに濃い色の太字を乗せる。

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

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

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

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

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

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

### 見せ方のリズム

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

## Marp固有の罠

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

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

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

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

- 標準フォントしか使えない会場では、`` の独自フォント指定を標準フォントへ差し替える

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

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の報告と、目視の報告は分けて書く。

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

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

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

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

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

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: minorun365
• Source: minorun365/minorun-marp-skill
• License: Apache-2.0

Install and usage instructions live in the source repository linked above.