WF作成時の注意点①

商品一覧のポイント

スクリーンショット 2021-03-16 17.47.39

① 画像
 ・画像はすべて同じ比率か
 ・縦長、横長の画像が存在する場合の配置
 ・画像が必ず存在するか(NoImageの作成)

② タグ
 ・タグの最大表示数(1行に収まらない場合)
 ・タグのテキストが長く治まらない場合
 ・タグが1件も表示されない場合(下の要素を上に詰めるか)

③ 商品名
 ・商品名が短い場合、下の要素を上に詰めるか
 ・商品名が長い場合、全て表示するか
 ・商品名に任意の改行は入っていないか

④ レビュー
 ・★のデザインは網羅されているか
 ・レビューが1件もない場合

⑤ 価格表示
 ・税込みなどの表示の有無
 ・表記が統一されているか(円or¥、カンマの有無)
 ・最大桁数が問題なく入るか
 ・セール価格表記がデザインされているか

⑥ お気に入り
 ・登録前、登録済みのデザインパターンはあるか

⑦ カートに入れるボタン
 ・売り切れ、再入荷などのバリエーション

その他
 ・クリック領域が明確になっているか
 ・検索結果が0件の場合

商品詳細のポイント

スクリーンショット 2021-03-16 18.00.28

① 画像スライダー
 ・画像はすべて同じ比率か
 ・縦長、横長の画像が存在する場合の配置
 ・画像が必ず存在するか(NoImageの作成)
 ・拡大機能が存在するか(存在する場合、どのような仕組みか)

② スライダーサムネイル
 ・サムネイルの数が多い場合
 ・画像が1枚の場合

③ 商品説明
 ・説明テキストの自由度
  → プレーンテキストのみ入力可能なのか
  → 文字を変えるタグも先方が入れるか
  → 要素(赤字、太字)をデザインHTMLとして用意するか

④ 価格表示
 ・税込みなどの表示の有無
 ・表記が統一されているか(円or¥、カンマの有無)
 ・最大桁数が問題なく入るか
 ・セール価格表記がデザインされているか

⑤ バリエーション選択
 ・完売などのステータスに応じたデザインがあるか
 ・選択時のデザインがあるか

⑥ 購入ボタン
 ・売り切れ、再入荷などのバリエーション

⑦ お気に入り
 ・登録前、登録済みのデザインパターンはあるか

その他
 ・レビューが0件の場合、あるいは複数ある場合、最大何件表示するか

この記事が気に入ったらサポートをしてみませんか?