画像を円形にトリミングする方法（プロフィール写真やアバター用）

Last updated: 2026年6月28日

サークルクロップは、正方形または長方形の写真を円形画像に切り抜く手法であり、アバター、プロフィール写真、ロゴの標準的な形状です。これには主に二つの目的があります。一つは透過した円形の PNG（デザイン用途）と、もう一つは単色背景上の円形（完成したアバター用）です。本ガイドでは、その両方、被写体を中央に保つ「正方形ファーストのルール」、そしてサークルクロップが実際に使用される場所について解説します。

クイックアンサー：画像を円形に切り抜くには？

重要なルール：まず被写体を中央に保って正方形でクロップし、その後に円形を適用すること。そうしないと、被写体が円の中でオフセンターになってしまいます。

正方形ファーストのルール

多くの人は画像をいきなり円形に切り抜こうとし、結果的に被写体が片側に寄ってしまうことに気づきます。この解決策は、まず中央に配置した正方形でクロップし、その後で丸くすることです。正方形を先に適用することで、被写体が最終的な円の中心に来ることが保証されます。

顔の場合、頭全体ではなく目と鼻を中心に配置することが重要です。なぜなら、円形クロップは頭の端が来る角を切り落としてしまうからです。顎や額が切れないように、少し余白を残しましょう。

サークルクロップはどこで使われるか？

サークルクロップは、いくつかの特定の用途における標準的な形状となっています。

• アバターおよびプロフィール写真 — ほとんどのソーシャルプラットフォームは、アップロードされた正方形を円形にマスクします。
• ロゴ — 多くのブランドが、アプリアイコンやファビコンのためにマークを円形に配置しています。
• チームおよび推薦文の写真 — 「会社概要」ページやレビューウィジェットにおける丸い顔写真。
• UI要素 — 円形のボタンやバッジ。

ソーシャルプロフィール写真の場合、通常は自分で円形にする必要はありません。中央に正方形をアップロードするだけで、プラットフォームが自動でマスク処理を行います。自分で円形を作成するのは、デザインや印刷物用に完成した丸い画像が必要な場合のみです。

どの方法を選ぶべきか？

方法1：透過 PNG の円形

透過する円形は、角が透明なまま丸い形状を保つため、どんな背景にも重ねることができます。PNGとしてエクスポートしてください（JPEGにはアルファチャンネルがないため）。

## 中央の 600x600 正方形にクロップし、その後円形のアルファマスクを適用する
magick input.jpg -gravity center -crop 600x600+0+0 +repage \
  \( +clone -threshold -1 -negate -fill white -draw "circle 300,300 300,0" \) \
  -alpha copy -compose CopyOpacity -composite output.png

結果は、角が透明な PNG ファイルになります。レイアウトでの合成に使用してください。透過画像を作成する方法を参照してください。

方法2：単色背景上の円形

完成したアバターのためには、円を単色（白、ブランドカラー、または黒）の背景に合成します。これがほとんどの「丸いプロフィール写真」ツールが出力するものです。

## ライトブルーの背景を持つ円形
magick -size 600x600 "xc:#e8f0fe" bg.png
magick bg.png circle.png -gravity center -compose over -composite output.jpg

被写体とコントラストのある背景色を選びましょう。白は安全なデフォルトです。ブランドカラーは企業の統一されたアバターセットに合います。

方法3：CSSによる円形（画像編集なし）

Webページの場合、画像をクロップする必要はまったくありません。CSSが正方形を円形にマスクします。

.avatar { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; }

border-radius: 50% は、あらゆる正方形要素を円形に変え、object-fit: cover は画像を歪ませることなく要素全体に満たします。これがほとんどのウェブサイトが正方形のソース画像からアバターを表示する方法です。MDN border-radius リファレンスでプロパティを確認できます。

方法4：ブラウザツール

単一の画像を処理する場合、Image Resizer またはサークルクロップツールを使用します。アップロードし、被写体を正方形内に配置し、円形を適用してからダウンロードします。これにより「正方形ファーストのルール」が視覚的に処理されます。

円形にするか、プラットフォームに任せるべきか？

ソーシャルプロフィール写真の場合、プラットフォームに任せるべきです — 中央に正方形をアップロードするだけで、プラットフォームがそれを円形にマスクします。自分で円形を作成すると、かえって問題となることがあります。なぜなら、一部のプラットフォームは正方形を期待しているため、あなたの円形画像をより小さな円形に再マスクし、さらにクロップしてしまうからです。自分で円形を作成するのは、デザインや印刷物用、または再マスクされないアバターとして完成した丸い画像が必要な場合に限ります。

