Figma

Figma AI(Make)実務ガイド:画像生成・編集と運用

ⓘ本ページはプロモーションが含まれています

お得なお知らせ

スポンサードリンク
デザイン本が読み放題

Figma・UI/UX・配色の深いノウハウを

動画・記事の断片情報より、1冊の体系書籍のほうが圧倒的に速い。Kindle Unlimited対象のデザイン書籍が豊富です。

Kindle Unlimited 30日無料▶ Audible|デザイン発想本を耳で▶

▶ デザイン→エンジニアリングの橋渡しに興味があれば プログラミング / エンジニア転職 もどうぞ。


タイプ別にすぐ選べる

クリエイティブの引き出し、どう増やす?

Figma・UI/UX・配色・タイポグラフィ。"手を動かす"学びと"発想力を磨く"学びは、使うサブスクが違います。

▷ Figma・UI/UX・配色の具体テクニックを体系化したい実務デザイナー

Kindle Unlimited 30日無料|デザイン本読み放題▶

▷ ブランド・発想・ディレクション系のインプットを"耳で"増やしたい人

オーディオブックAudible

※無料期間中の解約で料金発生なし

▶ デザイン→エンジニアリングの橋渡しに興味があれば プログラミング / エンジニア転職 もどうぞ。


スポンサードリンク

Figma AI(Make)クイックスタート(急ぎの方向け)

前提:編集権限があり、対象ファイルを複製して非破壊で作業できる状態で始めてください。

  • 元ファイル/画像を複製する(Cmd/Ctrl + D)。オリジナルは保存します。
  • 画像を選択→右クリック→Actions→「画像を編集」(英: Right‑click → Actions → Edit image)。
  • マスクやブラシで編集領域を指定し、プロンプトを入力して生成。候補を比較して選択する。
  • フレームに新規生成する場合はフレームを作成→Fillパネル→Image Fill→AI生成(英: Fill → Image → Generate)。
  • 適用は「置換」または「新規レイヤー追加」で慎重に行う。問題があれば元に戻せるようにバージョンを保持する。
  • 最終出力は用途に合わせてPNG/JPEG/WebPで書き出す(1x/2xなどを用意)。

