資料は誰のために作るのか
パワーポイント。ビジネスパーソンなら週に何時間も触っている。
だが大半の資料は、作った本人のために作られている。
体裁を気にしすぎて中身が空っぽなスライド。テンプレートのデザインに安心して、何を伝えたいのかが消えている。資料作成が「苦手」な人の典型だ。
逆に「得意」だと思っているコンサル出身者は、1ページにどれだけ情報を詰め込めるかが勝負だと信じている。文字だらけで、どこを見ていいかわからない。データ分析の報告書、広告代理店のレポート。見にくい資料が量産される。
資料は、相手に伝えるために作る。
わかりやすく。興味を引くために、かっこよく。スタイリッシュが好きなクライアントにはそう作る。安定感を求める経営層には固いトンマナで。提案を散々受けてきて目が肥えた担当者には、ちょっとトリッキーな構成で意表を突く。
相手を見て、構成を変え、デザインを合わせる。20年間、そうやって資料を作ってきた。
AIに「パワーポイント作って」と言いたい
その自分が、AIにパワーポイントを作らせようと思った。
期待値が常人の比じゃないのは自覚している。世の中の「AI資料作成ツール」を試すたびに、3枚目で閉じていた。テンプレートが安っぽい。余白が狭い。タイポグラフィに意志がない。色の組み合わせに根拠がない。
「AIが作りました」感が透けて見える資料を、クライアントに出すわけにはいかない。
でも、資料作成に毎回何時間もかけるのは、もう耐えられない。やりたいことが多すぎる。デザインの意思決定は自分でやる。だが「決めたことを形にする作業」はAIに任せたい。
この矛盾を解くために、試行錯誤が始まった。
最初の挫折——dom2pptxの限界
HTMLで資料をデザインして、そのままPowerPointに変換する。理論上は最高のアプローチだ。dom-to-pptx というライブラリを使えば、HTMLのDOMツリーをPPTXのネイティブシェイプに変換できる。
現実は甘くなかった。
CSSの padding-left を変更した。ブラウザ上では正しく反映されている。だがPPTX出力のファイルサイズが変更前と1バイトも変わらない。角丸が消える。背景色が落ちる。flexboxの子要素がずれる。
何度デバッグしても、変換エンジンがブラックボックスで修正できない。
正直、絶望した。HTMLで作ったデザインがそのままPPTXになる——その夢が、ライブラリの制約で潰れる。ここで諦めるか、別の道を探すか。
「全部任せる」を捨てた
発想を変えた。1つのツールに全部任せようとしていたのが間違いだった。
dom2pptxは92%の忠実度で変換できる。問題は残りの8%だ。角丸、パディング、フォントの微調整。ならば、その8%だけを別の手段で補えばいい。
3層のパイプラインが生まれた。
- Layer 1: HTMLで設計する。Tailwind CSSとJinja2テンプレートで、ブラウザ上で資料をデザインする。デザインの意思決定はすべてここで完結する
- Layer 2: dom2pptxで変換する。92%の精度でPPTXシェイプに変換する
- Layer 3: python-pptxで仕上げる。XMLレベルでフォントを強制し、角丸を復元し、位置を補正する。dom2pptxが落としたものを拾い直す
1つの完璧なツールではなく、3つの不完全なツールの連携。「足りない部分を次の層が補う」という設計思想が、結果的に一番堅牢だった。
テンプレートを選ぶんじゃない。世界観を選ぶ
パイプラインが動き始めて、次の問題に直面した。デザインのバリエーションだ。
PowerPointのテンプレートは「色を変える」「フォントを変える」程度の差分しかない。だが本当のデザインの違いは、もっと深い。タイポグラフィの密度、余白の取り方、角丸の半径、シャドウの拡散——これらが一体となって「世界観」を作る。
20のWebサイトを実測した。Stripe、Apple、Figma、Hermès、Duolingo。それぞれのカラー、余白、角丸、シャドウをCSS変数として抽出した。
そこから8つのスタイルを定義した。
| スタイル | 世界観 | 参考 |
|---|---|---|
| corporate | 信頼と構造 | Stripe / Linear |
| minimal | 余白で語る | Apple Keynote |
| creative | 遊び心 | Dribbble / Behance |
| dark | ダークで洗練 | Figma / Apple Pro |
| warm | 親しみやすさ | Duolingo / Slack |
| luxury | 高級感 | Hermès / Patek Philippe |
色が変わるんじゃない。構造から変わる。
corporateなら余白は広く、角丸は8px、シャドウは控えめ。luxuryなら余白はさらに広く、角丸は0px、セリフ体で静かに語る。warmなら角丸は16px、色はやわらかく、アイコンは丸みを帯びる。
「相手を見てデザインを合わせる」——20年の美学を、CSS変数の束に翻訳した。
「成長」のアイコンください、を1行で
スライドを作るとき、地味に時間がかかるのがアイコンと画像だ。
「成長」を示すアイコンが欲しい。アイコンサイトを開いて、検索して、ダウンロードして、配置して、サイズを調整する。1個あたり2〜3分。10枚のスライドで30分消える。
パイプラインでは1行だ。
resolve_icon("growth", "creative")
# → "ph:trend-up-bold"39の抽象概念——成長、セキュリティ、チーム、分析、コスト削減——を4つのアイコンセットにマッピングした。スタイルを選んだ時点でアイコンセットも決まる。corporateなら線が細いLucide、creativeならPhosphorのbold。
画像も同じだ。スタイルごとに「画像レシピ」を持たせた。表紙はGeminiで抽象パターンを生成し、コンテンツ写真はUnsplashから取得する。APIキーがなければPlaceholderにフォールバック。4層構造で、画像が欠けることはない。
考えるのは「何を伝えるか」だけ。見た目はパイプラインが決める。
ずっと試行錯誤していた
正直に書く。ここに至るまでに何度もぶち壊れた。
dom2pptxでフォントが文字化けした。Noto Sans JPをDOMレベルでMeiryoに正規化する処理を書いた。フォントサイズが1.25倍されるバグを追った。CSSの変更が反映されない問題を3回以上調べて、最終的に後処理で回避した。
1セッションで8スタイルのCSS変数化が完了した日もあれば、1日中デバッグして1行もコードが書けなかった日もあった。
だが「AIが作りました感」が消えた瞬間があった。
プレビューHTMLを開いて、実際のUnsplash画像とIconifyアイコンが入ったスライドを見たとき。corporateスタイルで出力した提案書が、手で作ったものと見分けがつかなかったとき。
これなら、クライアントに出せる。
14,600行が意味するもの
パイプラインの総行数は14,600行。Python/JavaScriptで書かれた42ファイル。15パターンのスライドレイアウト、8つのデザインスタイル、39概念のアイコンマッピング、4層の画像フォールバック。
だがこのパイプラインの本質は「PPTXを作るツール」じゃない。
「相手に伝えるためのデザインの意思決定」をコードで表現したものだ。入力は構造化されたデータ。出力はPPTX。だが同じデータからHTMLプレビューもPDFも出力できる。デザインシステムがCSSで定義されているから。
AIに「パワーポイント作って」と言いたかった。でも及第点が高すぎて、既存のツールでは無理だった。だから自分で作った。
20年の美学を、14,600行のコードに変換した。 今のところ、実用に耐えうるレベルに到達している。