このワイヤーの特徴
ページを開いてすぐに、商品を選び始められる
ネットショップを開いた人の多くは、何を売っているかを確かめ、気になる商品を探そうとしています。最初の画面に商品のカードを並べ、読み進めなくても選び始められるようにしています。
自分の好みや用途から、商品を絞り込める
商品名や産地の違いが分からない人は、どれを選べばよいか迷います。「すっきり・浅煎り」「ギフト」のように、読み手の好みや用途の言葉でカテゴリを分け、選ぶと並ぶ商品が切り替わるようにしています。
商品ごとに、選ぶための情報がそろう
写真だけが並んでいると、どれがいくらで、どんな特徴なのかを知るために1つずつ開くことになります。カードに写真・商品名・特徴の一言・価格（税込）をそろえ、比べながら選べるようにしています。
何のお店かも、最初の画面で分かる
商品だけが並んでいると、どんなお店なのかが伝わりにくくなります。商品の上に、お店の特徴が分かる短い見出しと補足を置いています。
SPでは、2列に並べてカテゴリを横に送る
SPで商品を1列に並べると、最初の画面に1〜2点しか入りません。商品は2列を基本に並べ、カテゴリは横に送って選べるようにしています。
商品名や価格の情報が多い場合は、1列に切り替えます。
制作時のよくある失敗
写真だけが並び、商品名や価格が分からない
写真を大きく見せることを優先して、名前や価格をカードから外すと、読み手は1つずつ開いて確かめることになります。
カードには、写真・商品名・価格をそろえます。
カテゴリが、社内の分類や品番になっている
「Aシリーズ」「No.203」のような分類では、読み手は自分に合うものが分かりません。
味の好み、使う場面、贈る相手など、読み手が選ぶときの言葉でカテゴリを分けます。
商品を並べすぎる、または自動で流れるカルーセルにする
最初の画面に多くの商品を詰め込んだり、自動で流れる横並びにしたりすると、落ち着いて比べられません。
最初の画面では少数に絞り、すべての商品を見る入口を別に用意します。
価格の表示が、税込と税抜で混在している
商品によって税込と税抜が混ざっていると、比べるときに読み手が計算し直すことになります。
一般消費者向けに価格を表示する場合は、税込の総額で表示し、ページ内の表記をそろえます。
在庫切れの商品が、ほかと同じように並んでいる
選んで開いてから在庫切れだと分かると、読み手はがっかりします。
在庫切れの商品は「在庫切れ」などの状態をカード上で明示し、購入できないことが分かるようにします。
写真を薄くするなど見た目だけで伝えず、文字で示します。
最初の画面の候補から外す方法もあります。
よくある質問
最初の画面には、何点くらい並べればよいですか?
PCで1〜2行、SPで2〜4点程度が、見比べやすい目安です。
並べる商品は、定番や人気の商品、季節の商品など、初めての人が選び始めやすいものにします。
ほかの商品は、「すべての商品を見る」から一覧へ案内します。
「人気」や「No.1」のラベルを付けてもよいですか?
「人気」「売れ筋」などのラベルは、販売数などの基準と対象期間を説明できるものにします。
「No.1」など比較を伴う表示は、比較対象や調査条件を含め、表示を裏付ける根拠を確かめたうえで使います。
根拠を示せない表示は、読み手の誤解につながるため避けます。
最初の画面のカードに、カートに入れるボタンを置いたほうがよいですか?
何度も買う人が多い商品や、選ぶ要素が少ない商品なら、カードから直接カートに入れられると便利です。
サイズや量を選ぶ必要がある商品は、カードからは商品ページへ案内し、そこで選んでもらうほうが間違いが起きにくくなります。
商品の画像は、どう読み込めばよいですか?
最初の画面に表示される商品の画像は、後から読み込む設定にせず、幅と高さを指定して表示のずれを防ぎます。
画面の外にある商品の画像は、後から読み込む設定にして、最初の表示を軽くします。
