第1章
UXとUI・人間中心設計(HCD)— 誰のためにどう作るかの土台
レッスン 1-2 UX/UIデザインの基礎 ⏱ 所要時間:約60分
GOAL
このレッスンのゴール
⏱ 約60分
  • UXとUIの違いと関係(UIはUXの一部)を、具体例を挙げて説明できる
  • 人間中心設計(HCD)=ユーザーを中心に据え、設計と検証を繰り返す考え方を説明できる
  • UX/UIデザイナーの仕事がリサーチ・設計・検証の全体に及ぶことを理解している

新しく入れた食事宅配アプリは、写真も配色も洗練されていて、第一印象は上々でした。ところが、いざ注文しようとすると送料が最後の画面まで分からず、クーポンの使い方も見つからないまま、結局いつものアプリに戻ってしまいました。画面はきれいなのに、また使いたいとは思えませんでした。この差はどこから生まれるのでしょうか。このレッスンでやるのは、その差の正体であるUXとUIの違いを整理し、使う人を中心に置いて作って試して直すを繰り返すHCD(人間中心設計)の考え方を押さえることです。見た目の良さと、使い終わるまでの体験の良さを分けて考えられると、制作を任されたときにどこを直せばよいかを見極められます。

UXとUIは何が違うのか

UXはユーザー体験(User Experience)、UIはユーザーインターフェース(User Interface)の略です。よく一緒に語られますが、指している範囲は違います。

UX = 体験の全体
UI = 接点
画面・ボタン・文字・色
知る → 使う → 使い終わる までの流れ全体
UIはUXの一部。外枠の体験全体(UX)の中に、目に触れる接点(UI)が含まれる。対立や優劣の関係ではない。

UXは、使う人がサービスを通じて得る体験の全体です。UIは、画面やボタン、文字や色といった目に触れる接点を指します。この二つは対立するものではなく、UIがUXに含まれる関係です。

✓ Point !
UIはUXの一部

UIはUXを形づくる要素の一つです。この関係を押さえると、きれいなUIを作ることは目的そのものではなく、良い体験を作るための手段だと整理できます。

制作を頼まれたら見た目だけで満足せず、使い始めから使い終わりまでの体験全体に目を向けるようにしましょう。クライアントからおしゃれにしたいと言われたときも、それが見た目(UI)の話か体験(UX)の話かを切り分けられると、おしゃれにしても予約が増えないなら直すべきは体験の流れかもしれない、と提案の角度を変えられます。

Q
確認クイズ 1/3
あるカフェ予約アプリについて、次の4つの気づきがありました。このうち、UI(接点となる画面まわり)そのものの問題はどれでしょう?
正解です!
ボタンの文字サイズや配置は、画面上の接点そのものの問題でUIにあたります。確認メール・リマインド・変更手段は、体験の流れ全体に関わるUXの話です。UIはUXの一部だと分かります。
惜しい!
UIは画面やボタンなど目に触れる接点です。文字の大きさや配置(B)がUIの問題。確認メールやリマインドなどは、使い終わるまでの体験全体(UX)の話でした。

人間中心設計(HCD)という考え方

良い体験は、作り手の思いつきではなく、使う人を中心に置いて確かめながら作ることで生まれます。この進め方が人間中心設計(HCD)で、一度きりの手順と思われがちですが、繰り返すところに核があります。

人間中心設計(HCD)の反復ループ。①利用状況の理解→②要求事項の明示→③設計解の作成→④設計の評価、④の結果を②③へ戻して繰り返す
一度で完成させず、評価を次の設計に戻して繰り返す(ISO 9241-210)。

HCDは国際規格ISO 9241-210にもなった枠組みで、利用状況を理解し、要求を定め、設計し、評価する活動を繰り返します。

✓ Point !
核は一度で完成させないこと

HCDの本質は活動の順番ではなく、評価で分かった課題を次の設計に戻す反復です。どの活動から入っても構いませんが、この輪が回っていることがHCDの条件です。

作って終わりにせず、使ってもらって直すことを前提に進める姿勢を持ちましょう。クライアントになぜこの設計にしたのかと聞かれたときも、利用状況の理解から要求、設計、評価までの流れに沿って、根拠のある提案として説明できます。

