2020/02/14ECサイトで使われるUIデザイン(パーツやレイアウト表現の工夫)も、なんとなく作られたものと、細部に配慮して作られたものでは、売上や使い勝手などが変わってきます。今回は、通販サイトのUIや細かいデザインの観点から、「UIのお作法。28個の「〇〇できそう感」をまとめました。→参考に、ECサイト版「できそう感」をまとめてみました。こちらのツイートがきっかけです。これのECサイト版とか出ないかな>UIのお作法。28個の「〇〇できそう感」をまとめました。UIデザインまとめECサイトの優れたUIデザインとは?ECサイトでは、様々なパーツやデザインが含まれています。ボタンやアイコンとの組み合わせ方、伝わりやすさに関わるレイアウト・・・などの「骨格的な部分」を「UIデザイン」ます。「ログイン(マイページ)」など、ECサイトのカート関連で最低限使う機能が小さなアイコンで並んでいます。似た機能をグルーピングすることで、「よく使う機能」が探しやすいデザイン。検索できると想像しやすいアイコンがなかったり、メニューの順序が特殊すぎたりするのは、わかりにくいですね。(2)メガナビ出そう感ヘッダーロゴ下にある(よくあるのは、横長の帯状)メインメニューを【グローバルナビゲーション】といいます。そのグロナビのリンクテキスト傍にこんな「下矢印」アイコンがあると、プルダウンできそうな雰囲気に。ボタンにマウスオーバーすると、細かいカテゴリが出てきます。商品カテゴリと商品数の多いサイト向き。*エリアの制約や、商品リストへのリンクなどで明らかに「何が出てくるか」わかりやすければ、例外的に「下矢印」アイコンをなくすことも時々あります。「角皿」「イス」「スカート」などなど、サイトで設定した基本カテゴリへの導線を表すデザイン。アイコンまたは写真・イラストなどの隣にカテゴリ名を配置します。上図のように、グローバルナビ内のメガナビにも似たものが出てきましたが、サイト共通エリアの左右にあるサブナビのカテゴリ案内や、トップページのカテゴリ一覧案内エリアなど、いくつかの場所でも一般的な表現です。商品が一定バリエーションのあるECサイトでは、スライダーになっていて、セールキャンペーン注目アイテム特集などのバナーが画面幅いっぱいに近い、大きなサイズでスライドしています。基本的には、メインメニュー(グローバルナビゲーション)の下すぐに配置されます。切り替わるビジュアル画像の左右端には「矢印アイコン」をつけ、図のような小さな「●」や「▪️」で「何かスライドしそう感」を演出するのが定石。矢印をつけない時には、こんな感じでメインの画像をディスプレイ幅めいっぱいにせず、ちらっと左右に次のビジュアルが見えるようなサイジングにするとわかりやすいですねvただ、ブランドサイトのようなもので、横幅めいっぱいにして、スライドナビも●とかだけ、というパターンもありです。リッチでイメージ重視な印象になります。「すでにあなたの通販サイトを知っているが、これといって欲しいものがわからないお客様」に対し、オススメの企画や買い方を目立つ形で提案できます。(5)オススメそう感トップページの「オススメアイテム」や商品カテゴリ・商品詳細のページ下部などに4〜5つほどの小さなリスト型で、関連商品やチェックリストが並んでいます。商品点数の多いサイトだと、スライダー方式だったりもします。(6)ランキング感オススメ商品リストエリアに似ていることも多いですが、このような王冠やバッジアイコン、順位の数字などのパーツがあることで、人気アイテムが順に並んでいそう感を演出できます。(7)もっとみれそう感トップページ頻出の「more」ボタン。見る」などとすることもありますね。程よいサイズの長方形(または角丸長方形)と中サイズ程度までのリンク文言が特徴的なUI。オススメ商品や、ランキング上位商品が並んだエリアのすぐ下に配置し、そのジャンル一覧を見るためのリンクとして使います。「Before」例のように、物足りなくて写真背景を敷いたりなどゴテゴテしすぎたり、逆に文字リンクだけだと(基本的には)わかりにくいデザインになることも多いでしょう。*ミニマルな雰囲気にするため、こういった「しっかりベタ塗りしたボタン」デザインじゃないケースも。(8)新着情報見れる感トップページのNews、ショップからのお知らせっぽいUIデザイン。ページ上部や下部にコンパクトに載せたいなら、こういうテキスト主体の見せ方がメジャーです。商品カテゴリ・商品点数ともに多いECサイトで、トップページのランキングや新着商品リストをすっきりと見せるのに使われます。(10)一覧リスト感(ページネーション)商品カテゴリトップや「商品一覧」といったページで上下に表示されるページネーション。商品カテゴリトップや「商品一覧」といったページ上部のページネーション付近に、価格順などの並べ替えができるようなデザイン。商品多めのサイトで力を発揮します。商品一覧ページ、検索ページなどで、チェックをつけたり、プルダウンメニューから、理想の色やサイズを細かく絞り込めそうなUI。Before1個め(チェックボックスで絞り込み)単なるリストマークだと、「リンク先ページに行く」だけのように見えます。Before2個め(サイズ、価格など範囲指定)単なるリストマークだと、アイテムサイズのように細かい分類が多い場合は、ナビゲーションメニューが膨大になりやすいです。「After」例のようなプルダウンやスライダーバーによる範囲指定でコンパクトにすると見た目にキレイで、使いやすさもアップします。(13)注目しそう感(メリットアイコン)商品一覧や商品詳細で、「new」「sale」「**対応」など、商品の注目点やメリットを小さな文字アイコンなどにしたもの。便利ですが、あらゆる特色をアイコン化すると、途端に意味不明でごちゃついた、「役立たず」デザインになりやすいので、「何をどこまで」アイコン化するのかは、厳選した方がいいですね。・どんなオプションをつけるかつけないか・カートに何個の同アイテムを入れるか、を選べるっぽいUIデザイン。数量は「プルダウン方式」も多いですが、テキストボックスに直接入力できるサイトもあります。商品詳細ページを中心に、商品一覧に使うことも。商品価格の近くに配置し、該当商品でつくポイント数を明示しています。商品一覧や商品詳細ページに時々使う、ビジュアルつきのカラバリ表現デザイン。商品バリエーションの多い、アパレル通販やインテリア等のサイトでは、ただの文字列のオプション表現に比べると、ぱっと見で欲しい色がわかりやすくなり、ユーザーフレンドリー(見る人に優しい)になります。(17)詳細画像+商品画像の拡大表示できそう感(モーダル/ズーム)商品詳細ページで様々な角度の写真、イメージ写真などが見れそうな感じのUI。図のように、メイン画像にマウスオーバーすると部分的にズームになったり(薄いグレーの画像が重なっている部分)、クリックで拡大(モーダル)できるECサイトもあります。王道のカートへ入れるボタン。商品詳細はもちろん、一覧ページに採用されることも。一覧ページなどと詳細ページのカートボタンの見せ方は変わっていることもあります。(19)メルマガ感メルマガっぽいバナー。メールアイコンや短い説明文など、そのエリアのバナーサイズや全体のデザインに合わせつつ、「メール感」「マガジン感」をプラスすると、登録できそうっぽい雰囲気が出ます。(20)カートにいてる感カートの中っぽいUI。ハイライト表現されている項目が、現在の状態を表します。上図なら、「カートの中」画面で使います。「カートの中」画面で、数量を変更(左)したり、該当商品をカートから消したりできそう(右)なデザイン。「カートの中」から、購入の確定画面へ進めそうなボタンデザイン。他のボタンとは異なる色にしたり、大きめの目立つボタンにすることで、「最終決定」の印象を高めます。このボタンは、「ページ全体の右側」に置くことで「進む」感を出すのが基本です。(23)買い物を続けられそう感このボタンがないこともありますが、カートに候補アイテムを入れたまま、引き続き、他にも買っておきたいものを探せそうなボタン。今度は、「ページの左側」に配置し、グレー背景・小ぶりなボタンサイズなど、控えめなデザインにすることで「戻る」感を出しましょう。(24)カートになんか入ってそう感カートにアイテムが入ってそうなアイコン表現。Beforeだと、変化がないのでカートの中をみないとカートに何か入れていたか、わかりづらいです。(25)ログインできそう感こういった鍵アイコンをつけると、グッとログイン感が出ますが、なかったり、矢印アイコンになっていることも。「必須」の小さな文字アイコン(や赤字など)で、入力が必要そうな雰囲気に。Beforeも間違ってはないですが、どこが必須かわかりづらいですね。UIデザインまとめECサイトのデザインは、利用するショッピングカートの制約もあり、上記全てが思いのままに設定できるとは限りません。推奨の定番デザインはあるものの、多少アイコンなどを省略したりすることも。ビジュアル的にわかりやすい絞り込み機能なんかは、個別開発などじゃないと再現しにくいケースも多いです。「UIデザイン」の理解があれば、レンタルカート(ASPカート)でも、制約はありますが、ある程度なら使い勝手は高められます。(本当に最小限のカスタマイズしかできないカートでは、難しいですが・・・)例に挙げた雰囲気に近いまま使ったり、ターゲットやデザインテイストに応じてさらに細やかなデザインを施すこともあります。ECサイトでものを売る上で大切なことはたくさんありますが、こういった細かい部分もそれなりのクオリティだと、「取り逃がしにくい」通販サイトとなるでしょう。Design/エイプリルデザイン「ビジネス春メク🌸Webカウンセラー👩‍⚕️」を理念とする、Web制作/基礎SEO対策/マーケティング/ブランディング等をサポートする伴走型Webデザイナー。ブログ/ライティング・分析/HP改善っぽいのが一応の強みで、公開後も安心のサポート対応可。ブランディングもマーケいづれも好き。お気軽にご相談ください。HP診断などからも承っています。考えていた時期がありました。あなたはどの段階?フォロワー買ってもムダ。reserved.^。