はじめに 近年AIを使った資料作成はとても便利になりましたが「生成した資料を細かく編集したい」「PowerPointやPDF取り込み後にレイアウトが崩れてしまう」などのお悩みをお持ちの方も多いはずです。本記事ではGensparkのAIスライド機能とデザインツールFigmaを組み合わせることで「AI生成から自由編集まで」を一気に実現する最速ワークフローをご紹介します。
GensparkのAIスライド機能とは何か
GensparkのAIスライドは入力したテキストをもとにHTML＋CSSでプレゼン資料をリアルタイム生成する機能です。従来のPowerPoint一発生成に比べて以下のようなメリットがあります。
- HTMLレンダリングによる高品質デザイン
- アイコンやキャッチコピーもAIが自動配置
- 検索機能付きで不足情報の補完がラク
AI生成資料の編集における課題
一方でGensparkで生成したHTML資料をそのまま使う場面は稀で、細かい配色やレイアウト調整が必要になります。しかしHTMLソースを直接編集するのは一般ユーザーにはハードルが高いのが現状です。
PowerPointとPDFでの限界
GensparkはPowerPointやPDF形式でダウンロード可能ですが、実際に読み込むと以下のように崩れるケースが多いです。
- 段組やアイコンの位置ズレ
- フォントやカラー変化
- 細かい微調整が困難
そのため「AI生成→PowerPoint→編集」という従来ワークフローでは手戻りが多くなりがちです。
Canvaを使った改善策
PDFをCanvaにアップロードするとOCRでテキストを抽出し編集可能になりますが、やはりアイコンやレイアウトが乱れる場合があります。細部修正には不向きです。
Figmaへインポートするメリット
Figmaはレイヤー構造を保持したままHTMLを取り込めるプラグインが充実しており、以下のようなメリットがあります。
- レイヤー単位での自在な編集
- フォントやカラーの統一管理
- 複数ページも同一ファイルで管理可能
Code to Designプラグインの使い方
①Figmaでプラグイン管理画面を開きCode to Designをインストール
②Gensparkで生成したHTMLコードをコピーしプラグイン画面にペースト
③「Add to Canvas」を実行するとAI資料がFigma上に再現されます
これだけでAI生成時のデザインをほぼ完璧に保持しながら編集可能になります。
HTML2Designプラグインの活用例
HTML2Designは無料でも試せる代替プラグインです。手順はCode to Designと同様でHTML貼り付け後に「Create」をクリック。若干サイズ調整が必要な場合もありますが、無料トライアルで十分な動作確認が可能です。
Figmaスライド機能でスライド化する方法
Figmaにはスライド生成機能があります。作成したページを選択し「Figma Slidesにコピー」を実行すると、PowerPointやGoogleスライド向けのデータとしてエクスポートできます。この機能を使えばFigmaで整えたデザインをそのままプレゼン資料化できるため手戻りがほとんどありません。
実践編 サンプルワークフロー紹介
以下は実際の作業手順イメージです。
- テキストをGenspark AIスライドに投入しHTML生成
- HTMLソースをコピー
- FigmaでCode to Designプラグインを起動して貼り付け
- Figma上でレイヤー編集や配色調整
- Figma Slidesにコピーしてプレゼンデータ出力
古い情報や誤情報への注意事項
以上がGensparkとFigmaを組み合わせたAI資料作成の最速ワークフローです。ぜひお試しいただき、資料作成時間を大幅に短縮してください。
コメント