用語集A〜Z

UI / UX

よみ: ユーアイユーエックス

UI(User Interface) = 見た目・触れる部分(ボタン・フォーム・ナビ・配色・タイポ)。UX(User Experience) = 体験全体(使いやすさ・満足感・印象・「目的を達成できた感覚」)。UI は UX を構成する一要素で、UX には UI 以外にも、コピー・情報設計・速度・サポート・ブランド体験が含まれる。

本書のスタンス(Lesson 4-1)は「UX のために UI を設計する」関係性を理解する。担当者は実装の細部より、利用シーンを想定して「使いやすさ」「自分事化」を判断する範囲。「UI / UX デザイナー」という肩書きが流行しているが、職能の中身は会社で大きくバラつく(UI 寄り / UX 寄り / リサーチ寄り)。

担当者の判断軸:UI なら「主要 CV 経路のボタンが指で押せる位置・サイズか」「フォームの入力負荷が業界平均並みか」「タップ範囲が 44px 以上か」。UX なら「ペルソナの利用シーンで違和感がないか」「迷う場面・諦めそうな場面はないか」「実機を使って一連の動作を試したか」。Lesson 4-4 のスマホ UI 30 チェックを起点に。

落とし穴は、UI / UX を一語にまとめて議論が抽象化、業者が「UX 改善」と言うが実態は UI 表面の修正、ヒューリスティック分析(専門家チェック)と実機テストを混同、UX 改善後の数値検証(CVR・滞在・離脱)を組まない、UI のトレンド(流行のスタイル)だけ追って自社らしさが消える、UX を経営層が「やわらかい話」と捉えて投資判断に乗らない。

言葉をよく利用する人

  • デザイナー
  • Web 担当者(発注側)
  • ディレクター
  • マーケター
  • コーダー / フロントエンドエンジニア

会話上での使用例

業者から「UX 改善します」と提案された場面

  • 業者ディレクター
    今回のリニューアルで UI / UX 改善を提案します
  • Web 担当者
    「UX 改善」だけだと範囲が広いので、対象シーンと評価指標を具体化してください。「問い合わせフォームの CVR を 1.5% → 2% に」のような数値ゴールで、UI 表面なのか体験設計まで踏み込むかを切り分けたいです

ペルソナ視点で UX を判断する場面

  • デザイナー
    トップビジュアル、印象としていかがですか
  • Web 担当者
    UI は綺麗です。UX 観点で、ペルソナの「現場マネージャ・忙しい」が片手スマホで一瞬見たときに「自分ごと」と思うかが心配です。実機で一度試させてください

関連 Lesson(本書本文)

Lesson 4-1 デザインを判断する軸