Shopifyの画像サイズと、制限値よりも「500 KB未満」が重要な理由

Shopifyのマスター画像には2048 x 2048ピクセルを使用し、配信される各ファイルのサイズは500 KB未満に抑えましょう。 Shopifyは最大20 MB、4472ピクセル四方までの画像を許可していますが、これらの数値はプラットフォームが許容できる限界を示しているだけであり、高速なストアフロントに必要なサイズとは異なります。

多くのガイドで引用されている「20 MB」という数値は、デザインの基準にするには誤りです。Shopifyが許可することと、Shopifyが推奨することは別物です。1枚あたり3 MBの画像を8枚掲載している商品ページは、合計24 MBのページとなり、モバイルユーザーは読み込みが完了する前に離脱してしまいます。

配置別のShopify画像サイズ

商品画像は2048ピクセルの正方形にする必要がありますが、バナー、コレクションタイル、ロゴにはそれぞれ独自の寸法が必要です。 すべての場所に同じサイズを使用すると、バナーが引き伸ばされたり、コレクション画像が不自然に切り取られたりします。

テーマによって画像の切り取り方は異なります。デスクトップのプレビューで正しく表示されているバナーが、スマートフォンでは中央で真っ二つにカットされていることがよくあります。バナーの重要な部分は中央の60%以内に配置し、どのテーマで切り取られても問題ないようにしてください。

なぜ500 KBという数値が重要なのか

ページの総容量（ページウェイト）がストアフロントの読み込み速度を決定し、一般的な商品ページでは画像がその容量の大部分を占めています。 総容量が2 MB未満のページはモバイルデータ通信でも快適に読み込めますが、24 MBのページではそうはいきません。

ほとんどのストアにおいて、スマートフォンからのアクセスがトラフィックの大部分を占めており、モバイル回線はオフィスのブロードバンドよりもはるかに不安定です。読み込み時間が1秒増えるごとにコンバージョンが低下するため、画像の軽量化は技術的な問題ではなく、売上に直結する問題です。8枚の商品画像を3 MBから300 KBに縮小すると、見た目の画質は変えずに、ページから21 MBを削減できます。

Shopifyは画像を自動で圧縮してくれるのか

Shopifyはコンテンツ配信ネットワーク（CDN）を通じてリサイズされたバリエーションを配信し、対応しているブラウザ向けには自動的にWebPに変換します。 プラットフォーム側の処理は十分に機能しており、アップロードされたあらゆる画像に対応します。

しかし、ここに限界があります。Shopifyはアップロードされた元の画像から小さなバリエーションを生成するため、適切に圧縮されていない5 MBの画像をアップロードすると、事前に適切に処理された400 KBの画像をアップロードした場合よりも、生成されるバリエーションのサイズが大きくなってしまいます。また、アップロード前に圧縮しておくことで、自身のストレージ使用量を削減でき、500商品のインポート時に2.5 GBではなく200 MBの転送で済むため、一括インポートが大幅に高速化します。

Shopify向けに画像を準備する方法

高速な商品ページを作成するには、以下の6つの手順に従ってください。

1. 画像編集ソフトから、2048 x 2048ピクセルの正方形のマスター画像を書き出します。
2. バナーやライフスタイル画像は、実際の表示幅に合わせてリサイズします（高解像度ディスプレイ向けに2倍のサイズにします）。
3. 写真をWebPに変換するか、ワークフロー上必要な場合はJPGのままにします（Shopifyがどちらの形式でも自動変換するため）。
4. 商品写真は300 KB、バナーは400 KBを目安に圧縮します。
5. 一括CSVインポートで画像が正しい商品にマッピングされるよう、ファイル名には商品コードとアングル（ビュー）を含めます。
6. アップロード後、デスクトップのプレビューだけでなく、必ずスマートフォンで商品ページを確認します。

ShopifyにおけるWebP

Shopifyは長年にわたりWebPをネイティブにサポートしており、対応ブラウザ向けにアップロードされたJPGやPNGファイルを自動的に変換します。 WebPを直接アップロードすることも可能であり、プラットフォームに任せるのではなく、自身で圧縮率をコントロールすることができます。

WebPはJPGと同等の視覚的品質を保ちながら、ファイルサイズを25〜35%削減できるため、8枚の写真を掲載するページでは非常に効果的です。ただし、仕入先が後でダウンロードしたり、印刷所に送ったりする予定がある画像の場合は、WebPでのアップロードを避けてください。それらの現場では依然としてJPGが求められるためです。

遅い商品ページを改善する

ページ内で最も大きな画像から改善を始めましょう。通常、単一の巨大なファイルが遅延の主な原因となっています。 Shopifyのストアフロントでは、通常、ホームページのバナーまたは最初の商品写真がこれに該当します。

