# Slide Design Dark > 黒地のMarpテーマ（minorun-dark）でスライドを組むときのデザインバランスと検査。余白の測り方、縦のバランス、配色の決め方、表・コード・補足ボックスの確定デザイン、Marp固有の罠、書き出し後の検査手順。「スライドのバランスを整えて」「色を変えて」「余白が変」「黒地のテーマで作って」と言われたら読む。 - **Type:** Skill - **Install:** `agentstack add skill-minorun365-minorun-marp-skill-slide-design-dark` - **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior - **Seller:** [minorun365](https://agentstack.voostack.com/s/minorun365) - **Installs:** 0 - **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills) - **Latest version:** 0.1.0 - **License:** Apache-2.0 - **Upstream author:** [minorun365](https://github.com/minorun365) - **Source:** https://github.com/minorun365/minorun-marp-skill/tree/main/skills/slide-design-dark ## Install ```sh agentstack add skill-minorun365-minorun-marp-skill-slide-design-dark ``` Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent. ## About # 黒地スライドのデザインバランス 黒地のスライドは、白地より粗が目立つ。余白の不揃い、沈んだ色、下端に張り付いた図は、投影した瞬間に分かる。このスキルは、作者（みのるん）が黒地テーマで登壇資料を作るなかで固めた規則と検査をまとめたもの。 テーマ本体は `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は書き換えない。資料ごとの調整は、フロントマター直後の `` か、そのスライドだけの `` に書く ## 余白は測ってから決める 「もう少し上へ」「余白をあけて」と言われて、値を勘で足し引きしない。根拠の無い数字で触ると、直したつもりの箇所が別の要素とぶつかり、同じ指摘を何巡も受ける。 ```bash 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の報告と、目視の報告は分けて書く。 ```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ページを直したら、同じ観点で全ページを点検してから報告する。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](https://github.com/minorun365) - **Source:** [minorun365/minorun-marp-skill](https://github.com/minorun365/minorun-marp-skill) - **License:** Apache-2.0 Install and usage instructions live in the source repository linked above. ## Pricing - **Free** — Free ## Security capabilities Automated source analysis of v0.1.0 — what this tool can access: - **Network access:** no - **Filesystem access:** no - **Shell / process execution:** no - **Environment & secrets:** no - **Dynamic code execution:** no *"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.* ## Versions - **0.1.0** — security scan: passed — Imported from the upstream source. ## Links - Listing page: https://agentstack.voostack.com/l/skill-minorun365-minorun-marp-skill-slide-design-dark - Seller: https://agentstack.voostack.com/s/minorun365 - Browse the marketplace: https://agentstack.voostack.com/browse --- Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.