SNSアイコンのサイズの決め方｜丸く切り抜かれても崩れない画像の作り方

アイコンは「正方形で作って円で切られる」

ほとんどのSNSは、アップロードした画像を正方形に切り出したうえで、表示のときに円形にマスクします。つまり、作るときは正方形、見えるのは円という二段構えです。ここを知らずに四角の隅までデザインすると、公開した瞬間に情報が消えます。

• 正方形でない画像をアップすると、中央基準で正方形に切り取られる（長辺の両端が落ちる）
• 表示のときに円でマスクされ、正方形の四隅がさらに落ちる
• 一覧やコメント欄では数十px程度まで縮小され、細い線や小さい文字は潰れる

この3段階を通っても残るものだけが、実際に人の目に入るアイコンです。逆に言えば、中央に大きく1つの要素だけを置けば、どのSNSでも破綻しません。

サイズは「大きめの正方形を1枚」でよい

SNSごとの推奨サイズは仕様変更で変わりますが、共通しているのは「アップロードされた画像は各サービス側で縮小される」という点です。縮小はきれいにかかる一方、拡大は必ずぼやけます。したがって、実際の表示サイズより大きい正方形を1枚用意しておけば足ります。

円で切られても残る「安全域」の取り方

正方形の画像に内接する円を描くと、四隅は必ず落ちます。円の中に確実に収まる正方形は、元の一辺のおよそ70%です。デザインするときは、この中央70%の正方形を安全域と考えます。

1. 1

   キャンバスを正方形で作る

   800×800pxなど、正方形で作業を始めます。長方形で作って後から切ると、意図しない位置で切れます。

2. 2

   中央70%に主役を収める

   800pxなら中央の560px四方が安全域です。顔なら目から口まで、ロゴならマーク全体をこの範囲に入れます。

3. 3

   四隅は背景色だけにする

   四隅は円形マスクで消える前提です。装飾を置いても構いませんが、消えても意味が変わらないものだけにします。

4. 4

   縮小して確認する

   完成したら、画面上で48px程度まで縮小して眺めます。この大きさで何が描いてあるか分からなければ、要素が多すぎます。

文字を入れる場合は、最大でも2〜4文字までにとどめます。48pxに縮小されたアイコンで読めるのは、その程度が限界です。名前を全部入れたいときは、アイコンではなくヘッダー画像やプロフィールカードの役割です。

手持ちの素材からアイコンを用意する手順

撮影した写真、描いたイラスト、ドット絵のいずれでも、流れは同じです。「正方形にする → 主役を中央に寄せる → 形式を整える」の3ステップです。

1. 1

   素材を正方形に切り出す

   写真ならスマートフォンの標準の写真アプリでも正方形トリミングができます。このとき、上下左右に少し余白を残しておくと、円形マスクで詰まった印象になりません。

2. 2

   線がはっきりした絵を使う場合はドットで作る

   ドットアートツールなら、16×16や32×32のグリッドで形を決められます。ドットで作った絵は輪郭が明確なので、小さく表示されても何か分かる形になりやすいのが利点です。

3. 3

   形式と容量を整える

   画像形式変換ツールでPNG・JPEG・WebPを相互に変換できます。JPEGとWebPは画質のスライダーで容量を調整できます。ここでは形式と画質の変換だけを行い、寸法は変わりません。

4. 4

   アップロードして実機で確認する

   投稿一覧、コメント欄、ダークモードの3か所で見え方を確認します。特にダークモードは、白背景のアイコンが浮きやすい場所です。

PNG・JPEG・WebPのどれを選ぶか

迷ったらPNGで問題ありません。アイコンは画像として小さく、容量が問題になる場面はほとんどないためです。アップロードで「形式が対応していません」と言われたときだけ、PNGかJPEGへ変換して出し直します。

公開前のチェックリスト

• 正方形か（縦横のpxが同じか）
• 中央70%の範囲に主役が収まっているか
• 48px程度に縮小しても何か分かるか
• 背景が薄すぎて、白背景・黒背景に溶けていないか
• 他人の作品やブランドロゴを無断で使っていないか
• 同じ画像を複数のSNSで使うなら、どこでも同じ印象に見えるか

アイコンは、投稿より先に目に入る要素です。凝ったデザインより、小さくても一目で「あの人だ」と分かることのほうが効果があります。一度決めたら、当面は変えないほうが認識されやすくなります。

よくある質問

アイコンは何pxで作るのが正解ですか？

800×800px前後の正方形で作っておけば、主要なSNSの推奨サイズを上回るため縮小だけで済みます。各サービスの推奨値は400×400px前後のことが多く、それより小さい画像を上げると拡大されてぼやけます。厳密な上限や推奨値は変更されることがあるため、必要なら各サービスのヘルプで確認してください。

アップロードしたら顔が切れてしまいます。

長方形の画像は中央基準で正方形に切られ、さらに円形にマスクされるためです。あらかじめ正方形にトリミングし、顔が中央70%の範囲に収まるように余白を足してください。全身写真をアイコンにすると顔が小さくなりすぎるので、胸から上を目安に切り出します。

アイコンがぼやけるのはなぜですか？

表示サイズより小さい画像をアップして拡大されているか、一度圧縮された画像を再保存して劣化しているかのどちらかです。元データから作り直し、大きめの正方形で書き出してください。ドット絵の場合は、拡大倍率が整数でないと輪郭がにじむため、2倍・4倍といった整数倍で書き出します。

複数のSNSで同じアイコンを使ってもいいですか？

同じにするほうが認識されやすくなります。1枚の正方形画像を用意して各サービスにアップロードすれば、切り抜きは各サービス側で行われます。ただしサービスによって円形と角丸のどちらでマスクされるかが違うので、四隅に情報を置かない作り方をしておけば、どちらでも破綻しません。