Etsyバナーのリサイズ
Etsyのビッグバナーは1200×300ピクセルで、同じ4:1比率の3360×840の解像度版は高解像度スクリーンで鮮明に保たれます。ここで一度切り抜けば、両方のサイズがブラウザから出力され、アートワークがブラウザから出ることはありません。
PNG、JPG、WebP、GIFをドロップ
ページのどこにでもドロップできます · ファイルを選択 · 100 MB
対応形式： PNG, JPG, JPEG, WebP, GIF, AVIF
Etsyバナーのリサイズとは
Etsyの店舗バナーは店舗の最上部に配置され、公式サイズは1200×300ピクセル（4:1のストリップ）です。このサイズは長年変わっていませんが、今では話の半分にすぎません。高解像度ディスプレイのノートPCやスマートフォンでは、1200ピクセルの画像がバナースロットに引き伸ばされると、目に見えてぼやけて表示されます。
解決策は、同じ比率でより多くのピクセルを提供することです。3360×840は一般的に使われる高解像度版で、1200×300のちょうど2.8倍のサイズです。そのため、同じ切り抜きで両方のサイズを利用でき、二度の判断は不要です。
このページではその2つのサイズを一度に出力します。一度の切り抜き、2つのファイル、どちらも4:1比率、どちらもお使いのマシン上で生成されます。これは、まだ公開していない店舗のブランドアートワークにとって重要な点です。
店舗で細めのバナーを使用している場合は、ミニバナーリサイズツール7.5:1のストリップになります。
3360ピクセルでの出力はファイルサイズが大きくなる可能性があります――画像圧縮ツール指定したサイズにファイルサイズを抑えます。
Etsy店舗の画像セット
店舗ではいくつかの画像が使用され、それぞれ異なる形状です。バナーを適切に設定することは目に見える部分の半分であり、アイコンは人々が記憶する半分です。
| 画像 | サイズ | 比率 | 表示場所 |
|---|---|---|---|
| ビッグバナー | 1200 × 300 | 4:1 | 店舗の最上部に横に表示 |
| 高解像度ビッグバナー | 3360 × 840 | 4:1 | 高解像度スクリーン上の同じスロット |
| ミニバナー | 1200 × 160 | 7.5:1 | 細めのバナーオプション |
| 店舗アイコン | 500 × 500 | 1:1 | 店舗名の隣、円形 |
4:1が思ったより難しい理由
4:1はどのカメラでも生成されるよりもずっと広い比率です。風景写真は3:2または16:9なので、バナーに収めるには高さの大部分を切り落とす必要があります。3:2のフレームの約60%を失うことになります。
製品写真はその切り抜きを生き延びることがほとんどありません。うまくいくのは、ストリップ用に構成されたアートワークです：繰り返しパターン、幅広に撮影されたフラットレイショット、周囲に十分なスペースのあるワードマーク、または製品が片端にある色の領域です。中央の切り抜きが中央にあるものをそのまま取るのではなく、焦点グリッドを使って意図的に切り抜きを選択してください。
店舗バナーに何を配置すべきか
バナーは看板ではなく、段落を配置する場所でもありません。スマートフォンでは数100ピクセル幅で表示されるため、現実的なコンテンツは数100ピクセル幅でも読めるワードマーク、短いキャッチコピー、またはよく選ばれた画像以外の何もない状態です。
季節限定バナーは、同じ切り抜きで異なるアートワークを一度に出力できるため、交換が容易であるという理由だけに労力に見合います。
- 数100ピクセル幅でも読めるサイズのワードマークまたは店舗名。
- サポートテキストは最大1行まで。
- 小さな文字、URL、小さなタイプの割引コードは含めない。
- 製品写真と競合するのではなく、それに合う色を選ぶ。
形式とファイルサイズ
写真用のバナーにはJPEGを使用してください――3360ピクセル幅の場合、同じ画像のPNGは数倍大きくなり、視覚的な利点はありません。フラットな色や文字にはPNGを使用し、JPEGのアーティファクトがエッジの周りに集まるのを防ぎます。Etsyは受け取った画像を再エンコードするため、既に2回圧縮されたものではなく、クリーンで高品質なソースを提供してください。
よくある質問
Etsy店舗バナーのサイズは何ですか？
ビッグバナーは1200×300ピクセル（4:1のストリップ）です。同じ比率の3360×840のバナーが高解像度スクリーンで鮮明に保たれるため、このページでは一度の切り抜きから両方のサイズを出力し、2つのファイルがずれるのを防ぎます。
なぜ私のEtsyバナーがぼやけて見えますか？
ほぼ常に、1つのCSSピクセルに対して2つまたは3つのデバイスピクセルを持つスクリーンで1200ピクセルの画像が表示されているためです。ブラウザが画像をアップスケールするため、結果がぼやけて見えます。同じ比率の3360×840を提供すると、ブラウザが実際のピクセルを使用して表示できます。
製品写真をバナーとして使用できますか？
意図的に切り抜く場合のみです。4:1のストリップでは、通常の3:2の写真の高さの約40%しか保持されないため、中央の切り抜きは通常、被写体の中央を横切る帯を取ります。何を保持するかを選択するために焦点グリッドを使用するか、幅に合わせて構成されたものを撮影してください。
バナーにどのくらいのテキストを含めるべきですか？
店舗名と最大1行の短いテキストです。スマートfoonではバナーが数100ピクセル幅で表示されるため、見出しサイズより小さい文字は読めません。Etsyで最も無駄なピクセルとなりがちなのは、小さなタイプで表示されている割引コードとURLです。
ビッグバナーとミニバナーの違いは何ですか？
高さとその比率です。ビッグバナーは1200×300で4:1、ミニバナーは1200×160で7.5:1で、高さは約半分です。これらは別々のスロットで別々の切り抜きが必要です――ビッグバナーをミニスロットに押し込むと中央が失われます。
このサイトにバナーをアップロードしてリサイズしますか？
いいえ。切り抜き、両方のリサイズ、エンコードはすべてブラウザ内で行われ、ファイルを受信できるエンドポイントはサイトにありません。まだ公開していない店舗のブランディングにとってこれは重要な違いであり、Networkパネルで確認できる事実であり、単なる説明ではありません。