ネットショップのサイト構築をするときに、自分のお店の雰囲気を出したくておしゃれに！かっこよく！など見た目に意識が行きがちですが、一番大事なのは「お客様がわかりやすいサイト」であることです。
お店のコンセプトに合ったデザインを考えることももちろん大事ですが、ページを開いてから商品を購入するまで、お客様がストレスを感じることなく、また購買意欲を損なわずにページを移動できるような構成を意識することが売れるネットショップの大前提です。
どんなポイントに気を付けていけばよいかを紹介しますので、参考にしていただければと思います。
使いやすさ（ユーザビリティ）を追求する
サイト構成を考えるときにUI・UXを意識して作ることがポイントになります。
★UI（ユーザーインターフェース）とは
お客様がサイト上で目にする「部品(コンテンツ・パーツ)」のことです。
例えばボタンや入力フォーム、フォントや写真の表示位置などサイトを構成するすべての部品を指します。
★UX（ユーザーエクスペリエンス）とは
お客様がサイト上でする「体験・行動」のことです。
ネットショップの場合でいうと、お客様が快適に買い物できるなどの全般の体験を指します。
体験を見直して、サイトデザインや構成に生かすことが重要です。
各コンテンツの配置について
各コンテンツをどこに配置していくかを、UI/UXを意識して考えていきましょう。
どのページも共通するコンテンツについて、先ずは紹介します。
ヘッダー
サイト最上部エリアをヘッダーと言います。
このエリアに表示したいコンテンツは以下の通りです。
◯ ショップ名・ショップロゴ
◯ ページナビゲーション
◯ お問合せ先
△ 送料の情報
△検索窓
△重要なお知らせ
ヘッダーは固定表示しているサイトも多いです。（固定表示とは、ページをスクロールしても常にヘッダーは表示されている状態の事です）
そのため、ショップ名と各ページへのナビゲーションリンクはほとんどのサイトがヘッダーに配置しています。
ショップ名は左上（一番初めに目線が行く場所）に置くことが多いです。
また、お問合せ先はヘッダーにあるとお客様にとって親切な設計です。
送料も同じ目的でヘッダーに配置しているショップも多いですが、こちらは●●●円以上送料無料！など短めに且つお得な情報である場合に有効です。
UXを意識した時に、お客様が特に必要としている情報を配置することが望ましいです。
重要なお知らせは、たとえば今回のようにコロナの影響を受けている状況で、どのような施策をされているか、長い場合はそのページへのリンクをヘッダーに付けておくと、お客様に寄り添った造りになるでしょう。
端末で適したデザインに切り替わるようにサイトを作る場合は、端末幅狭い時にはページナビゲーションなどの情報はひとまとめにボタンメニューにまとめて隠す方法が主流です。
ボタンを開けばメニューが表示される、ということが伝わるようなボタンデザインにするようにしましょう。
ボタンも、端末を「片手でも押せる位置」に配置することがUIの造りとして望ましいです。
ファーストビュー
サイトを表示されたとき、画面に表示されている範囲をファーストビューと言います。
この範囲でショップの魅力を伝えることが重要です。
お客様はパッと見て、買いたいものがなさそうと判断したらすぐ離脱してしまいます。
最初からじっくり見てくれる人のほうが少ないので、この部分でどんなものを売っているショップなのか、どんな雰囲気のお店なのかが伝わる情報を詰め込みます。
ショップの売りである商品の大きな写真や購買意欲を刺激するキャッチコピーなどが多いです。
フッター
フッターには、お買い物の際に特に気になる情報を記載、またはページリンクを用意するのがよいでしょう。
たとえば、配送・送料についての情報や返品について、ショップの情報などです。
その他にもヘッダーナビゲーションとは別にサイトマップリンクを用意してあげるのも親切です。
端末幅が狭い場合は、全てのサイトマップの表示をしてしまうとコンテンツを圧迫してしまうので、サイトリンクは隠してしまってもよいでしょう。
定番のお買い物ガイドや特定商取引法に関するページリンクは隠さないのがポイントです。
商品ページを考える
ここからは、ネットショップにかかせない「商品紹介ページ」の構成について考えていきます。
商品ページで必要なものをまずはリストアップしましょう。
商品写真（メイン画像・サブ画像）
一番最初に目に入る最も重要なコンテンツです。
魅力的な写真を用意しましょう。
また、１枚だけではなく、色んな角度から撮った写真や、着用イメージなど、何枚か写真があることで購入者の「イメージと違った」「こんなの写っていなかった」というマイナス評価や返品希望を減らす効果が期待できます。
写真を撮る時も、できるだけ画質の良い写真が取れる機材や、照明を利用して撮影をするのが理想です。
また、たとえば写真は購入者が疑似体験できるイメージ(UX)を想像して一工夫してみるとよいでしょう。
具体的な例でいうと、食品を商材とする場合、食器や周りに移りこむ小物などで、実際に購入者が目の前にその商品が置かれているイメージをもつことができることです。
写り込む小物が主役にならないよう、配置やピントに気を付けて、きれいで魅力的な商品写真を用意しましょう。
商品名
商品名は「目につく場所」「目立つ文字サイズや強調デザイン」「商品名のキャッチコピーは短め」を意識しましょう。
商品名は必ずファーストビューのエリアに書くようにしましょう。縦長の商品ページになる場合は、商品名はファーストビューエリアと購入ボタン（かごにいれるボタン）の近くには入れるようにしたほうが良いでしょう。
また、キャッチコピーを合わせた商品名があまりにも長すぎると、分かり辛い印象を与えます。
どうしても入れたいキャッチコピーだけ残して、あとはページ内の宣伝文やリード文などに盛り込みましょう。
【長すぎる商品名の例】
送料無料！「商品名」国産無添加・●●賞受賞<在庫処分価格！>
価格
購入者が知りたい情報トップ１でしょう。
魅力をどれだけ伝えても結局いくらなの？となるので、分かりやすい文字サイズで、目立つ位置に書きましょう。
購入ボタン（かごに入れるボタン）の近くに配置するのがベターです。
赤字で書いているところが多いです。
導入のキャッチコピー（リード文）
購買意欲を促進するキャッチコピーを考えましょう。
ポイントは、購入者が「欲しい情報は何か」を意識して考える事です。
お店側がアピールしたいことを並べても、はたしてそれは知りたい情報でしょうか。
購入者の立場になって購入前・購入後に知りたい情報をイメージすることが重要です。
また文章に強弱をつけるため、色・サイズ・行間・配置を工夫してみるのも手です。
お客様のレビュー
購入に迷っているとき、実際に買った人の意見を参考にすることでお店への信頼感・安心感を得られます。
注意したいことは、お客様の生の声ということがわかるようにすることです。
ただ文字として書いたのでは、お店側のサクラと判断されがちです。
レビューシステムを導入することを推奨します。（利用しているカートシステムに搭載されていることも多いので確認してみましょう）
お店のコンセプトに合った素敵なネットショップサイトを目指しつつ、お客様がわかりやすく迷子にならないような配慮しながら構成を考えましょう。
人気のネットショップサイトの構成を参考にするのも良いと思います。
