モバイル Shopify 買い物客向けに商品写真を最適化する方法

買い物客の 79% がモバイルを使用しています。それのように行動してください。

Shopify 自身のデータによると、トラフィックの 79%、69% 以上 の注文はモバイル デバイスから行われています。その数字はさらに上昇します ファッション、美容、アクセサリーの分野でさらに高くなります。あなたの製品の場合 画像は 27 インチのモニターでは良く見えますが、iPhone では平凡です。 あなたは少数派のために最適化しているのです。

モバイルの買い物客はデスクトップの買い物客とは異なる行動をします。彼らは 2 ～ 3 倍速くスクロールします。製品ページに費やす時間が 40% 減少 （ベイマード研究所）。彼らは見たものに基づいて決定を下します 最初の3秒で。あなたのヒーロー画像は秒を取得しません チャンス。

モバイル トラフィックとモバイル コンバージョンの間のギャップは eコマース最大の収益漏洩。デスクトップはおよそ次の速度で変換します 3～4％。モバイルは 1.5 ～ 2% にとどまります。そのギャップはモバイルのせいではありません 買い物客のモチベーションが下がっている。なぜなら、ほとんどの商品ページは ユーザーが閲覧する方法に合わせて構築されていません。

出典: Shopify、Baymard Institute、Google

ライフスタイル写真 親指を止めます。白い背景はそうではありません。

デスクトップでは、きれいな白い背景の製品ショットは次のように正常に機能します。 主人公のイメージ。製品は評価するには十分な大きさです。オン モバイルでは、同じ画像が海に浮かぶ小さな物体になります 空白の。サムネイルではほとんど何も伝わらない サイズ。

ライフスタイル画像は、モバイル上でヒーロー画像よりも 2 ～ 3 倍優れたパフォーマンスを発揮します なぜならフレーム全体が有益な情報で満たされているからです。 コンテキスト、色、テクスチャ、スケール。白の水筒 背景の高さは 6 インチまたは 16 インチです。水筒 ラップトップの隣の机に置いてあると、すぐにわかります。

これは、どちらかの形式を選択するということではありません。必要です 両方。ただし、モバイル上のリード画像は、ほとんどの場合、 ライフスタイルショット。画像 2 または 3 のきれいな切り抜きを保存します。 買い物客は、商品そのものを詳しく見たいときに行きます。

同じ商品でも、インパクトが異なります。ライフスタイルショットがモバイルを満たす コンテキストと色を備えた画面。白い背景のショット プロダクトをビューポートの一部に縮小します。

1 秒増えるごとに売上の 7% が失われます

Google のモバイル調査によると、訪問者の 53% は ページの読み込みに 3 秒以上かかる場合は放棄されます。毎 それを超えるとさらに 1 秒間コンバージョンが約 7% 減少します (アカマイ)。ほとんどの製品では、製品画像が最も重要な要素となります。 Shopify ページ。多くの場合、総ページ重量の 60 ～ 80% を占めます。

計算は簡単です。 6 つの最適化されていない JPEG を含む製品ページ 各 500 KB の画像 = 画像だけで 3 MB。一般的な 4G の場合 接続 (10 ～ 15 Mbps)、つまり画像だけで 2 秒以上かかります。追加 ページの残りの部分を読み進めると、3 秒のしきい値を超えます 買い物客が商品を見る前に。

画像速度の針を動かすのは 3 つです。

• 1.WebP を使用します。 JPEG より 25 ～ 35% 小さい 同じビジュアル品質。 Shopify が自動的に WebP を提供する場合 ブラウザはそれをサポートしており、最新のモバイルはすべてこれをサポートしています ブラウザ。 JPEG をアップロードすると、Shopify はそれらを fly ですが、WebP を直接アップロードすると、より詳細な制御が可能になります。 画質とファイルサイズ。
• 2.フォールドの下にあるすべてのものを遅延読み込みします。 のみ ヒーロー画像はすぐに読み込まれるはずです。 1つおきのギャラリー 画像は遅延読み込みを使用する必要があります。 Shopifyのデフォルトテーマ これはすでに行っていますが、カスタムテーマがある場合は確認してください 1つ。ヒーロー画像だけで 150 KB 未満にする必要があります。
• 3.レスポンシブ サイズを配信します。 2048x2048 の画像 ピンチでズームするのに最適ですが、最初の表示は 390 ピクセルです 幅広の携帯電話では、これらすべてのピクセルは必要ありません。使用する Shopify の組み込みイメージ CDN と srcset を使用して、 各デバイスに適したサイズ。これだけで画像ペイロードを削減できます 50〜70%増加します。

