カテゴリHの入口——「良い画面」を基準で語る
カテゴリGでは、ボタンやフォームといった画面の部品を、どう作るかという観点で学びました。カテゴリHでは一歩進んで、「良い画面とは何か」を、センスや感覚ではなく、判断できる基準の形で身につけていきます。良い画面かどうかは、才能ではなく規則で見分けられる、という立場です。その最初の一歩が、UIとUXという二つの言葉を、きちんと区別することです。この区別が、これから学ぶすべての土台になります。
このスライドのポイント
- カテゴリG: ボタンやフォームなど画面の部品を「どう作るか」を学んだ
- カテゴリH: 「良い画面とは何か」を、感覚ではなく判断できる基準の形で学ぶ
- その最初の一歩が、UIとUXという言葉を区別すること
UIとUXの定義
UIとは、利用者が直接触れる画面上の部品と見た目のことです。ボタン、フォーム、配色などが当たります。一方でUXとは、利用を始めてから目的を達成するまでの体験全体を指します。迷わずに進めるか、速く終わるか、安心して使えるか、また使いたくなるか、といった感じ方まで含みます。ここで大事なのは、UIはUXの一部にすぎない、という関係です。触れる部品はUXを形づくる要素の一つであって、体験のすべてではありません。
このスライドのポイント
- UI＝利用者が直接触れる画面上の部品と見た目（ボタン、フォーム、配色）
- UX＝利用を始めてから目的を達成するまでの体験全体（迷わないか、速いか、安心か、また使いたいか）
- UIはUXの一部にすぎない
なぜ区別が必要か
この区別を持たないと、AIへの依頼が「デザインを良くして」という曖昧なものになりがちです。すると、AIは配色やボタンの見た目、つまりUIだけを磨きます。その結果、ボタンは綺麗になったのに、申請を終えるまでに三つも画面を辿らなければならない、という本質的な問題はそのまま残ってしまいます。見た目の改善と体験の改善は別物だと分かっていないと、AIに直してほしい場所を、正しく指し示すことができません。
このスライドのポイント
- 区別がないと、AIへの依頼が「デザインを良くして」という曖昧な指示になる
- AIは配色やボタンの見た目、つまりUIだけを磨く
- ボタンは綺麗なのに、申請までに3画面も辿る、という本質的な問題は残る
UIとUXの構造
UIとUXの関係は、同心円で捉えると分かりやすくなります。内側の円がUIで、利用者が実際に触れる部品や見た目です。その外側を囲む大きな円がUXで、画面から画面への流れ、目的を達成するまでにかかる時間、そして利用者が抱く安心や不満といった感情まで含みます。内側だけをどれだけ磨いても、外側の円が歪んでいれば、体験そのものは良くなりません。UIは常にUXの内側にある、という位置関係を覚えておいてください。
このスライドのポイント
- 同心円で捉える
- 内側の円＝UI（利用者が触れる部品・見た目）
- 外側の円＝UX（画面の流れ・所要時間・感情まで含む全体）
- 内側だけ磨いても、外側が歪めば体験は良くならない
経費申請で見る具体例
経費申請の画面で考えてみます。UIの改善とは、たとえば申請ボタンを、押しやすい大きさや位置にすることです。これに対してUXの改善とは、申請を終えるまでの入力項目を、十二個から五個へ減らすようなことを指します。どちらも立派な改善ですが、利用者が「申請が楽になった」と実感する効果は、多くの場合、後者の方が大きくなります。触れる部品を磨くだけでなく、目的を達成するまでの流れ全体を短くする。これがUXの発想です。
このスライドのポイント
- 例: 経費申請の画面
- UI改善＝申請ボタンを押しやすい大きさや位置にする
- UX改善＝申請を終えるまでの入力項目を12個から5個へ減らす
- 「申請が楽になった」と感じる効果は、多くの場合UX改善の方が大きい
技術サンプル: UI/UX改善の対応表
スライドの表は、同じ不満に対して、UIの打ち手とUXの打ち手を並べたものです。たとえば「申請が面倒」という声に対し、UIならボタンや入力欄を押しやすくする、UXなら入力項目そのものを減らす、というように、二つの層で打ち手を考えられます。一つの不満にも、見た目で解く道と、流れで解く道があるわけです。AIに画面の改善を頼むときは、「この画面の課題を、UIの問題とUXの問題に分けて指摘してください」と聞くと、両方の層から提案を引き出せます。
このスライドのポイント
- 種別: table
- 目的: 同じ不満に対し、UIの打ち手とUXの打ち手を2層に分けて考える
- サンプル本体:
混同しやすい概念
ここで混同しやすいのが、「見た目が良い」ことと、「使って目的を果たしやすい」ことです。この二つは、しばしば別物です。配色が整い、余白が美しい画面でも、目的の操作に辿り着けなければ、体験としては失敗です。逆に、見た目が地味でも、迷わず速く終われる画面は、良い体験を提供しています。綺麗さは、体験の良さを保証しません。見た目の評価と、目的を達成するしやすさの評価を、分けて行う習慣をつけてください。
このスライドのポイント
- 「見た目が良い」vs「使って目的を果たしやすい」
- 綺麗でも目的の操作に辿り着けなければ、体験としては失敗
- 見た目が地味でも、迷わず速く終われる画面は良い体験
- 綺麗さは、体験の良さを保証しない
バイブコーディングでの確認点
バイブコーディングでの確認点です。AIへ画面の改善を頼むときは、それが「見た目の話」なのか、「流れの話」なのかを、はっきり分けて指示します。A-07で学んだ、目的を明確にしてから渡す、という考え方の応用です。「ボタンの配色を整えてほしい」はUIの依頼、「申請までの手数を減らしてほしい」はUXの依頼です。どちらを求めているかを言葉にして渡すことで、AIが見た目だけを磨いて終わる、という空回りを避けられます。
このスライドのポイント
- AIへ画面改善を頼むときは「見た目の話」か「流れの話」かを分けて指示する
- A-07で学んだ「目的を明確にして渡す」の応用
- 「配色を整えて」はUIの依頼、「申請までの手数を減らして」はUXの依頼
まとめと一問一答
最後に一問一答です。入力項目を減らす改善は、UIとUXのどちらの打ち手でしょうか。……答えは、UXです。項目数は体験全体に関わるため、体験を改善するUXの打ち手にあたります。三十秒でまとめます。UIは触れる部品と見た目、UXは目的を達成するまでの体験全体です。UIはUXの一部であり、見た目の良さは体験の良さを保証しません。次回は、その体験を支える情報の整理の仕方、情報設計へ進みます。関連資料は「SaaS画面パターン100」と「UI改善プロンプト50」です。
このスライドのポイント
- 一問一答:「入力項目を減らす改善はUIとUXのどちらの打ち手？」→ UX（体験全体の改善）
- 30秒まとめ: UI＝触れる部品と見た目／UX＝目的達成までの体験全体／UIはUXの一部／見た目の良さは体験の良さを保証しない
- 次回: 情報の整理の仕方＝情報設計へ
- 関連資料: 「SaaS画面パターン100」「UI改善プロンプト50」
