提案書制作（HTML で組み、Figma は PDF を出すためだけに使う）
30 ページを超える BtoB 提案書の構成を Claude に書かせ、中身は HTML と CSS で組みます。Figma は PDF を書き出すときだけ使います。直しが入っても HTML を直せば済むので、30 枚を 1 日で出せます。
Recipes は、目的ごとに「今のところこの組み合わせがいちばん速い」と思っている作り方を置いておくチャンネルです。試して駄目だった組み合わせも、同じページの下のほうに残してあります。
提案書は一度作って終わりになりません。先方と話すたびに数字が変わり、順番が入れ替わり、1 枚まるごと差し替えになります。だから最初に決めたのは、修正のときに必ず開くおおもとのファイル、つまり正本をどれにするかでした。
選んだのは HTML です。中身がただの文字なので、Claude Code にそのまま読ませて直させられますし、どこを変えたかも文字で追えます。Figma のファイルはそうはいきません。人が開いて手で動かさないかぎり、何も変わらない。AI に渡せる部分が減るぶん、修正のたびに人の時間が溶けます。
では Figma を捨てられるかというと、そこまで割り切れませんでした。提出物は PDF で、余白や書き出しの細かい調整は Figma のほうが素直に効きます。そこで役割を分けました。中身と見た目を決めるのは HTML、PDF にするのは Figma です。Figma を触っていて直したい点が見つかっても、いったん HTML に戻してから写しを作り直します。写し先だけ直しても、次の修正でまた消えるからです。
今のところ、この目的にはこの組み合わせがいちばん速いと思っています。使っているツール、手順、それにかかる時間と費用をそのまま書きました。
- Claude Code (Opus 4.7)。スライドを 1 枚ずつ HTML と CSS で書かせます
- humbulls のスライドテンプレート 10 タイプ。表紙・比較・まとめなど、型を決めてある HTML の見本です
- Figma と Figma MCP。MCP は AI から外部ツールを呼び出すための共通の口で、Figma のファイルを Claude から触れるようにします
- 提案先に聞き取りをして、その内容を Claude に渡し、10 セクションぶんの構成案を書かせます
- 1 枚ずつ Claude に HTML と CSS を書かせます。サイズは 1280×720 ピクセルで固定し、この枠から中身がはみ出さないように作ります
- ブラウザで開いて確認し、載せる内容と見た目はここで確定させます
- 確定した見た目を Figma に手で写します。Figma MCP を使えるところは自動で運びます
- Figma から PDF に書き出し、そのまま提出します
HTML を正本（修正のときに必ず開く、おおもとのファイル）として残します。 Figma はそこから PDF を出すための写し先です。Figma 側だけ直しても正本は変わらないので、 修正依頼が来たら HTML から直し、写しを作り直します。 HTML からそのままきれいな PDF が出せるなら、Figma の工程はまるごと要りません。ここはまだ直したいところです。
実際に手を動かして試した組み合わせを並べています。採用しなかったものも消していません。同じ回り道を二度しないように、自分のために残しているようなものです。
ADOPTED = 採用 / REJECTED = 不採用 / PARTIAL = 条件つきで使える / IN-PROGRESS = 検証中 / UNVERIFIED = まだ試していない
API（プログラムから外部サービスを操作するための窓口）越しに作らせると配置が崩れ、文字の位置を直すのに時間を取られました。humbulls らしい見た目の決まりごとも再現しきれず、やめました。
HTML を正本にしておけば、修正が入るたびに同じ手順で作り直せます。書き出しの細かい調整も Figma 側で効きます。
まだ試していません。pptx ライブラリ（プログラムから PowerPoint ファイルを組み立てる部品）を使えばできそうだ、とは思っています。
Reveal.js と Marp は、どちらも文章やコードから Web のスライドを作る仕組みです。Web で公開する用途には向きますが、PDF に落としたときの品質はまだ確かめていません。
手順を今の形にするまでに分かったことを、気づいた日付とあわせて残しています。上の Flow がなぜこの順番なのかは、たいていここに書いてあります。
- AI 経由で Google Slides を API で操作すると配置が思いどおりにならないと分かり、Figma を通す作り方に切り替えました。
- humbulls のスライドテンプレート 10 タイプを HTML で作り切りました。提案書はこの 10 型を組み合わせて出します。