丸いプロフィール写真：円でどこまで隠れ、顔はどこに置く？
作成 · 更新 · 運営者（個人）
メッセージアプリやSNSにプロフィール写真を載せると、正方形で選んだ写真が丸く切り取られて表示されることがよくあります。切り抜いたときは問題なかったのに、載せてみたら頭の上が消えたり、顔が片側に寄って見えたりするなら、円が隠す場所を考えていなかったためです。この記事では、円が正方形をどれだけ隠すかを測り、顔をどこに置けば安全かを実際に切り抜いて比べます。
円は正方形の78.5%しか見せません
正方形にぴったり収まる円を描くと、面積の78.5%しか残りません。四隅で5.4%ずつ、合わせて21.5%が消えます。縦横の中央の線は端まで見えますが、対角線の方向では角から辺の長さの20.7%ぶんが見えなくなります。800pxの正方形なら、角ごとに対角線で約166pxが隠れる計算です。そのため上の中央はほぼそのまま見え、左上・右上のような斜めの場所から先に切れます。
同じ写真を4通りに切り抜きました
縦3024×4032の人物画像を自作しました。MiruKitの「写真を切り抜き」と同じ処理で正方形を4つ作り、800×800のWebPに縮小しています。MiruKitは正方形で保存し、円で隠すのはアップロード先のサービスなので、保存したファイルに円形のマスクをかけて、顔・首と髪が円の中にどれだけ残るかを数えました。
「1:1 · プロフィール／Instagram」を選んでそのままにすると、縦長の写真の中央が切り抜かれます。顔と髪はすべて円に収まりましたが、顔の幅は直径の19.8%しかありません。YouTubeヘルプはプロフィール写真が98×98pxで表示されると案内しており、この大きさでは顔の幅が19pxほどです。上半身のほうが目立つ写真になります。
顔を横の中央に置き、顔の中心を上から45%あたりに、顔の幅を直径の42.9%にすると、顔も髪もすべて円の中に残りました。98pxでも顔の幅が42pxあるので、目と口が見分けられます。肩の上の部分が下側の曲線を埋めるので、円の中の空いた所も少なくなりました。
顔に寄りすぎると結果が変わります。頭の高さより小さい700pxの枠で切り抜くと、顔は99.0%残りましたが、正方形に残った髪のうち円の中に入ったのは55.8%だけでした。上の左右の髪型が円で切れてしまいます。
写真でよく使う三分割構図のように顔を左上の3分の1の位置に置くと、円とは相性がよくありません。同じ大きさで顔の幅42.9%を保っても、髪は49.5%しか円の中に残らず、顔も98.0%で額のあたりが少し欠けました。円は中央が基準なので、顔も横の中央に置くほうが安全です。
もっと小さく表示される場所も考えておく
プロフィール写真は、トーク一覧やコメントの横のように、ずっと小さな場所にも出ます。同じファイルを40pxの円に縮めると、差がさらに大きくなります。中央のまま切り抜いた写真は顔の幅が8pxほどで目鼻が点のように見え、顔を直径の42.9%にした写真は17pxで表情が分かりました。寄りすぎた写真は34pxでいちばん大きく見えましたが、髪型が切れていて見慣れない印象です。小さな場所まで考えると、顔が直径の40〜50%を占めるくらいがちょうどよいでしょう。
背景もシンプルなほうが有利です。円のふちは背景が占めることが多く、模様が細かいと、小さくしたときに顔より背景が先に目に入ります。
MiruKitで切り抜く手順
- 「写真を切り抜き」で元の写真を開きます。
- 「縦横比」で「1:1 · プロフィール／Instagram」を選びます。枠は最初は中央に置かれます。
- 枠の角のハンドルで大きさを変え、顔の幅が枠の幅の40%前後になるようにします。髪の上には枠の高さの10〜15%ほど余白を残しましょう。今回うまくいった切り抜きは14%でした。
- 枠をドラッグして顔を横の中央に置き、目が枠の上から40%ほどに来るよう合わせます。数字で合わせるときは「位置・サイズを数値で指定」で「左から（px）」と「上から（px）」を直します。
- プレビューで四隅に名前や手のような大事なものがないか確かめてから保存します。
何ピクセルで保存すればいい？
98pxで表示される場所は、画面の倍率が2倍の機器では196画素、3倍では294画素で描かれます。今回の正方形をWebPで保存すると、400pxで3.6KB、800pxで17.0KB、1080pxで65.9KBでした。400pxで3倍画面の294画素を十分に上回り、800pxはサービスが写真をより大きく見せたり切り直したりするときのための余裕です。大きいファイルが鮮明さを足してくれるわけではないので、800px前後で十分と考えてよいでしょう。
関連するツールを開くMiruKitで実際に確認した結果
| 枠の位置 | 円の中の顔・首 / 髪 | 円の直径に対する顔の幅 · 98pxで | 800pxのWebP容量 |
|---|---|---|---|
| 1:1を中央のまま | 100.0% / 100.0% | 19.8% · 19px | 6.0 KB |
| 顔を中央・少し上に | 100.0% / 100.0% | 42.9% · 42px | 17.0 KB |
| 顔に寄りすぎ | 99.0% / 55.8% | 85.7% · 84px | 15.0 KB |
| 顔を左上の3分の1に | 98.0% / 49.5% | 42.9% · 42px | 16.4 KB |
自作の3024×4032の人物画像を、切り抜きツールと同じprocessImageで4種類の正方形に切り抜き、800×800のWebP（画質85）に縮小しました。円は保存した正方形に円形のマスクをかけて計算しています（MiruKitは正方形で保存し、円で隠すのはアップロード先のサービスです）。顔・首は肌色、髪は髪の色の画素で数えました。
知っておきたいこと
今回の数値は自作の人物画像1枚の結果です。実際の写真は、髪型や肩幅、背景によって残る部分が変わります。
円で表示されるか、角の丸い四角で表示されるかはサービスごとに違い、変わることもあります。載せた直後にアプリのプレビューでもう一度確かめてください。
公式の出典
出典の確認日 2026-10-27