アイコン作成
画像を丸く切り抜く丸抜きプロフィール画像

画像を丸く切り抜く方法|プロフィール画像・透過PNGの作り方

画像を丸く切り抜いてプロフィール画像や透明背景のPNGを作る方法を解説します。中心位置、余白、出力サイズ、四隅の透過、保存後の確認まで分かります。

最終更新:2026年7月17日読了目安:7アイコン作成

はじめに

プロフィール画像やアプリアイコン用に写真を丸く見せたいときは、正方形へ整えた画像を円形に切り抜き、円の外側を透明にしたPNGとして保存すると再利用しやすくなります。単にWeb画面上で丸く表示する方法とは、保存される画像の形が異なります。

きれいな丸型アイコンを作るポイントは、顔やロゴを中央へ置くだけではありません。小さく表示したときに主要部分が読めるか、円周へ近づきすぎていないか、背景の四隅が透明になっているかを確認します。

この記事では、丸く切り抜く3ステップ、透明PNGで保存する理由、中心と余白の調整、用途別サイズ、失敗しやすい例、Toolerでの作成手順を順番に解説します。一般的な長方形のトリミングではなく、円形アイコン作成に絞ったガイドです。

1

画像を丸く切り抜く3ステップ

最初に元画像を読み込み、円形にしたい範囲を正方形として決めます。横長・縦長の写真をそのまま円へ押し込むのではなく、短い辺に合わせた正方形の中で位置と拡大率を調整します。

次に円形プレビューを見ながら、顔、商品、ロゴなどの主要部分が中央付近に収まるように動かします。最後に円の外側が透明なPNGとして出力し、保存した画像をもう一度開いて確認します。

11. 元画像を読み込み、正方形の切り抜き範囲を作る
22. 円形プレビューで中心、拡大率、周囲の余白を調整する
33. 透明背景のPNGで保存し、四隅と小さい表示を確認する
2

丸抜き画像とCSSで丸く見せる方法の違い

ブラウザやSNSの画面では、正方形画像へ丸いマスクをかけて表示することがあります。この場合、見た目は丸くても元ファイルの四隅は残っています。一方、丸抜き画像は円の外側を透明にしたファイルです。

プロフィール欄へアップロードするだけならサービス側が自動で丸く表示する場合もあります。画像素材として配布する、スライドやWebページへ重ねる、別の背景色でも使う場合は、透明PNGにしておくと扱いやすくなります。

丸く見せる方法と保存される内容の違い
方法保存ファイル向いている用途注意点
円の外側を透明にして保存四隅が透明なPNGプロフィール素材、資料、Web素材、複数背景への配置透明部分を扱えるPNGで保存する
CSSなどで丸く表示元の正方形・長方形画像のままWebサイト内だけで丸く見せたい場合画像をダウンロードすると四隅が残る
SNS側の自動マスクアップロードした元画像のままそのSNS内のプロフィール表示サービスによって表示範囲が変わるためプレビュー確認が必要
3

顔やロゴを中央に置くときの余白

円形では正方形の四隅が見えなくなるため、長方形の写真でちょうどよく見えていた要素が欠けることがあります。顔写真なら頭頂部、髪、肩、帽子が円周へ触れていないか確認します。ロゴなら文字や細い線が円の外側へ出ていないかを見ます。

中央へ置くことは出発点ですが、必ずしも数値上の中央が最適とは限りません。人物の目線やロゴの形に合わせて少し上下左右へ動かし、32〜64px程度まで小さくした表示でも主要部分が認識できる位置を選びます。

1顔写真:頭やあごを円周へ近づけすぎず、視線の方向にも少し余白を残す
2ロゴ:文字と細い線を円の内側へ収め、背景とのコントラストを確認する
3商品写真:重要な輪郭が切れないよう、少し引いた構図を試す
4集合写真:人数が多いほど小さく見えるため、プロフィール用には主要人物を絞る
4

透明PNGで保存する理由

JPGは透明な部分を保持できません。円の外側を透明にして保存したい場合はPNGを使います。透明PNGなら、白、黒、写真、ブランドカラーなど異なる背景へ置いても、四角い背景色が残りません。

ただし、アップロード先が透明画像を別の背景色へ置き換える場合や、ファイル形式を自動変換する場合もあります。用途先へ一度アップロードし、実際の背景色と表示範囲で確認してください。背景色を固定したい場合は、円の外側を透明にせず、正方形の背景を含めて保存する選択肢もあります。

1透過が必要:PNGで保存する
2写真容量を優先し透過不要:JPGも候補にする
3背景色を固定:透明ではなく指定色の正方形画像として保存する
4納品前:相手側の対応形式と最大容量を確認する
5

プロフィール画像の出力サイズを決める

出力サイズは、アップロード先が指定する正方形サイズを優先します。指定が分からない場合は、元画像の解像度を超えて無理に拡大せず、複数用途へ使いやすい正方形サイズで保存します。

画面では小さく表示されても、高密度ディスプレイや編集時の再利用を考えると少し大きめの元データが便利です。一方、必要以上に大きい画像は容量が増えるため、保存後に容量も確認します。

