マーケティング用語集カテゴリ:Web制作

UI/UX

User Interface / User Experienceゆーあい・ゆーえっくす

英語表記
UI/UX
カテゴリ
Web制作
難易度
★☆☆(入門)
関連サービス
Webサイト制作

UI(ユーザーインターフェース)は、ボタン・文字・配置など利用者が直接触れる部分の見え方と操作のしやすさ。UX(ユーザーエクスペリエンス)は、サイトを見つける前から問い合わせ後のやり取りまでを含めた体験の全体です。UIはUXの一部にすぎず、二つは並列の概念ではありません。ここを取り違えると、「デザインをきれいにしたのに問い合わせが増えない」という結果になります。

Why it matters

見た目を直しても成果が動かない理由

サイトのリニューアルで最も多い失敗は、UIだけを新しくして終わることです。配色を整え、写真を差し替え、余白を広く取る。見た目は確かに良くなります。それでも問い合わせが増えないのは、利用者がつまずいている場所が画面の美しさではないからです。実際に手が止まるのは、「自分向けのサービスか判断できない」「料金の目安が分からない」「問い合わせたら何が起きるか読めない」といった、判断に必要な情報が足りない地点です。これは配色では解決しません。

もうひとつの理由は、体験がサイトの外にも続いていることです。検索結果に出た文言と中身が一致していなければ、開いた瞬間に離れます。問い合わせを送ったあと三日返信がなければ、そこまでの印象は打ち消されます。UXという言葉が指す範囲には、この訪問前と送信後が含まれています。サイトの中だけをいくら磨いても、前後で切れていれば体験としては失敗です。

中小企業にとって重要なのは、この領域が予算勝負になりにくいことです。大きく作り直す必要はなく、多くの場合ボトルネックは1〜2か所に集まっています。フォームの項目が多すぎる、料金に一切触れていない、実績が業種別に整理されていない。こうした地点は、既存サイトのままでも直せます。順番を「全面改修」から「詰まっている場所の特定」に変えるだけで、費用の桁が変わります。逆に、担当者の主観で「なんとなく古い」を理由に作り直すと、同じ詰まりを持った新しいサイトができるだけです。

Our perspective

利用者は使いにくさを説明してくれない。黙って離れるだけ。

顧客心理の視点で見ると、UXの設計対象は「操作」ではなく不安です。人が画面上で迷うとき、頭にあるのは「これで合っているか」「あとで面倒なことになるか」「損をしないか」という問いです。フォームで電話番号を求められた瞬間に手が止まるのは、入力が面倒だからではなく、営業電話が来ると予測するからです。だから項目を減らすだけでは足りず、「入力後に何が起きるか」を先に書く必要があります。同じことは料金にも当てはまります。金額を出さない企業は問い合わせを増やそうとしていますが、利用者の側では「聞かないと分からないなら高いのだろう」という判断が先に済んでしまう。不安が残ったまま次の画面に進む人はいないという前提で、各地点にどんな問いが立つかを書き出すのが出発点になります。

仕組み化の視点では、UI/UXの改善を思いつきから外して、四つの型で回します。①どこで離れているかを数字で特定する(ページごとの離脱、フォームのどの項目で止まるか、スクロールがどこまで届くか)②その地点で利用者が抱く問いを言葉にする ③問いに答える要素を1つだけ足して比べる ④結果を残して次の候補に移る。ポイントは、一度に複数を変えないことです。同時に5か所直すと、効いたものが分からず学びが積みません。この型を月1サイクルで回せば、判断の材料が社内に溜まっていきます。一度この流れを決めておけば、担当者の感性ではなく記録が次の改善先を指し示す状態になります。制作会社に依頼する場合も、「きれいにしてほしい」ではなく「この地点の離脱を下げたい」と言えるかどうかで結果が変わります。

AI活用の視点では、観察と仮説づくりを助けられます。問い合わせ内容やチャットの履歴をまとめて分類し、利用者がサイトで解けなかった疑問を洗い出す。フォームの入力途中で止まった箇所を集計して、詰まりの候補を並べる。改善案の文面や見出しの言い回しを複数パターン出させて、比較の材料にする。ARGASのような追跡の仕組みと組み合わせれば、同じ人が何度訪れてどこを読み返したかまで見えるので、「迷っている地点」がかなり具体的に特定できます。ただし、最終判断をAIに委ねるのは向きません。数字が示すのは詰まりの場所で、なぜ詰まったかを決めるのは人の解釈です。

