--- title: "Webflow 向けの商品写真：ファイルサイズの上限内で | Herofab" description: "Webflow のストア向けに、Herofab が写真一枚からスタジオやシーンの商品画像を作成。Webflow のファイルサイズ上限には JPG のほうが安全です。" url: https://herofab.app/ja/tools/product-photos-for-webflow language: ja updated: 2026-10-12 --- # Webflow の商品画像を、アップロードできる軽さで。 Webflow は商品画像にピクセル寸法を定めておらず、制限があるのは各ファイルのファイルサイズです。商品スタジオは、商品の写真一枚から、商品をスタジオの面やスタイリングしたシーンに配置し、2Kまたは4Kで納品します。2Kの PNG は Webflow の上限を超えることがあるため、Webflow のストアには JPG のダウンロードのほうが安全です。 [無料で始める](https://app.herofab.app/login?lang=ja) · [商品スタジオ](https://herofab.app/ja/tools/product-photography) ![大理石のブロックに置かれた、金の透かし細工の香水瓶](https://herofab.app/img/ex/perfume-marble-1100.webp) Herofab で作成 · 商品スタジオ ## Webflow が制限を設けるところ。 1. ### 寸法ではなくファイルサイズの上限 Webflow には、ファイルサイズが上限を下回っていれば、どんな寸法の画像でもアップロードできます。細部の多いシーンの PNG は重くなります。2Kでもその上限を超えることがあり、4Kのファイルはさらに重くなります。JPG のダウンロードのほうが安全です。アップロードの前に、各ファイルのファイルサイズを確認してください。上限の値は、このページの表にあります。 2. ### Main image と More images Webflow の商品には、Main image フィールドが一つと、限られた枚数の追加画像を入れられる More images フィールドがあります。商品とバリエーションの画像フィールドに SVG ファイルは使えません。Main image フィールドには、商品全体がもっとも素直に見えるビューを入れます。残りの枠には、同じ元の写真から作った別のアングル、スタイリングしたシーン、ディテールのクローズアップを入れられます。 3. ### レスポンシブ用の画像、ただしインポートは対象外 Webflow は、インラインの JPG、PNG、WebP 画像について、十分な幅のある画像から、より幅の狭い画像を一式生成します。CSV インポートや API で追加した画像にはこうした画像が生成されず、Webflow は、あらかじめ適切なサイズで最適化されているべきだとしています。そのため、インポートで取り込むカタログは、事前にファイルを用意しておく必要があります。 ## Webflow が求めるもの。 出典：[Webflow Help Center — Responsive images; Image; Image file types; Image resolution; Multi-image Collection field; Ecommerce Collections overview; Assets panel; Image conversion tool; Import/export Ecommerce products and variants; Include alt text on images](https://help.webflow.com/hc/en-us/articles/33961378697107-Responsive-images)。2026年10月12日に確認。 - **ファイルサイズ:** 画像ごとに最大4 MB - **サイズ:** ファイルが上限の4 MBより小さければ、どのサイズの画像でもアップロードできます。WebP 画像は一辺の長さが16,383ピクセルまで - **形式:** アップロードに最適な画像形式として、PNG、JPEG、SVG、WebP が挙げられています - **禁止事項:** 商品画像とバリエーション画像のフィールドでの SVG 画像、およびアニメーション AVIF ファイル - **枚数:** 商品には Main image フィールドがひとつと、More images という複数画像フィールドがあり、後者には最大25枚を登録できます - **レスポンシブ画像:** 幅3,200ピクセルを超える画像について、Webflow は3,200、2,600、2,000、1,600、1,080、800、500ピクセルの7種類のバージョンを生成します。バージョンは、インラインの JPG、PNG、WebP 画像に対して作られます - **CSV と API によるインポート:** CSV インポートや API で追加した画像にはレスポンシブ版が作られないため、あらかじめ適切なサイズにし、最適化しておくべきです - **WebP と AVIF:** JPEG と PNG のアセットは、組み込みの変換ツールで WebP または AVIF に変換できます。変換は非可逆で、元のファイルを置き換えます - **代替テキスト:** 代替テキストは、複数画像フィールド内の各画像を含め、画像ごとに設定できます。Webflow AI は JPG、PNG、GIF、WebP、AVIF について代替テキストを生成できます [Webflowの商品画像の要件](https://herofab.app/ja/guides/webflow-ecommerce-product-image-size) · [画像を無料でチェック](https://herofab.app/ja/tools/image-size-checker) ## Webflow の商品ページの元になる写真。 - 商品全体の写真を一枚と、留め具、文字盤、縫い付けたラベルなど、もっとも細かな部分に寄った写真を一枚撮影します。More images フィールドには、メインのビューに加えてディテールのビューを入れる余地があります。 - 商品のすべての縁を、周囲に余白を残して写真の中に収めます。画面で切れた部分は、あとでどのシーンを選んでも忠実に補えません。 - 商品が手元にあるうちに、名前、素材、色を書き留めておきます。Webflow では、More images フィールドの画像も含め、すべての画像に代替テキストを設定できます。 ## Webflow 向けの商品写真について、よくある質問。 **Webflow のストアには、PNG と JPG のどちらを入れるべきですか？** ほとんどの場合は JPG です。Webflow はすべての画像ファイルのファイルサイズに上限を設けており、Herofab の2Kの PNG はその上限より重くなることがありますが、同じ画像の JPG はそれより軽くなります。PNG と JPEG は、どちらも Webflow がアップロード用に挙げる形式に含まれます。PNG を使いたい場合は、先にファイルサイズを確認してください。無料の画像サイズチェッカーが、ブラウザ内でファイルを Webflow の公開値に照らしてテストします。 **Webflow の変換ツールを、Herofab の画像に使えますか？** Webflow の組み込みツールは、JPEG と PNG のアセットを WebP または AVIF に変換します。Webflow は、この変換が非可逆で、元のファイルを置き換えるものだと説明しています。変換の前に、Herofab からダウンロードしたファイルをマスターとして Webflow の外に保管し、変換が済んだら商品の細かな文字を確認してください。 **Webflow の商品には、画像を何枚入れられますか？** Main image フィールドに一枚、More images フィールドに定められた枚数まで入れられます。枚数はこのページの表にあります。商品スタジオは、一枚の元の写真から、商品を正面、斜め向き、側面、真上から、無地の面またはシーンで見せられます。追加する画像もそれぞれファイルサイズの上限を下回る必要があり、それぞれに代替テキストを付けられます。 **料金はいくらですか？** 画像ごとに4クレジット、4Kはさらにクレジットがひとつ追加です。消費クレジットは生成前に表示され、処理に失敗した場合はクレジットが返還されます。登録時の無料20クレジットで、このツールの画像を5枚作成できます。 [商品スタジオ](https://herofab.app/ja/tools/product-photography) · [メイン画像](https://herofab.app/ja/glossary/main-image) · [ライフスタイル画像](https://herofab.app/ja/glossary/lifestyle-image) · [アスペクト比](https://herofab.app/ja/glossary/aspect-ratio) 商品別の作例 [Square Online 向けの商品写真](https://herofab.app/ja/tools/product-photos-for-square-online) · [Lightspeed eCom 向けの商品写真](https://herofab.app/ja/tools/product-photos-for-lightspeed) · [Big Cartel 向けの商品写真](https://herofab.app/ja/tools/product-photos-for-big-cartel) · [SHOPLINE 向けの商品写真](https://herofab.app/ja/tools/product-photos-for-shopline) · [Wayfair 向けの商品写真](https://herofab.app/ja/tools/product-photos-for-wayfair) · [Orderchamp 向けの商品写真](https://herofab.app/ja/tools/product-photos-for-orderchamp) · [ABOUT YOU 向けの商品写真](https://herofab.app/ja/tools/product-photos-for-about-you) · [Trendyol 向けの商品写真](https://herofab.app/ja/tools/product-photos-for-trendyol)