操作ラベルはローカライズやバージョンで変わるため、画面に表示される英語表記の例(Actions / Edit image / Fill)を確認してください。公式ヘルプも必ず参照してください(参照: https://help.figma.com/hc/ja/articles/24004542669463-AI%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%9F%E7%94%BB%E5%83%8F%E3%81%AE%E4%BD%9C%E6%88%90%E3%81%BE%E3%81%9F%E3%81%AF%E7%B7%A8%E9%9B%86、取得日: 2026-04-30)。


Figma AI(Make)の概要・主な機能と注意点

Figma AI(Make)はテキストプロンプトで画像を生成・編集できる機能群です。デザイン作業をワークスペース内で完結させられますが、ラスタ画像主体である点に注意が必要です。

主な機能(用途と留意点):

  • 画像生成(フレーム/シェイプへ直接生成)
  • 用途:ヒーロー背景、バナー、プレイスホルダー。
  • 留意点:生成はラスタ画像。ベクター編集不可。フレームのピクセルサイズが出力解像度を決めます。

  • 既存画像の部分編集(inpainting)

  • 用途:不要物の除去、被写体追加。
  • 留意点:マスク精度が結果に直結。複雑な整合は手動補正が必要です。

  • 背景除去(透過出力)

  • 用途:ECの切り抜き、合成素材。
  • 留意点:エッジ処理や影は別レイヤーで作ると柔軟性が増します。

  • 解像度改善(アップスケール/ノイズ除去)

  • 用途:軽微な鮮明化やWeb用途への調整。
  • 留意点:大幅な拡大はアーティファクトを生むため注意。

  • Fill(フレーム/シェイプへの画像塗り込み)とマテリアライズ

  • 用途:UI背景やカード画像の自動配置。
  • 留意点:Fillはビットマップとして管理され、個別ピクセル編集にはマテリアライズ(エクスポート→再インポート)が必要です。

重要:UI表記や提供プラン、利用規約は更新される可能性があります。公式ページを確認してください(参照: https://help.figma.com/hc/ja/articles/24004542669463-AI%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%9F%E7%94%BB%E5%83%8F%E3%81%AE%E4%BD%9C%E6%88%90%E3%81%BE%E3%81%9F%E3%81%AF%E7%B7%A8%E9%9B%86、取得日: 2026-04-30)。


導入準備:プラン・権限・法務・ログ管理

運用前に以下を確認・整備してください。重複する注意点はここにまとめています。

  • プランと利用条件の確認
  • AI機能利用の可否、商用利用ルール、利用枠はプランで異なる可能性があります。Figmaの利用規約と料金ページを確認してください(参照: https://www.figma.com/terms/、取得日: 2026-04-30)。

  • 編集権限とチーム設定

  • 編集が必要なユーザーに「Can edit」(英: Can edit)権限を付与。管理者はAI利用ポリシーを策定し、承認者を明確にします。

  • 法務チェック(必須手順)

  • アップロード画像の権利(被写体の肖像権・商標権)を確認します。
  • 生成物の帰属と商用利用可否はモデルやFigmaの規約に依存します。法務の事前承認を必須としてください。
  • 推奨フロー(例):生成物とプロンプトのログ提出→法務チェック→承認記録を保存。

  • ログとメタデータ管理

  • 保存項目:プロンプト、適用候補、適用者、ファイル名、日時。問題発生時に追跡できるようにします。

  • 環境・回避策

  • デスクトップアプリと主要ブラウザ(Chrome/Edge等)の最新版を推奨。拡張機能や企業ネットワーク制限で動作が変わる場合があります。

  • データ利用の確認

  • アップロードした画像や生成データが学習用途に使われるかはサービス契約とプライバシーポリシー次第です。Figmaのプライバシーページを確認し、必要なら法務に確認してください(参照: https://www.figma.com/privacy/、取得日: 2026-04-30)。

基本操作と非破壊ワークフロー(日本語/英語UI併記)

操作は短いステップでまとめ、英語UI表記を併記します。表示差がある点に注意してください。

既存画像の編集(短手順)

  • 元画像を複製(Cmd/Ctrl + D)。
  • 複製レイヤーを選択→右クリック→Actions→「画像を編集」(英: Edit image)。
  • マスク/ブラシで編集領域を指定。
  • プロンプトを入力して生成。候補を比較して選ぶ。
  • 選んだ候補を「置換」または「新規追加」で適用。元素材は保持する。

メニュー例(表記の一例)
右クリック → Actions → 画像を編集(英: Right‑click → Actions → Edit image)

フレーム/シェイプへの生成(Fill)

  • バナー用フレームを作成(例: 1920×720 px)。
  • Fillパネルを開き、Image Fillを選択→AI生成(英: Fill → Image → Generate)。
  • プロンプトに構図やネガティブ指定を入れる(例: 「文字を含めない」)。
  • 生成後、Fit/Fill/Cropで調整。必要ならinpaintingで局所修正。

注意:アスペクト比と解像度はフレームサイズで決まります。

マテリアライズと非破壊運用

  • Fillをピクセル編集したい場合は、該当レイヤーをエクスポートして再インポートし、ラスタ画像として扱います。
  • 命名規則例:ファイル名_original.png/ファイル名_generated_v1.png。
  • 実験は別ページまたは別ファイルで行い、バージョン履歴を残します。

ローカライズ/ブラウザ差と英語表記

  • UIラベルは言語設定で変わります(例:「画像を編集」="Edit image")。
  • ブラウザ版で問題が出る場合はデスクトップアプリで試すと解決することが多いです。
  • 表示差がある操作はスクリーンの英語表記を併記して運用ルールに残してください。

プロンプト・出力設定、品質とトラブルシューティング(Web/印刷/モバイル別)

生成パラメータと出力品質、よくある問題への対処をまとめます。UIで設定できる項目は変更される可能性がありますので、実際の画面表示を併せて確認してください(参照: https://help.figma.com/hc/ja/articles/24004542669463-AI%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%9F%E7%94%BB%E5%83%8F%E3%81%AE%E4%BD%9C%E6%88%90%E3%81%BE%E3%81%9F%E3%81%AF%E7%B7%A8%E9%9B%86、取得日: 2026-04-30)。

UIで見られる代表的な生成パラメータ(例)

  • 候補数(Variants/Number of candidates)
  • アップスケール(Upscale)やノイズ除去(Denoise)設定(存在する場合)
  • アスペクト比:フレームサイズで管理(frame width × height)
  • ネガティブプロンプト(除外指示)
  • シード(再現性):UIで指定できない場合があるため、完全再現は保証されない

実務上はフレームサイズを固定し、プロンプトと生成候補を記録して比較する方法が再現性を高めます。

プロンプト雛形(用途別)と推奨設定例

  • EC商品(切り抜き)
  • プロンプト例:高解像度の白背景商品写真。被写体中央、実物に忠実な色味、柔らかいシャドウ。文字やロゴを含めない。
  • 推奨フレーム:800〜2000 px(被写体に合わせ調整)。候補数: 3〜5。

  • マーケティングバナー(ヒーロー)

  • プロンプト例:横長ヒーローバナー背景。右側にテキスト領域を確保し、暖色系の自然光で主題を控えめに配置。
  • 推奨フレーム:1920×720 px。候補数: 4。

  • サムネイル/SNS

  • プロンプト例:高コントラストで視認性重視、主要被写体を大きく配置。文字は含めない。
  • 推奨フレーム:1200×628 px または 1:1。候補数: 3〜6。

注意:UI上での「アップスケール」や「シード」指定の有無は環境により異なります。可能なら候補数を増やして比較する運用を組んでください。

出力品質とアクセシビリティ(実務指針)

  • カラープロファイル:WebはsRGB推奨。印刷はCMYK変換が必要。
  • DPI/解像度:Webはピクセルベースで管理(Retina対応に2xを用意)。印刷は最終出力で300 DPI相当のピクセル数を確保。
  • ファイル形式:PNG(透過)/JPEG(写真、品質80〜90)/WebP(Web最適化)。SVGはベクター専用。
  • アクセシビリティ:テキスト重ねの場合はコントラスト比を確保(通常テキストで4.5:1以上が目安)。画像には代替テキストを付与し、125文字程度で要点を説明する運用を推奨。
  • 色差や明度差はデバイスで変わるため、代表的なデバイスでの表示確認を必ず行ってください。

推奨ファイル設定(例):

形式 用途 推奨設定
PNG UIアセット・透過 sRGB、必要なピクセル寸法、1x/2x
JPEG 写真系の配布 sRGB、品質80〜90、必要ピクセル数
WebP Web最適化 sRGB、可逆/非可逆選択

(表は例示です。実際の仕様は配布先に合わせて調整してください)

よくあるトラブルと対処(FAQ形式)

Q. Actions(画像を編集)が表示されない。
A. 編集権限を確認。ブラウザ版で問題が出たらデスクトップアプリで試す。ネットワークや拡張機能、キャッシュの影響も疑います。

Q. 生成画質が低い/アーティファクトが出る。
A. 大きめのフレームで生成してから必要なサイズに切る。段階的にアップスケールするか、専用のアップスケーラーツール併用を検討。

Q. 背景除去のエッジがギザギザになる。
A. マスク境界をソフト化したり、境界を手動で塗り直す。影は別レイヤーで追加すると自然に見えます。

Q. アップロード画像はモデルの学習に使われる?
A. 使用可否はサービス規約とプライバシーポリシーに依存します。必ずFigmaの該当ページを確認し、法務と合意を取ってください(参照: https://www.figma.com/privacy/、取得日: 2026-04-30)。

Q. 生成物の商用利用や権利はどう管理すべきか。
A. モデルやプラットフォームのライセンスに依存します。商用で使う場合は法務承認を必須化し、使用記録を残してください。

Q. 同じプロンプトで同じ結果を得られない。
A. モデルのランダムネスやシードの指定可否によります。フレームサイズと詳細なプロンプトを固定し、候補を複数生成して比較する運用が現実的です。


まとめ(Figma AI(Make)運用の要点)

Figma AI(Make)はワークスペース内で画像生成と部分編集を効率化しますが、非破壊運用と法務チェックが必須です。操作はフレームサイズとプロンプトの設計で再現性が高まります。出力は用途に応じた色空間・DPI・ファイル形式で管理し、生成ログと承認フローを整備してください。

参考(公式確認先):

  • Figma ヘルプ「AIを使用した画像の作成または編集」: https://help.figma.com/hc/ja/articles/24004542669463-AI%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%9F%E7%94%BB%E5%83%8F%E3%81%AE%E4%BD%9C%E6%88%90%E3%81%BE%E3%81%9F%E3%81%AF%E7%B7%A8%E9%9B%86(取得日: 2026-04-30)
  • Figma 利用規約(Terms): https://www.figma.com/terms/(取得日: 2026-04-30)
  • Figma プライバシーポリシー: https://www.figma.com/privacy/(取得日: 2026-04-30)

各リンク先の表記や機能は更新される可能性があります。重要な運用ルールや商用利用の可否は必ず最新の公式ドキュメントと法務判断で最終確認してください。

スポンサードリンク

お得なお知らせ

スポンサードリンク
デザイン本が読み放題

Figma・UI/UX・配色の深いノウハウを

動画・記事の断片情報より、1冊の体系書籍のほうが圧倒的に速い。Kindle Unlimited対象のデザイン書籍が豊富です。

Kindle Unlimited 30日無料▶ Audible|デザイン発想本を耳で▶

▶ デザイン→エンジニアリングの橋渡しに興味があれば プログラミング / エンジニア転職 もどうぞ。


タイプ別にすぐ選べる

クリエイティブの引き出し、どう増やす?

Figma・UI/UX・配色・タイポグラフィ。"手を動かす"学びと"発想力を磨く"学びは、使うサブスクが違います。

▷ Figma・UI/UX・配色の具体テクニックを体系化したい実務デザイナー

Kindle Unlimited 30日無料|デザイン本読み放題▶

▷ ブランド・発想・ディレクション系のインプットを"耳で"増やしたい人

オーディオブックAudible

※無料期間中の解約で料金発生なし

▶ デザイン→エンジニアリングの橋渡しに興味があれば プログラミング / エンジニア転職 もどうぞ。


-Figma