SNSのプロフィール画像を設定したら、顔の一部が切れていた。よくある失敗です。
原因は、多くのSNSがアップロードされた画像を円形にマスクして表示するためです。四角い画像のつもりで作ると、四隅が落ちます。
この記事では、丸く切り抜く手順と、切れない構図の作り方を整理します。
INFO
結論： アイコンは正方形で作り、被写体を中央の6〜7割に収める。これだけで切れる事故はほぼ防げます。
1. なぜ四隅が消えるのか
主要なSNSは、正方形の画像を受け取ったあと、表示するときに円でくり抜きます。
■■■■■ ○○○
■■■■■ → ○○○○○
■■■■■ ○○○
四隅の面積は、正方形全体のおよそ 21％ にあたります。つまり、アップロードした画像の2割は表示されないと考えてください。
四隅に置いてはいけないもの
- 顔や頭の一部
- 店名やロゴ
- 伝えたい文字
2. SNS別・推奨サイズ
| サービス | 推奨サイズ | 表示形状 |
|---|---|---|
| X（旧Twitter） | 400 × 400 px | 円形 |
| 320 × 320 px 以上 | 円形 | |
| LINE | 640 × 640 px | 角丸 |
| 320 × 320 px 以上 | 円形 | |
| YouTube | 800 × 800 px | 円形 |
TIP
迷ったら 800×800px の正方形 で1枚作っておけば、すべてのサービスで使い回せます。大きいぶんには縮小されるだけなので問題ありません。
3. 切れない構図の作り方
円形マスクを前提にすると、構図の考え方が変わります。
守るべき3点
- 被写体を中央に置く — 中心からずれるほど、円の縁に近づきます
- 画像全体の6〜7割の大きさに収める — 顔を大きくしすぎない
- 上下左右に均等な余白を残す — 片側だけ詰めると偏って見えます
WARNING
横長の写真から切り出すときは要注意です。正方形に切った時点で左右が大きく落ち、さらに円形マスクで四隅が消えます。二段階で削られることを想定してください。
4. 丸く切り抜く
5. 枠線を付けると輪郭が締まる
背景が白いサービスに白っぽい画像を置くと、輪郭が溶けて見えます。
細い枠線を1本入れるだけで、アイコンとしての存在感が出ます。
| 枠線の色 | 印象 |
|---|---|
| 白 | 濃い背景で映える。清潔感 |
| 黒・濃紺 | 引き締まる。ビジネス向き |
| ブランドカラー | 統一感が出る |
太さは、画像サイズの 2〜4％ 程度が目安です。800pxの画像なら16〜32px程度になります。
6. 背景が気になるときは
自撮り写真をアイコンにすると、背景の生活感が気になることがあります。その場合は背景を消してから切り抜くと、印象が大きく変わります。
背景透過・背景削除ツール
人物や商品の背景を自動で削除できます。単色背景なら、色を指定して透明化することも可能です。
背景を消したあとに好みの色を敷けば、統一感のあるアイコンになります。
7. 仕上げに確認すること
- 小さく表示して確認する — アイコンは実際には32〜48px程度で表示されます。縮小しても何が写っているか分かるかを確認してください
- 顔が切れていないか — 円の縁で輪郭が欠けていないか
- 明るさは十分か — 暗い写真は小さくすると潰れて見えます
TIP
作ったアイコンを実際の表示サイズまで縮小して眺めてみてください。ここで判別できないなら、被写体を大きくするか、要素を減らす必要があります。
まとめ
- SNSのアイコンは円形にマスクされ、四隅の約2割が消える
- 800×800pxの正方形で作れば、主要サービスで使い回せる
- 被写体は中央の6〜7割に収める
- 横長写真からの切り出しは、二段階で削られるので余裕をもって
- 枠線は画像サイズの2〜4％。輪郭が締まる
- 最後は実表示サイズまで縮小して判別できるか確認する
小さく表示されるものだからこそ、シンプルに作るほど伝わります。