Genspark資料をFigmaで編集する方法

TL;DR

GensparkのAIスライドが生成したHTMLをコピーし、Figmaの変換プラグインへ貼り付けると、各要素を編集できるデザインとして取り込める。取り込み後は配置や文字を調整し、Figma Slidesへコピーすればスライド資料として仕上げられる。

Transcript

はいこんにちはアーケートですこの チャンネルは生成最新情報や活用事例を 紹介してます是非チャンネル登録などお 願いいたしますそして今回のテーマはです ね生成AIを使った資料作成の最適会これ が1番いいんじゃないかっていう方法を ですね紹介していきたいと思いますえCS AIを使った資料作成の中でえ今ですね JENSPっていうえ前回紹介させて もらったAIエージェントを使った資料 作成の方法がですねかなりいいんですけど えこれを使ってからえま細かいところの 編集みたいのがですねなかなかうまくいか ないっていうパターンがですねやっぱりね 多いんですよま実際とかで使ってく資料だ とAI1発出しでえ作った資料を使うって いうよりかはまそれを元にですね細かく 調生したものを使っていきたいんですけど 現状... Read More

Key Insights

• GensparkのAIスライドは、入力された文章を基にHTMLとCSSで資料を生成し、不足情報の検索やタイトル、キャッチコピー、ロゴ、アイコンを含むデザイン作成まで進められる機能である。
• AI生成資料の主な課題は、完成後に文字や配置を細かく変更すると、レイアウト、色、フォントなどが崩れやすく、実務で必要な微調整に手間がかかることである。
• PowerPointへの書き出しは、Genspark上で整っていたデザインが大きく崩れる場合があり、崩れた要素を一つずつ修正する作業が重くなる方法である。
• PDFをCanvaへ読み込む方法は、OCRによって文字を編集可能にできる一方、レイアウトやアイコンが正確に反映されず、見た目の修正量が増える場合がある。
• Figmaへの変換方法は、Gensparkのコード画面からHTML全体をコピーし、変換プラグインのHTML欄へ貼り付けてキャンバスへ追加する手順である。
• Codia AI Code to Designは、APIキーを設定してHTMLを読み込ませることで、Gensparkの資料を編集可能なFigmaデザインへ変換でき、動画内では10回まで無料と説明されている。
• HTML to Designは、エディターのHTML欄へコードを貼り付けて作成を実行できる代替プラグインであり、変換後のサイズ調整は必要でも、各要素を自由に編集できる。
• Figmaへ取り込んだ資料は、文字、アイコン、背景などが編集可能なレイヤーとして扱え、完成後にFigma Slidesへコピーすることでスライド資料として整えられる。

Questions & Answers

Q: Gensparkの資料をFigmaで編集する方法は？

Gensparkで作成した資料のコード画面を開き、対象ページのHTML全体をコピーします。次にFigmaでHTML変換プラグインを実行し、HTML欄へコードを貼り付けてキャンバスへの追加を選ぶと、文字や配置を編集できるデザインとして取り込めます。

Q: GensparkのAIスライドはどのように資料を作るのですか？

GensparkのAIスライドは、入力された文章を基にHTMLとCSSを組み合わせて資料を生成します。生成中はデザインをリアルタイムで構成し、不足している情報を検索で補いながら、タイトル、キャッチコピー、ロゴ、アイコンなども資料へ組み込めます。

Q: GensparkからPowerPointへ書き出すと何が問題ですか？

PowerPoint形式で書き出すと、Genspark上では整っていたレイアウトが大きく崩れる場合があります。文字や図形の配置を細かく修正したいときでも、崩れた部分の復元から始める必要があるため、AIで資料を作った効果を損なうほど修正が面倒になります。

Q: GensparkのPDFをCanvaで編集する方法は実用的ですか？

PDFをCanvaへアップロードすれば、OCRで文字情報を読み取り、編集可能なデータに変換できます。ただし、動画内の例ではレイアウトが一部崩れ、アイコンも正しく反映されませんでした。そのため、見た目を直す作業が多い場合は現実的ではないと話されています。

Q: Codia AI Code to Designの設定方法は？

Figmaの左上にあるメニューからプラグイン管理を開き、Codia AI Code to Designを検索してインストールします。プラグイン内から開ける開発者向けポータルでAPIキーを取得し、そのキーをFigma側の入力欄へ貼り付ければ準備完了です。

Q: GensparkのHTMLを変換プラグインへ貼り付ける手順は？

Gensparkの資料で「コード」を選び、表示されたHTMLをページ単位で全てコピーします。Figmaの変換プラグインに戻り、HTML欄へ貼り付け、別に表示されているCSS欄は削除します。その後、キャンバスへの追加を実行すると資料が生成されます。

Q: 無料で使えるFigmaのHTML変換方法はありますか？

動画では、Codia AI Code to Designを10回まで無料で利用できると説明されています。さらに、同様の変換ができるHTML to Designも紹介されており、エディターのHTML欄へコードを貼り付けて作成ボタンを押すことで資料を取り込めます。

Q: Figmaへ取り込んだ資料はどこまで編集できますか？

Figmaへ変換した資料は、文字の内容、要素の位置、背景、アイコンなどを通常のデザインデータとして編集できます。背景だけを残して複製したり、既存ページのフォントや要素をコピーして新しいページを作ったりすることも可能です。

Q: Figmaのデザインをスライド資料にする方法は？

Figma上で文字や配置を整えた後、画面右上にあるFigma Slidesへのコピー操作を選びます。デザインをスライド作成用の画面へ取り込んだら、ページの大きさや要素の位置を調整することで、発表や共有に使うスライド資料として仕上げられます。

Summary & Key Takeaways

• まずGensparkのAIスライドへ資料の元となる文章を入力し、HTMLとCSSで構成されたスライドを生成する。検索機能による情報補完や、タイトル、キャッチコピー、ロゴ、アイコンを含むデザイン生成が可能だが、細部を直すには追加指示やコード編集が必要となり、直感的な調整には向きにくい。

• PowerPoint形式への書き出しではレイアウトが大きく崩れ、PDFをCanvaへ読み込む方法でも配置やアイコンが正しく反映されない場合があった。そこで、Gensparkのコード画面からページごとのHTMLをコピーし、Figmaの「Codia AI Code to Design」などへ貼り付けてデザインデータへ変換する。

• Figmaへ変換した資料は、文字、配置、背景、アイコンなどがレイヤーに分かれた状態で編集できる。同じ背景やフォントを利用してページを追加することも可能で、完成後は右上の操作からFigma Slidesへコピーし、サイズや配置を調整して実際のスライド資料に仕上げる。