・
GeminiとFigmaを連携|デザイン業務をストレスフリーにこなす活用術とは
Figmaでのデザイン作業やその後のコーディングに時間がかかりすぎていると感じていませんか？
Geminiを活用すれば、デザインの文脈を理解した高度な自動化が実現可能です。
本記事では、連携の具体的な手順やメリットを詳しく解説します。
🎨GeminiとFigmaを連携させるメリット
FigmaとGeminiを連携させる最大のメリットは、デザインデータを「静止画」ではなく「構造データ」としてAIが読み取れる点にあります。
従来の画像認識AIでは難しかった精度の高いアウトプットが可能になります。
デザインからコード生成までの時間を短縮
デザインが完成した後、フロントエンドエンジニアが一つひとつのマージンやカラーコードを確認しながらコーディングする作業は非常に骨が折れます。
GeminiとFigmaを連携させれば、レイアウト構造を保持したままReactやTailwind CSSのコードを生成可能。
マークアップの初動にかかる時間を数時間単位で削減でき、ロジックの実装に時間を割けるようになります。
命名規則の統一・整理
大規模なプロジェクトになればなるほど、レイヤー名が「Frame 123」や「Group 5」といった意味不明な名前で溢れかえります。
Geminiを活用すれば、デザインの見た目と階層構造から「これはナビゲーションバーの検索ボタンである」といった文脈を読み取り、適切な命名を提案。
デザインデータそのものが清潔に保たれることで、後からの修正や引継ぎもスムーズになります。
コミュニケーションコストの削減
「このボタンの余白は何ピクセル？」「ホバー時の挙動は？」といった細かな確認作業は、蓄積されれば大きなタイムロスとなります。
Geminiがデザインスペックを正確に解釈して出力できるため、エンジニアがデザイン意図をAI経由で補完できるように。
デザイナーも「スペックを説明するためのドキュメント作成」から解放され、より高品質なUI/UXの追求に集中できる環境が整えられるでしょう。
🛠️GeminiとFigmaの連携方法
MCPやCLIを利用することで、Geminiが直接Figmaのデザインデータにアクセスし、高度な推論を行うことが可能になります。
MCPを使用した連携の仕組み
MCPは、AIモデルが外部のツールやデータソースとセキュアに接続するための共通規格です。
Figmaと組み合わせることで、Geminiは単なるチャットボットとしてではなく、Figmaのプロジェクトデータを直接読み取って操作できる「強力なアシスタント」として機能するようになります。
VScodeを活用したMCP連携
Gemini CLIからFigmaデザインを読み込む
Geminiのコマンドラインツールを使用し、Figmaのパーソナルアクセストークンを設定することで、ローカル環境から直接デザインファイルを解析できるようになります。
操作手順
1.Figmaでアクセストークンを発行
2.Figma MCP サーバーの設定
Gemini CLIのMCP設定ファイル（~/.gemini/mcp.json または利用しているMCP設定ファイル）にFigma用のMCPサーバーを追加します。
JSON{
"mcpServers": {
"figma": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-figma"],
"env": {
"FIGMA_PERSONAL_ACCESS_TOKEN": "YOUR_FIGMA_PAT_HERE"
}
}
}
}3.Gemini CLIの起動と接続確認
4.Figma URLの指定と読み込み実行
これで設定は完了です。
- 特定のアセット・コンポーネントの抽出
- 全体スタイルガイド・仕様の要約
- コードとデザインの差分チェック・レビュー
- バイブコーディング
など、開発ワークフローに密着した操作を自動化するための基盤が構築できるようになるのです。
Figma MakeでGeminiを使用する方法
Figmaにネイティブ統合されたAI機能「Figma Make」において、Geminiのモデルを選択・利用可能です。
- キャンバス上で直接プロンプトを入力
- 新しい画面構成の案を生成
- 既存のコンポーネントを状況に合わせて組み替え
といった、直感的なデザイン作業をAIがサポートしてくれます。
💡GeminiとFigmaの連携を最大限に生かす方法
連携方法がわかったところで、実際の業務でどのようにGeminiを活用すべきか、いくつかの実戦的なシチュエーションをご紹介します。
既存デザインに基づいたコンテンツ生成
すでに定義されているコンポーネントライブラリをGeminiに参照させることで、新しい画面案を作成できます。
「既存デザインを使って、日本茶カフェのロゴを作成して」と指示するだけで、デザインの一貫性を保ったままバリエーションを量産できるのです。
出力後の調整は必要ですが、初期案を作成する工程の効率化が期待できます。
アクセシビリティガイドラインに沿ったデザインチェック
Figmaから取得した色やテキストなどの情報をもとに、コントラスト比をはじめとするアクセシビリティ上の問題候補をGeminiに確認させることができます。
背景色と文字色のコントラスト比が不足している箇所や、スクリーンリーダーで読み上げる際の構造的な不備をGeminiが指摘。
一つずつプラグインで確認する手間を省けるため、品質の底上げが見込めます。
プロトタイプ構成案の作成
「ユーザーがログインしてダッシュボードを確認し、設定を変更する」といったテキストベースの構造をGeminiに入力し、それに必要な画面構成をFigma上に展開させることが可能です。
機能要件からデザインへの「翻訳」をAIがサポートすることで、要件定義のズレを早期に発見し、手戻りの少ないプロジェクト進行が可能になります。
🚀Yoomならデザイン作成業務を自動化できます
FigmaとGeminiの連携は強力ですが、そこから先の「他アプリへの橋渡し」まで自動化できれば、本来のクリエイティブな業務にさらに集中できるようになります。
Yoomを使えば、デザイン変更をトリガーにGeminiで修正内容を分析し、自動でタスク登録するといった運用もノーコードで実現可能です。
[Yoomとは]
以下のテンプレートを活用することで、情報の同期漏れを防ぎ、チーム全体の生産性を底上げできます。
デザイン制作をサポートする自動化フローボット
■概要Figmaでのデザインレビュー時、多数のコメントを手作業でスプレッドシートに転記・管理することに手間を感じていませんか？コメントの確認漏れや転記ミスは、プロジェクトの進行に影響を及ぼしかねません。 このワークフローを活用すれば、FigmaのAPIを利用して定期的に指定ファイルのコメントを自動で取得し、Google スプレッドシートに集約できます。手作業による管理から解放され、デザインの修正や改善といった本来の業務に集中できる環境を整えられます。■このテンプレートをおすすめする方- Figmaでのデザインレビューやフィードバック管理を効率化したいデザイナーやディレクターの方
- FigmaのAPI連携を活用して、手作業でのコメント転記業務を自動化したいと考えている方
- Google スプレッドシートでFigmaのコメントを一元管理し、タスクの進捗を可視化したい方
■このテンプレートを使うメリット- 定期的にFigmaのコメントが自動でGoogle スプレッドシートに集約されるため、手作業での確認や転記にかかる時間を短縮することができます
- コメントの転記漏れや確認ミスといったヒューマンエラーを防ぎ、フィードバックを正確に管理することで、デザインの品質向上に繋がります
■フローボットの流れ- はじめに、FigmaとGoogle スプレッドシートをYoomと連携します
- 次に、トリガーで「スケジュールトリガー」を選択し、フローを定期的に実行するスケジュールを設定します
- 次に、オペレーションでFigmaの「コメントリストを取得する」アクションを設定し、対象のファイルからコメントを取得します
- 次に、オペレーションでGoogle スプレッドシートの「値を削除する」アクションを設定し、毎回最新の情報を反映させるために既存のリストをクリアします
- 次に、「繰り返し処理」を設定し、取得したコメントを1件ずつ処理できるようにします
- 最後に、繰り返し処理の中でGoogle スプレッドシートの「レコードを追加する」アクションを設定し、コメント情報をシートに行単位で追加します
※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション
■このワークフローのカスタムポイント- スケジュールトリガーでは、フローを起動させたい日付や曜日、時刻を任意で設定してください。例えば、「毎朝9時に実行」といった設定が可能です
- Figmaでコメントを取得するアクションでは、対象としたいファイルのファイルキーを任意で設定してください
- Google スプレッドシートの各アクションでは、連携先のシートを任意で指定できます。また、追加するレコードの内容は、Figmaから取得したコメント内容や日時などの変数を自由に組み合わせることが可能です
■注意事項- Figma、Google スプレッドシートのそれぞれとYoomを連携してください。
- 「同じ処理を繰り返す」オペレーション間の操作は、チームプラン・サクセスプランでのみご利用いただける機能となっております。フリープラン・ミニプランの場合は設定しているフローボットのオペレーションやデータコネクトはエラーとなりますので、ご注意ください。
- チームプランやサクセスプランなどの有料プランは、2週間の無料トライアルを行うことが可能です。無料トライアル中には制限対象のアプリや機能（オペレーション）を使用することができます。
■概要Google Driveにアップロードされる画像を一枚一枚確認し、その内容を把握してOutlookで報告する作業に時間を取られていませんか？大量の画像を扱う業務では、内容の確認や共有に手間がかかり、本来の業務を圧迫することもあります。このワークフローを活用すれば、Google Driveに画像が追加されるとAIのGeminiが自動で画像を解析し、その内容をOutlookで関係者に通知する流れを構築でき、手作業による確認・報告業務から解放され、業務の効率化を実現します。
■このテンプレートをおすすめする方- Google Driveにアップロードされた画像の内容確認と報告を自動化したいと考えている方
- AI（Gemini）を活用して、画像解析などの定型的な業務を効率化したいマーケティングや制作担当の方
- Outlookでの報告業務を手作業で行っており、通知の漏れや遅延を防ぎたいと考えている方
■このテンプレートを使うメリット- Google Driveへの画像アップロードを起点に、Geminiによる解析からOutlookでの通知までが自動で実行されるため、手作業での確認や報告にかかっていた時間を短縮できます。
- 手作業による画像の見落としや、報告内容の転記ミスといったヒューマンエラーを防ぎ、正確な情報共有を実現します。
■フローボットの流れ- はじめに、Gemini、Google Drive、OutlookをYoomと連携します。
- 次に、トリガーでGoogle Driveを選択し、「特定のフォルダ内に新しくファイル・フォルダが作成されたら」というアクションを設定します。
- その後、オペレーションでGoogle Driveの「ファイルをダウンロードする」アクションを設定し、トリガーで検知したファイルをダウンロードします。
- 続いて、オペレーションでGeminiの「ファイルをアップロード」アクションと「コンテンツを生成（ファイルを利用）」アクションを設定し、ダウンロードした画像を解析します。
- 最後に、オペレーションでOutlookの「メールを送る」アクションを設定し、Geminiの解析結果を指定の宛先に通知します。
※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション
■このワークフローのカスタムポイント- Google Driveのトリガー設定では、監視対象としたいフォルダのIDを任意で設定してください。
- Geminiで画像を解析する際、ダウンロードしたファイルを変数として設定します。また、画像からどのような情報を抽出したいかに応じて、プロンプトの内容を自由にカスタマイズすることが可能です。
- Outlookでメールを送信するアクションでは、通知先のメールアドレスや件名、本文を任意で設定できます。本文にはGeminiが生成した解析結果を変数として含めることで、動的な通知が作成できます。
■注意事項- Gemini、Google Drive、OutlookのそれぞれとYoomを連携してください。
- トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
- プランによって最短の起動間隔が異なりますので、ご注意ください。
- ダウンロード可能なファイル容量は最大300MBまでです。アプリの仕様によっては300MB未満になる可能性があるので、ご注意ください。
- トリガー、各オペレーションでファイルを使用する際は、「ファイルの容量制限について」をご参照ください。
- Microsoft365（旧Office365）には、家庭向けプランと一般法人向けプラン（Microsoft365 Business）があり、一般法人向けプランに加入していない場合には認証に失敗する可能性があります。
- Figmaでのデザインレビューやフィードバック管理を効率化したいデザイナーやディレクターの方
- FigmaのAPI連携を活用して、手作業でのコメント転記業務を自動化したいと考えている方
- Google スプレッドシートでFigmaのコメントを一元管理し、タスクの進捗を可視化したい方
- 定期的にFigmaのコメントが自動でGoogle スプレッドシートに集約されるため、手作業での確認や転記にかかる時間を短縮することができます
- コメントの転記漏れや確認ミスといったヒューマンエラーを防ぎ、フィードバックを正確に管理することで、デザインの品質向上に繋がります
- はじめに、FigmaとGoogle スプレッドシートをYoomと連携します
- 次に、トリガーで「スケジュールトリガー」を選択し、フローを定期的に実行するスケジュールを設定します
- 次に、オペレーションでFigmaの「コメントリストを取得する」アクションを設定し、対象のファイルからコメントを取得します
- 次に、オペレーションでGoogle スプレッドシートの「値を削除する」アクションを設定し、毎回最新の情報を反映させるために既存のリストをクリアします
- 次に、「繰り返し処理」を設定し、取得したコメントを1件ずつ処理できるようにします
- 最後に、繰り返し処理の中でGoogle スプレッドシートの「レコードを追加する」アクションを設定し、コメント情報をシートに行単位で追加します
■このワークフローのカスタムポイント
- スケジュールトリガーでは、フローを起動させたい日付や曜日、時刻を任意で設定してください。例えば、「毎朝9時に実行」といった設定が可能です
- Figmaでコメントを取得するアクションでは、対象としたいファイルのファイルキーを任意で設定してください
- Google スプレッドシートの各アクションでは、連携先のシートを任意で指定できます。また、追加するレコードの内容は、Figmaから取得したコメント内容や日時などの変数を自由に組み合わせることが可能です
- Figma、Google スプレッドシートのそれぞれとYoomを連携してください。
- 「同じ処理を繰り返す」オペレーション間の操作は、チームプラン・サクセスプランでのみご利用いただける機能となっております。フリープラン・ミニプランの場合は設定しているフローボットのオペレーションやデータコネクトはエラーとなりますので、ご注意ください。
- チームプランやサクセスプランなどの有料プランは、2週間の無料トライアルを行うことが可能です。無料トライアル中には制限対象のアプリや機能（オペレーション）を使用することができます。
■このテンプレートをおすすめする方
- Google Driveにアップロードされた画像の内容確認と報告を自動化したいと考えている方
- AI（Gemini）を活用して、画像解析などの定型的な業務を効率化したいマーケティングや制作担当の方
- Outlookでの報告業務を手作業で行っており、通知の漏れや遅延を防ぎたいと考えている方
■このテンプレートを使うメリット
- Google Driveへの画像アップロードを起点に、Geminiによる解析からOutlookでの通知までが自動で実行されるため、手作業での確認や報告にかかっていた時間を短縮できます。
- 手作業による画像の見落としや、報告内容の転記ミスといったヒューマンエラーを防ぎ、正確な情報共有を実現します。
■フローボットの流れ
- はじめに、Gemini、Google Drive、OutlookをYoomと連携します。
- 次に、トリガーでGoogle Driveを選択し、「特定のフォルダ内に新しくファイル・フォルダが作成されたら」というアクションを設定します。
- その後、オペレーションでGoogle Driveの「ファイルをダウンロードする」アクションを設定し、トリガーで検知したファイルをダウンロードします。
- 続いて、オペレーションでGeminiの「ファイルをアップロード」アクションと「コンテンツを生成（ファイルを利用）」アクションを設定し、ダウンロードした画像を解析します。
- 最後に、オペレーションでOutlookの「メールを送る」アクションを設定し、Geminiの解析結果を指定の宛先に通知します。
■このワークフローのカスタムポイント
- Google Driveのトリガー設定では、監視対象としたいフォルダのIDを任意で設定してください。
- Geminiで画像を解析する際、ダウンロードしたファイルを変数として設定します。また、画像からどのような情報を抽出したいかに応じて、プロンプトの内容を自由にカスタマイズすることが可能です。
- Outlookでメールを送信するアクションでは、通知先のメールアドレスや件名、本文を任意で設定できます。本文にはGeminiが生成した解析結果を変数として含めることで、動的な通知が作成できます。
■注意事項
- Gemini、Google Drive、OutlookのそれぞれとYoomを連携してください。
- トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
- プランによって最短の起動間隔が異なりますので、ご注意ください。
- ダウンロード可能なファイル容量は最大300MBまでです。アプリの仕様によっては300MB未満になる可能性があるので、ご注意ください。
- トリガー、各オペレーションでファイルを使用する際は、「ファイルの容量制限について」をご参照ください。
- Microsoft365（旧Office365）には、家庭向けプランと一般法人向けプラン（Microsoft365 Business）があり、一般法人向けプランに加入していない場合には認証に失敗する可能性があります。
AIワーカーを活用した自動化フローボット
■概要Google Driveにアップロードされる画像やPDFの内容確認と担当部署への連携に、手間を感じていませんか？このワークフローを活用することで、Google Drive内の特定フォルダに画像やPDFファイルが追加された際に、AIが自動でファイルの内容を処理し、その結果をSlackへ通知する一連の流れを自動化できます。Geminiによる画像やPDFの処理を手軽に実現し、手作業による確認や通知の手間を削減します。■このテンプレートをおすすめする方- Google Driveに集約される画像やPDFファイルの確認と仕分けに時間を要している方
- GeminiなどのAIを活用した画像やPDFの自動処理を手軽に実現したいと考えている方
- ファイル解析や情報共有の自動化を検討しており、より実践的なワークフローを探している方
■このテンプレートを使うメリット- Google Driveへのアップロードを起点に、AIによる画像・PDFの内容判別から通知までが自動化され、手作業での確認時間を削減できます
- 手動での確認時に起こりうる内容の見落としや、関係者への通知漏れといったヒューマンエラーを防ぎ、業務の正確性を高めることに繋がります
■フローボットの流れ- はじめに、Google DriveとSlackをYoomに連携します
- 次に、トリガーでGoogle Driveを選択し、「特定のフォルダ内に新しくファイル・フォルダが作成されたら」というアクションを設定します
- 最後に、オペレーションでAIワーカーを選択し、アップロードされた画像やPDFの書類判別や不備チェックを行いSlackに通知するためのマニュアル（指示）を作成します
※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション■このワークフローのカスタムポイント- Google Driveのトリガー設定では、自動化の対象としたいフォルダをIDで任意に指定してください
- AIワーカーのオペレーションでは、書類の種類を判別させたり、記載項目の有無を確認させたりするなど、AIへの指示内容を業務に合わせて自由に設定できます
- Slackの通知先のチャンネルやメンションするメンバー、通知メッセージの内容に任意で設定することが可能です
■注意事項- Google Drive、SlackのそれぞれとYoomを連携してください。AIワーカー内で使用するツール（アプリ）についてもマイアプリ連携が必要です。
- AIワーカーの基本設定は「【AIワーカー】基本的な設定方法」をご参照ください。
- AIワーカーの同時実行数・作成可能なAIワーカー数・利用可能なAIモデルはご契約中のプランによって異なります。
- AIワーカー内でご利用いただけるアプリやオペレーション等はフローボットの利用制限と同様です。
- AIワーカーは、テスト実行でも本番実行と同様にタスクを消費しますのでご注意ください。詳細は「【AIワーカー】タスク実行数の計算方法」ご参照ください。
- AIワーカーはマニュアルを詳細に設定することで適切な処理を実行しやすくなります。詳細は「【AIワーカー】マニュアルの作成方法」をご参照ください。
- トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
- プランによって最短の起動間隔が異なりますので、ご注意ください。
- ダウンロード可能なファイル容量は最大300MBまでです。アプリの仕様によっては300MB未満になる可能性があるので、ご注意ください。
- トリガー、各オペレーションでの取り扱い可能なファイル容量の詳細は「ファイルの容量制限について」をご参照ください。
■概要SNS運用やECサイト管理において、大量の商品画像の背景削除や投稿文の作成に追われていませんか？これらの手作業は積み重なると大きな負担となり、本来注力すべきクリエイティブな業務を圧迫してしまいます。このワークフローを活用すれば、Google Driveに画像を保存するだけで、AIによる背景の白抜き加工・保存からSNS投稿文の作成、Slackへの通知までを一貫して自動化できます。画像の白抜き加工や投稿文の作成を自動で行うことで、日々のルーティンワークをスムーズに完結させることが可能です。■このテンプレートをおすすめする方- ECサイトの商品登録作業において、画像の白抜き加工を効率化したいと考えている運営担当者の方
- SNS投稿の頻度が高く、魅力的な投稿文の作成と画像加工のプロセスを自動化したいSNSマーケターの方
- Google DriveやSlackを業務で活用しており、ツール間のデータ連携を自動化して転記ミスを防ぎたい方
■このテンプレートを使うメリット- Google Driveに画像をアップロードするだけで加工が完了するため、画像編集ソフトを立ち上げて作業する手間を省けます。
- AIが自動で投稿文を作成し、加工済み画像と一緒にSlackへ通知するため、チーム内での確認や投稿予約までのリードタイムを短縮できます。
■フローボットの流れ- はじめに、Google Drive、Remove.bg、SlackをYoomと連携します。
- 次に、トリガーでGoogle Driveを選択し、「特定のフォルダ内に新しくファイル・フォルダが作成されたら」というアクションを設定します。
- 次に、オペレーションでGoogle Driveを選択し、「ファイルをダウンロードする」というアクションを設定します。
- 最後に、AIワーカーのオペレーションで、Remove.bgでの背景削除と加工ファイルの保存、SNS投稿文作成、Slack通知までを行うスキル（指示）を作成ます。
※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション
■このワークフローのカスタムポイント- Google Driveのトリガー設定では、画像がアップロードされる特定のフォルダIDを指定してください。
- Remove.bgの背景除去の画像処理は、 AIワーカーの指示内容（スキル） やアクション設定によって自由にカスタマイズできます。
- AIワーカーの指示内容（スキル）を調整することで、投稿先のプラットフォームやブランドイメージに合わせた最適なトーンの文章を生成できます。
- Google Driveの保存先フォルダやSlackの通知先チャンネルは、任意のプロジェクトやチームなどを実際の運用に沿って設定してください。
■注意事項- Google Drive、Remove.bg、SlackのそれぞれとYoomを連携してください。AIワーカー内で使用するツール（アプリ）についてもマイアプリ連携が必要です。
- トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
- プランによって最短の起動間隔が異なりますので、ご注意ください。
- ダウンロード可能なファイル容量は最大300MBまでです。アプリの仕様によっては300MB未満になる可能性があるので、ご注意ください。
- トリガー、各オペレーションでの取り扱い可能なファイル容量の詳細は「ファイルの容量制限について」をご参照ください。
- AIワーカーの基本設定は「【AIワーカー】基本的な設定方法」をご参照ください。
- AIワーカーの同時実行数・作成可能なAIワーカー数・利用可能なAIモデルはご契約中のプランによって異なります。
- AIワーカー内でご利用いただけるアプリやオペレーション等はフローボットの利用制限と同様です。
- AIワーカーは、テスト実行でも本番実行と同様にタスクを消費しますのでご注意ください。詳細は「【AIワーカー】タスク実行数の計算方法」ご参照ください。
- AIワーカーはスキルを詳細に設定することで適切な処理を実行しやすくなります。詳細は「【AIワーカー】マニュアルの作成方法」をご参照ください。
- Google Driveに集約される画像やPDFファイルの確認と仕分けに時間を要している方
- GeminiなどのAIを活用した画像やPDFの自動処理を手軽に実現したいと考えている方
- ファイル解析や情報共有の自動化を検討しており、より実践的なワークフローを探している方
- Google Driveへのアップロードを起点に、AIによる画像・PDFの内容判別から通知までが自動化され、手作業での確認時間を削減できます
- 手動での確認時に起こりうる内容の見落としや、関係者への通知漏れといったヒューマンエラーを防ぎ、業務の正確性を高めることに繋がります
- はじめに、Google DriveとSlackをYoomに連携します
- 次に、トリガーでGoogle Driveを選択し、「特定のフォルダ内に新しくファイル・フォルダが作成されたら」というアクションを設定します
- 最後に、オペレーションでAIワーカーを選択し、アップロードされた画像やPDFの書類判別や不備チェックを行いSlackに通知するためのマニュアル（指示）を作成します
- Google Driveのトリガー設定では、自動化の対象としたいフォルダをIDで任意に指定してください
- AIワーカーのオペレーションでは、書類の種類を判別させたり、記載項目の有無を確認させたりするなど、AIへの指示内容を業務に合わせて自由に設定できます
- Slackの通知先のチャンネルやメンションするメンバー、通知メッセージの内容に任意で設定することが可能です
- Google Drive、SlackのそれぞれとYoomを連携してください。AIワーカー内で使用するツール（アプリ）についてもマイアプリ連携が必要です。
- AIワーカーの基本設定は「【AIワーカー】基本的な設定方法」をご参照ください。
- AIワーカーの同時実行数・作成可能なAIワーカー数・利用可能なAIモデルはご契約中のプランによって異なります。
- AIワーカー内でご利用いただけるアプリやオペレーション等はフローボットの利用制限と同様です。
- AIワーカーは、テスト実行でも本番実行と同様にタスクを消費しますのでご注意ください。詳細は「【AIワーカー】タスク実行数の計算方法」ご参照ください。
- AIワーカーはマニュアルを詳細に設定することで適切な処理を実行しやすくなります。詳細は「【AIワーカー】マニュアルの作成方法」をご参照ください。
- トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
- プランによって最短の起動間隔が異なりますので、ご注意ください。
- ダウンロード可能なファイル容量は最大300MBまでです。アプリの仕様によっては300MB未満になる可能性があるので、ご注意ください。
- トリガー、各オペレーションでの取り扱い可能なファイル容量の詳細は「ファイルの容量制限について」をご参照ください。
- ECサイトの商品登録作業において、画像の白抜き加工を効率化したいと考えている運営担当者の方
- SNS投稿の頻度が高く、魅力的な投稿文の作成と画像加工のプロセスを自動化したいSNSマーケターの方
- Google DriveやSlackを業務で活用しており、ツール間のデータ連携を自動化して転記ミスを防ぎたい方
- Google Driveに画像をアップロードするだけで加工が完了するため、画像編集ソフトを立ち上げて作業する手間を省けます。
- AIが自動で投稿文を作成し、加工済み画像と一緒にSlackへ通知するため、チーム内での確認や投稿予約までのリードタイムを短縮できます。
- はじめに、Google Drive、Remove.bg、SlackをYoomと連携します。
- 次に、トリガーでGoogle Driveを選択し、「特定のフォルダ内に新しくファイル・フォルダが作成されたら」というアクションを設定します。
- 次に、オペレーションでGoogle Driveを選択し、「ファイルをダウンロードする」というアクションを設定します。
- 最後に、AIワーカーのオペレーションで、Remove.bgでの背景削除と加工ファイルの保存、SNS投稿文作成、Slack通知までを行うスキル（指示）を作成ます。
■このワークフローのカスタムポイント
- Google Driveのトリガー設定では、画像がアップロードされる特定のフォルダIDを指定してください。
- Remove.bgの背景除去の画像処理は、 AIワーカーの指示内容（スキル） やアクション設定によって自由にカスタマイズできます。
- AIワーカーの指示内容（スキル）を調整することで、投稿先のプラットフォームやブランドイメージに合わせた最適なトーンの文章を生成できます。
- Google Driveの保存先フォルダやSlackの通知先チャンネルは、任意のプロジェクトやチームなどを実際の運用に沿って設定してください。
- Google Drive、Remove.bg、SlackのそれぞれとYoomを連携してください。AIワーカー内で使用するツール（アプリ）についてもマイアプリ連携が必要です。
- トリガーは5分、10分、15分、30分、60分の間隔で起動間隔を選択できます。
- プランによって最短の起動間隔が異なりますので、ご注意ください。
- ダウンロード可能なファイル容量は最大300MBまでです。アプリの仕様によっては300MB未満になる可能性があるので、ご注意ください。
- トリガー、各オペレーションでの取り扱い可能なファイル容量の詳細は「ファイルの容量制限について」をご参照ください。
- AIワーカーの基本設定は「【AIワーカー】基本的な設定方法」をご参照ください。
- AIワーカーの同時実行数・作成可能なAIワーカー数・利用可能なAIモデルはご契約中のプランによって異なります。
- AIワーカー内でご利用いただけるアプリやオペレーション等はフローボットの利用制限と同様です。
- AIワーカーは、テスト実行でも本番実行と同様にタスクを消費しますのでご注意ください。詳細は「【AIワーカー】タスク実行数の計算方法」ご参照ください。
- AIワーカーはスキルを詳細に設定することで適切な処理を実行しやすくなります。詳細は「【AIワーカー】マニュアルの作成方法」をご参照ください。
▼1つで10人分の働き⁉️ Yoom「AIワーカー」解説動画はこちら
🧪【Geminiで検証】Figmaの既存デザインを元にコードを制作してみた
実際にGeminiへFigmaで作成したデザインの画像を添付し、UIをどこまでコードに変換できるのかを検証しました。
なお、今回はFigma MCP serverから構造データを取得する方法ではなく、画像を入力する方法で検証しています。
検証1：複雑なUIコンポーネントのReactコード生成
まずは、ダッシュボード画面（サイドバー、ヘッダー、メインコンテンツを含む）を対象に、複雑なUIコンポーネントのReactコード生成精度を確認してみます。
検証プロンプト
添付したビジネス向けSaaSダッシュボードのUIデザインを、TypeScriptを使用したReactコンポーネントに変換してください。
アクセシビリティを考慮し、セマンティックなHTMLタグを使用してください。
## 前提条件:
・レイアウトにはFlexboxを使用してください。
・コンポーネントは/components配下に分割できる構造を意識してください（例：Sidebar.tsx、Header.tsx、DashboardLayout.tsxなど）。
・ボタンにはaria-labelなどのARIA属性を適切に付与してください。
・カードやテーブルには見出しタグ（<h1>〜<h3>）や<section>タグを適切に使ってください。
・TypeScriptの型定義（Propsの型）も併せて生成してください。
出力結果
プロンプト投稿後、わずか数秒で結果が出力。
オートレイアウトの設定がFlexboxとして正確に反映され、100%同じとは言い切れませんが、ボタンやアイコンの配置も高い精度で再現されているのがみてとれました。
特に、入れ子になったコンポーネントが適切に関数として分割されている点が優秀だと感じます。
※以下、別途生成結果をデフォルト値を入れて実行したもの
なお、再現性をできる限り高めるために、
- Dev Modeで対象フレームの 「Copy as JSON」 または 「Copy CSS」 で抽出した生のデータをプロンプトに添付する
- Figma上のアイコン（SVG）や画像コンポーネントに対し、「サイズをFigmaのノードサイズと完全に同一に固定して」などの制約プロンプトを盛り込む
といった対策を行うこともおすすめです。
総評
筆者が渡した情報はプログラムコードではなく画像だったのですが、提供されたコンテンツを適切に読み取って指示された通りのReactコードに変換してくれました！
その読解力とコード構築の精度の高さには驚きます...！
非エンジニアには難解と感じていたプログラム構築も、Geminiと連携することでハードルが下がったことを感じました。
追加でGeminiに指示すれば、コード構築も解説してくれるので、エンジニアとのコミュニケーション時にも活躍しそうです！
⚖️Figma AIとGeminiはどっちがおすすめ？
Figmaには独自のAI機能もありますが、GoogleのGeminiを併用する場合とで、どのような違いがあるのでしょうか。
目的と予算に合わせて選ぶことが重要です。
Figma AIの強み：Figma上でのデザイン生成と編集
Figma AIには、
- レイヤー名の整理
- テキストや画像の生成・編集
- プロトタイプへのインタラクション追加
- アイデアから編集可能なデザインを作成する
といった機能があります。
Figma上で生成から調整まで行いやすい点が特徴です。
Geminiの強み：コンテキストを利用したコード生成と開発支援
一方でGeminiは、デザインを「プログラム」として扱う能力に長けています。
Figmaのデザインコンテキストに加えて、状態遷移や機能要件をプロンプトで与えることで、Reactの状態管理を含むコード生成をサポートしてくれるのです。
なお、生成されたロジックが要件を満たすかは、開発者によるレビューとテストが必須であることを留意しておきましょう。
⚖️FigmaとGeminiの導入時の注意点
FigmaとGeminiを連携させる際には、システム要件やプランによる制限、そしてAI特有の精度の問題を理解しておくことが不可欠です。
これらを無視して導入を進めると、設定に時間がかかったり、思うような成果が出なかったりすることがあります。
Figmaの有料プランとシート権限の確認
GeminiとFigmaをMCPで連携する場合、Figmaの料金プランだけでなく、利用者に割り当てられている権限の種類を確認する必要があります。
確認しておきたいポイントは以下の通りです。
- MCPを利用するユーザーに適切な権限が付与されているか確認する
- デザイン情報の取得が目的の場合は、Dev seatまたはFull seatが推奨される
- Figmaファイルへの書き込み操作を行う場合は、Full seatと対象ファイルの編集権限が必要
- 権限やプランによってFigma MCP serverの利用制限が異なるため、チーム利用では事前確認が必要
特に複数人で利用する場合は、誰がどの権限を持つのか、想定する利用量に対して制限が問題にならないかを確認しておくことが重要です。
CLI操作やMCPサーバーの設定負荷
GeminiからFigmaのデータを読み取るためのMCPサーバーの設定には、コマンドラインインターフェース（CLI）での操作が必要になる場面があります。
非エンジニアにとっては難しい操作もあるので、社内のエンジニアに協力を仰ぐか、あらかじめ設定手順を分かりやすくまとめたドキュメントを用意しておくことが望ましいでしょう。
また、最新のセキュリティポリシーに適合しているかなど、システム部門との連携もスムーズな導入の鍵となります。
導入時の対応一例
AIによる出力結果の検証と修正の必要性
Geminiは非常に強力なAIですが、Figmaのデザインを完璧に理解して100%正確なコードを生成できるわけではありません。
AIが出力したコードやデザイン案をそのまま鵜呑みにせず、必ず人がレビューして微調整を行う工程をワークフローに組み込んでおく必要があります。
AIはあくまで「たたき台」を作るためのツールであると割り切り、最終的な品質責任は人間が負うというスタンスで導入を進めることが、予期せぬ不具合やデザイン崩れを防ぐ最善の方法です。
📝まとめ
GeminiとFigmaの連携は、デザインと開発の境界線を曖昧にし、クリエイティブな業務のスピードを異次元に引き上げます。
技術を使いこなすのは少しコツが必要ですが、一度環境を整えてしまえば、その見返りは非常に大きいはずです。
まずは無料の範囲から試しつつ、徐々にGeminiによる高度な自動化を取り入れてみてください。
🛠️Yoomでできること
FigmaとGeminiを駆使した業務効率化は非常に便利ですが、そこに「通知」や「タスク管理」を組み合わせることで、チーム全体のワークフローが完成します。
Yoomなら、以下のようなテンプレートを使ってすぐに自動化を始められます。
共有作業という単純作業をAIに任せることで、デザイナーはデザインに、エンジニアは開発に、それぞれの本業に100%集中できるようになるでしょう！
■概要Telegramで受けた依頼をもとに、OpenAIで画像を生成し、その結果をGoogle スプレッドシートへ手作業で記録する業務に手間を感じていませんか？この定型的な作業は、繰り返し発生するため時間がかかる上に、転記ミスなどのヒューマンエラーも起こりがちです。このワークフローを活用すれば、Telegramでのメッセージ受信をきっかけに、OpenAIによる画像の自動生成、そしてGoogle スプレッドシートへの記録までを自動化し、関連業務を効率化できます。■このテンプレートをおすすめする方- Telegramの指示に基づきOpenAIで画像を生成し、その成果物を手作業で記録している方
- 画像生成のリクエスト管理と成果物の記録を効率化し、チームの生産性を向上させたい方
- 複数のツールを横断した作業が多く、手入力によるミスや情報の記録漏れをなくしたい方
■このテンプレートを使うメリット- Telegramでのメッセージ受信からOpenAIでの画像生成、Google スプレッドシートへの記録までが自動化され、手作業に費やしていた時間を短縮できます
- 手作業によるプロンプトの入力ミスや、生成された画像のURLといった情報の記録漏れなどのヒューマンエラーを防ぐことに繋がります
■フローボットの流れ- はじめに、Google スプレッドシート、OpenAI、TelegramをYoomと連携します
- 次に、トリガーでTelegramを選択し、「ボットがメッセージを受け取ったら」というアクションを設定します
- 次に、オペレーションでOpenAIを選択し、「テキストから画像を生成する」アクションを設定します
- 次に、オペレーションでGoogle スプレッドシートを選択し、「レコードを追加する」アクションを設定し、生成した画像のURLなどの情報を指定のシートに記録します
- 最後に、オペレーションでTelegramを選択し、「メッセージを送信」アクションを設定し、処理が完了した旨を通知します
※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション■このワークフローのカスタムポイント- OpenAIで画像を生成する際のプロンプトは自由にカスタマイズが可能です。トリガーで受け取ったTelegramのメッセージ内容を変数として設定できます
- Google スプレッドシートへの記録では、書き込み対象のスプレッドシート、シート、テーブル範囲などを任意で指定できます
- Telegramへの完了通知では、送信先のチャンネルを自由に設定できるほか、本文に固定のテキストを入力したり、前のステップで取得した画像のURLなどの情報を変数として埋め込んだりすることが可能です
■注意事項- Telegram、OpenAI、Google スプレッドシートのそれぞれとYoomを連携してください
- OpenAIのアクションを実行するには、OpenAIのAPI有料プランの契約が必要です。（APIが使用されたときに支払いができる状態）
- OpenAI のAPI利用はAPI疎通時のトークンにより従量課金される仕組みとなっています。そのため、API使用時にお支払いが行える状況でない場合エラーが発生しますのでご注意ください。
■概要UIデザインの改善において、ユーザビリティテストは重要な工程ですが、その準備や実施には多くの時間と手間がかかるものです。このワークフローは、BoxにUI画像をアップロードするだけで、AIエージェント（AIワーカー）が自動でユーザビリティテストを実施し、課題と改善案をGoogle スプレッドシートに記録するため、こうしたプロセスを効率化できます。手作業で行っていたテストを自動化し、より迅速なサービス改善に繋げることが可能です。■このテンプレートをおすすめする方- AIエージェントを活用したユーザビリティテストの自動化に関心があるUI/UXデザイナーの方
- プロダクトの改善サイクルを高速化したいプロダクトマネージャーや開発チームのリーダーの方
- ユーザビリティテストの属人化を防ぎ、客観的なフィードバックを効率的に収集したい方
■このテンプレートを使うメリット- BoxにUI画像をアップロードするだけでテストが実行されるため、手動でのテスト準備や実施に費やしていた時間を削減し、コア業務に集中できます。
- AIが設定された指示に基づきテストを行うことで、担当者による評価のばらつきを防ぎ、ユーザビリティテストの品質を標準化することが可能です。
■フローボットの流れ- はじめに、BoxとGoogle スプレッドシートをYoomと連携します。
- 次に、トリガーでBoxを選択し、「フォルダにファイルがアップロードされたら」というアクションを設定します。
- 次に、オペレーションでBoxの「ファイルをダウンロード」アクションを設定し、アップロードされたUI画像ファイルを取得します。
- 最後に、オペレーションでAIワーカーを設定し、ダウンロードしたUI画像に対してユーザビリティテストを実施して課題と改善案を立案しGoogle スプレッドシートに記載するためのマニュアル（指示）を作成します。
※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション
■このワークフローのカスタムポイント- Boxのトリガー設定では、テスト対象のUI画像をアップロードするフォルダのIDを任意で設定してください。
- AIワーカーのオペレーション設定では、ユーザビリティテストの評価項目や重視する観点など、AIへの指示内容を任意で設定することが可能です。
■注意事項- Box、Google スプレッドシートのそれぞれとYoomを連携してください。AIワーカー内で使用するツール（アプリ）についてもマイアプリ連携が必要です。
- AIワーカーの基本設定は「【AIワーカー】基本的な設定方法」をご参照ください。
- AIワーカーの同時実行数・作成可能なAIワーカー数・利用可能なAIモデルはご契約中のプランによって異なります。
- AIワーカー内でご利用いただけるアプリやオペレーション等はフローボットの利用制限と同様です。
- AIワーカーは、テスト実行でも本番実行と同様にタスクを消費しますのでご注意ください。詳細は「【AIワーカー】タスク実行数の計算方法」ご参照ください。
- AIワーカーはマニュアルを詳細に設定することで適切な処理を実行しやすくなります。詳細は「【AIワーカー】マニュアルの作成方法」をご参照ください。
- ダウンロード可能なファイル容量は最大300MBまでです。アプリの仕様によっては300MB未満になる可能性があるので、ご注意ください。
- トリガー、各オペレーションでの取り扱い可能なファイル容量の詳細は「ファイルの容量制限について」をご参照ください。
■概要画像生成AIの活用において、プロンプトの考案や生成画像の商用利用可否の確認といった作業に時間を要していませんか？ このワークフローを活用すれば、フォームにテーマを送信するだけで、AIエージェント（AIワーカー）が自律的にプロンプトを生成し、画像を作成、さらに商用利用の可否まで判定して通知します。属人化しがちなクリエイティブ業務を標準化し、手軽に質の高い画像を生成できる体制を構築できます。■このテンプレートをおすすめする方- AIエージェントを活用して、WebサイトやSNS投稿用の画像生成を効率化したいマーケティング担当者の方
- チームからの画像生成依頼をフォームで受け付け、制作プロセスを自動化したいと考えている方
- 画像生成AIのプロンプト考案や商用利用の確認作業を自動化し、属人化を解消したい方
■このテンプレートを使うメリット- フォーム送信を起点に画像生成から商用利用の判定、通知までが自動処理されるため、手作業の時間を短縮できます
- AIエージェント（AIワーカー） がプロンプト作成などを担うため、担当者のスキルに依存しない標準化された画像生成フローが構築できます
■フローボットの流れ- はじめに、OpenAIとDiscordをYoomと連携します
- 次に、トリガーでフォームトリガーを選択し、画像生成のテーマや要望を受け付けるためのフォームを設定します
- 最後に、オペレーションでAIワーカーを設定し、フォームで受け取った内容をもとに画像生成用のプロンプトを作成し、商用利用の可否を判定した上で、生成された画像と判定結果をDiscordに通知するための指示を作成します
※「トリガー」：フロー起動のきっかけとなるアクション、「オペレーション」：トリガー起動後、フロー内で処理を行うアクション
■このワークフローのカスタムポイント- トリガーとして設定するフォームでは、画像生成の依頼で受け付けたい内容に合わせて、質問項目を任意で設定することが可能です
- AIワーカーに与える指示の内容は、生成したい画像のスタイルなどに合わせて変更できます。また、通知先のDiscordアカウントやチャンネルも任意で設定可能です
■注意事項- OpenAI、DiscordのそれぞれとYoomを連携してください。AIワーカー内で使用するツール（アプリ）についてもマイアプリ連携が必要です。
- OpenAIのアクションを実行するには、OpenAIのAPI有料プランの契約が必要です。（APIが使用されたときに支払いができる状態）
- 詳しくはOpenAIの「API料金」ページをご確認ください。
- OpenAIのAPIはAPI疎通時のトークンにより従量課金される仕組みとなっています。そのため、API使用時にお支払いが行える状況でない場合エラーが発生しますのでご注意ください。
- AIワーカーの基本設定は「【AIワーカー】基本的な設定方法」をご参照ください。
- AIワーカーの同時実行数・作成可能なAIワーカー数・利用可能なAIモデルはご契約中のプランによって異なります。
- AIワーカー内でご利用いただけるアプリやオペレーション等はフローボットの利用制限と同様です。
- AIワーカーは、テスト実行でも本番実行と同様にタスクを消費しますのでご注意ください。詳細は「【AIワーカー】タスク実行数の計算方法」ご参照ください。
- AIワーカーはマニュアルを詳細に設定することで適切な処理を実行しやすくなります。詳細は「【AIワーカー】マニュアルの作成方法」をご参照ください。
- Telegramの指示に基づきOpenAIで画像を生成し、その成果物を手作業で記録している方
- 画像生成のリクエスト管理と成果物の記録を効率化し、チームの生産性を向上させたい方
- 複数のツールを横断した作業が多く、手入力によるミスや情報の記録漏れをなくしたい方
- Telegramでのメッセージ受信からOpenAIでの画像生成、Google スプレッドシートへの記録までが自動化され、手作業に費やしていた時間を短縮できます
- 手作業によるプロンプトの入力ミスや、生成された画像のURLといった情報の記録漏れなどのヒューマンエラーを防ぐことに繋がります
- はじめに、Google スプレッドシート、OpenAI、TelegramをYoomと連携します
- 次に、トリガーでTelegramを選択し、「ボットがメッセージを受け取ったら」というアクションを設定します
- 次に、オペレーションでOpenAIを選択し、「テキストから画像を生成する」アクションを設定します
- 次に、オペレーションでGoogle スプレッドシートを選択し、「レコードを追加する」アクションを設定し、生成した画像のURLなどの情報を指定のシートに記録します
- 最後に、オペレーションでTelegramを選択し、「メッセージを送信」アクションを設定し、処理が完了した旨を通知します
- OpenAIで画像を生成する際のプロンプトは自由にカスタマイズが可能です。トリガーで受け取ったTelegramのメッセージ内容を変数として設定できます
- Google スプレッドシートへの記録では、書き込み対象のスプレッドシート、シート、テーブル範囲などを任意で指定できます
- Telegramへの完了通知では、送信先のチャンネルを自由に設定できるほか、本文に固定のテキストを入力したり、前のステップで取得した画像のURLなどの情報を変数として埋め込んだりすることが可能です
- Telegram、OpenAI、Google スプレッドシートのそれぞれとYoomを連携してください
- OpenAIのアクションを実行するには、OpenAIのAPI有料プランの契約が必要です。（APIが使用されたときに支払いができる状態）
- OpenAI のAPI利用はAPI疎通時のトークンにより従量課金される仕組みとなっています。そのため、API使用時にお支払いが行える状況でない場合エラーが発生しますのでご注意ください。
- AIエージェントを活用したユーザビリティテストの自動化に関心があるUI/UXデザイナーの方
- プロダクトの改善サイクルを高速化したいプロダクトマネージャーや開発チームのリーダーの方
- ユーザビリティテストの属人化を防ぎ、客観的なフィードバックを効率的に収集したい方
- BoxにUI画像をアップロードするだけでテストが実行されるため、手動でのテスト準備や実施に費やしていた時間を削減し、コア業務に集中できます。
- AIが設定された指示に基づきテストを行うことで、担当者による評価のばらつきを防ぎ、ユーザビリティテストの品質を標準化することが可能です。
- はじめに、BoxとGoogle スプレッドシートをYoomと連携します。
- 次に、トリガーでBoxを選択し、「フォルダにファイルがアップロードされたら」というアクションを設定します。
- 次に、オペレーションでBoxの「ファイルをダウンロード」アクションを設定し、アップロードされたUI画像ファイルを取得します。
- 最後に、オペレーションでAIワーカーを設定し、ダウンロードしたUI画像に対してユーザビリティテストを実施して課題と改善案を立案しGoogle スプレッドシートに記載するためのマニュアル（指示）を作成します。
■このワークフローのカスタムポイント
- Boxのトリガー設定では、テスト対象のUI画像をアップロードするフォルダのIDを任意で設定してください。
- AIワーカーのオペレーション設定では、ユーザビリティテストの評価項目や重視する観点など、AIへの指示内容を任意で設定することが可能です。
- Box、Google スプレッドシートのそれぞれとYoomを連携してください。AIワーカー内で使用するツール（アプリ）についてもマイアプリ連携が必要です。
- AIワーカーの基本設定は「【AIワーカー】基本的な設定方法」をご参照ください。
- AIワーカーの同時実行数・作成可能なAIワーカー数・利用可能なAIモデルはご契約中のプランによって異なります。
- AIワーカー内でご利用いただけるアプリやオペレーション等はフローボットの利用制限と同様です。
- AIワーカーは、テスト実行でも本番実行と同様にタスクを消費しますのでご注意ください。詳細は「【AIワーカー】タスク実行数の計算方法」ご参照ください。
- AIワーカーはマニュアルを詳細に設定することで適切な処理を実行しやすくなります。詳細は「【AIワーカー】マニュアルの作成方法」をご参照ください。
- ダウンロード可能なファイル容量は最大300MBまでです。アプリの仕様によっては300MB未満になる可能性があるので、ご注意ください。
- トリガー、各オペレーションでの取り扱い可能なファイル容量の詳細は「ファイルの容量制限について」をご参照ください。
- AIエージェントを活用して、WebサイトやSNS投稿用の画像生成を効率化したいマーケティング担当者の方
- チームからの画像生成依頼をフォームで受け付け、制作プロセスを自動化したいと考えている方
- 画像生成AIのプロンプト考案や商用利用の確認作業を自動化し、属人化を解消したい方
- フォーム送信を起点に画像生成から商用利用の判定、通知までが自動処理されるため、手作業の時間を短縮できます
- AIエージェント（AIワーカー） がプロンプト作成などを担うため、担当者のスキルに依存しない標準化された画像生成フローが構築できます
- はじめに、OpenAIとDiscordをYoomと連携します
- 次に、トリガーでフォームトリガーを選択し、画像生成のテーマや要望を受け付けるためのフォームを設定します
- 最後に、オペレーションでAIワーカーを設定し、フォームで受け取った内容をもとに画像生成用のプロンプトを作成し、商用利用の可否を判定した上で、生成された画像と判定結果をDiscordに通知するための指示を作成します
■このワークフローのカスタムポイント
- トリガーとして設定するフォームでは、画像生成の依頼で受け付けたい内容に合わせて、質問項目を任意で設定することが可能です
- AIワーカーに与える指示の内容は、生成したい画像のスタイルなどに合わせて変更できます。また、通知先のDiscordアカウントやチャンネルも任意で設定可能です
- OpenAI、DiscordのそれぞれとYoomを連携してください。AIワーカー内で使用するツール（アプリ）についてもマイアプリ連携が必要です。
- OpenAIのアクションを実行するには、OpenAIのAPI有料プランの契約が必要です。（APIが使用されたときに支払いができる状態）
- 詳しくはOpenAIの「API料金」ページをご確認ください。
- OpenAIのAPIはAPI疎通時のトークンにより従量課金される仕組みとなっています。そのため、API使用時にお支払いが行える状況でない場合エラーが発生しますのでご注意ください。
- AIワーカーの基本設定は「【AIワーカー】基本的な設定方法」をご参照ください。
- AIワーカーの同時実行数・作成可能なAIワーカー数・利用可能なAIモデルはご契約中のプランによって異なります。
- AIワーカー内でご利用いただけるアプリやオペレーション等はフローボットの利用制限と同様です。
- AIワーカーは、テスト実行でも本番実行と同様にタスクを消費しますのでご注意ください。詳細は「【AIワーカー】タスク実行数の計算方法」ご参照ください。
- AIワーカーはマニュアルを詳細に設定することで適切な処理を実行しやすくなります。詳細は「【AIワーカー】マニュアルの作成方法」をご参照ください。
出典1：Gemini/出典2：figma/出典3：Figma for VS Code
プログラミング知識なしで手軽に構築できます。
