公開更新2分

小さいアイコン設計:256px、64px、32px、16pxで確認

実際のアイコンを4サイズと丸い切り抜きで比べ、消える細部を見つけます。

アイコンは大きな編集画面だけで判断できません。下は実際のSquare PFP出力を256px、64px、32px、16pxと、二つの丸い切り抜きで表示したものです。

実際のSquare PFPアイコンのサイズ比較, 256px
256px
実際のSquare PFPアイコンのサイズ比較, 64px
64px
実際のSquare PFPアイコンのサイズ比較, 32px
32px
実際のSquare PFPアイコンのサイズ比較, 16px
16px
実際のSquare PFPアイコンのサイズ比較, 64px 丸い切り抜き実際のSquare PFPアイコンのサイズ比較, 32px 丸い切り抜き

小さい方から見る

16pxでは輪郭と大きな色面が中心です。32pxでは目と髪が戻り、64pxで細部が役立ちます。16pxは厳しい確認用で、すべてのサービスが要求するサイズではありません。

髪型、眼鏡、帽子、強い色面など、サイズをまたいで残る目印をひとつ選びます。丸い切り抜きは四隅を隠すため、顔と主な特徴は中央に置きます。

Square PFPで256pxの元画像を保存し、元を上書きせずに小さな確認用画像を作ります。読みにくい場合は、細部すべてを強くするのではなく、失われた最大の輪郭か明暗差を直してください。

表示から直す場所を決める

  • 16pxで色の塊だけになる:実際に使う最小サイズへ戻って必要性を判断する。
  • 32pxで顔と髪を分けられない:二つの明るさを離す。
  • 丸い切り抜きで帽子や髪が隠れる:外側の余白を増やす。
  • 64pxでも混雑する:細部を強調せず、小物を一つ減らす。

一度に一つだけ直し、前の保存画像を残します。どの変更が対象サイズを改善したかを直接比較できます。

🎨

スクエアPFPで作る

正方形アイコンを一般的なサイズと切り抜きで確認します。

スクエアPFPを開く →