▶ 3日で初案件PR
この記事でわかること
Figmaの画像切り抜き3方法（トリミング・マスク・背景切り抜き）の使い分けがわかります。四角く切るだけなら2分、円形マスクは5分、ペンツール背景切り抜きは10〜20分で完了できます。フリーランス案件での作業速度を左右する選択基準と、選択ミスをゼロにする5つの実務ハックを習得できます。
Figmaで画像を切り抜くには、四角く残す「トリミング」、任意の形にする「マスク」、ペンツールで背景を抜く「背景切り抜き」の3方法を使い分けます。各手順を最短ステップで解説し、フリーランス案件での実務活用まで網羅します。
今の仕事について、一番近いものは？
この記事の結論
Figmaの画像切り抜きは「トリミング・マスク・背景切り抜き」の3方法で完結します。四角く部分を残したいならトリミング、円形や星形など任意の形にしたいならマスク、人物や商品の背景だけを消したいならペンツールによる背景切り抜きを選んでください。用途と所要時間を把握した上で使い分けることが、フリーランス案件での作業速度を左右します。
今日やるべき1つ
手元のFigmaファイルを開き、任意の画像を選択して右サイドバーの「塗り」セクションの画像サムネイルをクリックし、「トリミング」モードに切り替えてください。青いハンドルをドラッグして確定操作（Enterキーまたはキャンバスクリック）まで完走します。所要時間は約2分です。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| 四角く部分だけ残したい | Figma画像トリミングは4ステップで完了 | 約2分 |
| 丸や星など好きな形にしたい | Figmaマスクは図形を重ねて3ステップ | 約5分 |
| 背景だけ自然に消したい | Figma背景切り抜きはペンツール5ステップ | 約15分 |
| どの方法を選べばいいか迷う | Figma切り抜き3方法は用途で選ぶ | 約2分 |
| 作業ミスを減らしたい | Figma切り抜きは5つの仕組みで品質安定 | 約3分 |
Figma画像トリミングは4ステップで完了
四角く切り抜く「トリミング」は、Figmaで最もシンプルな切り抜き操作です。ここでは操作の流れを4ステップに整理します。
画像モードの切り替えが起点
Figmaのトリミングは、画像をフレームやレイヤーとして直接操作するのではなく、「塗り（Fill）」の設定として制御します。キャンバス上の画像をクリックして選択し、右サイドバーの「塗り」セクションに表示された画像サムネイルをクリックすると、画像設定パネルが開きます。この段階で「塗りつぶし」「トリミング」「フィット」「タイル」の4モードが選択できる状態になります。「トリミング」を選ぶことで、以降のハンドル操作が有効になります。モード切り替えが起点である点を覚えておくと、操作の迷いが消えます（Figma公式ヘルプ｜画像のトリミング）。
なお、画像トリミングの無料サービスと比較して、Figmaはデザインデータと一体で管理できる点が実務上の強みです。
青いハンドルで残す範囲を調整
「トリミング」モードに切り替えると、画像の四隅と各辺の中央に青いハンドルが現れます。このハンドルをドラッグすると、表示させたい範囲を内側に絞れます。反対側からも調整したい場合はOption（Mac）またはAlt（Windows）を押しながらドラッグすると、両端が同時に動きます。画像の内部をドラッグすると表示位置をずらせるため、構図を後から微調整できます。この段階ではまだ確定されていないため、何度でもやり直せます。
Enterキーで確定、再調整は画像サムネイルから
範囲が決まったらEnterキーを押すか、キャンバスの画像外をクリックして確定します。再調整したい場合は、再び右サイドバーの画像サムネイルをクリックしてトリミングモードに戻れます。一度確定しても元の画像データは失われていないため、後から何度でも範囲を変更できます。トリミングは非破壊編集であり、フリーランス案件でクライアントの要望が変わっても対応できる点が実務上の大きな強みです。
Shiftキーで縦横比を固定してトリミング
ハンドルをドラッグする際にShiftキーを押し続けると、縦横比を固定したままトリミング範囲を広げたり狭めたりできます。SNSのサムネイルや名刺画像など、比率が決まっている素材を扱うフリーランス案件で頻繁に役立ちます。比率を固定しても「どこを見せるか」の位置調整は内部ドラッグで自由に変えられるため、構図の自由度は保たれています。
CHECK
▶ 今すぐやること: 手元の画像を選択し、右サイドバーの画像サムネイルをクリックして「トリミング」モードに切り替え、ハンドルをドラッグしてEnterで確定してください（約2分）
Q: トリミングしても元の画像は消えますか？
A： 消えません。Figmaのトリミングは非破壊編集です。再びサイドバーの画像サムネイルをクリックすると、いつでも元の表示範囲に戻せます。
Q： トリミング後に書き出すと余白が入りますか？
A： フレームを書き出す場合、フレームのサイズが余白の基準になります。画像をフレームの内側に収めているか、またはフレームと同じサイズになっているかを確認してから書き出してください。
Figmaマスクは図形を重ねて3ステップ
「丸く切り抜きたい」「ロゴを六角形に整えたい」という場面では、マスク機能が必要になります。操作に慣れていないと図形の重ね順で迷うことも珍しくありません。ここでは順序と選択操作を中心に整理します。
マスクは「図形が上、画像が下」の重ね順が絶対条件
マスクを使うには、切り抜きたい形の図形（円形・矩形・多角形など）を画像レイヤーの真上に配置することが必須です。レイヤーパネルを開いて「図形が上、画像が下」になっているかを確認してください。順序が逆になっていると、マスクを適用しても意図した結果になりません。図形の色や塗りは最終的には見えなくなるため、何色でも構いません（Figma公式ヘルプ｜マスクの使用）。
2つを選択してUse as maskを適用
図形と画像の両方をShiftクリックまたはドラッグ選択で同時に選択します。次に右クリックメニューから「Use as mask」を選ぶか、メニューバーの「Object」→「Use as mask」をクリックします。Figmaは選択した要素のうち最上位にあるレイヤーをマスク形状として使うため、手順通りに重ね順を整えていれば一発で正しく切り抜かれます。
「クリッピングマスクを使って丸く切り抜く方法が分かりました。図形を上に置いてUse as maskを選ぶだけで完結するんですね」と語る学習者もいます（terakoya｜Figmaで丸く切り抜く方法の質問回答）。
切り抜き後の図形サイズ変更と位置調整
マスク適用後は、マスクグループ全体を動かすことも、グループ内で画像だけをダブルクリックして位置や拡大率を変えることもできます。マスクの形を変えたい場合は、グループをダブルクリックして図形レイヤーを選択し直し、サイズハンドルを操作してください。複数の画像に同じ円形マスクを適用してアイコンを統一する場合、マスクグループをコンポーネント化しておくと変更をまとめて反映できます。フリーランス案件でデザインシステムを作る際には、この方法でアイコンの形状を統一管理するとメンテナンスが1回で済みます。
また、デザイン上で使用する商用利用可能なフリーアイコンと組み合わせることで、統一感のあるUI素材をマスクで整形する作業も効率化できます。
CHECK
▶ 今すぐやること: 円形ツール（Oキー）で楕円を描き、画像の上に配置してShiftクリックで両方選択し、右クリックから「Use as mask」を選んでください（約5分）
Q: マスクに使える図形はどれですか？
A： 矩形・円形・多角形・スターのほか、ペンツールで描いたカスタムパスもマスクとして使えます。テキストをマスクに使うことも可能です（Figma公式ヘルプ｜マスクの使用）。
Q： マスクを解除したい場合はどうしますか？
A： マスクグループを選択して右クリックし、「Remove mask」を選ぶと解除できます。画像も図形も元のレイヤーに戻ります。
Figma切り抜き3方法は用途で選ぶ
トリミングとマスクを把握したところで、次は方法の選択基準を整理します。用途によって最適な方法と作業時間が大きく変わるため、事前に方法を絞り込むことが手戻りを防ぐ最短ルートです。
トリミングは「四角く部分を残す」場面限定
トリミングは画像の一部を四角く切り出す場合にのみ有効です。所要時間は慣れれば1〜2分程度で、非破壊なため後から差し替えが可能です。バナー制作で特定の人物部分だけを正方形にトリミングする場面や、横長の画像から中央の被写体だけを切り出す場面が典型的な用途です。丸や任意の形には対応できません。
マスクは「形を自由に指定する」場面全般
円形・六角形・カスタムパスなど、四角以外のすべてに対応するのがマスクです。図形を描く時間が加わるため所要時間はトリミングより長くなりますが、単純な形であれば3〜5分以内に完了します。チームメンバーのアイコンを円形に統一する場合や、レポート資料に入れる画像を特定の形に整える場合に最適です。
ペンツールによる背景切り抜きは輪郭が複雑な場合のみ
人物の髪の毛や商品の細部のように、輪郭が複雑な画像の背景を消したい場合はペンツールでパスを描いてマスクに使います。所要時間は被写体の複雑さによって異なりますが、慣れた状態で10〜20分が目安です。単純なシルエットであれば5分以内に終わります。透明感のある髪の毛や半透明素材はFigmaだけでの対応が困難なため、PhotoshopやRemove.bgなどの専門ツールで透過処理したPNG画像をFigmaに配置する方法が実務では一般的です。
画像の背景を白にする無料ツールを事前処理で活用してからFigmaに取り込む流れも、フリーランスの実務では有効です。
| 方法 | 対応できる形 | 所要時間 | 向いているケース |
| トリミング | 四角形のみ | 1〜2分 | バナーの部分切り出し、SNSサムネイル |
| マスク | 任意の形全般 | 3〜5分 | アイコン統一、資料の画像整形 |
| ペンツール+マスク | 輪郭が複雑な形 | 10〜20分 | 人物・商品の背景除去 |
CHECK
▶ 今すぐやること: 今手元にある案件画像を「四角く切るだけか・特定の形にするか・背景を抜くか」の3択で分類し、上の表と照合して方法を決めてください（約2分）
Q: Figmaだけで背景を完全に透過できますか？
A： 輪郭が単純な被写体であればペンツールとマスクで対応できます。髪の毛の細部や透明素材などは精度が限られるため、Remove.bgやPhotoshopで透過処理した画像をFigmaに取り込む方法が現実的です。
Q： マスクとトリミングはどちらを先に覚えるべきですか？
A： まずトリミングを習得してください。操作が4ステップで完結し、失敗しても元に戻せるため学習コストが低く、フリーランス案件の大半はトリミングで解決できます。マスクは形の指定が必要になったタイミングで学ぶ順番が効率的です。
PR提供: 日本デザインスクール（デザスク）
Figma背景切り抜きはペンツール5ステップ
背景を自然に消したいという要望は、フリーランス案件で繰り返し発生します。「Figmaだけで可能か」という問いへの答えは「単純な輪郭であればYes、複雑な輪郭はツール補助が現実的」です。
事前準備：拡大表示と画像の固定
ペンツールでの切り抜き前に、まず対象画像を400〜600%程度に拡大表示します（Cmd+スクロールまたはCtrl+スクロール）。細部の輪郭が見えない状態でパスを引くと修正に時間がかかるため、拡大は省略しないようにしてください。また画像レイヤーをロックしておくと、ペンツールで誤って画像を選択・移動する事故を防げます。
ペンツールでアウトラインパスを作成
Pキーでペンツールを起動し、被写体の輪郭に沿って順番にクリックしてアンカーポイントを打っていきます。曲線が必要な箇所はクリック後にドラッグしてベジェ曲線のハンドルを引き出します。輪郭の複雑さにもよりますが、人物の上半身であれば20〜40個程度のアンカーポイントが目安です。最初のアンカーポイントに戻ってクリックするとパスが閉じます（Figma公式ヘルプ｜図形の使用）。
パスを使ってマスクを適用
閉じたパスを画像レイヤーの上に配置します。パスと画像の両方を選択し、右クリックから「Use as mask」を選ぶと、パスの形に切り抜かれた画像が完成します。背景が透明になるため、その下にある要素が透けて見えるようになります。この切り抜きは非破壊であり、マスクを解除すれば元の画像に戻ります。
輪郭の微調整
マスク適用後に輪郭がずれている箇所があれば、マスクグループをダブルクリックしてパスレイヤーを選択し、Vキーで選択ツールに切り替えた後Enterキーを押すとアンカーポイントの編集モードに入れます。個別のアンカーポイントをドラッグして微調整できます。まず大まかにパスを閉じてからマスク適用後に調整する流れが実務では効率的です。
書き出し前の確認
書き出し前に、背景の切り抜き部分に意図しない隙間やはみ出しがないかを確認します。キャンバスの背景色を変えて切り抜き精度を目視確認する方法が手軽です。書き出し形式はPNGを選択し、透明度（アルファチャンネル）を保持した状態で出力してください。
「マスク機能を使って文字・図形・写真を特定の形に切り抜く方法を実際に試してみました。レイヤーの重ね順さえ間違えなければ、思ったより簡単に仕上がります」と語るデザイナーもいます（noroshi.design｜Figmaのマスク機能解説）。
書き出した画像の圧縮で画質を落とさない方法を知っておくと、納品時のファイルサイズ管理にも役立ちます。
CHECK
▶ 今すぐやること: Pキーでペンツールを起動し、被写体の輪郭の1箇所にアンカーポイントを打ち、3点だけクリックして小さな三角形のパスを閉じるところまで練習してください（約5分）
Q: ペンツールの操作が難しくて輪郭が上手く引けません。
A: 最初はアンカーポイントを多めに打って直線的につなぎ、マスク適用後に微調整する方法を試してください。完璧な曲線を一発で引こうとすると学習コストが高いため、まず閉じたパスを作ることを優先します。
Q： 背景切り抜きにプラグインは必要ですか？
A： Figmaの標準機能だけで輪郭が単純な画像は対応できます。精度を上げたい場合や大量の画像を処理する場合はRemove.bgなどの外部ツールが現実的ですが、最初は標準機能で手順を習得してから判断してください。
Figma切り抜きは5つの仕組みで品質安定
速く・きれいに切り抜くための仕組みを先に整えておくことが、単発の操作テクニックより長期的な作業速度の向上につながります。以下の5つのハックは、実務で繰り返し効果を発揮する仕組みです。
ハック1: レイヤー名を事前命名して選択ミスをゼロにする
【対象】: 複数の画像を同一フレーム内で切り抜くフリーランス
【手順】: 画像を配置した直後にレイヤーパネルをダブルクリックして「img_hero」「img_profile」などの名前を付けます（30秒）。次にマスク用の図形を配置したら「mask_circle」など用途がわかる名前を付けます（30秒）。これで選択時に迷う時間をゼロにできます。
【コツと理由】: Figmaはオブジェクトが増えると自動的に「Rectangle 12」「Image 34」などの汎用名が付くため、マスク操作で2つのレイヤーを同時選択する際に誤選択が発生しやすくなります。誤選択でUse as maskを適用すると意図しないグループができてしまい、解除と再操作で時間のロスが生じます。命名の習慣は1回30秒の投資で、切り抜き操作ごとの余分なリカバリーを防ぎます。
【注意点】: レイヤーをグループ化してからまとめて命名しようとすると、グループ内の階層が深くなってダブルクリックの回数が増えます。グループ化する前の単レイヤー段階で命名しておく方が効率的です。
ハック2: マスクグループをコンポーネント化して変更を1回で反映
【対象】: チームメンバーのアイコンや商品画像を複数作るフリーランス
【手順】: マスク適用後のグループを選択し、Cmd+Option+K（Mac）またはCtrl+Alt+K（Windows）でコンポーネント化します（1分）。次にコンポーネントを複製してInstanceを配置し、各Instanceの画像だけを差し替えます（1枚あたり30秒）。形やサイズを変えたい場合はMainコンポーネントだけを修正します。
【コツと理由】: コンポーネントを使うと「形の変更を1回の修正で全インスタンスに反映」できます。FigmaのInstanceはMain Componentの構造を継承するため、円形マスクのサイズを変更するだけで複数枚分のアイコン全体に適用されます。毎回マスクを作り直す場合と比べると、複数アイコンの修正作業を大幅に短縮できます。
【注意点】: 画像の差し替えはInstanceのプロパティパネルから行います。レイヤーをダブルクリックして直接Mainコンポーネントの画像を変えると、全インスタンスに同じ画像が反映されてしまいます。Instanceごとに塗りの画像を変更する操作が正しい手順です。
ハック3: 確定前にEnterを押さず内部ドラッグで構図を決める
【対象】: トリミング範囲と被写体の位置合わせに手間取るフリーランス
【手順】: トリミングモードに切り替えたら、ハンドルで範囲を絞る前に画像内部をドラッグして「被写体を見せたい位置」に動かします（30秒）。その後ハンドルで周囲をカットします（30秒）。この順序で作業するとトリミング後に「ずれた」と感じる事故を減らせます。
【コツと理由】: 「先に被写体位置を固定してから枠を絞る」アプローチを取ります。先にハンドルで枠を小さくしてしまうと、その後に画像を動かしたときに枠の外に被写体がはみ出しやすくなります。内部位置を先に確定させることで、ハンドル操作が「純粋な余白カット」になり判断がシンプルになります。
【注意点】: 画像をトリミングモードで内部ドラッグする際、誤ってキャンバス上の別のオブジェクトをクリックしてしまうとトリミングモードが確定して終了します。トリミング操作中は画像の内側だけをドラッグするよう意識してください。
ハック4: 書き出し前にキャンバス背景色を変えて透過部分を目視確認
【対象】: PNG書き出し後に透明部分の切り抜き漏れで再作業が発生するフリーランス
【手順】: Figmaのキャンバス背景色をデフォルトのグレーから濃いめの色（例：#1a1a1a）に変更します（30秒）。次にマスク適用後の切り抜き画像を確認し、輪郭に白い残りや意図しない隙間がないかを目視します（1分）。問題なければ元の背景色に戻してPNG書き出しします。
【コツと理由】: 背景色を暗色に変えることで、白や薄いグレーで残っている切り抜き漏れが明確に視認できます。書き出し後の再作業を減らすために、事前確認の1分は費用対効果が高い操作です。
【注意点】: 確認後に背景色を元に戻すことを忘れると、他のデザイナーやクライアントがファイルを開いたときに混乱する場合があります。確認用の暗色は作業後に必ず元に戻してください。背景色のリセットは、キャンバス上の何もない箇所を右クリックして「キャンバスの背景色を変更」から行います。
ハック5: 拡大表示とレイヤーロックをペンツール前の必須セットにする
【対象】: ペンツールで背景切り抜きをする際に精度が出ないフリーランス
【手順】: ペンツール起動前に、まず対象画像のレイヤーをロック（Cmd+Shift+L / Ctrl+Shift+L）します（15秒）。次にCmd+スクロールで400%以上に拡大します（15秒）。この状態でPキーを押してペンツールを起動し、輪郭をなぞります。
【コツと理由】: 「ロック+拡大」を先に行うことで精度が向上します。100%表示では1ピクセルの誤差が書き出し後に視認できる段差になります。400%以上に拡大することでその誤差が画面上でより大きく見えるため、修正の判断が容易になります。ロックが重要な理由は、ペンツール操作中に誤って画像レイヤーを動かしてしまうと輪郭がずれてパスを描き直す必要が生じるためです。
【注意点】: レイヤーロック中は画像の位置を変えられません。「やはり画像の構図を変えたい」と思ったら、一度ロックを解除して移動させ、再度ロックをかけてから続きのパスを引いてください。
こうした作業効率を上げる習慣の仕組み化は、Figmaだけでなくフリーランスの全業務に応用できます。
CHECK
▶ 今すぐやること: 次に画像切り抜き作業をする前に、レイヤー名の命名とレイヤーロックの2つだけを先に実行してください。この2つで最もよくある操作ミスの大半を防げます（約1分）
Q: コンポーネントとマスクを組み合わせると動作が重くなりますか？
A： 画像解像度が高い場合はFigmaのパフォーマンスに影響します。Web用途であれば画像を72dpiまたは解像度2倍（@2x）の実寸で使うと軽量化できます。印刷用途の高解像度画像を大量にコンポーネント化する場合はファイルを分割してください。
Q： Use as maskのショートカットはありますか？
A： 標準のキーボードショートカットはありません。ただし右クリックメニューのUse as maskはオブジェクト選択後すぐにアクセスできるため、操作上のボトルネックにはなりにくい位置にあります。
Figma切り抜きを3方法で完結させる：今日からできる実践まとめ
Figmaの画像切り抜きは「トリミング・マスク・ペンツール背景切り抜き」の3方法で完結します。四角く部分を残すだけならトリミングを4ステップで完了させ、円形など任意の形が必要なら図形を上に重ねてUse as maskを3ステップで適用します。輪郭が複雑な背景切り抜きはペンツールとマスクの組み合わせで対応しますが、精度が求められる場合は外部ツールとの組み合わせも現実的な選択肢です。
どの方法も「レイヤーの重ね順を整えてから操作する」という基本さえ守れば、迷わずに実行できます。Figmaの非破壊編集という特性を活かして、クライアントの要望が変わっても何度でも調整できます。
フリーランス案件でFigmaを使う場面が増えている方は、ポートフォリオの作り方も合わせて整備しておくと、案件獲得につながりやすくなります。
| 状況 | 次の一歩 | 所要時間 |
| 初めてトリミングを試す | 任意の画像を選択してトリミングモードに切り替え、ハンドルを動かしてEnterで確定する | 約2分 |
| 丸い切り抜きを初めて作る | Oキーで円を描き、画像の上に配置してUse as maskを適用する | 約5分 |
| ペンツールを初めて使う | 画像をロック・400%拡大してからPキーでペンツールを起動し、3点だけ打って閉じる練習をする | 約5分 |
| 複数アイコンをまとめて管理する | マスクグループをコンポーネント化し、Instanceを複製して画像だけ差し替える | 約10分 |
Figma画像切り抜きに関するよくある質問
Q: FigmaのトリミングはPhotoshopのクロップと同じですか？
A： 基本的な「部分を四角く切り出す」動作は同じです。ただしFigmaのトリミングは非破壊編集であり、いつでも元の表示範囲に戻せる点がPhotoshopのデストラクティブなクロップと異なります。Figmaでは画像データそのものは変化せず、表示範囲の設定だけが変わります。
Q： トリミングとマスクを同時に使えますか？
A： 使えます。たとえば画像をトリミングで縦横比を調整してから、さらにマスクで円形に切り抜くという組み合わせが可能です。ただしトリミング済みの画像にマスクを適用する場合、レイヤー構造が複雑になります。最初からマスクだけで形と範囲を一度に決める方がシンプルです。
Q： Figmaで書き出したPNGの背景が白くなってしまいます。
A: フレームの背景色が「なし（透明）」に設定されているかを確認してください。フレームに白い背景色が設定されていると、書き出し後に背景が白く見えます。フレームを選択してデザインパネルの「背景色」をオフにしてから再度書き出してください。
【出典・参照元】
Figma公式ヘルプ｜画像のトリミング – 画像のトリミング手順・モード・操作方法の公式解説
Figma公式ヘルプ｜マスクの使用 – マスク機能の公式解説
Figma公式ヘルプ｜図形の使用 – ペンツールとパス作成の公式解説
terakoya｜Figmaで丸く切り抜く方法の質問回答 – クリッピングマスクの実践的な解説（学習者の体験的回答）
noroshi.design｜Figmaのマスク機能解説 – マスク機能で文字・図形・写真を切り抜く実務寄り解説