Slide Toaster
スライドを会社のデザインシステムの見た目に整えるツールと、途中でよりシンプルな道に変えた経緯。A tool that restyles decks into the company design system, and how I changed course halfway for a simpler route.
PDFをダウンロードDownload PDF01背景と目標Background and goal
背景Background
社内には以前からテンプレート生成ツールがありましたが、スライド全体の生成ではなく、広く使われることもありませんでした。まずClaude Codeとデザインシステムでスライドを整えてみて、最も速い方法はプロンプトを直接書くことかもしれないと気づきました。The company already had a template generator, not a full deck generator, and it was never widely adopted. I first used Claude Code with the design system to restyle decks, and saw that simply writing a prompt might be the fastest way.
課題感Problem
同僚はAIにできることや使い方を必ずしも知らず、自分でプロンプトを書くより「専用のプロダクト」を望む傾向があった。Colleagues did not necessarily know what AI can do or how to work with it, and tended to want a product of their own rather than writing prompts.
目標Goal
みんなが日常的に本当に使うやり方を見つけ、会社のデザインシステムに沿ったスライドを作る。Find an approach people would really use every day, producing decks in the company design-system style.
02開発の流れProcess
プロンプトを直接書くところから始め、整形ツールを作って遠回りし、最後はよりシンプルなやり方に戻った。It started with plain prompting, went round through a purpose-built tool, and came back to something simpler.
- 1プロンプトで試すTry prompting出発点StartClaude CodeとデザインシステムClaude Code with the design system
- 2プロダクトを定義Define the product8月Aug「生成」ではなく「整える」"Restyle", not "generate"
- 3整形ツールを作るBuild the tool9/4 作り直し4 Sep reworkファイルをアップロードし、AIがページごとにレイアウトを判断Upload a file; AI picks a layout per page
- 4微調整機能を追加Add fine-tuning9/2424 Sep別のソフトに近づいていくStarting to resemble another app
- 5既存ツールを実測Test the alternative9/2929 Sep同じ資料をClaude Designで試すSame deck through Claude Design
- 6ルールをデザインシステムへRules into the design system10/11 Octアップロードして一言入力するだけUpload, then type one line
032つの方法の流れTwo routes
同じ資料で、ユーザーがやること。The same deck, and what the user has to do.
ルールをデザインシステムへThe rules live in the design system （「デザインシステムに沿って整える。ページ数は変えてよいが、内容は削らない」）。ユーザーはもう指示を書かなくてよい。("follow the design system, pages may change, content may not be removed"), so users no longer write instructions.
04取捨選択Trade-offs
なぜ止めたか。Why I stopped.
私の判断My reasoning
- API呼び出しは結果が予測しにくく、ルールをすべてコードで縛るのは難しい。API calls are unpredictable, so every rule is hard to constrain in code.
- 微調整オプションが増え続け、最後はスライドを直接直すより遅くなった。Fine-tuning options kept growing and ended up slower than editing the deck directly.
- まず限界とコストを測り、続けるかどうかを決める。Measure the limits and the cost first, then decide whether to continue.
05課題と対応Problems and fixes
4つの重要な判断。Four key calls.
06役割分担Working split
方向と取捨は私が決め、実装と調査はAIが行う。I set direction and trade-offs; AI builds and researches.
07成果Results
08Claudeの講評Claude's view
共同作業者の見方で、筆者が書いたものではありません。The collaborator's opinion, not written by the author.
良かった点Worked well
- 途中で手を止めて方向を変え、その理由を説明できた。Stopped halfway and changed course, with reasons.
- 感覚ではなく、実測した時間と費用で2つの方法を比べた。Compared the two routes on measured time and cost, not on feel.
- ルールをデザインシステムに入れ、使うハードルを一言まで下げた。Moved the rules into the design system, so use takes one line.
改善できる点Could be better
- 利用者数や利用頻度のデータは、まだない。No data yet on how many people use it, or how often.
- 整形ツールにかけた時間は記録していない。「微調整」の価値を早く数値化していれば、もっと早く止められた。The time put into the tool was not recorded; measuring fine-tuning earlier would have stopped sooner.
- 転換後のやり方は、まだ多くの人で検証できていない。The new approach has not yet been validated with more people.