SNSアイコンの作り方｜透過背景と128・64・32pxの表示を比較

アイコンを丸くしても、文字が小さすぎたり、白いロゴが白背景に重なったりすると判別しにくくなります。ここでは提出先の条件とツールの設定を分け、同じ512×512pxの透過画像を背景と表示サイズだけ変えて比較します。

1. SNSの推奨サイズと「アプリ風」の設定は別

Xの公式ヘルプは、プロフィール画像に400×400pxを推奨し、対応形式をJPG・GIF・PNGとしています。アニメーションGIFは対象外です。これはXの提出条件の確認に使えますが、他のSNSやアプリストアの条件を示すものではありません。

当サイトの「SNS丸アイコン」は512pxの円形・透明背景、「iOS風アイコン」は512px・角丸22%・白背景、「Android風アイコン」は512px・角丸16%・白背景を選ぶ独自のプリセットです。OSやストアの公式アイコン規格ではありません。X向けに400pxで保存する場合は、プリセットを選んだ後に出力サイズを400pxへ変更します。

出力できる形式と、投稿先が受け付ける形式も分けます。ツールがWebPを出力できても、上記のXヘルプの対応形式一覧にはWebPは含まれません。投稿先のヘルプで形式・寸法・容量を確認してから保存形式を選んでください。

2. 同じ透過PNGを白・黒背景、128・64・32pxで比べる

比較用に、透明な512×512pxの上へ白いF字と白い円形の線を描いたPNGを作成しました。円の線幅は元画像で12pxです。下の例はこの1ファイルをブラウザで縮小表示したもので、ツールの保存結果やSNS投稿後の実測ではありません。

白背景（#ffffff）

128px

64px

32px

黒背景（#111111）

128px

64px

32px

白い図形は白背景に重なると見えません。黒背景では同じ図形を確認できます。透明にすればどの背景にも対応できる、というわけではありません。線幅12pxは128px表示では3px、64pxでは1.5px、32pxでは0.75px相当になる計算です。細い線や小さな文字の確認は、元画像を拡大した状態だけでは足りません。

この例を再現するには、上の比較画像を保存して角丸・丸形切り抜きツールへ読み込み、結果の「小サイズ表示プレビュー」をライト・ダークに切り替えます。ツールの背景色はこの白・黒の例と同一ではありませんが、背景を変えたときの判別を確認できます。文字色を変える場合は元画像を編集し直し、背景を固定したい場合は背景色を指定します。

3. 余白と枠線は、縮小後の幅で判断する

正方形の四隅は円形の外に出るため、そこに置いた文字や飾りは切れます。重要な要素を中央へ寄せ、切り抜き位置を確認してください。余白の割合を入れるだけで、どの画像も見切れを防げるとは限りません。

ツールの余白10%は、512px出力では片側51.2px、画像を描く幅は409.6pxになる計算です。切り抜いた領域全体が小さくなるため、顔の端を残せても文字はさらに小さくなります。まず余白0%で位置を合わせ、必要な分だけ増やして32px表示を比べます。

枠線4pxを512pxの画像へ付けても、32px表示では0.25px相当です。「1〜4pxなら見やすい」と一律には決められません。枠線の色・幅を変え、必要な要素が残るかと背景との区別を小サイズで確認します。

4. 透明部分と投稿後の表示を確認して保存する

このツールはPNGとWebPでは透明背景を選べます。JPEGには透明部分を保存できず、透明設定のままJPEGを選ぶと白で塗りつぶします。WebPを選ぶだけで背景が固定されるわけではありません。白いロゴを白で塗りつぶしたJPEGにすると判別できなくなるので、背景色を指定して結果を確認します。

保存後は寸法・形式と、実際の投稿先のプレビューを確認してください。SNS側の処理や表示場所は当サイトのプレビューと異なります。投稿後に文字や顔の端が切れる場合は、元画像から切り抜き位置を直します。512pxならどのサービスにも十分、という共通条件は設けません。