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

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

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

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

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

（１）機能ナビ感

ページ上部、右端に
「商品検索ボックス」
「カートの中」
「ログイン(マイページ)」など、
ECサイトのカート関連で最低限使う機能が小さなアイコンで並んでいます。

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

ダメなUI例

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

（２）メガナビ出そう感

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

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

（３）カテゴリ一覧感

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

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

（４）メインビジュアルのスライダー感

商品が一定バリエーションのあるECサイトでは、スライダーになっていて、

• セール
• キャンペーン
• 注目アイテム
• 特集

などのバナーが画面幅いっぱいに近い、大きなサイズでスライドしています。
基本的には、メインメニュー（グローバルナビゲーション）の下すぐに配置されます。

切り替わるビジュアル画像の左右端には「矢印アイコン」をつけ、図のような小さな「●」や「▪️」で「何かスライドしそう感」を演出するのが定石。
矢印をつけない時には、こんな感じでメインの画像をディスプレイ幅めいっぱいにせず、ちらっと左右に次のビジュアルが見えるようなサイジングにするとわかりやすいですねv

ただ、ブランドサイトのようなもので、横幅めいっぱいにして、スライドナビも●とかだけ、というパターンもありです。リッチでイメージ重視な印象になります。

「すでにあなたの通販サイトを知っているが、これといって欲しいものがわからないお客様」に対し、オススメの企画や買い方を目立つ形で提案できます。

（５）オススメそう感

トップページの「オススメアイテム」や商品カテゴリ・商品詳細のページ下部などに４〜５つほどの小さなリスト型で、関連商品やチェックリストが並んでいます。商品点数の多いサイトだと、スライダー方式だったりもします。

（６）ランキング感

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

（７）もっとみれそう感

<

トップページ頻出の「more」ボタン。日本語で「商品一覧」「記事一覧」「もっと見る」などとすることもありますね。
程よいサイズの長方形（または角丸長方形）と中サイズ程度までのリンク文言が特徴的なUI。

オススメ商品や、ランキング上位商品が並んだエリアのすぐ下に配置し、そのジャンル一覧を見るためのリンクとして使います。

「Before」例のように、物足りなくて写真背景を敷いたりなどゴテゴテしすぎたり、逆に文字リンクだけだと（基本的には）わかりにくいデザインになることも多いでしょう。
＊ミニマルな雰囲気にするため、こういった「しっかりベタ塗りしたボタン」デザインじゃないケースも。

（８）新着情報見れる感

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

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

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

（10）一覧リスト感（ページネーション）

商品カテゴリトップや「商品一覧」といったページで上下に表示されるページネーション。

（11）ソートできそう感

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

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

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

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

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

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

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

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

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

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

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

商品詳細ページの、
・どんなオプションをつけるかつけないか
・カートに何個の同アイテムを入れるか、を選べるっぽいUIデザイン。

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

（15）ポイントつきそう感

商品詳細ページを中心に、商品一覧に使うことも。商品価格の近くに配置し、該当商品でつくポイント数を明示しています。

（16）カラバリ感

商品一覧や商品詳細ページに時々使う、ビジュアルつきのカラバリ表現デザイン。
商品バリエーションの多い、アパレル通販やインテリア等のサイトでは、ただの文字列のオプション表現に比べると、ぱっと見で欲しい色がわかりやすくなり、ユーザーフレンドリー（見る人に優しい）になります。

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

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

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

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

（19）メルマガ感

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

（20）カートにいてる感

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

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

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

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

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

このボタンがないこともありますが、カートに候補アイテムを入れたまま、引き続き、他にも買っておきたいものを探せそうなUI。
今度は、「ページの左側」に配置し、グレー背景・小ぶりなボタンサイズなど、控えめなデザインにすることで「戻る」感を出しましょう。

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

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

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

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

（26）必須感

「必須」の小さな文字アイコン(や赤字など)で、入力が必要そうな雰囲気の出るUI。
Beforeも間違ってはないですが、どこが必須かわかりづらいですね。

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

ECサイトのデザインは、利用するショッピングカートの制約もあり、上記全てが思いのままに設定できるとは限りません。
また、あくまで推奨の定番デザインはあるものの、多少アイコンなどを省略したりすることも。

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

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

例に挙げた雰囲気に近いまま使ったり、ターゲットやデザインテイストに応じてさらに細やかなデザインを施すことも。
ECサイトでものを売る上で大切なことはたくさんありますが、こういった細かい部分もそれなりのクオリティだと、「取り逃がしにくい」通販サイトとなるでしょう。

オススメ記事

• 

  デザイン初心者でもできる？プロっぽいバナーのコツ