• 圧縮する前にリサイズする。 1920ピクセルの表示領域に4000ピクセルのバナーを使用すると、データの75%が無駄になります。
• ファーストビュー（スクロールせずに見える範囲）の画像数を減らす。 12枚のギャラリー画像を一度に読み込もうとすると、他のすべての処理が遅れます。
• 遅延読み込み（Lazy Loading）が有効になっているか確認する。 スクロールしなければ見えない画像に対して有効にします。最近のほとんどのテーマではデフォルトで処理されます。
• アニメーションGIFを動画に置き換える。 短いGIFであっても、ページ全体の他のすべての要素を合わせたよりも容量が大きくなることがよくあります。
• アプリを監査する。 レビューウィジェット、ポップアップ、信頼バッジなどは、独自の画像やスクリプトを読み込むことがよくあります。

代替テキスト（Altテキスト）と画像ファイル名

スクリーンリーダーを使用するユーザーのために商品を説明する代替テキストを記述し、ファイル名にはカメラの自動連番ではなく商品名を使用します。 IMG_4821.jpgというファイル名は、検索エンジンやユーザーに何も伝えません。

navy-linen-shirt-front.jpgのようなパターンを使用すると、一括インポート時にも判別しやすく、フォルダ内での整理も容易になり、検索結果でも画像の内容が伝わりやすくなります。代替テキストは、商品のタイトルをそのまま繰り返すのではなく、色、素材、アングルなど、写真に写っているものを説明するようにします。どちらの設定も商品あたり数秒で完了し、画像検索でのストアの露出を向上させます。

全体に適用する前のテスト

まずは5つの商品で処理を行い、公開して、実際のスマートフォンでページを確認してから、カタログ全体に適用してください。 500個の商品に設定ミスを適用してしまうと、それを元に戻すには、事前に防ぐよりもはるかに多くの時間がかかります。

テスト商品では3つの点を確認します。衣類やジュエリーではユーザーがズーム機能を頻繁に利用するため、最大ズーム時にも画像が鮮明に見えるか確認します。コレクションのグリッドで切り取り位置が統一されているか確認します。オフィスの高速回線ではなく、モバイルデータ通信でページが素早く読み込まれるか確認します。これらを確認した後に、他のすべてのファイルに同じ設定を適用します。

画像アプリとアップロード前の処理の比較

画像圧縮アプリは月額料金が発生しますが、アップロード前に一度処理してしまえば無料で解決できる問題です。 アプリが役立つのは、ストアに多くの人から常に新しい画像が届き、アップロードされる画像を誰も管理できないような場合です。

カタログが安定しており、1人の担当者が画像を管理しているストアであれば、継続的な費用を支払う必要はありません。ライブラリを一度圧縮し、新しい写真が届くたびに圧縮すれば、同じ結果が得られます。手作業で処理できないほどカタログが大きくなった場合や、複数のスタッフが仕様に従わずに画像をアップロードするようになった段階で、アプリの導入を再検討してください。

Shopify画像でよくある間違い

カメラから直接アップロードすることは、最もコストのかかる間違いです。2400万画素の写真は、ストアフロントが表示できるデータの10倍以上の容量を持っているためです。 プラットフォームはファイルを受け入れますが、その代償はページの読み込み速度として現れます。

他にも2つの間違いがよく見られます。コレクション内で異なる縦横比の画像を混ぜると、テーマが正方形に切り取る際に縦長写真の上下が失われ、グリッドが乱れてしまいます。また、商品写真にPNGを使用すると、ファイルサイズが3〜5倍に膨れ上がります。PNGはすべてのピクセルを正確に保存するため、平坦な領域がない写真においてはメリットがなく、ファイルサイズが大きくなるだけです。

一貫性のあるカタログの維持

カタログ全体を1つのバッチで処理し、すべての商品写真で同じ寸法、圧縮率、フレーミングを共有できるようにします。 ユーザーは商品を比較する際、言葉にできなくても、一貫性のなさに気づくものです。

一貫性はコレクションのグリッドにも好影響を与えます。形状と明るさが統一された画像は、ただ集められたページではなく、デザインされたページとして認識されます。寸法とサイズ目標を一度設定したら、個々の商品を個別に調整するのではなく、すべてのファイルにそれを適用してください。

カタログを一括で処理する

最大500枚の画像を一度にドロップするか、フォトグラファーから受け取ったZIPアーカイブを直接ドラッグするだけで、すべてのファイルが同じ仕様にリサイズおよび圧縮されて出力されます。 デスクトップソフトでは午後いっぱいかかっていたカタログ処理が、わずか数分で完了します。

すべての処理はブラウザ内でお使いのプロセッサを使用して実行されるため、未発表の商品、季節限定のキャンペーンカット、仕入先の写真などが外部のサーバーに送信されることはありません。情報解禁前のローンチを準備しているストアにとって、ファイルをローカルに保つことは、情報漏洩を防ぐための重要な要素であり、追加のコストもかかりません。