この区別が多くの人を混乱させます。なぜなら、プラットフォーム側もその混乱を助長しているように見えるからです。UI上ではあなたの写真が円形として表示されるため、ユーザーは自分が円形をアップロードしなければならないと誤解します。しかし実際には、アップロードフィールドはほぼ常に正方形を期待しています。円形の表示は、その上に適用される CSS マスクです。あらかじめ円形にクロップされた画像をアップロードすると、プラットフォームのマスクが被写体を二度切り取り、意図したよりも小さくタイトなクロップになってしまいます。安全な方法は、被写体の顔を中央三分の一に配置した、十分余白のある正方形をアップロードすることです。そうすれば、プラットフォームが適用するどの円形でも、顔全体が少しの呼吸スペースとともに含まれます。

よくある間違い

• いきなり円形にクロップする。 被写体がオフセンターになってしまう。まず正方形から始めること。
• 頭全体を中央に配置しすぎる。 円形は角を切り落とすため、顔（目/鼻）を中心にすること。
• 透過する円形を JPEG でエクスポートする。 JPEGにはアルファチャンネルがないため、角が黒または白になってしまう。PNGを使用すること。
• ソーシャルプロフィール写真を事前に円形にクロップする。 プラットフォームが再マスクするため、代わりに中央の正方形をアップロードすること。
• 顎や額を切ってしまう。 円形の内部に余白を残すこと。

よくある質問

丸いプロフィール写真はどう作りますか？

顔を中心とした中央の正方形にクロップし、その後プラットフォームにマスク処理を任せるか、完成した丸い画像のために円形クロップを適用します。

ソーシャルメディア用に円形にクロップすべきですか？

通常はいいえ — 中央の正方形をアップロードするだけで、プラットフォームがそれを円形にマスクします。事前に円形にすると再クロップされる可能性があります。

透過する円形の形式は何ですか？

PNGです。JPEGにはアルファチャンネルがないため、透明な角を保存できません。透過画像を参照してください。

背景の上に円形写真を置くにはどうしますか？

まず透過 PNG の円形を作成し、それを単色に合成するか、Webページでは CSS border-radius: 50% を使用します。

画像を円形にクロップするにはどうすればいいですか？

まず正方形にクロップすること（円は正方形のキャンバスにしか収まらないため）、その後円形のマスクを適用します。角を透明に保つために PNG でエクスポートするか、単色背景の上に配置して JPG としてエクスポートします。「正方形ファーストのルール」は譲れません — 非正方形のキャンバス上の円形は不自然な角を残します。

なぜ最初に正方形でクロップする必要があるのですか？

なぜなら、円は正方形のキャンバスに収まるからです。非正方形の画像に円形のマスクを適用すると、キャンバスの形状が持つ何らかのものが残る、透明ではない角ができてしまいます。被写体を中央にした正方形に最初にクロップすることで、円が綺麗に内接し、結果として余計な角のない丸い画像が得られます。

プロフィール写真はどのくらいのサイズが良いですか？

目安として 400×400 から 800×800 ピクセル — シャープさを保つには十分大きく、高速に読み込むには十分に小さいサイズです。まず正方形にクロップし、その後円形を適用します。ほとんどのプラットフォームは大きなアップロード画像をダウンサンプリングするため、800pxが安全な上限です。画像クロッパーを参照してください。

非正方形の画像を円形にクロップできますか？

最初に正方形にクロップすることでのみ可能です — 円は正方形のキャンバスに収まるため、非正方形の画像では不自然な角が残ります。常に被写体を中央にした正方形から始め、その後で円形を適用してください。「正方形ファーストのルール」はクリーンな円形クロップにとって必須です。

円形のクロップをシャープに保つにはどうすればいいですか？

レティナディスプレイ上で円が鮮明に保たれるように、表示サイズの2倍（例：400px表示なら800px）でエクスポートし、透過な角の損失を防ぐために PNG を使用します。高 DPI の画面では 1x の円形はぼやけて見えます。特に透明なエッジは、JPEGにはアルファチャンネルがないため、PNGの方が有利です。

サークルクロップはどこで使われるか？

ほぼすべてのプラットフォーム（ソーシャル、メール、アプリ、フォーラム）のプロフィール写真やアバターです。これらはユーザーのアイデンティティのデフォルトであるため、被写体を中心とした正方形のソース写真は、綺麗に円形にクロップされます。エクスポートサイズをプラットフォームのアバター仕様（通常 400–800px）に合わせましょう。

画像クレジット

• Circle-crop demo、square-then-circle rule、および circle-crop use-cases の図は、eコマーススタイルの写真（Pexels #16675632、Mikael Blomkvistによる提供）から作者が生成したもので、実際のサークルクロップの出力と正方形ファーストのルールを示すものです。