Diagram

図解:UIは点、UXは線

UIは各画面という点、UXはその点をつなぐ線です。線のどこかが切れていれば、他の点をいくら磨いても体験は回復しません。下の図は、同じサイトで「UIだけ整えた場合」と「UXから設計した場合」で、利用者の気持ちの動きがどう変わるかを示したものです。

UXは訪問前から送信後までの線、UIはその上に並ぶ点 同じ会社・同じ商品でも、線を設計したかどうかで気持ちの動きが変わる UX:体験の全体(見つける前から、送信後の対応まで) 満足 不満 この開きが、成果の差になる UXから設計した場合 UIだけ整えた場合(見た目は良いが、判断できずに止まる) 検索で見つける 書かれた文言と 中身が一致するか トップページ 自分向けの会社か 数秒で分かるか サービス説明 比較に使える材料 (範囲・料金の目安) 入力フォーム 送った後どうなるか 最も手が止まる地点 送信後・返信 速さと内容で それまでが決まる UI:一つひとつの画面と部品(見え方・操作のしやすさ) UIだけ直す 点は美しくなる。線の切れ目はそのまま残る。 UXから直す 切れている1か所を見つけて、そこだけ直す。 迷いが消えたところから、人は前に進む

Case studies

事例で見る:国内・海外

海外

Amazon ── 「見た目」ではなく「手数」を削った

UI/UXの古典例として語られるのが、Amazonの「1-Click注文」です。1990年代末に特許が取得され、その後の他社の実装にも影響を与えたことが広く知られています。注目すべきは、この改善が画面を美しくする変更ではなかった点です。変えたのは、住所や決済情報を毎回入力し直すという体験そのもの。すでに登録済みの情報を使って、確認画面を挟まずに購入を完了させる。UIの見え方はむしろ簡素になり、代わりに「途中で気が変わる余地」が消えました。ここから読み取れるのは、UXの改善とは利用者に残っていた手間と迷いを取り除くことだという考え方です。中小企業のサイトに置き換えると、資料請求のたびに社名と部署と電話番号を書かせるのか、二回目は省略できるのか。あるいは、見積依頼の前に何が決まっていれば話が進むのかを先に示すのか。同じ発想は規模を問わず使えます。なお、この機能が売上をどれだけ押し上げたかを示す確定的な数値は公開情報の範囲を超えるため、ここでは扱いません。

How to use

現場での使い方:5ステップ

  1. 離れている地点を数字で特定するページ別の離脱、フォームのどの項目で止まるか、スクロールがどこまで届くか。感覚ではなく計測から始める。
  2. その地点に立つ「問い」を言葉にする「自分向けか」「いくらか」「送ったら何が起きるか」。利用者の不安を文章で書き出すと、直す対象が具体になる。
  3. 答えになる要素を1つだけ足す料金の考え方、返信までの時間、業種別の実績。同時に複数変えると、何が効いたか分からなくなる。
  4. 2週間から1か月、同じ条件で比べる季節や広告の影響を受けるため、期間を揃える。判断できるだけの訪問数が集まってから結論を出す。
  5. 結果を1行で残し、次の地点へ移る「何を変えて、どうなったか」を蓄積する。これが次のリニューアル時に一番効く資料になる。
Related terms

関連用語

Summary

まとめ:直す場所は、美しさではなく切れ目で決める

UIは画面という点、UXは訪問前から送信後までを貫く線です。利用者は使いにくさを説明せずに離れるため、改善の出発点は「どこで切れているか」を数字で特定することになります。そこに立つ不安を言葉にし、答えになる要素を1つだけ足して比べ、結果を残す。この型を月1回でも回せば、感性の議論が記録の議論に変わります。計測の集約と仮説の洗い出しはAIに任せ、人は「なぜ迷ったのか」の解釈に集中する。迷いが消えた地点から、利用者は押されなくても自分で先へ進みます。

関連サービス:Webサイト制作 — 詰まっている地点の特定から、導線とフォームの設計・実装・改善サイクルの運用までを支援します。
カテゴリ:Web制作

この内容を御社で実践したいとお考えですか?

Webサイト制作で実現できます

詳しく見る →

まずはお気軽にご相談ください