モバイル画像スペックシート

Shopify は、最大 5000x5000 ピクセルおよび 20 MB の画像をサポートしています。でも モバイルでは大きいほど良いとは限りません。ここに数字があります 実際問題です。

出典: Shopify ヘルプセンター、Google Web Vitals ドキュメント、 web.dev

変換する 6 枚の画像モバイル ギャラリー

デスクトップでは、買い物客は複数のサムネイルを表示し、任意のサムネイルにジャンプできます 画像。モバイルでは直線的にスワイプします。画像 1 は次のユーザーに表示されます みんな。画像 6 はおそらく 30% に見られます。順序が重要です どこよりもモバイルで。

この順序はモバイルのスクロール動作に基づいています。 画像は注目を集め、迅速に信頼を築く必要があります。

1. 1ライフスタイルのヒーロー。 フルコンテキスト ショットの表示 使用中の製品または関連環境。これは スクロールを止めるもの。
2. 2すっきりとしたカットアウト。 白または中間色の背景 製品全体を示しています。彼らの注意を引いたので、 彼らが何を購入しているのかを正確に見せてください。
3. 3クローズアップの詳細。 テクスチャー、ステッチ、 素材の品質。買い物客がモバイルで注目するもの。 専用のクローズアップを提供することで、労力を節約できます。
4. 4スケールのリファレンス。 の隣の商品 サイズが既知のもの (手、テーブル、人)。これ 「実際の大きさはどれくらいですか？」という質問に答えます。質問 それが返品の原因となります。
5. 52 番目のライフスタイルの角度。 別のシーン、 異なるコンテキスト。コーヒーショップでバックパックを背負って、その後、 ハイキングコース。多用途性を発揮します。
6. 6パッケージまたはバリエーション。 彼らの元に届くもの ドア、または利用可能な色/サイズのオプション。削減します 「実際には何がもらえるの？」不安。

If you want a deeper breakdown of gallery sequencing, see the Shopify 製品ギャラリーの完全なシーケンスガイド.

完全なモバイル対応ギャラリーを 60 秒で生成

ほとんどの販売者は、モバイル写真に加工が必要であることを知っています。問題 時間です。写真撮影のスケジュール、編集待ち、サイズ変更 モバイル用、フォーマット変換。それに 50 または 200 を掛けます それは決して完了しません。

Prodofoto は 1 枚の写真から 4 つのライフスタイル製品の写真を生成します 約 60 秒できれいな画像が得られます。写真は次の場所に戻ってきます 1024x1024、モバイルに対応。プロンプトなし、Photoshop なし、なし カメラマンを待っています。

1. 1.Shopify 管理画面で Prodofoto を開きます。から製品を選択してください あなたのカタログ。
2. 2.写真のスタイルを選択します: ライフスタイル、製品のみ、モデルのみ。
3. 3.60 秒以内に 4 枚の写真を取得します。お気に入りをお選びください。
4. 4.Shopify 製品リストに直接公開します。

1 つの製品画像から AI によって生成された 4 つのライフスタイル バリエーション。 それぞれがモバイル画面をコンテキスト、色、スタイルで満たします。 白い背景のショットは一致しません。

1本の商品です。 60秒。モバイル対応のライフスタイル写真 4 枚。それ モバイル トラフィック間のギャップを埋める最速の方法です そしてモバイルのコンバージョン率も。

よくある質問

References

1. ベイマード研究所 — Product page UX: image gallery best practices
2. Shopify — Ecommerce trends: mobile traffic and conversion data
3. Google / Google で考える — Mobile page speed benchmarks and bounce rate data
4. Akamai — Online retail performance: impact of page speed on conversion
5. Google Web Vitals (web.dev) — Core Web Vitals metrics and LCP thresholds
6. · Shopify ヘルプセンター — Product image sizes, formats, and limits
7. GrabOn — Online shopping statistics: image quality and purchase behavior

関連記事

• ライフスタイル製品写真と白背景: 何が変換されるのか Shopifyの方が良いですか?
• Shopify コンバージョンを台無しにする商品写真の 7 つの間違い 料金
• Shopify リスティングには何枚の商品写真が必要ですか?