スマートフォンで商品ページを開くと、写真が画面いっぱいに続き、価格や色の選択欄へなかなかたどり着けない。そんなときは、画像を一律に小さくする前に、最初の写真で何を確かめてもらうかを決めます。商品の形や特徴が分かる写真は残し、詳しく見たい写真と購入の案内を読み進めやすい順に整えることが大切です。
商品の魅力を見せることと、購入条件を確かめられることは、どちらも必要です。ここでは、画面を占める画像が大きいと感じる商品詳細ページについて、写真の役割、表示する高さ、価格や選択欄との並び方を考えます。
大きいのは写真の枠か、写真の枚数か
まず、実際のスマートフォンで商品ページを開き、何を通り過ぎると価格が見えるのかを確認します。一枚の縦長写真が長く続く場合と、大きな写真が何枚も縦に並ぶ場合では、直す場所が違います。
一枚が長い場合は、写真の中の余白も見ます。商品が中央に小さく写り、上下に広い背景があるなら、余白を調整することで商品の見える大きさを保ったまま、画像の高さを抑えられる場合があります。一方、背の高い花瓶や丈の長い服の全体像を見せているなら、縦長には意味があります。上下を切ってまで同じ枠にそろえると、商品を判断しにくくなります。
何枚も続いている場合は、写真ごとに役割を書き出します。正面、背面、使用中、細部という違いがあれば、それぞれ残す理由があります。同じ角度の写真が少しずつ違うだけなら、最初に並べる写真を選び直せます。枚数を減らす判断と、一枚の表示サイズを変える判断を分けると、商品の情報まで失わずに整理できます。
なお、ファイル容量を減らす圧縮と、画面上での表示の大きさは別の調整です。圧縮して読み込みが軽くなっても、縦長の表示枠はそのままということがあります。今回は主に「何がどの順番で見えるか」を見直します。表示速度にも問題があれば、画像の配信方法をあわせて確認します。
最初の写真には、何の商品か分かる役割を残す
写真を小さくしても、取っ手の形、セットの内容、柄や色の違いなど、購入する品を見分ける情報は残したいところです。どの部分が必要かは商品によって変わります。マグカップなら全体の形、服なら着丈やシルエット、詰め合わせなら届く品の組み合わせが候補になります。
例えば、マグカップの写真で背景の花やテーブルが大半を占めているとします。雰囲気を伝える写真としては使えても、最初に形を確かめる写真としては商品が小さすぎるかもしれません。商品全体が見える写真を先に置き、暮らしの中で使う写真を後へ移す方法があります。
写真の縦横比を変えるときは、取っ手や蓋、付属品が切れていないかを見ます。同じ写真を使う商品一覧への影響も確認します。Shopifyの公式ヘルプでは、テーマによって画像の表示方法が異なり、商品詳細と一覧などで異なる大きさが使われることが説明されています。元画像を切り抜くのか、商品ページだけ表示枠を変えるのかは、利用中の仕組みを見て選びます。
価格や色を確かめる前に、全写真を通らなくてよい構成にする
次は、架空のマグカップの商品ページで考えます。現在は、商品写真、使用中の写真、釉薬の接写、底面の写真が大きく縦に続き、その後に商品名・価格・色の選択欄があるとします。色と価格を先に知りたい方も、すべての写真を通り過ぎることになります。
この場合は、次のような並びを試せます。固定の正解ではなく、写真の確認と商品の選択を両方進めるための構成例です。
- 商品名と、カップ全体が分かる主写真を見せる。
- ほかの写真があると分かる案内を置く。
- 価格、色などの選択項目、購入ボタンをまとめる。
- 使う様子や質感の説明、寸法などを読み進められるようにする。
写真の切り替えができる仕組みなら、小さな写真一覧や枚数表示を使い、詳しく見たい方が別の写真を選べるようにします。最初の一枚しかないように見せないことが大切です。写真を縦に並べる構成を続ける場合は、主写真の後に価格と選択欄を置き、その下で補足写真を見せることも考えられます。
送料など購入前に必要な案内も、購入操作の近くで見つけられるようにします。ただし、すべての条件を最初の画面へ詰め込む必要はありません。写真、商品名、価格、選択欄がどれも小さくなっては、使いやすさを保てません。最初の画面だけで完結させることより、次にどこを見ればよいかが自然に分かるかで判断します。
小さく表示しても、詳しく確かめる方法を残す
ページ上の主写真を小さく見せるなら、気になる部分を大きく見られるかも確認します。陶器の表面、布の織り目、留め具の構造などは、小さな写真だけでは判断しにくい場合があります。画像を拡大できる仕組みがあるなら、タップできることが分かる表示にし、閉じた後に商品の選択へ戻れるかを確かめます。
拡大機能がない場合も、細部を写した写真と短い説明を本文に置く方法があります。例えば「表面には細かな凹凸があります」と説明する近くに接写を置けば、その写真を見る理由が伝わります。大きな一枚へ小さな注釈を詰めるより、必要な箇所を分けて見せるほうが読みやすい場面です。
色を選ぶと写真が切り替わるページでは、選択中の色と表示写真の対応も確かめます。表示面積を整えても、白を選んでいるのに黒の写真が残っていれば、購入する商品が分かりにくくなります。複数色を一緒に写した雰囲気写真は残せますが、選択した品を確認する写真とは役割を分けます。
写真の切り替え、拡大、動画の操作などを組み合わせる場合は、指の操作がぶつからないかを見ます。Shopifyの開発者向け公式資料でも、メディアの操作とスワイプなどの表示操作が干渉しないようにすることが案内されています。特定の機能を足す前に、今のテーマでどこまでできるかを制作担当者に確認するとよいでしょう。
変更後は、異なる形の商品で見え方を確かめる
一つの商品でちょうどよく見えても、縦長の商品や横長のセット商品では、同じ表示枠が合わない場合があります。主写真の高さを変える場合は、店内で扱う商品の形に幅を持たせて確認します。対象を選ぶ目安は、縦長、横長、細部の確認が必要なもの、色や種類を選ぶものです。
スマートフォンで主写真を見て、価格を確かめ、色などを選び、購入ボタンまで進みます。その途中で商品の形が欠けないか、補足写真を見つけられるか、選んだ種類が分かるかを見ます。画面下に購入ボタンを固定している場合は、写真や選択欄に重なっていないかも確かめます。
変更前後の比較には、同じ商品と同じ端末で撮った画面を残しておくと役立ちます。「画像が小さくなった」だけでなく、「主写真を確認した後、価格と色の選択へ進める」「細部も見直せる」という変化を確認できます。購入への影響を数値で見る場合は、広告や価格変更、在庫の違いも含めて考え、画面を変えたことだけで売上の変化を説明しないようにします。
Bämでは、今のショップの商品説明・写真・購入までの画面を確認し、利用中のサービスやテーマで直せる範囲を整理します。気になる商品ページがある場合は、通販サイトで購入前に迷う箇所を見直す相談をご覧ください。商品の特徴を残しながら、写真と購入案内のどこを変えるかを一緒に考えられます。
