画像を無料で円形にトリミング — 丸型プロフィール画像メーカー

円形か角丸スクエアか：どちらの形状を使うべきか

形状は実はあなたが選ぶものではありません — プラットフォームがアバターを表示する際に独自のマスクを適用し、それを上書きすることはできません。あなたが 選んでいる のは、ファイルがそのマスクに合っているかどうかだけです。

これが重要なのは、円形にすると正方形の約21%が失われ、そのすべてが四隅からだということです。自分で円形にトリミングすれば、何が残るかを正確に確認できます。正方形のまま運任せでアップロードすると、プラットフォームの円形マスクが四隅にあったものを容赦なく切り取ります — 帽子の先端、肩の一部、ロゴの半分などです。

目安はこうです： 顔には円形、ロゴには角丸スクエアを選びましょう。 顔はもともとほぼ丸いため、四隅に情報が乗ることはそもそもありません。文字入りのロゴは縦より横に長いことが多く、円形にすると文字の両端が削られてしまいます。だからSlack、iOS、Play Storeのアイコンはすべて角丸スクエアを使い、あらゆるソーシャルネットワークは人物写真に円形を使うのです。

透明なPNGに余分なバイトをかける価値がある理由

JPGに円形トリミングしても、実は本当の円形にはなりません。JPGにはアルファチャンネルがないため、四隅には 何か を入れなければならず — 通常は白です。白いページの上では誰も気づきません。でもそのアバターをダークテーマや色付きカード、スライド、動画オーバーレイに置くと、頭の周りに白い三角形が4つ現れます。

PNGとWebPはどちらもアルファチャンネルを持つため、四隅には「何もない」状態を保存でき、円形はどんな背景の上でもきれいに合成されます。そのためPNGがこのツールの既定値になっています。WebPも同じ役割をおよそ3分の1のバイト数で果たし、現在のブラウザはすべて対応していますが、一部のアップロードフォームや古いデスクトップアプリはこの拡張子を拒否することがあるため、他人のシステムにファイルを渡す場合はPNGの方が安全な選択です。

JPGを選ぶべき唯一のケースはサイズの上限がある場合です。フォームがJPGを必須にしていたり、数十キロバイトしか許可しない場合はJPGを選び、背景色を実際の配置先ページの色に合わせて設定すれば、四隅がその背景に溶け込みます。

32ピクセルでも読み取れる顔のフレーミング

アバターは書き出したサイズで見られることはほとんどありません。コメント欄では32〜40ピクセル程度の大きさです。そのサイズで残るのは頭の輪郭、顔と背景のコントラスト、目のおおよその位置だけです。それ以外はすべて潰れてしまいます。

だから、自然に感じるよりも少し寄って切りましょう。円の高さの60〜70%を頭で満たし、目の位置を中心線よりやや上に置き、髪の上にわずかな余白を残すと、切れ方が不自然に見えません。よくある最大の失敗はごちゃごちゃした背景です。数少ないピクセルを奪い合い、サムネイル全体をノイズに変えてしまいます。背景が乱雑な場合は、円形トリミングの背後に単色またはぼかしを入れた方が、どのサイズでも見やすくなります。

実用的なテストがひとつあります。アバターを書き出したら、ファイルブラウザで最小のサムネイル表示にして見てみてください。自分だと分からなければ、他の人にも分かりません。

iOSのスクワークルとは

Appleのアプリアイコンは角丸長方形ではありません。角丸長方形は直線の辺を四分円のコーナーにつなぐため、そのつなぎ目で曲率が急に変化し、目には小さな折れ目のように見えます。Appleはその代わりに スーパー楕円 を使っており、辺から曲率がなだらかに増していくため、輪郭には目に見える変化点が一切ありません。デザイナーはこの結果をスクワークルと呼びます。

Canvasは円弧のコーナーしか描けないため、このツールの角丸スクエアモードは角丸長方形の近似であり、本当のスーパー楕円ではありません。アバターのサイズでは差は各コーナーでせいぜい1〜2ピクセルほどで、誰も気づきません。角の半径を辺の約22%に設定すればAppleのアプリアイコンと同じ比率になります。このツールの既定値は24%で、Slackやほとんどのチャットアプリがアバターをマスクする比率と一致しています。

スライダーは50%まで動きます。これは まさに 円形です — 角の半径が辺の半分に達した角丸スクエアには、まっすぐな辺がもう残っていません。この連続性こそが、この2つの形状がここで1つのコードパスを共有し、別々の2つのツールになっていない理由です。

枠線、そしてなぜ切り取られてしまうのか

アバターの周りのリングは、ごちゃごちゃした背景から浮き立たせるのに良い方法であり、プラットフォーム自身のマスクを乗り越えて生き残る唯一のスタイリングです — ただし、リングが画像の周りではなく内側にある場合に限ります。

これは正確に理解しておく価値があります。あるツールが320 px の円の 外側 に6 px の枠線を追加すると、ファイルは332 px になり、プラットフォームはそれを再スケーリングして独自の円形マスクを再適用します — その結果リングの真ん中が切り取られ、不均一になります。このツールは指定したサイズの 内側 に枠線を描画するため、320 px は320 px のまま変わらず、リングはマスクが想定する境界にぴたりと収まります。枠線スライダーも同じ理由で辺の12%までに制限されており、それを超えるとリングではなくフレームになってしまいます。

ブラウザ内でトリミングする方が安全な理由

多くの「オンライン円形トリミング」サイトは、写真をアップロードしてサーバー上でトリミングし、送り返してくる仕組みです。自分の顔写真にとって、これは重要な違いです。コピーが他人のディスク上に存在し、その時々の保存ポリシーに従い、しばしば利用規約によって画像の利用権が相手に与えられてしまいます。

Resizoには画像を受け取るバックエンドがありません。トリミングはブラウザ自身のCanvas APIを通じてタブ内で実行されます。確認方法は2つあります。ブラウザのネットワークパネルを開いてトリミング中に何も送信されていないことを確認する、またはページを読み込んだ後にインターネットを切断してもトリミングできることを確認する、のいずれかです。

有用な副作用として、再エンコードによりEXIFメタデータが削除されます。そのため、スマートフォンが元画像に書き込んだGPS座標やタイムスタンプは、公開するアバターには付いてきません。そのメタデータが必要な場合は元のファイルを保管しておいてください。