スマホの商品一覧に合う背景色は？商品画像を見やすくするWEB配色
スマホの商品一覧では、商品画像が小さな枠に並びます。カードの背景色を目立たせすぎると写真の色と競合し、反対に背景が商品と近すぎると輪郭が分かりにくくなります。おすすめは、一覧ページ・商品カード・画像を置く面を分け、写真を主役にしながら名前と価格を比較できる配色です。
商品写真を見せる面と、情報を読む面を分ける
まず商品の写真を確認します。背景が透明な切り抜き画像なら、画像の背後に淡い中立色の面を置き、商品を囲む余白を揃える方法があります。一方、写真自体に撮影時の背景が写っている場合、カードの背景色を変えても写真内の色までは変わりません。背景が揃わないときは、撮影や画像編集の段階で整える必要があります。
スマホで商品を2列に並べるなら、写真の枠の高さを揃え、商品が端で切れないようにします。CSS（WEBページの見た目を指定する仕組み）のobject-fit: containは縦横比を保って画像全体を枠に収める指定です。反対にobject-fit: coverは枠を埋めるため、長いペンや持ち手のある商品が切れることがあります。商品の形を比較して選ぶ一覧では、切り抜かれ方を個別に確認しましょう。
色の違いだけでカードを区切ろうとせず、写真の余白・商品名・価格の位置を揃えることも重要です。1列になる狭い画面でも、カードごとに背景色を変えず、見る順番を保ちます。
文房具の通販サイトの商品一覧を7色で整える例
ノート、ペン、布製ペンケースを並べる文房具店のスマホ向け商品一覧を想定します。商品ごとに形や色が違うため、周囲の配色は控えめにします。以下のHEX（#に続く6桁のカラーコード）は、この一覧のための提案です。
一覧ページの背景にはやや温かみのあるオフホワイト ■#F7F8F5、各商品カードには白 ■#FFFFFF を使います。二色のコントラスト比は約1.07:1なので、その淡い差だけをカードの境界として当てにしません。カードの間には余白を置き、商品名と価格を同じ順番で配置します。
切り抜き商品画像の背後に見える正方形の画像面は、淡いブルーグレー ■#EAF0F1 に統一します。白いカード ■#FFFFFF との比は約1.15:1なので、色面だけでは画像枠をはっきり区切れません。必要ならグレーブルー ■#6B7E8A の輪郭線を添えます。この線は画像面 ■#EAF0F1 と約3.66:1、白いカード ■#FFFFFF と約4.22:1の差があります。商品自体と背景の見え方は、実際の写真ごとに確認してください。
商品名は濃いスレート ■#263746 を白いカード ■#FFFFFF に載せ、コントラスト比は約12.23:1です。価格や容量などの補足文字はブルーグレー ■#52626F とし、白 ■#FFFFFF に対して約6.30:1です。背景を鮮やかにする代わりに、文字の太さと配置で「名前を先に、価格を次に」読めるようにします。
商品詳細へのリンクは深い青緑 ■#155D73 を白いカード ■#FFFFFF 上に下線付きで表示すると、比は約7.38:1です。一覧上部の「絞り込み」ボタンも同じ青緑 ■#155D73 を背景に、文字を白 ■#FFFFFF にすれば約7.38:1となります。ボタンとページ背景 ■#F7F8F5 の比は約6.92:1です。各商品の周囲に別々の強い色を増やさず、操作色を共有します。
白い商品や写真の種類が違う場合は実画面で確認する
白いノートや淡い布製品が画像面に埋もれる場合は、商品の外形が分かる別の撮影背景や適切な影を検討します。ただし、写真の実際の明暗や透明部分は商品ごとに異なり、先ほどの色コード間の比率だけで商品の輪郭を保証することはできません。元画像に白背景が含まれる場合は、外側の色を変えるだけでは解決しません。
スマホ幅では写真が小さくなるため、余白が大きすぎて商品が豆粒のように見えないか、拡大して重要な特徴を確認できるかも試します。小さな「新商品」などのラベルを写真に重ねるなら、写真の明暗に左右されない不透明な面を用意し、文字の色と合わせて確認してください。
WCAG 2.2（WEBコンテンツのアクセシビリティ指針）では通常サイズの文字と背景に原則4.5:1以上、大きな文字に3:1以上が必要です。操作や状態の理解に必要なアイコン・線なども、原則として隣接色と3:1以上を確認します。ただし装飾だけの画像枠すべてが自動的に対象になるわけではありません。
HueRollでは選んだ色の濃淡や白・黒とのコントラストを確認できますが、任意の2色を直接比較したり、AA・AAAを自動判定したりする機能はありません。画像面 ■#EAF0F1 と輪郭線 ■#6B7E8A のような組み合わせは別途計算し、最後は実際の商品写真とスマホ画面で確認しましょう。