まず「編集できる」の意味を決める
AIスライドは、AIに文章や資料を渡して作るプレゼンテーションです。見た目が完成していても、納品された.pptxの中身がスライド全体の画像なら、PowerPointで文章やグラフを直接直せません。したがって「PPTXで開けるか」と「編集できるか」は別の条件です。
納品前に、誰が最終修正を行うかを明確に決めてください。共有リンクをそのまま提示するだけであればHTMLのままでも問題ありません。一方、顧客や社内担当者がPowerPointで見出し・数値・社名を直接修正する場合は、ネイティブなテキスト枠と図形を含むPPTX形式にする必要があります。
判断は以下の2つに分かれます。
| 中身 | クリックしたとき | 納品前の扱い |
|---|---|---|
| ネイティブなテキストと図形 | 見出しやチャートを個別に選べる | 編集できるPPTXとして進める |
| ビットマップ（画像スライド） | スライド全体が1枚の画像で選べない | 画像納品として扱い、変換経路を切り替える |
次にやるべきことは次のとおりです。
- デスクトップ版PowerPointで候補の
.pptxを開く（Webプレビューだけでは判断しない）。 - 見出しを1つ、チャートを1つクリックする。
- 個別に選べるなら編集できるPPTXとして納品する。選べないなら画像スライドとして変換経路を切り替える。
PPTX書き出しで起きる4つの失敗
多くのAIスライドサービスは、まずブラウザ上でHTML/CSSを描画し、あとからPowerPointのOOXMLへ近似変換します。HTMLの見た目とPowerPointの編集モデルは同じではないため、次のような崩れが起きます。
| 失敗 | 見た目 | 主な原因 |
|---|---|---|
| フォント置換 | ArialやCalibriに変わる | Webフォントが埋め込まれていない |
| アニメ消失 | ビルドや遷移がなくなる | CSSアニメーションに対応するOOXMLがない |
| テキスト衝突 | 枠が重なる、文字がはみ出す | Flex/Gridと固定枠の計測差 |
| 画像化 | 見出しやチャートをクリックできない | スライド全体を画像として出力 |
2Slidesの検証は、Gamma、Tome、CanvaのようなWeb-firstの経路でこの差が問題になると説明しています。画像化は「開けない」障害ではなく「直せない」障害なので、編集納品では見た目だけで合格にしないことが重要です。
納品形式から変換経路を選ぶ
共有リンクだけで発表するならWeb-firstの表現力を優先できます。一方、PowerPointで顧客や社内担当者が行単位で修正するなら、最初からネイティブPPTXを出力する経路か、描画済みHTMLをネイティブ図形へ変換する経路を選ぶべきです。1枚ずつ画像化した経路は、編集ではなく再生成が必要になります。
これらの判断は次の表にまとめられます。
| 最終作業 | 向く形式 | 最初に確認すること |
|---|---|---|
| 閲覧・共有 | HTML / Webスライド | ブラウザの表示と共有権限 |
| PowerPointで修正 | ネイティブPPTX | 見出しとチャートが個別に選べるか |
| 既存HTMLを変換 | DOM計測型HTML-to-PPTX | 描画後の座標、フォント、CORS |
| 外観の固定 | 画像またはPDF | 編集不要であることを合意したか |
人気のGitHubリポジトリのStar数は技術的な編集品質を保証しません。ライセンス、フォント、画像の権利、出力後の修正範囲を実ファイルで確認してください。
90秒クリックテストを行う
- 非標準フォント、本文、チャートを含むスライドを1つ選びます。
- Webビューアではなくデスクトップ版PowerPointで
.pptxを開きます。 - 見出しをクリックして文字カーソルが入るか、チャートをクリックして系列や数値を選べるかを確認します。
- フォントがCalibriなどに置き換わっていないか、スライド全体が1枚の画像になっていないかを見ます。
見出し・本文・チャートの3点を個別に選べれば、少なくともその範囲は編集可能です。開けるだけでクリックできない場合は、画像化された納品物として扱います。非開発者が代替するなら、HTMLを背景グラフィック付きPDFへ印刷してからPDF-to-PPTを試す方法もありますが、余白やフォントは別途確認する必要があります。
HTMLを編集できるPPTXへ写す
開発者向けのdom-to-pptxは、画面のスクリーンショットを貼るのではなく、描画済みDOMの計算済みスタイルを読み、テキスト枠や図形へ変換する方法を取ります。
npm install dom-to-pptxで導入します。- 複数ページは
.slide要素としてまとめ、1920×1080のキャンバスと16:9を最初に固定します。 - スライドを描画し、フォントと画像のCORS、Webフォントのロード完了、スライドの描画完了を確認します。
exportToPptxで計算済みスタイルをテキスト枠と図形へ変換します。
この方式はHTMLソースを直接読んでFlexboxやGridを再解釈するのではなく、ブラウザが最終的に描画したx/y/w/hの座標を測定します。PptxGenJSは座標からPPTXを生成するAPIであり、HTMLを自動で編集可能な部品に分解する仕組みではありません。用途に応じて、DOM計測型と直接描画型を明確に使い分けてください。
よくある質問
GammaやCanvaのPPTXがプレビューと違うのはなぜですか？
HTML/CSSのレイアウトをPowerPointの枠へ近似するためです。フォント置換、アニメーション消失、行送りの違い、枠の衝突が起こり得ます。
編集できるPPTXと画像スライドをどう見分けますか？
デスクトップ版PowerPointで見出しとチャートをクリックします。文字やデータ系列を個別に選べなければ、画像化された可能性が高いです。
最短の変換手順は何ですか？
開発者なら描画済みDOMをdom-to-pptxへ渡します。非開発者ならPDF-to-PPTを試せますが、編集品質をサンプル数枚で確認し、無料のテキスト抽出コンバータを納品経路にしないでください。
日本語フォントは引き継げますか？
フォントの埋め込みや対象環境へのインストールが必要です。Noto Sans JP、游ゴシック、メイリオなど、実際の閲覧環境で置換されないか確認します。
PptxGenJSだけでHTMLを変換できますか？
PptxGenJSは座標を指定して図形や文字を描くAPIです。既存HTMLのレイアウトを読みたい場合はDOMを計測する層が必要です。
関連記事:
まとめ
AIスライドの納品では、見た目ではなく「誰が、どのアプリで、どの部品を直すか」を先に決めます。デスクトップ版PowerPointで見出しとチャートを1つずつクリックし、個別に選べるなら編集できるPPTXとして納品し、選べないなら画像スライドとして変換経路を切り替えます。フォント、CORS、描画完了を確認してから渡せば、開けるだけで直せないPPTXを避けられます。
著者
krona23
IT業界20年以上の実務経験を持ち、日本国内有数のPVを誇る大規模Webサービスで事業部長・CTOを複数社で歴任。Windows/iOS/Android/Webと技術の変遷を経験し、現在はAIネイティブへの変革に注力。DevGENTでは、AIコードエディタ・自動化ツール・LLMの実践的な使い方を日英西3言語で発信中。
コメントを残す