用途から選ぶ正方形の出力サイズ例
出力サイズ使い方の例確認ポイント
400×400pxWebプロフィール、連絡先用の軽い画像小さい文字や細い線が読めるか
512×512px一般的なプロフィール素材、アプリアイコンの下書き円周の内側に余白があるか
800×800px複数サービスで再利用するプロフィール画像容量が必要以上に大きくないか
1024×1024px大きめの表示や編集用マスター元画像が十分な解像度か
6

丸く切り抜いたときに失敗しやすい例

失敗の多くは、円形プレビューではなく正方形だけを見て位置を決めること、主要部分を円周へ近づけすぎること、JPGで保存して透明部分を失うことから起こります。

また、低解像度の画像を大きく拡大すると輪郭がぼやけます。元画像が小さい場合は、必要な表示サイズに合わせて出力し、無理に大きなファイルを作らない方が自然に見えます。

症状ごとの原因と直し方
症状主な原因直し方
頭やロゴが欠ける主要部分が円周へ近すぎる少し縮小し、中心位置を調整して内側に余白を作る
四角い白背景が残るJPG保存または背景を白で塗っている円の外側を透明にし、PNGで保存する
小さくすると内容が分からない要素が多い、細い文字がある主役を絞り、文字や細部を減らして小さいプレビューを見る
輪郭がぼやける小さい元画像を大きく拡大している元画像に近いサイズで出力するか、高解像度の元画像を使う
背景によって見えにくい輪郭と配置先の背景色が近い縁取りや背景円を加えるか、実際の背景上で確認する
7

Toolerで画像を丸く切り抜く手順

「画像を丸く切り抜く」ツールで画像を選び、用途または出力サイズを決めます。プレビューをドラッグして位置を調整し、拡大・縮小しながら円の中へ主要部分を収めます。

出力前に円周付近、背景、容量の目安を確認し、PNGをダウンロードします。処理は対応ブラウザ内で行われ、選んだ画像そのものをToolerのサーバーへアップロードして保存する処理はありません。

11. 元画像を選び、円形プレビューを表示する
22. 用途プリセットまたは正方形の出力サイズを選ぶ
33. ドラッグと拡大率で中心・余白を調整する
44. 小さいプレビューと透明な四隅を確認する
55. 透明PNGを保存し、実際の使用先で表示を確認する
8

保存後に容量と表示を確認する

丸抜き後は、ファイル名だけで判断せず、画像容量・サイズ確認でPNG形式、幅・高さ、容量を確認します。アップロード先に容量上限がある場合は、上限より少し小さくなるよう余裕を残します。

容量が大きい場合は、まず出力サイズが用途より大きすぎないか確認します。サイズが適切でも重い場合は圧縮を検討しますが、透明部分が必要なら透過を維持できる方法かを確かめてください。

1幅と高さが同じ正方形になっている
2ファイル形式がPNGになっている
3四隅が透明で、白や黒の四角が残っていない
4小さい表示でも顔・ロゴ・商品が認識できる
5アップロード先の容量上限へ余裕を残している

公開前のチェックリスト

  • 編集前の元画像を別ファイルとして残した
  • 顔、ロゴ、商品の主要部分が円周の内側に収まっている
  • 32〜64px程度の小さいプレビューでも内容が分かる
  • 円の外側を透明にする場合はPNGで保存した
  • 白背景と濃い背景の両方で輪郭を確認した
  • 出力画像の幅・高さ・容量を確認した
  • 実際のプロフィール画面や使用先で最終表示を確認した

読んだ内容をすぐ確認

画像を丸く切り抜くを使う

中心、拡大率、用途別サイズを調整して、透明背景の丸型PNGを作れます。

ツールを開く →

よくある質問

Q. スマホでも画像を丸く切り抜けますか?

A. はい。対応ブラウザで画像を選び、円形プレビューをドラッグして位置と拡大率を調整できます。保存後は写真アプリやファイルアプリでPNGと容量を確認してください。

Q. 丸く切り抜いたのに白い四角が残るのはなぜですか?

A. 円の外側が白で塗られているか、透明部分を保持できないJPGで保存している可能性があります。外側を透明に設定し、PNGで保存してください。

Q. SNSが自動で丸く表示する場合も丸抜きが必要ですか?

A. そのSNSだけで使うなら、正方形画像をアップロードしてサービス側の円形プレビューを調整する方法でも構いません。資料や別サイトでも同じ丸型素材を使うなら、透明PNGを作ると再利用しやすくなります。

Q. プロフィール画像は何pxで作ればよいですか?

A. アップロード先の指定がある場合はそれを優先してください。指定が分からない場合は400〜800px程度の正方形を候補にし、元画像を超えて無理に拡大せず、小さい表示と容量を確認します。

Q. 丸抜き後に画像がぼやける原因は何ですか?

A. 小さい元画像を大きく拡大したことや、切り抜く範囲を狭くしすぎたことが考えられます。高解像度の元画像を使うか、出力サイズと拡大率を下げてください。

Q. 選んだ写真はサーバーへ送信されますか?

A. 画像の読み込みと丸抜き処理は対応ブラウザ内で行う設計です。選んだ画像そのものをToolerのサーバーへアップロードして保存する処理はありません。