Q
確認クイズ 2/3
あるチームが、調査・設計・リリースの順で開発を終え、その後は一度も見直していません。人間中心設計(HCD)の観点で、最も不足しているのはどれでしょう?
正解です!
このチームは調査も設計も行っています。HCDの核は、使ってもらった評価を次の設計に戻して繰り返すことです。リリースして見直さないと、この反復が回りません。
惜しい!
このチームは調査も設計もしています。抜けているのは、評価を次に戻して繰り返す反復(B)です。HCDは一度で完成させない点が核心でした。

デザイナーの仕事領域:リサーチ→設計→検証

UX/UIデザイナーの仕事は画面を描くことだけだと思われがちですが、実際は描く前から始まり、描いた後も続きます。

リサーチ→設計→検証の3領域フロー。検証から設計・リサーチへ戻る反復
仕事は画面を描く前後にも広がり、HCDと同じく繰り返す。

大きく分けると、リサーチ(誰のどんな課題かを知る)、設計(体験と画面の形を決める)、検証(使ってもらって直す)の3つの領域です。

✓ Point !
HCDを実務の仕事に置き換えたもの

この3領域は、前に見たHCDの考え方を実務の流れに置き換えたものです。リサーチはHCDの理解、設計は要求と設計解、検証は評価にあたり、検証から前に戻る反復も同じです。

3つを順に、そして必要なら前に戻りながら進めることを意識しましょう。求人や案件で任される範囲を見極めるときも、呼び名がUIデザイナーでもUXデザイナーでも、リサーチ・設計・検証のどこを担当するのかを確認すれば、自分に足りない経験と、これから伸ばす領域がはっきりします。

Q
確認クイズ 3/3
登録画面の見た目は好評なのに、登録の途中でやめる人が多い、という相談を受けました。UX/UIデザイナーとして、最初にやるべきことはどれでしょう?
正解です!
見た目(UI)は好評なので、原因は体験(UX)の流れ側にある可能性が高い状況です。画面を変える前に、リサーチで課題を特定するのが、リサーチ→設計→検証の順番でした。
惜しい!
原因が分からないまま画面を変えるのは当てずっぽうです。まずリサーチで、どこで・なぜやめているのかを特定してから設計に進みます。正解はCです。

この講座が育てるUX/UIデザイナー

いま、見た目を整えたり初稿を作ったりする作業は、AIの活用で以前より短い時間でこなせるようになっています。

そのぶん、誰のどんな課題を解くのかを見極めるリサーチや、本当に解けたかを確かめる検証など、人が判断する領域に価値が移っています。

観点見た目をつくるデザイナーUX/UIデザイナー
主な問いどう見せるか誰の何を解くか/どう見せるか
守備範囲ビジュアルの制作リサーチ→設計→検証の全体
成果の基準きれいに仕上がったかユーザーの課題が解けたか

本講座は、リサーチから検証までを独力で回せるUX/UIデザイナーを育てます。この土台となる考え方を、ここでしっかり押さえておきましょう。これから学ぶ一つひとつの手法も、体験のどこを良くするための道具なのかで整理すると、講座全体の中で自分の現在地を見失わずに進めます。

CHECK
理解度チェック
UXとUIの違いを、包含関係を使って例つきで説明できる
UXは使う人が得る体験の全体、UIは画面やボタンなど目に触れる接点です。UIはUXを形づくる要素の一つで、きれいなUIを作ることは良い体験のための手段でした。ボタンの文字サイズはUI、確認メールやリマインドの有無は体験全体のUX、というように切り分けられます。
人間中心設計(HCD)が反復を核とする理由を説明できる
利用状況の理解・要求の明示・設計解の作成・評価という活動を、一度で終わらせず繰り返すのがHCDです。評価で分かった課題を次の設計に戻すことで、はじめて使う人に合ったものへ近づきます。作って終わりにしない点が核心でした。
デザイナーの仕事がリサーチ→設計→検証に及ぶことを説明できる
リサーチで誰のどんな課題かを知り、設計で体験と画面の形を決め、検証で使ってもらって直します。見た目を描く作業はこの一部にすぎません。見た目が好評でも離脱が多いときは、画面をいじる前にリサーチで課題を特定するのが順番でした。