Shopify商品画像の最適化チュートリアル — 表示速度とSEOを改善する実践手順

Shopifyストアで「ページ読み込みが遅い」と感じたとき、真っ先に疑うべきは 商品画像 です。ECサイトではページ容量の50〜70%を画像が占めることも多く、画像最適化はコード修正よりも確実・即効で効く改善策です。

このチュートリアルでは、わたしがShopifyアプリ開発でストアの速度改善を手伝ったときに実際に使っている手順を、そのまま共有します。

出典：Google - Mobile Page Speed Benchmarks、Speed Boostr - Shopify Image Optimization Guide

前提条件

始める前に、手元に揃えておきたいものです。

• Shopifyストアの管理画面にログインできる状態
• 最適化対象の商品画像（JPEG / PNG 元データ）
• TinyPNG または Squoosh が使えるブラウザ環境
• PageSpeed Insights で改善前のスコアを測定済み（Before値を記録）
• macOSの「プレビュー」かWindowsの「フォト」（リサイズ用、無料）

手順

5ステップで進めます。1〜4は画像ファイル側の作業、5がShopify管理画面側の設定です。

1. 1

   Step 1：画像を2048px以内にリサイズする

   一眼レフやスマホで撮った画像は4000〜6000px以上あることが多く、そのままアップロードすると無駄に重くなります。長辺を 2048px に揃えるのが、Shopifyの推奨サイズです。

   macOSの「プレビュー」を使う場合：画像を開く → ツール → サイズを調整 → 幅を2048pxに設定（高さは自動）。

   リサイズ時は必ず 元画像を別フォルダに保管 しておいてください。後から拡大し直したくなっても、リサイズ済みの画像から戻すことはできません。

2. 2

   Step 2：TinyPNG または Squoosh で圧縮する

   リサイズした画像を圧縮します。無料ツールが2つあります。

   • TinyPNG : ブラウザにドラッグ&ドロップするだけ。一度に最大20枚まで処理可能。画質劣化はほぼ感じません。
   • Squoosh（Google製）：WebPへの変換やクオリティ細調整ができる。上級者向け。

   JPEGなら品質80〜85%を目安に設定すると、見た目を保ちつつファイルサイズを 50〜70%削減 できます。目標は1枚300KB以下です。

3. 3

   Step 3：ファイル名をSEOに効く形に変更する

   「IMG_0123.jpg」のようなカメラ初期名から、「navy-leather-tote-bag.jpg」のような商品説明名に変えます。Googleはファイル名も検索の手がかりにしているので、ここは面倒でも効きます。

   ハイフン区切り・すべて小文字・英数字のみ、が鉄則です。日本語ファイル名はURLエンコードされて検索上の可読性が落ちるので避けてください。

   スペースやアンダースコア（_）は避け、必ず ハイフン（-） で区切ります。これはGoogleが推奨する命名規則です。

4. 4

   Step 4：Shopifyにアップロードする

   Shopify管理画面 → 商品管理 → 商品を選択 → メディア欄にドラッグ&ドロップ。ここで初めてShopifyのCDN側の最適化が働きます。

   Shopifyは、アップロードされたJPEGやPNGを 対応ブラウザへ自動でWebP / AVIF変換 して配信してくれます。つまり手元でWebP化する必要はありません。JPEGでアップロードするのが最も扱いやすいです。

   参考：Shopify公式ヘルプ - 画像のアップロード

5. 5

   Step 5：alt属性（代替テキスト）を設定する

   アップロードした画像をクリックし、「代替テキスト」欄に画像の内容を具体的に入力します。これがSEOと、視覚障害を持つユーザー向けのスクリーンリーダー対応に効きます。

   良い例： 「ネイビーの本革トートバッグ 正面」「オーガニックコットンTシャツ ホワイト 着用イメージ」

   悪い例： 「商品画像」「写真1」「バッグ 革 本革 ネイビー 紺 鞄」（キーワード詰め込み）

   alt属性にキーワードを詰め込むのは逆効果。Googleはキーワードの羅列をスパムとみなし、評価を下げます。自然な日本語で、画像が何を写しているかを20〜50字で説明してください。

効果測定：PageSpeed Insightsで確認する

最適化が終わったら、PageSpeed Insights で改善後のスコアを測定します。事前に記録したBefore値と比較して、モバイルスコアが10ポイント以上上がっていれば、最適化は成功です。

出典：Google Core Web Vitals

トラブルシューティング

次にやること

画像最適化が終わったら、ストア全体の速度改善に進みましょう。画像以外のボトルネック（アプリ、テーマ、スクリプト）を順に見直すフェーズです。

→ Shopifyの表示速度を改善する完全ガイド

→ ShopifyのSEO対策ガイド

→ ECサイトの商品写真の撮り方