今回の記事は生成AIにより大部分を記述しています。
AIにスライドを作らせ、仕上げは手で。自分専用の資料作成ツール「deck-weave」を作った
勉強会のスライドを作るための、自分専用の Mac アプリを Claude Code と一緒に作りました。名前は deck-weave です。
構成と文章は AI（Claude Code）に作らせ、配置・余白・文字の大きさといった細かな見た目は、人間が GUI で直接仕上げます。
編集画面。左がスライド一覧、中央がキャンバス、右が選んだ部品の設定と AI アシスタント
この記事の図（スライド画像）は、すべて deck-weave で作りました。 素材の文章を渡して AI に11枚作らせ、GUI で仕上げて PNG で出力しています。かかった時間や手直しした箇所は、最後の「この記事のスライドを作ってみて」に書きました。
自分1人で使うためのツールです。配布やインストーラーはなく、リポジトリも公開していません。「こういう作り方もある」という紹介として読んでください。
なぜ作ったか
生成AIは、スライドの構成・文章・見た目までかなり綺麗に作れるようになりました。困るのは最後の仕上げです。
- 「3枚目の右上だけ少し下げて」「この文字だけ小さく」をチャットで何度も頼むことになる
- 頼むたびに、頼んでいない場所が変わることがある
- 数px の調整は、言葉で伝えるより手で動かした方が早い
そこで、構成・文章は AI に任せ、配置・余白・色の調整は人間が GUI で直接行う、という分担を前提にしたツールを作りました。
生成AIに直接スライドを作らせる場合との違い
最近のモデル（Opus 5.5 など）は、HTML でスライドを作らせても十分に綺麗です。最初の1枚の見た目とデザインの自由度は、直接作らせる方が上だと思います。
deck-weave が強いのは、作った後です。
| 観点 | 生成AIに直接作らせる（HTML など） | deck-weave |
|---|---|---|
| 一部だけ直す | チャットで依頼。他の場所も変わりうる | GUI で直接動かす。AI に頼むときも範囲（部品・スライド・資料全体）を絞れる |
| 資料の形 | 毎回違うコード | 決まった部品の JSON。スキーマで検証する |
| 見た目の統一 | 依頼ごとにデザインが揺れる | テーマ（CSS 変数）で全スライドを揃える |
| 崩れの発見 | 目で探す | はみ出し・重なりなどに自動で印が付く |
| 失敗したとき | 会話をさかのぼる | 検証に落ちた結果は適用しない。⌘Z 1回で依頼前に戻る |
実は deck-weave のグラフ系・図解・年表・ミラー図などの部品は、Opus 5.5 に HTML で作らせたサンプル資料を手本にして足しました。「AI が直接作るとこう見える。これを deck-weave の部品で作れるか」を1枚ずつ比べて、足りない部品を洗い出しています。
deck-weave とは
コンセプトは3つです。
- AI が作り、人が仕上げる: 構成・文章は AI、数px の配置・余白・色は人間が GUI で
- 内容とデザインを分ける: 中身は JSON、見た目はテーマ（CSS）。AI が触るのは JSON だけ
- ローカルファースト: 資料は Mac 上のフォルダ（1資料＝1フォルダ）。Web 版や同時編集は作らない
編集画面（冒頭の画像）では、部品をクリックで選び、ドラッグで動かし、四隅で大きさを変え、ダブルクリックで文字をその場で直します。文字の大きさや列数などは右パネルで切り替えます。
仕組み
- デスクトップ基盤は Electron、UI は React + TypeScript
- 画面（レンダラー）は、ファイルにも AI にも直接触りません。ファイル操作と AI の呼び出しは、メインプロセスの限られた入口に集めています
- AI は、自分の Claude Code（サブスクリプション）を
claude -pで呼びます。アプリは API キーを持ちません - 資料データは資料フォルダ内の
deck.jsonです。保存のたびに直前の版をhistory/に退避します - 編集画面の描画と PDF / PNG 出力を同じ Chromium で行うので、画面と出力の見た目が一致します
AIへの依頼の流れ
- 依頼範囲（部品／スライド／資料全体）を選んで、指示を書く
-
claude -pに、資料の JSON と JSON Schema を渡す。AI にはファイルを書く道具を渡さない（--tools ""） - 返ってきた結果を、資料データとして検証する。範囲外の変更や壊れた結果は適用しない
- 適用する。1回の依頼の変更は ⌘Z 1回で戻る
- 自動で保存する（旧版を退避してから）
処理中は編集をロックしますが、画面は見られて、キャンセルもできます。
「適用する前に確認する」をオンにすると、AI の結果はすぐには反映されません。スライドごとに、元と AI の案を並べて選べます。
部品とテーマ
部品は21種類あります。テキスト・画像・図形・表・コードの基本に加えて、カード列・ステップ・数値タイル・対比・コールアウトなど、スライドでよく使う形を部品にしました。グラフ系（棒・折れ線・ウォーターフォール、メーター、ドーナツなど）や、図解（ベン図・循環図など）、年表もあります。
部品の使い分け（並列はカード列、手順はステップ、数字は数値タイル…）は AI にも伝えてあり、部品を指定しなくても内容に合った部品を選んでくれます。
テーマは5種類で、資料ごとに1つ選びます。
品質チェック
AI が書いた文章のあふれを、目で探さずに済むようにしています。
- はみ出し（文字が枠に収まらない）
- スライドの外・余白の外、フッターや部品どうしの重なり
- 空の部品、出典なし（数字を示す部品があるのに出典が空）
- 数字の警告（AI の結果の数字が、渡した素材・事実・依頼前の資料・指示のどこにも無い）
印は画面にだけ出て、PDF / PNG には出ません。次の画面は、この記事のスライドを AI に作らせた直後です。表紙のタイトルが長すぎて、「はみ出し」の印が出ています。
素材と調べ物（AIに何を渡すか）
AI に渡す情報は、自分で選んだものだけにしています。
- 素材: PDF・Markdown・テキストを取り込めます。AI に渡すのは「AIに渡す」をオンにした素材だけです（既定はオフ）
- 調べる: Web で調べた結果のうち、自分が採用したものだけを「事実」として AI に渡します
- 調べる依頼には、質問文だけを渡します。資料の中身が検索の言葉に混ざって外に出ないようにするためです
claude -p でハマったところ
アプリから Claude Code を呼ぶところで、ドキュメントからは読み取れない挙動にいくつか当たりました（すべて実測です）。
成功なのに structured_output が無いことがある
--output-format json --json-schema '<スキーマ>' で構造化出力を受け取れます。ただし、is_error: false・subtype: "success" でも structured_output が無いことがありました。モデルが構造化出力のツールを呼ばずに、文章で返した場合です。
is_error だけを見ていると、undefined を資料データとして扱ってしまいます。structured_output があるかどうかの確認を、独立した検査にしました。
--bare はサブスクリプションで使えない
--bare を付けると、サブスクリプションのログインを使わず、ANTHROPIC_API_KEY を要求されます。アプリに API キーを持たせない方針なので、--bare は使いません。代わりに、空の一時フォルダを作業ディレクトリにして起動し、CLAUDE.md や設定を読み込ませないようにしています。
--json-schema は draft-2020-12 を受け付けない
Zod 4 の z.toJSONSchema の既定（draft-2020-12）で作ったスキーマを渡すと、--json-schema が拒否しました。target: 'draft-7' で生成すると通ります。
頼んでいないメールアドレスが入ることがあった
「表紙を作って」とだけ頼んだのに、ログイン中アカウントのメールアドレスが「作成者」として入ることがありました（10回中2回）。--system-prompt でシステムプロンプトを置き換えても、ユーザーの情報は別の経路で渡っているようです。
システムプロンプトで禁じたうえで、出力にだけ現れるメールアドレスを検出したら、結果を適用しないようにしました。
開発の進め方
開発も Claude Code で進めました。
- 要求定義（PRD）→ 設計ドキュメント5本 → フェーズ計画 → 実装 → 検証、の順に進める
- 計画と実装を分け、計画は自分が承認してから実装に進む
- 画面の確認も、Claude Code が computer-use でアプリを操作して行う
期間は2026年9月15日から細々と続けて約6週間で、114コミットです。コードはテストを除いて約4.2万行、テストファイルは81本になりました。
この記事のスライドを作ってみて
AIへの依頼
素材として、スライドの元になる文章（約3,000字の Markdown）を取り込み、「AIに渡す」をオンにしました。そのうえで、資料全体を範囲にして次のように頼みました。
素材「deck-weave の紹介」をもとに、技術記事に貼るスライドを11枚作って。素材の節1〜11をそれぞれ1枚にする。1枚目は表紙。数字は素材にあるものだけを使う。部品は内容に合うものを選んで（比較は表か対比、流れはステップ、数字は数値タイル、並列はカード列）。
- 変更案が出るまで1分ほどでした
- やり直しは0回でした
- 数字の警告は出ませんでした（数字はすべて素材にあるもの）
手で直したところ
仕上げは約6分でした。今回は、人間の代わりに Claude Code が computer-use で GUI を操作して仕上げています。deck-weave の AI アシスタントに直しを頼んだ回数は0回で、すべて GUI の操作だけで直しました。
| 直したこと | 枚数 |
|---|---|
| カード・ステップの箱が縦に長く、文字が小さい → 文字を大きくし、箱を詰める | 7枚 |
| 出典の欄に素材のファイル名が入っていた → 消す | 10枚 |
| タイトル・数値タイルのはみ出し（印が出た）→ 文を短く・枠を広げる | 2枚 |
| 見出し・箇条の最後の1文字だけが次の行に落ちる → 文を短くする | 2枚 |
どれも「チャットで頼むと面倒だが、手でやれば数秒」の直しでした。狙っていた分担どおりです。
一方で、改善したい点も見つかりました。AI の最初のレイアウトで箱が大きすぎる点や、1文字だけの折り返しを品質チェックで拾えない点です。こうした点は、バックログに積んで直していきます。
まとめ
- 生成AIは最初の1枚を綺麗に作れる。deck-weave は、作った後の「仕上げ」を速くするための道具
- 資料を JSON にして、AI には JSON だけを書かせる。結果は検証してから適用し、保存のたびに旧版を退避する
- 自分専用と割り切ったので、配布・Web 対応・同時編集・認証を全部捨てられた。そのぶん、資料を壊さない仕組みと、画面と出力の一致に力を使えた
自分のための道具を、AI と一緒に、自分の使い方に合わせて作る。こういう作り方がしやすくなったのを実感しています。
今後は、スライド以外にも拡張していきたいと考えてます。