こんにちは、ツバサです。
サイト改善の打ち合わせで制作会社から「UX改善しましょう」と提案された。UX？ UI？ よく聞く言葉だけど、正直ちゃんと区別がついていなかったので調べてみた。
UI・UXとは
ひとことで言うと、UIは「ユーザーの目に触れる部分」、UXは「ユーザーが得る体験全体」のこと。
Kaizen PlatformのUX/UI解説記事によると、UI（User Interface）の「インターフェース」は「接点」を意味する。Webサイトで言えば、ボタン、メニュー、フォーム、画像、テキスト、色使いなど、ユーザーが目にして操作するすべてのデザイン要素がUIにあたる。
一方、UX（User Experience）の「エクスペリエンス」は「体験」を意味する。ECサイトの場合、商品を探して、詳細を見て、カートに入れて、決済して、届くまでの一連の流れで感じること全体がUXだ。
整理するとこうなる。
| UI（ユーザーインターフェース） | UX（ユーザーエクスペリエンス） | |
|---|---|---|
| 意味 | ユーザーとの接点・見た目 | ユーザーの体験全体 |
| 具体例 | ボタンの色や大きさ、メニューの配置 | 「探しやすい」「買いやすい」という感覚 |
| 範囲 | 画面上のデザイン要素 | サービス利用の全工程 |
| 関係 | UXの一部 | UIを含む上位概念 |
ECのミカタのUI/UX解説記事にもあったが、UIはUXの一部であり、UIが優れていればUXも向上しやすい。ただし、UIだけではUXは完結しない。商品の品揃え、配送スピード、問い合わせ対応なども含めた全体がUXだ。
EC実務で出てくる場面
ECの仕事をしていると、UI/UXという言葉はいろいろな場面で使われる。
サイト改善の提案
今回の僕のケースがこれ。制作会社が言う「UX改善しましょう」は、サイト全体の使いやすさを見直しましょうという意味だった。具体的には、カテゴリの探しやすさ、商品ページの情報の並び順、カートから購入までのステップ数などの改善提案が出てきた。
購入フローの見直し
カートに入れてから購入完了までの画面がわかりにくい、というのはUI/UXの問題だ。AnyMind GroupのUI/UX解説記事でも、ECサイトのUI/UX改善としてフォーム入力の簡素化やステップ表示の明確化が挙げられていた。入力項目が多すぎたり、「今どの段階にいるか」がわかりにくかったりすると、途中で離脱されてしまう。
スマホでの操作性
PCではクリックしやすいボタンでも、スマホだとタップしにくいサイズということがある。指で操作するスマホでは、ボタンのサイズや間隔などのUIがPCとは異なる基準で設計されている必要がある。EC-HOWTOのUI/UXデザイン記事にも、ECサイトのスマホUIで気をつけるべきポイントが解説されていた。
覚えておきたいポイント
UX改善はUI変更だけでは終わらない
「UX改善」と言われてボタンの色を変えるだけで満足してはいけない。ボタンの色を変えるのはUI改善であり、UX改善のほんの一部だ。商品を見つけやすくする（検索・カテゴリの設計）、購入しやすくする（決済フローの簡素化）、安心して買える（レビュー・返品ポリシーの見せ方）など、幅広い視点が必要になる。
データで現状を把握する
何を改善すべきかは、感覚ではなくデータで判断する。Google Analyticsで離脱率の高いページを特定したり、ヒートマップツールでユーザーの行動を可視化したりして、つまずいているポイントを見つける。WCAのUX/UI比較記事でも、データに基づくUI/UX改善の重要性が強調されていた。
EC担当にできること
デザインやコーディングの専門知識がなくても、EC担当として「ユーザー目線で使いにくいところを指摘する」ことはできる。自分でスマホから購入してみて、わかりにくい部分や面倒な部分をリストアップするだけでも、立派なUX改善のスタート地点になる。
