Etsyショップアイコン（500×500）
Etsyショップアイコンは、ショップ名の横に表示される500×500ピクセルの正方形画像が円形で表示されます。ここでは、円形マスクをプレビュー上に重ねて切り抜くので、アップロード直後にロゴの端が意図せず切り取られることがありません。
PNG、JPG、WebP、GIFをドロップ
ページのどこにでもドロップできます · ファイルを選択 · 100 MB
対応形式： PNG, JPG, JPEG, WebP, GIF, AVIF
Etsyショップアイコン（500×500）とは
ショップアイコンは、 storefront（店舗ページ）、検索結果、すべてのレビューの横、購入者の購入履歴にある、ショップ名の横の小さな丸い画像です。アップロード時は500×500の正方形で、表示時には円形でレンダリングされます。
また、購入者が再訪した際に認識する画像でもあります。バナーは1回の訪問で1回しか見られませんが、アイコンはショップに随所について回り、通常は形状と色だけが判読できるサイズで表示されます。そのため、詳細ではなく、認識性を最適化することが重要です。
このページでは、円形マスクが重ねられた正方形の領域に正確に切り抜き、マスクで除去される角の部分が配置中に見えるようにします。画像はどこにもアップロードされません。
出品の上にある横長の画像は別の画像です。ショップバナーリサイザーは、両方の解像度を書き出します。
ロゴがブラウザで開けない形式で送られてきた場合、フォーマットコンバーターでまずPNGに変換します。
アイコンと他のショップ画像との関係
アイコンは小さく、丸く、至る所にあります。バナーは大きく、横長で、一度しか見られません。これらは同じアートワークの変形ではありません。
| 画像 | サイズ | 形状 | 表示場所 |
|---|---|---|---|
| ショップアイコン | 500 × 500 | 円形 | ショップ名が表示される場所 |
| ビッグバナー | 1200 × 300 | 4:1 ストリップ | フロントストアのトップ |
| ミニバナー | 1200 × 160 | 7.5:1 ストリップ | スリムな代替案 |
円形で表示される部分
正方形に内接する円は、面積の約79%を表示し、4つの角は完全に除去されます。キャンバスを埋める正方形ロゴは角を失い、端から端まで伸びるワードマークは最初と最後の文字を失います。
マークを中央に配置し、余白を残してください。ブランドがシンボルではなくワードマークの場合、アイコンにはモノグラムやイニシャルを使用し、バナーにはフルワードマークを保持することを検討してください――これは、長い名前の多くのショップが最終的にたどり着く解決策です。
- 角は常に除去されます；意味のあるものはそこにありません。
- 約6文字より長いワードマークは、円の中で読み取れることはほとんどありません。
- 高いコントラストにしてください。アイコンはテキストの横で小さく表示されるためです。
- 細いアウトラインは避けてください。レビューリストのサイズでは消えてしまいます。
なぜ500×500で、それより大きなサイズではないのか
Etsyはこのスロットに500×500を指定しており、それから小さいレンダリングを生成します。これより大幅に大きな画像を提供しても、小さいサイズが鮮明になるわけではありません――いずれにせよリサンプルされるためです。そして、より大きなファイルは再エンコーダーが破棄するデータを増やしてしまいます。
元の画像が500ピクセルより小さい場合、ページはそれを通知し、静かに拡大することはありません。200ピクセルのロゴを500にアップスケールしても、詳細は追加されず、判読可能だったエッジがぼやけてしまいます。
形式と背景
フラットな色や硬いエッジのあるロゴ、透明度のあるものにはPNGを使用します。写真的なアイコンにはJPEGを使用できますが、このサイズでは写真をショップアイコンにすることはほとんどありません。透明なPNGをエクスポートする場合、白いページ上での見え方を確認してください――Etsyのフロントストアは明るいため、透明な背景の白いロゴは完全に見えなくなります。
よくある質問
Etsyショップアイコンのサイズはどれくらいですか？
500×500ピクセルです。アップロード時は正方形で、表示時は円形になります。Etsyは検索結果やレビューリストで使用される小さいレンダリングをこの1つのファイルから生成するため、500ピクセルで十分であり、それ以上の大きさにしてもどこも鮮明にはなりません。
なぜロゴがショップアイコンで切れていますか？
それはカットではなくマスクです：アイコンはあなたの正方形に内接する円として表示され、角の部分の面積の約5分の1が除去されます。キャンバスの端まで埋まるロゴはその端を失います。中央に配置し、余白を残してください。
ショップ名をアイコンとして使用できますか？
短い名前の場合のみです。円の中では、アイコンが通常表示されるサイズで約6文字までが読み取れます。それより長い名前は判読不能な斑点になります。長い名前の多くのショップは、アイコンにモノグラムやイニシャルを使用し、バナーにフルワードマークを保持しています。
アイコンに透明な背景が必要ですか？
可能ですが、まず白い背景上での見え方を確認してください。Etsyのページは明るいため、透明な背景の白いまたは非常に薄い色のロゴは完全に消えてしまいます。ブランドパレットから選んだ単色の背景の方が、より安全で認識性が高い選択肢です。
アイコンはバナーと一致する必要がありますか？
同じである必要はありません。同じパレットと同じフォントを使用してください。しかし、アイコンは独自のマークとしてデザインしてください――バナーを円に切り抜いたものはほとんど読めません。なぜなら、バナーは横長に構成され、アイコンは小さく読まれるからです。
ここで切り抜くときにロゴはアップロードされますか？
いいえ。切り抜きとエクスポートはサーバーを介さず、お使いのブラウザで実行されます。また、このサイトは画像を受信するエンドポイントを持っていません。その後、ご自身のマシンから結果をEtsyにアップロードしてください。