Marpスライド制作環境をOSSとして公開した話 〜marp-slides-studio のテーマ設計とAI自走ループ〜

T E C H TA L K Marpスライド制作環境を OSSとして公開した話 〜marp-slides-studio のテーマ設計とAI自走ループ〜 2026/08/02 @unsoluble_sugar

今日話すこと 1 作ったもの: marp-slides-studio 2 機能紹介: ギャラリーと機械検査 3 技術解説: 2行テーマとMarp制約 4 Claude Codeとの開発ワークフロー 2

CHAPTER 01 作ったもの

背景: スライド作りに消耗していた 「見た目調整」に時間がかかる 記事→スライド化の変換コストが高い → テーマとレイアウトを部品化して選ぶだけに → Markdown資産をそのまま流用できるMarpへ 4

marp-slides-studio とは 50 種 テーマCSS 19 種 レイアウトパターン雛形 1つ 外部依存（marp-cliのみ） 制作支援スクリプト群＋AIエージェント向けハーネス（スキル4本・rules・hooks）を 同梱 5

雛形は19種のレイアウトパターン 6

テキストでスライドを管理するメリット Git管理できる。diffで差分確認、PRでレビュー AIエージェントとの連携が直接的 テーマを更新すれば以降のデッキすべてに反映 過去資産（記事テキスト）の流用が容易 7

CHAPTER 02 機能紹介

基本フロー Step1 npm run new でデッキ作成 Step2 → 雛形19パターンを削って本文 Step3 → build で HTML / PDF 出力 置換 ポイント: 記事リンクを渡せば Claude Code が自動でスライド化してくれる 9

テーマ選定ツールは2種類 一覧で選ぶ 実物で選ぶ npm run gallery npm run theme-preview 全テーマをPNG一覧で表示。色系統フィル 実デッキをリロードなしでテーマ切り替え ターと検索に対応 しながら確認 10

機械検査: npm run theme-check WCAGコントラスト検査を自前実装。本文4.5:1 / 大きい文字3:1 / コード6:1 .vscode/settings.json の登録漏れ検査 READMEのテーマ数表記と実数の照合 違反は exit 1 → AIの自走修正ループに組み込める 11

CHAPTER 03 技術解説

「2行テーマ」設計 テーマ側にセレクタを一切書かない /* wave-coral.css @import "coral"; レイアウトはbaseに集約、カラーは変数 全文 */ @import "layout-wave"; 上書きのみ 平均30行前後、最小2行でテーマが完成 13

トークン設計は4層 1 3 カラーパレット（--primary / -accent など） トーン（書体・角丸・影で「雰囲気」 を表現） 2 4 コードハイライト5トークン（濃色背 景で6:1以上） ニュートラル（--gray-900〜50 のス ケール） 例: ポップ系はウェイト800＋ハードシャドウ、カジュアル系は丸ゴシック＋角丸22px 14

トーンで「雰囲気」だけ変わる レイアウトは同じまま、書体・角丸・影 のトークンだけを上書き 装飾の差し替えでバリエーション量産が できる 同じMarkdownでもトーンで印象が変わる 15

Marp/Marpit の制約と回避策 section::before は装飾に予約済み 先頭要素に margin-top: 0 !important → background に radial-gradient を重ねる → section padding 0＋.head/.body 側で確保 PDF出力で box-shadow のぼかしが消える PDF出力で filter: blur() が消える → @media print で spread-only リングに切替 → グラデーションのみで装飾を構成 16

CHAPTER 04 Claude Codeとの開発

約1週間・人間は設計と判断に集中 実装 → ブランチ＆PR → レビュー → 対応・返信 → マージ指示 ハーネスは3層: CLAUDE.md（入口）/ rules（規範）/ steering（設計知識） 実装・検証・レビュー対応は Claude、人間は設計方針の判断とマージを担当 18

スキルと規約は「事故の記録」 「強調でコードチップを囲まない」→ 助詞だけ色付く事故から規約化 「:not() 追従ルール」→ マージン二重バグから生成 「theme-check 前置」→ テーマ登録漏れから機械化 hookが themes/*.css の編集を検知して検証手順を自動指示 哲学: 同じ指摘を二度させない 19

プロンプトを磨くより AIが自走できる環境を作る 知識の文書化・実装と検証の分離・機械検査によるループエンジニアリング 20

まとめ 1 テキスト資産化でGitもAIも効く 3 品質基準は機械検査で担保する 2 テーマ50種を数行ずつで実現 4 Use this template ですぐ使える 21

参考 Marpスライド制作環境「marp-slides-studio」をOSS公開した zenn.dev/unsoluble_sugar/articles/marp-slides-studio-release GitHub: unsolublesugar/marp-slides-studio github.com/unsolublesugar/marp-slides-studio 22

• https://zenn.dev/unsoluble_sugar/articles/marp-slides-studio-release
• https://github.com/unsolublesugar/marp-slides-studio

ご清聴ありがとうございました @unsoluble_sugar