---
title: Marpスライド制作環境をOSSとして公開した話 〜marp-slides-studio のテーマ設計とAI自走ループ〜
tags:  #marp #スライド #スライド作成 #oss #claudecode #claude #自動化 #ai駆動開発  
author: [星影](https://www.docswell.com/user/unsoluble_sugar)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/3JK9344LJD.jpg?width=480
description: Zennで書いた記事のダイジェスト版です。  ▼MarpでLTスライドを爆速で作れる制作環境を開発＆OSS公開しました https://zenn.dev/unsoluble_sugar/articles/marp-slides-studio-release
published: August 02, 26
canonical: https://www.docswell.com/s/unsoluble_sugar/ZGNJDP-2026-08-02-marp-slides-studio-release
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/3JK9344LJD.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/LE3WGLL6E5.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/8EDK1NNM7G.jpg)

CHAPTER 01
作ったもの


# Page. 4

![Page Image](https://bcdn.docswell.com/page/V7PKQ55QJ8.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/2JVV5PPPJQ.jpg)

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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/5EGL6PPQJL.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/4JQY422W7P.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/K74WQLL1E1.jpg)

CHAPTER 02
機能紹介


# Page. 9

![Page Image](https://bcdn.docswell.com/page/LJ1YPLL5EG.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/GJWG2VVW72.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/4EZLD44273.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/Y76W13G67V.jpg)

CHAPTER 03
技術解説


# Page. 13

![Page Image](https://bcdn.docswell.com/page/G75M4LV574.jpg)

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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/9J29VL3GER.jpg)

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


# Page. 15

![Page Image](https://bcdn.docswell.com/page/DEY43Q1GJM.jpg)

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


# Page. 16

![Page Image](https://bcdn.docswell.com/page/VJNYVK2878.jpg)

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


# Page. 17

![Page Image](https://bcdn.docswell.com/page/YE9P6V1XJ3.jpg)

CHAPTER 04
Claude Codeとの開発


# Page. 18

![Page Image](https://bcdn.docswell.com/page/GE8DZP49ED.jpg)

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


# Page. 19

![Page Image](https://bcdn.docswell.com/page/LELMD16M7R.jpg)

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


# Page. 20

![Page Image](https://bcdn.docswell.com/page/4JMYPW56JW.jpg)

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


# Page. 21

![Page Image](https://bcdn.docswell.com/page/PJR91Y3N79.jpg)

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


# Page. 22

![Page Image](https://bcdn.docswell.com/page/PEXQYG48JX.jpg)

参考
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


# Page. 23

![Page Image](https://bcdn.docswell.com/page/3EK934ZLED.jpg)

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