Shopifyの商品画像・動画設定。表示速度と購入判断を両立する
今回の目的は「商品の質感やサイズを伝えながらスマホ表示を重くしない」です。設定画面を埋めるだけでなく、対象外のケースと失敗時の戻し方まで決めます。変更前の状態を残し、小さなテストから実際の購入者の順路へ広げます。
商品管理 > 商品 > メディアで対象と条件を限定し、変更前の状態を保存してから設定します。最大の注意点は大きすぎる画像や説明のない動画で表示速度とアクセシビリティを落とすことです。管理画面の保存表示ではなく、「主要画像・代替テキスト・動画がデスクトップとスマホで欠損なく表示」を完了の判定基準にします。
現在の料金と条件
判断に使う数字と条件。
設定項目ではなく購入者と運用担当の結果で定義。
画面名はストア・プラン・権限で異なる場合があります。
公開前に対象外と失敗の経路も確認。
保存済み表示だけを完了証拠にしません。
横並びで比較
設定・確認・運用を一つの作業にしない。
管理画面の変更、購入者側の確認、公開後の監視は証拠が異なります。段階を分けると、問題が起きた場所へ戻れます。
| 段階 | 判断材料 | 完了条件 |
|---|---|---|
| 設定前 | 商品の質感やサイズを伝えながらスマホ表示を重くしない | 対象・除外・変更前の状態を記録 |
| 公開前 | 大きすぎる画像や説明のない動画で表示速度とアクセシビリティを落とすこと | 正常・対象外・失敗の三経路を検証 |
| 公開後 | 主要画像・代替テキスト・動画がデスクトップとスマホで欠損なく表示 | 実データを定期的に確認し必要時だけ修正 |
確認事項 01
何を変えるか、先に一枚へまとめる。
今回の目的は「商品の質感やサイズを伝えながらスマホ表示を重くしない」です。商品管理 > 商品 > メディアを開く前に、対象商品・顧客・地域・期間と、変更しない範囲を決めます。
- 01対象と条件を固定する
購入判断に必要な正面・詳細・使用例を順番に決める。画面の保存完了だけで終えず、変更前の状態と担当者、実施時刻を残します。
- 02管理画面へ実装する
同じ比率と過不足のない解像度で画像を書き出す。画面の保存完了だけで終えず、変更前の状態と担当者、実施時刻を残します。
- 03担当手順へ落とす
画像へ内容を説明する代替テキストを設定する。画面の保存完了だけで終えず、変更前の状態と担当者、実施時刻を残します。
確認事項 02
正常系だけでなく、対象外と失敗も通す。
最も避けたいのは、大きすぎる画像や説明のない動画で表示速度とアクセシビリティを落とすことです。テスト用の商品・顧客・注文を実利用と区別し、同じ手順を再現できる証拠を残します。
- 04境界条件を試す
低速回線相当で最初の画像が遅れないか確認する。正常な一例だけで合格にせず、対象外・失敗・取消の経路も同じ条件で確認します。
- 05購入者側で確かめる
バリエーション変更時に対応画像へ切り替わるか試す。正常な一例だけで合格にせず、対象外・失敗・取消の経路も同じ条件で確認します。
- 06継続監視へつなぐ
拡大・動画再生・キーボード操作を実機で見る。正常な一例だけで合格にせず、対象外・失敗・取消の経路も同じ条件で確認します。
確認事項 03
完了条件と見直す時点を決める。
この設定の完了条件は「主要画像・代替テキスト・動画がデスクトップとスマホで欠損なく表示」です。仕様やプランは変わるため、公式ヘルプと実画面を公開直前にも確認します。
- 07変更履歴を残す
対象、変更前後、担当、実施時刻、テスト結果を一つの記録へまとめます。問題発生時に元へ戻せる状態を保ちます。
- 08数字を分けて測る
テスト交通と実利用、未取得と0を区別します。閲覧、操作、注文、売上を一つの数値として扱いません。
- 09公式情報を再確認する
公開時は下記のShopify公式ヘルプと対象ストアの管理画面を確認します。古い価格や画面名を推測で補いません。
よくある疑問
よくある疑問に、先に答える。
Shopifyの商品画像・動画設定は、どこから設定しますか？
主な確認場所は商品管理 > 商品 > メディアです。ストアのプラン、権限、利用中アプリで表示が異なる場合があるため、公式ヘルプと実画面を照合してください。
設定を保存したら完了ですか？
保存だけでは完了ではありません。「主要画像・代替テキスト・動画がデスクトップとスマホで欠損なく表示」を確認してQA完了とし、公開・実測とは分けて記録します。
公開前に一番注意することは何ですか？
最大の注意点は大きすぎる画像や説明のない動画で表示速度とアクセシビリティを落とすことです。正常な一例だけでなく、対象外、失敗、取消の経路までテストしてください。
公式情報