EC商品画像の作り方｜購入判断に必要な写真と表示速度の両立

写真を増やすだけでは、商品の大きさや素材の不安は解消できません。一方で、すべてを大きな画像で読み込むとスマホでの確認を妨げます。画像ごとに答える疑問を決め、撮影から表示確認までを一つの運用として設計しましょう。

撮影前に不足している判断材料を洗い出す

問い合わせ、返品理由、接客でよく聞かれる質問から、「大きさ」「色」「細部」「使う場面」「同梱物」などの疑問を抽出します。各画像がどの疑問に答えるかを書けば、似た角度だけの写真を増やさずに済みます。

Googleの画像ガイドでは、標準のimg要素、内容に合う説明、レスポンシブ画像などの扱いを説明しています。altには画像の役割が伝わる文を付け、検索語を詰め込むのではなく、商品の情報を理解できるようにします。

撮影指示表のひな形

見やすさと転送量を一緒に調整する

ページの先頭で主要な画像をすぐ見せたい場合と、画面外の補足画像を遅延読み込みする場合では優先順位が異なります。一律の容量目標だけで判断せず、実際の表示と購入判断に必要な細部を両方確認してください。

1. 表示する枠の大きさと、拡大表示に必要な解像度を分けて決める。
2. 配信するサイズや形式を用意し、文字や細部が読める範囲で圧縮する。
3. スマホとPCで縦横比、トリミング、拡大操作を確認する。
4. 画像の寸法を設定して、読み込み時のレイアウト変化を抑える。
5. 商品名、色、同梱物、altの内容が実際の販売条件と一致するか確認する。

バリエーションと更新を管理する

色やサイズを選んだときに対応する画像が出るか確認します。仕様変更時には、商品説明だけでなく、画像内の寸法、付属品、色名も更新します。元データ、掲載先、撮影日、利用権限を台帳に残し、旧商品や別サイズの写真が混在しないようにしましょう。

撮影指示と公開確認を商品単位で管理する

商品画像の改善は、画像形式の変更だけでは完了しません。購入者が大きさ、素材、使い方、同梱物を判断できるかを確認します。次の表は撮影・編集担当へ渡す指示書の例です。効果を測るときは、商品の価格や在庫条件が変わった時点も記録します。

写真の役割と必要な説明を対応づける

画像の役割	写す内容	説明で補う点	公開時の点検
一覧で識別する	商品の全体像	商品名とバリエーション	小さな表示でも区別できる
質感を伝える	素材の表面と仕上げ	素材名と手入れ方法	実物と色調が大きく違わない
大きさを伝える	使用時の位置や寸法図	正確な寸法と単位	比較物だけに依存しない
使い方を伝える	通常の使用場面	使用条件と注意点	別売品を誤認させない
購入内容を伝える	付属品とセット内容	含まれない物の説明	写真と選択SKUが一致
細部を確認する	接合部・裏側・仕様差	画像だけで読めない仕様	拡大しても必要な箇所が見える

実施と確認の手順

1. 購入前の質問と返品理由から、足りない視覚情報を選ぶ。
2. SKU、撮影対象、構図、必要な説明、権利確認を指示書へ記入する。
3. 元画像は保管し、掲載サイズに合わせた画像を別ファイルで作る。
4. 画像を参照するHTML、寸法、代替テキスト、拡大操作を確認する。
5. スマホで一覧から商品詳細へ進み、画質と表示の待ちを両方確認する。
6. 差替え後は旧画像の参照漏れやバリエーションの取り違えを点検する。

代替テキストは画像の目的と内容に合わせます。すべてに同じ商品名や検索語を並べるより、画像ごとの意味を簡潔に伝えてください。画像内にしか書かれていない寸法や購入条件は、本文にも記載すると確認しやすくなります。

実施前のチェックリスト

• 各画像が答える購入前の疑問が決まっている
• 寸法・色・同梱物が販売条件と一致する
• スマホで細部と文字を確認した
• 表示枠と画像寸法を整えた
• 元データと利用権限を管理している

よくある質問

画像は何枚あれば十分ですか？

商品によって異なります。枚数よりも、大きさ、素材、使用条件などの疑問が残らないかで判断します。

商品名をaltに繰り返せばよいですか？

画像ごとの内容に合わせて説明します。寸法図なら何のサイズを示すのかなど、画像が担う情報を伝えてください。

参考にした公式情報

• Google Search Central：画像SEOのベストプラクティス

公式情報の確認日：2026年10月20日。本文の比較表・手順・記入例は、公式情報を踏まえたAO編集部の実務向け整理です。記載の試算は実績や成果保証ではありません。

関連記事・対応サービス

• 売れるEC商品ページの作り方｜購入前の不安を解消する12項目
• スマホで見やすいホームページの作り方｜モバイルUIチェックリスト
• EC・Shopify構築・運用支援