食品・スイーツのこだわりポイント

あらゆる商品ジャンルの中でも特にギフト需要の高い食品ジャンル※においては、お祝いやお返しといった目的ありきの商品検索を行うニーズが高いと考えます。そういったニーズに対応できるUIとして、ギフト需要に応えることに特化した食品:ギフト向けのテンプレートを提案いたします。

※食品・スイーツをネット注文したことがある方のうち、26.6%の方がギフト向けに購入経験あり。家電、インテリア、アパレルなど、他ジャンルにおいては2〜5%程度を推移。当社調査結果(4,401名へのアンケート)による。

ポイント1 ギフト商品を素早く探せる構成

サイトへの入り口がどこであっても、すぐに目的や用途に応じたギフト商品を探せるよう、グローバルナビゲーションの『贈答用に探す』にメガドロップダウンメニューを採用しました。

ページ最上部に位置するメガドロップダウンメニュー内にギフトの目的や用途ごとのカテゴリを設置することで、最小限の操作やページ遷移で目的の商品を見つけることができ、購入者のストレスを低減します。

また、各用途ごとに細分化された下層のカテゴリページは、該当カテゴリに所属する商品の一覧がページ遷移せず全て確認できるようにしました。ページ遷移の回数を減らすことで、離脱の要因を減らしています(ページスクロールによって追加読み込み)。
商品点数が数百点前後であることの多い食品サイトであれば、できるだけカテゴリを細分化することで1カテゴリあたりの商品点数を減らすことができ、ページが重くなることを防げます。

ポイント2 迷う要素を徹底的に排除した商品ページレイアウト

商品ページのレイアウトは、このページが商品ページであり、買い物を進めるためにはこのページを見たら良いということが正確に伝わるようものになっています。一人でも多くのお客様が『買い物カゴに入れる』ボタンを押せることを最大の目的としてページ全体、特にページ上部のレイアウトを考慮しました。

セカンドビューまで考慮したファーストビュー

高さ768px程度のコンパクトなディスプレイで閲覧した場合でも、商品名、価格、商品写真が目に飛び込み、商品が購入できることがすぐに伝わるレイアウトとしています。
ユーザテストの結果、例えページのファーストビューがどのページもほぼ同じようなサイトでも、セカンドビュー辺りまでのスクロールはほとんどのユーザが行うことを確認できました。よって、ファーストビューに情報を詰め込むのではなく、セカンドビューまでに購入に必要な情報が一通り確認することが出来るレイアウトとしました。
また、目的に近い商品と判断できた際にはすぐに商品の詳細情報が確認できるよう、すぐ下にスペックテーブルを用意しました。さらにスクロールを続ければお客様が投稿した商品レビューを表示するエリアが現れます。
これにより各要素間に適度な余白が生まれ、探している情報を正確に発見することができます。

商品比較段階の購入者が確認したい情報を整理整頓したファーストビュー
〜セカンドビュー

ファーストビュー〜セカンドビューには、下記の情報が並べられています。

商品そのものの情報
  • 商品名
  • 価格
  • 商品写真
  • 商品のスペック
購入するために必要な付加要素
  • ギフトやのしに対応しているかを表すアイコン
  • 同じ商品の内容量違い等を選択できるボタン
  • 実際の注文時に確認すべき情報(必要な送料やアレルギー情報など)

これにより、最低限のスクロールで商品を比較する際に必要な情報が全て確認できます。

ECサイトであることがすぐに伝わるレイアウト

商品画像は、大手モールとの商品情報連動を考慮し、合計9枚までであればファーストビュー〜セカンドビュー上部に収まるようレイアウトしました。ただし、新たにECサイトを始められる店舗様には、適度な写真の大きさの確保と、ページの長さを抑えられる1:√2の白銀比とされることをオススメします。
また、大手モール向けに使用されることの多い、縦幅の大きい商品こだわりポイントは、レビューの直下にそのまま流し込めるようにしています。
大手モールで商品を探している方は、そのモールのページの作り方が意識に刷り込まれており、カゴ周りがページの下部にあろうとも迷いが生じることは多くありません。
しかし、本店サイトの場合はそもそもECサイトか分からずアクセスされる可能性が高いため、買い物ができるサイトであることを最初に伝える必要があります。そのためにも、カゴ周りがページの上部にあることが最適と考えます。

ポイント3 初めてのサイト訪問時の不安解消が出来る要素配置

ユーザテストの結果、初めて訪れたサイトで商品購入をする際に、下記が特に気になる点であることが分かり、それぞれ対策を施しました。

サイト全体に対するもの

運営する会社はしっかりしたところか
  • ヘッダ内に『会社概要』のリンクを設置しました。
  • サイト左上に電話番号を記載し、問い合わせ窓口の存在を認識できるようにしました。
ギフト対応力の高さ(無礼があってはいけないため)

ギフト特集ページで、ギフト対応について詳細に表現できます。

送料、商品到着までの期間
ヘッダ内に『支払・送料について』の文字でリンクを設置しました。
のしやギフト包装の対応
各商品ページのファーストビューに、対応しているギフト対応の種類を表示できるようにしました。

商品に対するもの

扱っている商品の価格帯

グローバルナビゲーション部から、価格帯で商品を絞り込むリンクを設置し解消できるようにしました。

贈る相手に好まれる商品がどれか
ギフトカテゴリページに、『脂身が少なくあっさり』など各商品の用途に応じたオススメコメントを記載できるようにしました。
価格

商品ページファーストビューに表示されるようにしました。

日持ち

各商品ページのスペック表内に、賞味期限を記載できるようにしました。

届いた時の見た目
  • 各商品の商品画像として実際に包装された状態の写真を登録できるエリアを用意しました。
  • ギフト特集ページのファーストビューにてサンプルの写真を掲載できるようにしました。

ポイント4 より満足度の高いおかいもの体験ができるよう、あらゆる点を考慮

シニア受け(≠シニア向け)

シニア受け(≠シニア向け)するインターフェイスが若年層にも使いやすいインターフェイスであるという考えのもと、シニア向けUXコンサルタントの経験値を盛り込みました。動きのあるインターフェイスに関しては、実際にシニアの方が理解しづらい要素は一切盛り込んでいません。
またシニアの方は文字のサイズが大きければ見やすいということは無く、文字サイズ変更ボタンも実際にはほとんど使われません。要素間の適度な余白等によって目線を配りやすくすることがより効果的であるという研究結果があるため、適度な余白を取った要素配置を行いました。これにより、あらゆる年齢層の方が使いやすいインターフェイスとなっています。

大きな写真

サイドナビを廃したのは、写真を可能なかぎり大きく表示し、より美味しそうに感じられたり、味をイメージしやすくするためです。食品ギフト注文時に最も重視される要素として『美味しさ』『相手の好みに合うこと』があります※。
写真の品質が高く大きいほど商品の味わいがイメージでき、相手の方の好みに合うかどうかをイメージしてもらいやすくなります。

※食品をギフトに注文する際の不安要素として、約55%の方が『相手の好みに合うかどうか』回答しトップ。当社調査結果(4,401名へのアンケート)による。

ポイント5 分かりやすい文言

購入を決意する前に気になる配送や送料、また細かな疑問があった際にクリックすべき箇所が分かりやすいよう『配送・送料について』『よくあるご質問』といった、リンク先のページの内容をイメージしやすい言葉を選択しました。