まず、買う人が知りたい順に並べる
ショップを訪れた人が、どんな商品を扱う店なのかを把握し、気になる商品を見て、価格や送料を確認できる。ページを作る前に、この流れを簡単な線で描いてみましょう
商品一覧から商品詳細へ移るリンクが見つからない、送料がどこに書かれているか分からないなど、途中で迷いそうなところを探すと、整理する箇所が見えてきます
最初の画面には、お店の情報を絞って置く
ショップのトップでは「何を売っているか」「どんな商品が見つかるか」「次にどこを見るか」が把握しやすいことを意識します。長い紹介文を先頭に置く場合も、商品へ進む手段が離れすぎていないか見直します
キャンペーン情報やお知らせを掲載するなら、期限が過ぎた情報や、現在は利用できない条件が残っていないかを更新時に確認してください
画面を開いて最初に見える部分だけで、店の内容と商品への入口を説明できるか試します
商品一覧は、見分ける手掛かりをそろえる
商品の写真、商品名、必要な価格情報のまとまりをそろえると、一覧を見比べやすくなります。写真の明るさや比率が極端に異なる場合は、一覧で並べた状態も確認しましょう
商品数が多い、種類が分かれているといった場合は、カテゴリなど現在利用できる表示方法が役立つことがあります。BASEのデザインや追加機能の案内は、最新の公式ヘルプを確認してください
文字は段差を付け、写真は内容に合わせる
大見出し、小見出し、本文、補足を同じ大きさにすると、スマートフォンでは情報のまとまりを追いにくくなります。見出しと本文の差をつけ、行間を確保し、短い段落に分けます
画像には商品の質感や大きさが伝わるカットを使います。画像を重ねて重要な説明文字を入れすぎると、縮小時に読みにくくなるため、商品名や条件はテキストとしてページ内にも記載します
BASE公式ヘルプは商品画像の推奨サイズとして1280×1280pxを案内しています。登録可能な仕様は変更される場合があるため、商品登録の公式案内もご確認ください
価格、送料、発送の目安を隠さない
商品を選ぶ段階で知りたいのは、商品価格だけではありません。送料、発送までの目安、支払い、サイズや素材などの条件を、商品ページやショップ内の分かりやすい場所に案内します
購入者が確認できる場所を用意しつつ、ショップの情報全体で同じ説明になっているか見直します。運営側が守れる条件を掲載し、注文後に変更が必要にならないように確認します
実際のスマートフォンで、最後まで操作する
パソコン上の狭いブラウザー幅だけでなく、実際のスマートフォンでもページを開き、文字の折り返し、画像の見え方、メニュー、リンク、購入条件の位置を確認します。機種やブラウザーによる差があるため、一つの画面だけで判断しないことも大切です
端末でテストするときは購入を完了せず、支払い直前までの流れを確認するなど、意図しない注文を避ける方法を選びます。公開後も、BASEの設定や商品情報を変更したときにもう一度見直します
売り場の情報量は、商品に合わせて調整
写真の点数や文章の長さに唯一の正解はありません。スペックが大切な道具と、色や質感を伝えたい作品では、先に示す情報も変わります
BASE公式ヘルプのショップ向け情報で現在の機能を確認し、各商品に必要な説明を整えてください。Qrestiaのショップ設計や対応範囲はサービスサイトの図解、またはサービス詳細でもご案内しています