東京都府中市、神田のWeb制作会社Maromaroのブログです

2026.08.17

# Webデザイン

FigmaのAI画像編集はPhotoshopの代わりになる?同じ画像で比較してみた!

こんにちは。MaromaroのChieです。

Webデザインで写真を使っていると、

「この小物だけ消したい!」
「人物だけきれいに切り抜きたい!」
「横長のバナーにしたいのに、写真の幅が足りない!」

……なんてこと、ありますよね。

これまでは、そんな画像編集が必要になるたびにFigmaからPhotoshopへ移動し、画像を修正して、書き出して、またFigmaに戻す、という流れが一般的でした。

ところがFigmaにも、AIを使って画像を編集できる機能が増えています。不要なものを消す、背景を削除する、画像の外側を生成して広げる、といった作業をFigma上で行えるようになっています。私自身は画像加工はPhotoshopでしょ!って思っていてなかなか手を出していなかったのですが、かなり良くなってきていると耳にすることもちらほら。

そこで今回は、「FigmaのAI画像編集はPhotoshopの代わりになるのか?」を確かめるため、同じ写真を使って3つの画像編集を比較してみます!

FigmaでできるAI画像編集

Figmaでは、画像を選択すると表示される画像編集メニューから、AIを使ったさまざまな操作ができます。

主な機能は次のとおりです。

– Erase object:選択した不要物を消す
– Isolate object:選択した対象を新しい画像レイヤーとして分離する
– Remove background:画像の背景を削除する
– Expand image:AIで画像の外側を生成して広げる
– Boost resolution:画像の解像感を高める
– Edit with prompt:文章で指示して画像を編集する

画像を別のアプリで開かなくても、デザインの中で大きさや周囲とのバランスを見ながら修正できるのが便利そうです。

なお、FigmaのAI機能は利用できるプランや権限に条件があり、AIクレジットを使用する機能もあります。画面に機能が表示されない場合は、契約プラン、編集権限、ワークスペースのAI設定を確認してみてください。

今回の比較方法

今回は1枚の写真を使い、FigmaとPhotoshopで次の3つを試します。

1. 写真の不要物を消す
2. 被写体の背景を削除する
3. AIで写真の外側を広げる

比較するポイントは、「操作の簡単さ・処理時間・仕上がり・修正のしやすさ」の4つです。

使用した環境

– Figma:デスクトップ版
– Photoshop:Phthoshop 2026
– 使用端末:Mac
※AI機能は更新されることがあるため、同じ写真や同じ操作でも結果が異なる場合があります。

比較1:写真の不要物を消してみる

最初は、写真に写り込んだ「虫眼鏡」を消してみます。

Figmaの場合

Figmaでは写真を選択し、画像編集メニューから「Select area/領域を選択」を選びます。消したいものを囲み、「Erase/消去」を実行します。

細かな輪郭をぴったりなぞるというより、消したい対象を大まかに囲むだけなので、操作はとてもシンプルです。

画像:Figmaで虫眼鏡を選択

画像:Figmaで削除した結果

所要時間:10秒

結果:ざっくり囲んだだけでAIが消したい対象を判断してくれるので簡単

Photoshopの場合

Photoshopでは「削除ツール」を使い、消したいものの上をブラシでなぞる、または周囲を囲みます。生成AIを使うかどうかも選択できます。

ブラシサイズを変えたり、複数回に分けて処理したりできるため、結果を見ながら細かく調整できます。

画像:Photoshopで虫眼鏡を選択

画像:Photoshopで削除した結果

所要時間:20秒

結果:今回はFigmaと同じ条件で選択ツール→AIによる塗りつぶしをしてみました。
気持ちFigmaのほうが生成スピードは早い印象。

不要物削除の比較結果

Figmaは操作が少なく、背景が比較的シンプルな写真なら短時間で自然に仕上げられました。一方、境界付近や複雑な模様を細かく整えたい場合は、ブラシやレイヤーを使って調整できるPhotoshopのほうが扱いやすいかもしれません。

比較2:被写体の背景を削除してみる

次は、写真から「背景」だけを切り抜きます。

Figmaの場合

写真を選択し、「Remove background/背景を削除」を実行します。基本的にはボタンを押して待つだけです。

画像:Figmaで背景を削除する前

画像:Figmaで背景を削除した後

所要時間:6秒

結果:輪郭や髪の毛の先などもしっかり切り抜けている印象。
ボタンひとつで背景を削除し、そのままバナーやWebページのデザインに配置できるのは大きなメリットです。

Photoshopの場合

Photoshopでも「背景を削除」や「被写体を選択」を使えば、自動で被写体を認識できます。さらに「選択とマスク」で、髪の毛などの複雑な境界を調整できます。

画像:Photoshopで背景を削除

【画像:「背景選択」→削除】

所要時間:1枚目/1秒、2枚目/6秒

結果:1枚目は背景を自動判定して削除してもらったのですが、残しておきたいテーブルなども削除されてしまいました。
人物だけをしっかりと残してくれた様子です。これは指示の仕方により変わると思います。
2枚目は、背景を手動で選択し、削除したのですが違う背景になってしまいました。

