Figmaで画像を丸（正円）に切り抜き・トリミングする2つの方法
Figmaで画像を丸く切り抜く（トリミングする）には、大きく分けて2つのアプローチがあります。
どちらの方法を使っても見た目は同じように丸く切り抜くことができますが、それぞれ特徴が異なります。まずは自分に合った方法を選んでみましょう。
① 一番おすすめ！「マスク機能」を使う方法（王道）
丸い図形（シェイプ）を型抜きのように使って、画像を切り抜く方法です。
- メリット： 切り抜いた後からでも「画像の位置」や「丸の大きさ」を自由に調整できるため、デザインの現場では最もよく使われる王道のやり方です。
- こんな人におすすめ： 切り抜く位置を細かくこだわりたい、後から調整する可能性がある場合。
② 一瞬でできる！「角丸（Corner Radius）」を調整する方法（裏ワザ）
正方形の画像の「四隅の角」を極限まで丸くすることで、結果的に正円に見せる方法です。
- メリット： 図形を新しく作る必要がなく、数値を1箇所変更するだけなので、とにかく一瞬で終わります。
- こんな人におすすめ： 元の画像がすでに綺麗な正方形である場合や、とにかく時間をかけずにパパッと丸くしたい場合。
次の章から、それぞれの詳しい手順を画面キャプチャ付きで解説していきます。
【実践】「マスク機能」で切り抜きする手順
まずは、デザインの現場でもよく使われる、後から調整がしやすい「マスク機能」を使った方法です。4つのステップで解説します。
ステップ1：正円のシェイプ（図形）を作成する
最初に、切り抜きたい「丸」の形を作ります。
- ツールバーから「シェイプツール（四角形のアイコン）」の横にある矢印をクリックし、「楕円（Ellipse）」を選択します（キーボードの O を押してもOKです）。
- 画面上をドラッグして円を描きます。このとき、Shift キーを押しながらドラッグすると、歪みのない綺麗な「正円」が作れます。
ステップ2：切り抜きたい画像を重ねる
- 使用したい画像をFigma上に配置します。
- 先ほど作った正円の上に、画像が重なるように移動させます。
- 【重要】 画面左側の「レイヤーパネル」を確認し、「画像レイヤー」が「円（Ellipse）のレイヤー」よりも上（前面）にきていることを確認してください。
ステップ3：「マスクとして使用」ボタンをクリックする
- 「画像」と「円」の両方を同時に選択します（マウスで2つを囲むようにドラッグするか、Shift キーを押しながら2つのレイヤーをクリックします）。
- 右側のプロパティパネルにある「マスクとして使用（Use as mask）」アイコン（三日月のようにも見える、丸い重なりのアイコン）をクリックします。
※「マスクとして使用」は左上のメインメニューからオブジェクト内や選択したレイヤーを右クリックからも選択できます。
ステップ4：位置やサイズを微調整する
「人物の顔がズレてしまった」「もう少しアップにしたい」というときは、後から調整が可能です。
- 左側のレイヤーパネルで、マスクの中にある「画像レイヤー」だけを選択します。
- 画像の端をドラッグして大きさを変えたり、位置を動かしたりして、丸の中に綺麗に収まるよう調整します。
- 調整が終わったら、カンバス上の何もないところをクリックすれば完了です！
【実践】「角丸」を使う手順
続いて、新しく図形（シェイプ）を作ることなく、数値を変更するだけで一瞬で画像を丸くする裏ワザ的な方法です。2つのステップで完了します。
ステップ1：画像を配置し、正方形にする
この方法を使う場合、元の画像が「正方形（縦横が同じ長さ）」である必要があります。
- 使用したい画像をFigma上に配置します。
- 画像を選択し、トリミング等で幅と高さを同じ数値にします。
ステップ2：角丸の数値を「最大」にする
正方形ができたら、あとは角を丸くするだけです。
- 画像を選択した状態で、画面右側のデザインパネルにある「角丸（Corner Radius）」の項目（カーブした角のアイコン）を探します。
- ここに、画像の幅（W）の半分の数値、もしくは「999」など十分に大きな数値を入力して Enter キーを押します。
よくある疑問・注意点
実際にFigmaを操作していると、「思うように丸くならない…」「元に戻したい時はどうするの？」といった疑問が出てくることがあります。よくある3つの解決策をまとめました。
Q. 綺麗な「正円」にならないときは？
A. Shift キーを押しながらドラッグして図形を作るか、右パネルで縦横の数値を同じにしましょう。
マウスのドラッグだけで丸を作ろうとすると、どうしても楕円（だえん）になってしまいがちです。
- 解決策①： 円を描くときに、キーボードの Shift キーを押しっぱなしにしながらドラッグすると、必ず綺麗な正円になります。
- 解決策②： すでに作ってしまった歪んだ円は、画面右側のデザインパネルにある W（幅）とH（高さ）の数値を同じ（例：200と200）に変更すれば正円に修正できます。
Q. マスクを解除して、元の四角い画像に戻したいときは？
A. レイヤーパネルで円のレイヤーを選択し、「マスクの削除」で解除できます。
切り抜きをやめたい時は、以下の手順でいつでも元に戻せます（画像データ自体は切り刻まれていないので安心してくださいね）。
- 左側のレイヤーパネルで、月のようなアイコンがついた「Mask group」を選択します。
- 「マスクとして使用（マスクの削除）」アイコンをもう一度クリックします。
- これでマスクが解除され、元の画像と丸い図形に分かれます。
Q. 切り抜いた画像をパソコンに保存（書き出し）する方法は？
A. 右パネルの最下部にある「エクスポート（Export）」を使いましょう。
元の画像レイヤーと円のレイヤーを一度、グループ化し、そのグループを選択した状態でエクスポートします。
※形式を「JPEG」にしてしまうと、切り抜いた丸のまわりの余白が「白」で塗りつぶされてしまいます。まわりを透明なままで書き出したいときは、必ず「PNG」を選択してください。
まとめ：Figmaを使いこなしてデザイン業務を効率化しよう
Figmaで画像を丸（正円）に切り抜く2つの方法をおさらいしましょう。
- マスク機能： 自由度が高く、後から位置やサイズを微調整したいときにおすすめの王道手法。
- 角丸調整： 元が正方形の画像なら、数値を変更するだけで一瞬で丸くできる裏ワザ手法。
どちらも一度覚えてしまえば、ノンデザイナーの方でも資料作成やSNSバナーの制作効率が劇的にアップする便利なテクニックです。ぜひ作成するコンテンツに合わせて使い分けてみてくださいね。
社内のデザインリソースや内製化にお悩みではありませんか？
「Figmaを取り入れてみたけれど、ノンデザイナーのメンバーが使いこなすまでに時間がかかる」
「バナーや資料のベースとなる、社内共通の『おしゃれなデザインテンプレート』が欲しい」
「そもそも、社内のデザイン業務を丸ごとプロに任せて効率化したい」
スタジオカレンでは、企業のブランド力を高めるWebサイト・バナー制作を行っています。
「自社のデザイン業務をもう少しスムーズにしたい」と感じているご担当者様は、ぜひお気軽にスタジオカレンへご相談ください。
※本記事で紹介した内容は記事作成時点（2026年5月）の情報です
