シルギア

画像を丸く切り抜く方法|SNSアイコンを透過PNGでブラウザ作成

公開日:2026年8月21日 更新日:2026年9月2日 運営:シルギア(Analyzegear, Inc.) 対象ツール:画像を丸く切り抜き(アイコン作成)

SNSやチャットのアイコンは、丸く切り抜かれて表示されることがよくあります。手持ちの写真をそのまま設定すると、顔が端に寄ってしまったり、余計な部分まで写ってしまったり。画像を丸く切り抜き(アイコン作成)は、写真やイラストを円・角丸四角・正方形に切り抜いて、アイコン用の画像を作れる無料ツールです。専用ソフトは不要で、ブラウザだけで使え、画像は外部に送信されません。位置と拡大を合わせ、背景を透過したPNGとして保存できます。

円・角丸・正方形の使い分け

このツールでは、切り抜く形を3種類から選べます。用途に合わせて決めるのが仕上がりの近道です。

  • :SNSアイコンの定番です。多くのサービスがアイコンを丸く表示するため、あらかじめ円で作っておくと、実際の見え方を確認しながら調整できます。
  • 角丸四角:アプリアイコンやカードのサムネイル風になります。四隅がやわらかく落ち、かっちりしすぎない印象です。このツールの角丸半径は一辺の18%で、512pxで書き出すと約92px、1024pxなら約184pxの丸みになります。
  • 正方形:トリミングだけしたいときに向きます。1:1のきっちりした四角で切り出せます。

円・角丸を選ぶと、切り抜いた外側(角)が透明なPNGになるため、背景が何色の場所でもきれいに表示されます。

使い方

  1. 画像をドラッグ&ドロップするか、枠をクリックして選びます(JPEG・PNG・WebPなど)。
  2. 形を「円・角丸四角・正方形」から選びます。
  3. プレビューの画像をドラッグして位置を、スライダー(またはマウスホイール)で拡大を調整し、枠にちょうど収めます。思いどおりの構図がずれたときは「位置をリセット」で中央に戻せます。
  4. 「背景を透過」をオンにすると角が透明に、オフにすると好きな背景色を敷けます。書き出しサイズも選びます。
  5. 「ダウンロード(PNG)」で保存します。SNSやアプリのアイコンにそのまま使えます。

拡大と解像度のしくみ

画像を読み込むと、枠いっぱいに収まるよう自動で拡大率が決まり、拡大スライダーは100%が起点になります。ここからスライダーやホイールで最大400%まで寄せられます。100%の時点ですでに枠を覆う大きさなので、拡大するほど「元画像の一部分だけ」を大きく引き伸ばして使うことになります。

数値で見てみましょう。たとえば500×500pxの写真を512pxのアイコンに書き出す場合、100%なら元画像がほぼ等倍で使われ、細部が保たれます。しかし拡大200%にすると、枠に映るのは元画像の約250px四方だけになり、それを512pxへ引き伸ばすため、実質2倍の拡大となって輪郭がぼやけます。512pxのアイコンなら、枠に収める範囲が元画像で512px以上あるのが理想です。寄りのアイコンを作りたいときは、はじめから解像度に余裕のある大きな画像を用意しておくと安心です。

角が透明なPNGになるしくみ

円や角丸で書き出すと、枠の外側は「透明」として保存されます。これが透過PNGです。切り抜いた形の内側だけに画像が描かれ、四隅の余白には色の情報が入りません。透過されているおかげで、白背景でも濃い色の背景でも、アイコンが四角い箱に入って見えることがなく、きれいな丸のまま表示されます。背景に色を付けたいときは「背景を透過」をオフにして色を選べば、その色で塗りつぶした状態で書き出せます。JPEGは透明を扱えないため、透過を保つには保存形式がPNGであることが欠かせません。

きれいなアイコンに仕上げるコツ

  • 顔は少し中央上めに:円で切ると四隅が削れます。顔や被写体を中央〜やや上に置くと、切り抜き後もバランスよく見えます。
  • 拡大しすぎない:前述のとおり、元の解像度を超えて引き伸ばすと粗くなります。寄せたいときほど大きな元画像を使いましょう。
  • 書き出しサイズは用途に合わせて:128px・256px・512px・1024pxから選べます。SNSアイコンなら512px前後が扱いやすく、多くのサービスできれいに表示されます。小さすぎると表示側で拡大されてぼやけることがあります。
  • 背景色は表示先に合わせる:透過をオフにするなら、実際にアイコンが並ぶ画面の地色に近い色を選ぶと自然になじみます。

画像が外部に送信されないしくみ

顔写真など個人的な画像を、加工のために外部のサーバーへ送るのは避けたいものです。このツールは、読み込み・切り抜き・書き出しのすべてをブラウザ内のCanvas(描画機能)で完結させており、画像がネットワークに出ることはありません。アップロードの待ち時間もなく、通信を切ったオフライン状態でも動作します。作ったアイコンはお使いの端末にそのまま保存されるので、大切な1枚を安心して加工できます。書き出したファイルには「(元の名前)-icon.png」という名前が付くため、あとから見分けやすいのも便利です。スマホでも同じように、指で位置を合わせてスライダーで拡大すれば、アプリを入れずにその場でアイコンを用意できます。

「画像を丸く切り抜き(アイコン作成)」を使ってみる →

ほかの記事

Unicode正規化ガイド|NFC/NFD/NFKC/NFKDの違いと使い分け Base58/Base32/Base16変換の仕組みガイド|なぜ0OIlを除くのか cubic-bezierイージング入門|4つの数値と制御点の意味を図解 文字化けを直す仕組み|バイトに戻して再デコードする復元の考え方 ULIDとは何か|26文字で時系列ソートできるIDの仕組みと使い分け ISBN変換・チェックの使い方|10桁と13桁の相互変換とチェックデジットの仕組み

記事一覧をすべて見る →