背景削除の比較結果

Webサイトに表示する画像であれば、Figmaの背景削除でも十分使えそうです。
今回はFigmaと同等の作業で検証しているためPhotoshopの真価を表現できていないのですが、髪の毛や半透明の素材など、輪郭の精度が求められる画像ではやはりPhotoshopの調整機能が頼るのではないかと思います。

比較3:AIで写真の外側を広げてみる

最後は、縦長または正方形の写真を、Webサイトのメインビジュアルで使いやすい横長サイズへ広げてみます。

Figmaの場合

画像を選択し、画像編集メニューの「Expand」を選びます。青いハンドルをドラッグして広げたい範囲を指定すると、AIが写真の続きを生成します。

画像:Figmaで拡張範囲を指定

画像:Figmaで横方向へ拡張した結果

所要時間:13秒

結果:元の画像に影響なく、自然な形で背景をつなげて椅子も用意してくれました。
実際のデザイン上で必要な比率まで広げられるため、「文字を置くスペースをもう少し増やしたい」という場面に向いています。

Photoshopの場合

Photoshopではカンバスを広げ、生成拡張を使って足りない部分を補います。生成された複数の候補を比較し、必要に応じてプロンプトを入力したり、部分的に生成し直したりできます。

画像:Photoshopで拡張範囲を指定している画面

画像:Photoshopで横方向へ拡張した結果

所要時間:15秒

結果:椅子でなく、観葉植物を足してくれたようです。Phot0shopは候補選択を出してくれるので、一番イメージにあったものを選択することが可能です。また再生成も簡単にできます。

画像拡張の比較結果

どちらも短時間で横長画像を作れました。Figmaはデザインのフレームに合わせてその場で試せる手軽さが魅力です。Photoshopは生成結果を見比べながら部分的に修正しやすく、完成画像を細かく仕上げたい場合に向いていると感じました。

FigmaとPhotoshopを比べてみた結果

比較項目 Figma Photoshop
操作の手軽さ ◎ 少ない操作で完結 ○ 選択肢が多い
不要物の削除 ◎ シンプルな背景なら簡単な修正に便利 ◎ 細かな再調整ができる
背景の削除 ◎ ラフや小さな画像向き ◯ 複雑な輪郭も調整しやすいがその分手作業が増えるので時間はかかる
画像の拡張 ◎ デザインを見ながら試せる ◎ 候補比較や部分修正に強い
細かなレタッチ △ できることが限られる ◎ 本格的に調整できる
作業の流れ ◎ Figma内で完結 ○ アプリ間の移動が必要

 

結局、FigmaはPhotoshopの代わりになる?

今回試した範囲では、FigmaのAI画像編集は、「Photoshopを完全に置き換えるものではありませんが、簡単な画像修正なら十分に頼れる」という印象でした。加工する元の画像にもよりますが得手不得手がありそうではあります。

Figmaで向いていて特に便利なのは、次のような場面

– Webサイトやバナーのラフを素早く作りたい
– 背景がシンプルな写真から不要物を消したい
– 被写体を切り抜いて、すぐデザインに配置したい
– 写真をデザインに合う比率まで広げたい
– Photoshopを開くほどではない修正を済ませたい

一方で、次のような作業はPhotoshopが向き

– 髪の毛や透明な素材をきれいに切り抜く
– 細部を拡大して丁寧にレタッチする
– レイヤーやマスクを使って修正を重ねる
– 色調や質感まで細かく作り込む
– 印刷物など、高い解像度と仕上がりが求められる画像を制作する

「FigmaかPhotoshopか」の二択ではなく、「スピードを優先する簡単な修正はFigma、仕上がりを追求する編集はPhotoshop」と使い分けるのがよさそうです。

AI画像編集を使うときの注意点

AIによる画像編集はとても便利ですが、生成された部分が必ず正しいとは限りません。

背景の模様がおかしくなっていないか、人物の手や髪が不自然になっていないか、ロゴや文字が変形していないかなど、使用前に画像全体を拡大して確認しましょう。

また、業務で使用する場合は、写真や素材の利用条件、人物の肖像権、各サービスの利用規約、社内のAI利用ルールも確認が必要です。クライアントから預かった未公開画像や機密情報を含む素材は、許可なくAI機能へ送信しないよう注意しましょう!

まとめ

私自身は画像加工はPhotshop派だったのですが、今回検証してみた結果考えたが代わりました!
FigmaのAI画像編集を使うと、これまでPhotoshopに移動していたちょっとした作業を、デザイン画面から離れずに進められるのはかなりの効率化に感じました。

不要物の削除、背景の削除、画像の拡張といった日常的な編集がFigma内で完結するだけでも、作業の流れはかなりスムーズになりそうです。

Photoshopのような細かな調整はできませんが、用途によっては「これならFigmaだけで大丈夫!」という場面も増えていくのではないでしょうか。

Figmaを使っている方は、ぜひいつもの画像で試してみてください!

以上、MaromaroのChieでした。

Web制作のご相談はこちら コーポレートサイト、採用サイト、LP制作まで。課題整理から公開後の運用まで、目的に合わせてご提案します。