ECサイト UIデザインのお作法まとめ「〇〇できそう感」詰め合わせ🍱

ECサイトの優れたUIデザインとは？

ECサイトでは、様々なパーツやデザインが含まれています。
ボタンやアイコンとの組み合わせ方、伝わりやすさに関わるレイアウトなどの「骨格部分」を「UIデザイン」といいます。

ちょっとした使いやすさ・わかりやすさが、お客様のイライラを下げることに効果あるんです！

同じようなアイテムの通販サイトも山ほどある中で、離脱されず、居心地のいいサイトであるためにも、細部に気を配ることは有効です。

（１）機能ナビ感

ページ上部、右端に

「商品検索ボックス」

「カートの中」

「ログイン(マイページ)」など、

ECサイトのカート関連で最低限使う機能が小さなアイコンで並んでいます。

似た機能をグルーピングすることで、「よく使う機能」が探しやすいデザイン。

ダメなUI例

検索できると想像しやすいアイコンがなかったり、メニューの順序が特殊すぎたりするのは、わかりにくいですね。

（２）メガナビ出そう感

ヘッダーロゴ下にある（よくあるのは、横長の帯状）メインメニューを【グローバルナビゲーション】といいます。
そのグロナビのリンクテキスト傍にこんな「下矢印」アイコンがあると、プルダウンできそうな雰囲気に。この場合、「商品一覧」ボタンにマウスオーバーすると、細かいカテゴリが出てきます。
商品カテゴリと商品数の多いサイト向き。

＊エリアの制約や、商品リストへのリンクなどで明らかに「何が出てくるか」わかりやすければ、例外的に「下矢印」アイコンをなくすことも時々あります。

（３）カテゴリ一覧感

「角皿」「イス」「スカート」などなど、サイトで設定した基本カテゴリへの導線を表すデザイン。アイコンまたは写真・イラストなどの隣にカテゴリ名を配置します。

上図のように、グローバルナビ内のメガナビにも似たものが出てきましたが、サイト共通エリアの左右にあるサブナビのカテゴリ案内や、トップページのカテゴリ一覧案内エリアなど、いくつかの場所でも一般的な表現です。

（６）ランキング感

オススメ商品リストエリアに似ていることも多いですが、このような王冠やバッジアイコン、順位の数字などのパーツがあることで、人気アイテムが順に並んでいそう感を演出できます。

（８）新着情報見れる感

トップページのNews、ショップからのお知らせっぽいUIデザイン。ページ上部や下部にコンパクトに載せたいなら、こういうテキスト主体の見せ方がメジャーです。

（９）切り替えできそうなタブ感

商品カテゴリ・商品点数ともに多いECサイトで、トップページのランキングや新着商品リストをすっきりと見せるのに使われます。

（11）ソートできそう感

商品カテゴリトップや「商品一覧」といったページ上部のページネーション付近に、価格順などの並べ替えができるようなデザイン。

商品多めのサイトで力を発揮します。

（12）条件絞り込めそう感

商品一覧ページ、検索ページなどで、チェックをつけたり、プルダウンメニューから、理想の色やサイズを細かく絞り込めそうなUI。

Before1個め（チェックボックスで絞り込み）

単なるリストマークだと、「リンク先ページに行く」だけのように見えます。

Before2個め(サイズ、価格など範囲指定)

単なるリストマークだと、アイテムサイズのように細かい分類が多い場合は、ナビゲーションメニューが膨大になりやすいです。「After」例のようなプルダウンやスライダーバーによる範囲指定でコンパクトにすると見た目にキレイで、使いやすさもアップします。

（13）注目しそう感（メリットアイコン）

商品一覧や商品詳細で、「new」「sale」「＊＊対応」など、商品の注目点やメリットを小さな文字アイコンなどにしたもの。

一見便利ですが、あらゆる特色をアイコン化すると、途端に意味不明でごちゃついた、「役立たず」デザインになりやすいので、「何をどこまで」アイコン化するのかは、厳選した方がいいですね。

（14）数量・オプション選べる感

商品詳細ページの、

・どんなオプションをつけるかつけないか

・カートに何個の同アイテムを入れるか、を選べるっぽいUIデザイン。

数量は「プルダウン方式」も多いですが、テキストボックスに直接入力できるサイトもあります。

（17）詳細画像＋商品画像の拡大表示できそう感（モーダル/ズーム）

商品詳細ページで様々な角度の写真、イメージ写真などが見れそうな感じのUI。図のように、メイン画像にマウスオーバーすると部分的にズームになったり（薄いグレーの画像が重なっている部分）、クリックで拡大（モーダル）できるECサイトもあります。

（18）カートへ入れる（商品ページ）感

王道のカートへ入れるボタン。

商品詳細はもちろん、一覧ページに採用されることも。一覧ページなどと詳細ページのカートボタンの見せ方は変わっていることもあります。

（19）メルマガ感

メルマガっぽいバナー。メールアイコンや短い説明文など、そのエリアのバナーサイズや全体のデザインに合わせつつ、「メール感」「マガジン感」をプラスすると、登録できそうっぽい雰囲気が出ます。

（20）カートにいてる感

カートの中っぽいUI。ハイライト表現されている項目が、現在の状態を表します。上図なら、「カートの中」画面で使います。

（21）カートから削除できそう・数量変えれそう感

「カートの中」画面で、数量を変更（左）したり、該当商品をカートから消したりできそう（右）なデザイン。

（22）購入確定できそう感

（23）買い物を続けられそう感

このボタンがないこともありますが、カートに候補アイテムを入れたまま、引き続き、他にも買っておきたいものを探せそうなUI。

今度は、「ページの左側」に配置し、グレー背景・小ぶりなボタンサイズなど、控えめなデザインにすることで「戻る」感を出しましょう。

（24）カートになんか入ってそう感

カートにアイテムが入ってそうなアイコン表現。Beforeだと、変化がないのでカートの中をみないとカートに何か入れていたか、わかりづらいです。

（25）ログインできそう感

こういった鍵アイコンをつけると、グッとログイン感が出ますが、なかったり、矢印アイコンになっていることも。

ECサイトのよくある重要UIデザインまとめ

ECサイトのデザインは、利用するショッピングカートの制約もあり、上記全てが思いのままに設定できるとは限りません。

また、あくまで推奨の定番デザインはあるものの、多少アイコンなどを省略したりすることも。

ビジュアル的にわかりやすい絞り込み機能なんかは、個別開発などじゃないと再現しにくいケースも多いです。ただ、「UIデザイン」の理解があれば、レンタルカート（ASPカート）でも、制約はありますが、ある程度なら使い勝手は高められます。
（本当に最小限のカスタマイズしかできないカートでは、難しいですが・・・）

自社ECサイトにより効果的なUIをデザインし、改善を

例に挙げた雰囲気に近いまま使ったり、ターゲットやデザインテイストに応じてさらに細やかなデザインを施すことも。

ECサイトでものを売る上で大切なことはたくさんありますが、こういった細かい部分もそれなりのクオリティだと、「取り逃がしにくい」通販サイトとなるでしょう。