Slide Design Dark

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

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

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

テーマの基本

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

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

余白は測ってから決める

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

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つの物差しで決める。

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

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)      # 上に乗せる白文字との比

基準として、シアン #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やドキュメントの設定から色コードを取る。ブランド色をそのまま文字に使うと黒地では読みづらいので、用途で明度を変える。

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

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

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

色の一括置換

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

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

強調

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

確定デザイン

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

表は地を塗らず、罫だけ

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

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

.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行を入れる型。

.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> が生成されないことがある

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

比較のスライドは大きい数字を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で確かめる

  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のページ番号である。原稿の --- を数えて対応付けると、フロントマターの区切りの分だけずれる。そのページだけ画像に焼き、写っている文言で原稿を検索して直す

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

• 標準フォントしか使えない会場では、<style scoped> の独自フォント指定を標準フォントへ差し替える

書き出したら検査する

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

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件になったことを報告に書く。