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

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

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

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

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

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

色の一括置換

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

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

強調

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

確定デザイン

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

表は地を塗らず、罫だけ

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

table { display:table !important; width:100% !important; 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 にも必ず当てる
• 表の幅は display: table !important と width: 100% !important の両方を書く。Marp 既定の display:block; width:max-content が残り、width:100% だけでは版面の7割で止まる
• セルは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> が生成されないことがある

結論と引用の箱

結論や引用の箱を、明るい色のベタ塗りに濃い色の文字で作らない。黒地では浮いて見える。薄い網掛けも沈んで読めない。半透明の白を重ねたガラス調の面も、黒地に溶けて、本文と本文のあいだに仕切り線があるだけに見える。結論は補足ボックスと同じ濃い灰色のベタ塗りに白の太字、引用は左端のテーマ色の縦線で分ける。

/* 結論：濃い灰色のベタ塗りに白の太字 */
.callout { width: 88%; margin: 0 auto; border-radius: 18px; padding: 22px 40px;
           background: #555561; color: #ffffff; font-weight: 700; text-align: center; }
/* 引用：枠線なし。左端のテーマ色の縦線 */
.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案を当てて並べ、選んでもらう。

吹き出しやコラムの箱は、箱の幅を文字に合わせ、段落の間を空ける。

• 箱は width: fit-content; max-width: 100% にする。幅いっぱいの箱に短い行を並べると、右側だけ空いて左に寄って見える
• 改行は読点の位置で、箱の幅いっぱいまで使って入れる。1行10字台の行を5行積まない。2文あるなら、まず1行に2文を並べられないかを見る
• 箱の中に段落が2つあるときは、Markdown を空行で区切って <p> を2つにし、p + p { margin-top: 14px; } で間を空ける。p { margin: 0 } のまま改行だけで続けない
• 書き出したら、箱のあるページを全部並べて見る

白地の図から黒地の図を作るときは、白地の最新版と突き合わせる

黒地の図は、白地の図の色を替えて作ることが多い。すると、白地の側に後から入った直し（配置の変更、サブラベルの撤去、窮屈さの解消）が黒地版へ届かない。

• 作る前と登壇前に、白地版と黒地版の図を、文字と rect の座標で1組ずつ比べる。色は違って当然なので比べない。違いが出たら、どちらが新しい直しかを履歴で確かめて新しいほうへ寄せる。黒地版のほうが良いとき（文字が大きいなど）だけ残す
• 色替えのとき、下の面と同じ色を上の図形に当てていないかを tools/check-svg-contrast.mjs で測る。吹き出しを箱と同じ暗いグラデーションで塗ると消える
• --png <dir> で黒地の上に大きく描き出し、1点ずつ目で見る。スライドに縮めた状態では、吹き出しの潰れも枠からのはみ出しも見えない
• 白地のテーマから派生したデッキは、ページごとの <style scoped> に残った白地用の文字色も消す。濃い紺やグレーの文字色は、黒地ではほぼ読めない。白地のテーマで使っていた色コードを rg -n -i で引いて0件にする

比較のスライドは大きい数字を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つ減る。スクリプトでタグを削除したあとは、ページ数を確かめる
• 普通の本文の行の直後も同じ。空行なしで --- が続くと、Markdown がその行を見出し（setext 見出し）として読み、前後2つのスライドが1ページにくっつく。スクリプトでスライドを差し込む・入れ替えるときは、区切りを必ず \n\n---\n\n にする
• <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の行として書く
• 逆に、素のMarkdownの行末に <br> を書いて次の行へ続けると、<br> と素の改行の両方が改行として扱われ、1行ぶん空く（表紙の会社名と名前の間が開く、など）。見出しの途中の <br>（# 1行目<br>2行目）は1行の中なので問題ない。生のHTMLブロックの中では <br> が要る。書いたら拾う

``bash rg -n '<br>\s*$' deck.md # HTMLブロックの外でヒットしたら <br> を消す ``

書き出したら検査する

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を描画して文字と枠の余白を実測
node tools/check-svg-contrast.mjs images/*.svg --png /tmp/svg   # 図形と真下の面の明度比。1.25未満でNG
python3 tools/check-line-breaks.py deck.pdf           # 改行の過不足。1行10字台の積み上げ、読点の後ろの切れ端、原稿に無い自動折り返し

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

改行の検査は、同じ場所にある同名の .md と照合して、原稿で改行したのか自動で折り返したのかを見分ける。改行のしすぎと足りなさは目で見逃しやすいので、NGのページは画像で見てから直す。

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

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

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