Figmaで背景を透明にする方法（2026年版ガイド）

Figmaはインターフェースデザイン用に作られており、写真編集用ではないため、「背景を削除する」という言葉は写真ツールとは違う意味を持ちます。フレームやアートボードの背景を書き出し時に消したいだけなら、Figmaはネイティブにそれができます。しかし、雑然とした背景を持つ写真（商品写真、ポートレート、配置された画像）がある場合、Figmaには被写体を検出して切り抜く組み込み機能がありません。プラグインを使うか、ペンツールで根気強く作業するか、画像がファイルに入る前に専用の背景削除ツールを使う必要があります。

Figmaプロジェクトで透明な背景が重要な理由

透明なPNGを使えば、ロゴや商品写真、アイコンを、目に見える枠なしにどんな色、スクリーンショットのモックアップ、グラデーションの上にも重ねることができます。これはUIキット、マーケティング資料、アプリストアのスクリーンショット、同じアセットを複数の背景の上に置く必要があるあらゆるデザインシステムにとって重要です。

方法1：透明な背景でフレームを書き出す

ステップ1： Figmaでフレーム、グループ、またはコンポーネントを選択します。

ステップ2： 右側のパネルで、フレームの背景の塗りを削除または非表示にします（塗りのスウォッチをクリックして削除するか、表示をオフにします）。

ステップ3： 右パネル下部のExportセクションを開き、PNGを選択して書き出します。PNGはアルファ透明度をサポートしているため、背景の塗りを削除した部分は白ではなく透明として書き出されます。

これは、「背景」がFigma上で追加した単なる塗り色であり、撮影されたシーンではないロゴ、アイコン、UIモックアップにうまく機能します。

方法2：配置された写真から背景を削除する

透明背景が必要なのが写真（商品写真、ポートレート、物理的な物体のスクリーンショット）の場合、背景はFigmaの塗りではなく画像自体のピクセルの一部なので、Figmaの書き出し設定は役に立ちません。Figma内での現実的な選択肢は、外部APIを呼び出すコミュニティプラグインを使うか、ペンツールで手動で被写体をマスクすることですが、これは時間がかかり、髪や毛皮、細かい部分の周りにきれいなエッジができることはほとんどありません。

より速い方法：インポート前に削除する

多くのデザイナーにとって最もシンプルなワークフローは、まず写真の背景を削除し、その結果できた透明なPNGをそのままFigmaにドラッグすることです。画像をnobackgroundにアップロードし、デバイス上のAIに数秒で被写体を切り抜いてもらい、PNGをダウンロードしてキャンバスに配置します。プラグインの権限も、アカウントも不要で、この過程で画像がブラウザから外に出ることもありません。

きれいな透明書き出しのためのコツ

高精細ディスプレイで使用するものは2倍または3倍のスケールで書き出し、必要に応じて後で縮小してください。これにより切り抜き周りのソフトでぼやけたエッジを防げます。
渡す前に、チェッカーボードや暗い背景に対して透明なPNGをプレビューしてください。無地の白いキャンバス上では、薄いグレーのエッジのハローは見落としやすいためです。
同じ切り抜きを複数のモックアップに配置する場合、各フレームから再書き出しするのではなく、元の透明なPNGをFigmaライブラリの共有アセットとして保持してください。

Figmaの透明度に関する質問

Figmaには背景削除機能が組み込まれていますか？ いいえ。Figmaはフレームや図形を透明な塗りで書き出すことはできますが、プラグインや外部ツールなしで写真から被写体を自動的に検出・切り抜くことはできません。

nobackgroundの透明PNGはFigmaで直接使えますか？ はい。ダウンロードしたPNGを他の画像アセットと同じようにキャンバスにドラッグ＆ドロップするだけです。透明度は保持されます。