ECサイトでは「商品数が多くなると、見つけにくくなること」や「実際に商品を触れないこと」などが実店舗と比較してネックになりがちです。

そこで今回は「サイト外からの探しやすさ」と「実際に触れない部分のフォロー」について、ニトリの通販サイトを題材に５つ紹介します。

※この記事は2014年12月に作成したものです。ニトリ様ECサイトはその後リニューアルされています。

サイト名	ニトリ
URL	http://www.nitori-net.jp/
QRコード

１：Googleから直行可能な「サイト内検索」

今年の夏頃からGoogleの検索結果一覧内に「サイト内検索フォーム」が表示されるようになりました。

これはテキストを入力すると、そのサイトの中のコンテンツを「site検索」する機能です。

そしてこの検索フォーム、構造化データを利用することで「自社サイトの検索結果」にアクセスさせることが可能です。

実際に楽天で試してみると、「site検索」ではなく自社サイトの検索結果一覧に移動します。

これはschema.orgを使ったマークアップをhead内に指定する必要があります。

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "WebSite",
  "url": "【サイトURL】",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "【検索結果ページURL】?q={search_term}",
    "query-input": "required name=search_term"
  }
}
</script>

参考：schema.orgを使ってGoogleの検索結果にサイトリンク検索ボックスを表示させよう | 海外SEO情報ブログ

targetのURLに検索結果を表示させるページのURLを入力し、検索結果を表示するクエリパラメータをセットすることで自社の検索一覧にアクセスさせることが可能となります。

２：使い方・利用シーンを明示した商品ページ

商品詳細ページでは、商品画像内に使用方法や取り扱い方法を記したイラストが表示されるようになっています。

ECサイトでは実際に商品を触ってみることができないため、このような「使い方」が見れるとより親切なサイトとなります。

３：アイコン式・カード式UIのカラー・関連商品選択画面

カラーバリエーションや関連商品を選択するエリアはアイコンまたはカード式のレイアウトになっています。

また、「関連商品をもっと見る」ボタンを設置することでよりサイト内の回遊性を高めることができます。

４：カート内での送料無料レコメンドと関連商品サジェスト

カート内に移動すると、商品価格が見やすいデザインになっていました。

フォントのジャンプ率や太さを大きくすることで今何円分カートに入れているかがわかりやすくなり、更に「あと何円で送料無料になる」という告知を入れることで「ついで買い」を狙うことができます。

またカート内で買い忘れのサジェストや関連商品リストを表示することで、１ページ内で「購入のアテンション」と「サジェスト」を同時に実施しています。

５：商品別に確認・変更可能な配送方法画面

家具などの大型商材では、玄関先受取か部屋内に設置してもらうかなどの納品方法を選択できます。

また商品個別に配送方法を編集できるようにすることで、複数の配送先に届けることができるようにもなっていました。

まとめ

いかがでしたでしょうか。

Googleの「サイト内検索フォーム」は大手サイトでは自動で実装されるようになっていますが、中小規模のサイトでは手動設定が必要となります。

JSON-LDのスクリプトを少し追加するだけで実装可能ですので、ECサイトを運営する際には実装させてはいかがでしょうか。