ここに画像をドラッグ＆ドロップ、または 参照
JPG / PNG / WebP / GIF / AVIF / HEIC に対応
画像処理はブラウザ内で完結します。画像がサーバーに送信されることはありません。
処理中…
0 / 0
手動トリミング
ここに画像をドラッグ＆ドロップ、または 参照
JPG / PNG / WebP / GIF / AVIF / HEIC に対応
画像処理はブラウザ内で完結します。画像がサーバーに送信されることはありません。
形状トリミング（円形・角丸）
形状トリミング——特に円形トリミング——は、画像の一括に円・角丸・四角のマスクをかけ、形状の外側を透過PNGで書き出します。アバター、チーム格子、UIアクセントに最適で、処理はすべてブラウザ内で完結します。
クイック回答
円形トリミング / 形状トリミングは、各画像を選んだマスク（多くは1:1の円）で切り、形状外を透過にしたPNGを書き出します。サーバーへアップロードせずに、揃ったアバターや角丸素材を一括で作れます。
Batch Image Crop Team · 最終更新: 2026-08-12
形状トリミング / 円形トリミングとは？
形状トリミングは、円・角丸矩形・矩形などの幾何マスクを適用し、そのパス内のピクセルだけを残す一括モードです。円形トリミングは最も一般的な変種で、プロフィール写真や名簿用ヘッドショット、丸いデザイン要素向けの1:1円マスクです。
単なる矩形のピクセル指定とは違い、形状トリミングは結果のシルエットが重要です。PNG書き出しではマスク外が透過になり、円形アバターを色付き・写真背景にきれいに重ねられます。
画像を円や形状に切り抜く手順
- 画像をアップロード - 一括でマスクしたいポートレートやグラフィックを追加します。
- 形状を選ぶ - 円・角丸・四角を選択。円の場合は1:1比率を維持します。
- プレビューと位置調整 - 顔やロゴをマスク内に中心合わせし、必要なら角丸半径を調整します。
- PNGでダウンロード - 一括処理し、透過背景の結果を1つのZIPで取得します。
円形トリミング（最も人気）
円形トリミングは、プロフィール写真・アバター・丸いUI要素の定番です。1:1フレームで真円マスクを保ち、一括書き出しで各ヘッドショットを同じ円形フットプリントに揃え、縁の外はPNG透過になります。
円
アバター、お客様の声、丸ステッカー向けの1:1円マスク。円の外側は透過。
角丸矩形
アプリアイコン、カード、柔らかいサムネイル向けに角丸半径を調整。
矩形
曲線マスクが不要なときの、固定比率も選べる定番の矩形切り抜き。
比率の選択肢
真円は1:1。非円形には4:3、16:9、9:16などを使用。
| 形状 | 向いている用途 | 書き出しメモ |
|---|---|---|
| 円 (1:1) | プロフィール写真、チーム名簿、丸バッジ | PNGが外側を透過のまま保持 |
| 角丸矩形 | アプリアイコン、機能カード、柔らかいサムネイル | 書き出し前に角丸半径を調整可能 |
| 矩形 | 固定比率の標準フレーム | 曲線ではなく硬い枠が必要なとき |
形状トリミングが適している場面
プロフィールとアバター一式
一人ずつ切らず、チームやクラス全体を揃った円で納品。
お客様の声・Aboutページ
同じマスクを共有すると、引用やプロフィール横の円形ヘッドショットが読みやすい。
アプリアイコンとUIアクセント
半径を抑えた角丸が、現代的なアイコン格子やカードに合う。
デザイン・プレゼン資料
被写体周りに白枠のない形状PNGをスライドやポスターへ。
ブランドステッカー・バッジの一括
製品ライン全体で同じ円／角丸マスクを繰り返す。
端末内のプライベート処理
ポートレート一式が端末を離れない。ZIP前にブラウザでマスク。
形状トリミング vs ピクセル指定 vs 他モード
シルエットが重要なときは形状、矩形サイズやプラットフォームプリセットだけなら他モードを選びます。
| モード | 最適なとき | 注意点 |
|---|---|---|
| 形状 / 円形トリミング | 透過付きの円や角丸マスクが必要 | 多くのSNSフィードは依然として矩形アップロードを求める |
| ピクセル指定 | 正確な矩形の幅×高さが必要 | 円マスクや外側透過はない |
| 割合トリミング | 比例的な端のトリムだけでよい | 成形シルエットは作れない |
| SNS用トリミング | Instagram、YouTube、LinkedInなどのプリセットが必要 | プリセットは矩形のプラットフォームキャンバス |
| 手動トリミング | 被写体ごとに自由な矩形フレーミングが必要 | 全ファイルが同じ円マスクを共有すべき場合は遅い |
この一括形状トリミングが役立つ理由
- 1:1の真円マスク - 一括円形トリミングでアバターを丸く揃えられる。
- 透過PNG書き出し - 形状外のピクセルはデザインやWeb向けに透明のまま。
- 角丸半径の制御 - 一サイズの曲線ではなく、アイコンやカード用に半径を調整。
- 一括ZIPダウンロード - デスクトップ操作の繰り返しではなく、一度で多数のポートレートをマスク。
- ブラウザ内プライバシー - 画像は端末内に留まり、アカウントやサーバーアップロードは不要。
- 正方形以外の比率 - レイアウトが求めるとき、角丸や矩形でも固定比率を利用可能。
書き出し前の確認ポイント
円は1:1
非正方形フレームは「円」の印象を崩します。円形トリミングは1:1を維持。
顔とロゴの余白
円マスクは角を強く切ります。あご・髪・ロゴ端をプレビュー。
PNGとJPGの行き先
透過にはPNG（または他のアルファ対応形式）が必要。JPG化すると外側が不透明で埋まる。
プラットフォームのアップロード規則
再トリミングで矩形化するネットワークもある。透過円素材を尊重するサイト・デザインに形状を使う。
形状トリミング FAQ
円形トリミング / 形状トリミングとは何ですか？
形状トリミングは各画像に幾何マスク（多くは円）を適用します。円形トリミングは通常、PNG書き出しで縁の外が透過になる1:1円マスクを指します。
切り抜いた円は背景透過になりますか？
はい。円や角丸の外側は、PNG保存時に透過が保たれ、他の背景へきれいに合成できます。
プロフィール写真をまとめて円形にできますか？
はい。円形トリミングは一括向けです。1:1円マスク、フレーミング確認、揃ったアバターのZIP。
角丸矩形の角の半径は調整できますか？
はい。角丸選択時、半径コントロールで軽い丸みからほぼピル／ほぼ円まで変えられます。
ピクセル指定との違いは？
ピクセル指定は正確な幅×高さの矩形ビットマップを出します。形状は見えるシルエットを変え、サイズ枠だけでなく円や角丸が必要なときに選びます。
形状トリミングは写真をサーバーに上げますか？
いいえ。マスクはブラウザ内で実行されます。ZIPを自分でダウンロードしない限り、画像は端末に残ります。
権威ある情報源
ブラウザでの形状マスクは canvas のクリッピングパスに従い、その後画像の data URL（既定はPNG）を書き出してマスク外のアルファを保てます。以下の参考がその API を説明します。
公式文言の引用
MDNによると、CanvasRenderingContext2D.clip() は現在のパスをクリッピング領域にし、そのパス内の描画だけが見えるようにします。また HTMLCanvasElement.toDataURL() はキャンバスの data URL を返し、既定は image/png なので、円形クリップ外の透明領域を書き出せます。
-
MDN Web Docs
CanvasRenderingContext2D.clip()
用途: 円形・カスタム形状マスク向けの canvas クリッピングパスモデル
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clip
-
MDN Web Docs
用途: 形状外の透過を保てる PNG data URL 書き出し
https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
このページはブラウザ内の円形・形状一括トリミングを助けます。マスク余白を必ずプレビューし、目的が単純な矩形サイズプリセットならピクセル指定やSNS用に切り替えてください。