先日に参加した異業種の交流会で「WEBサイトやWEBサービスのUIやUXを考える仕事をしています」と自己紹介したところ「UIって何ですのん？」と質問されました。「UI」という言葉を知らない人にUIとUXをどう伝えたか、という話です。
単語の確認
| 単語 | 意味 |
|---|---|
| UI |
ユーザーインターフェース（User Interface） コンピュータで、異なる機器・装置間を接続して、交信や制御を可能にする装置やソフトウェア。 キーボードもマウスもモニターも、そして開いたアプリやWEBサイトの見た目もUI。利用者（ユーザー）が触れる部分の全てがUI。 インターフェース（interface）：境界面・接点 |
| UX |
ユーザーエクスペリエンス（User eXperience） 利用者が何かしらのサービスや商品（製品）を通じて得られる体験 製品、システム、またはサービスの、利用または予期的な利用の結果である、人の知覚と反応 エクスペリエンス（experience）：経験·体験 |
参考サイト：ISO 9241-210 における UX 定義の和訳について
上記の説明で、UIは何となくでも理解できそうですが、UXはピンッときますでしょうか？
私が初めて「UX」の説明を聞いたときは「？」でした。
UXを分かりやすく伝えるために「何か良い例はないか…」と考えたのが以下の例え話です。
例）洗面台を作りましょう
仮定
例えば、家を建てるとした場合。家の中にはリビングやキッチンやトイレや…と様々な機能を持った部屋が存在します。
その中でも洗面所の洗面台にスポットを当てるとしましょう。洗面台には鏡があって、蛇口（水栓・カラン）があって、洗面ボール（排水）があって…
で、さらに蛇口にスポットを当てましょう。
どんな蛇口を提案しますか？
あなたはハウスメーカーサイドの担当者だとして、これからユーザー（依頼者）と洗面台に取り付ける蛇口の打ち合わせをするとします。
ユーザーは「手が洗えれば何でもいいや！」と言いました。
では、あなたならユーザーへ、どんな蛇口を提案しますか？
- 冷水しかでない蛇口とお湯しかでない蛇口のセット（昔の蛇口）
- レバーひとつでお湯も水も出せる蛇口（昨今の蛇口）
- レバーを触らなくても手をかざせば吐水／止水する蛇口（最新の蛇口）
蛇口がUI
UIは「ユーザーが触れる部分」のことなので、蛇口はUIです。
洗面台も鏡も洗面ボールも照明もコンセントもUIです。
「手を洗えて気持ちイイ！」がUX
UXは「利用の結果、得られる知覚と反応」のことなので、「手を洗う」という体験や、さらにその先の「気持ちイイ！」がUXです。
UXは「気持ちイイ！」というプラス的な感情だけではなく、「気持ちわるい」「もう使いたくない」というマイナス的な感情も含まれます。
私の仕事はUIやUXを考えること
つまり私の仕事は「ユーザーが気持ちよく利用できる為に、何を提供できるか、どんな工夫をできるかを考えること」です。
例えば、こんなことを考えます
ユーザーは「手が洗えれば…」と言いましたが、「顔も洗うだろう」「歯も磨くだろう」「化粧をするかも」「髪を染めるかもしれない」と他の体験の可能性も考えます。
そのうえで、「やっぱり温度調整は簡単にできた方がいいよな」「シャワーヘッドもあった方がいいよね」「でも最新の蛇口はやりすぎだよね（コストかかるし）」なんてことを考えながら、ユーザーに適したUIをセレクトしていきます。
えっ！？それって普通のことじゃ…
おっしゃる通りです。何も珍しいことじゃありません。
CS意識の高い皆さんが日常的に取り組んでいらっしゃることです。
とどのつまり「UI/UXデザイナーやってます」という表現は「お客様の満足度を向上させるためにできることを考える仕事やってます」の言い換えと私は認識しています。
※ CS（Customer Satisfaction）：顧客満足（私だけ？最近耳にしなくなりました…）
ここからは本職（WEBサイト・サービス）からの視点で記します。
UXってどうやって考えるの？
UXデザインというのはそもそも正解があるような領域だとは思っていません
（引用：何のために「UXデザイン」をするのか）
同感です。
「これがUXだ」という指標はないと思います。ただ何もない環境からUXを考えるとなると闇雲すぎるので、「これからUXデザインに取り組むなら、こんなツールがあるよ」という気持ちで、いくつかを紹介します。
VPC
バリュープロポジションキャンバス（Value Proposition Canvas）は「自社の製品やサービスと顧客のニーズとのずれを解消（確認）するためのフレームワーク」です。UI・UXアイデアを整理・整頓するのに役立つツールです。私は「UXの暴走」を抑制するツールだと思って使っています。
「UXの暴走」というのは、「これはした方がいいな」「あれもした方がいいな」とアイデアが出過ぎてしまい、振り返るとユーザーのニーズと離れているアイデアまでもを「必要だ」と誤認してしまう状態になってしまうことです。アイデアがひとしきり出たあとは、一呼吸おいて、ユーザーニーズと照らし合わせながらアイデアの仕分けをします。
フレームワークの使い方は、多サイトで紹介されているので、そちらをご参照ください。
（余談：ググるときは「バリュープロポジションキャンバス」で。「VPC」でググるとAWS（VirtualPrivateCloud）の方が出てきます）
カスタマージャーニーマップ
カスタマージャーニーマップ（Customer Journey Mapping）もUXを検討するうえで便利なツールです。これは「商品やサービスを購入·使用するプロセスの各フェーズにおける、顧客の行動·思考·感情などを時系列に沿って視覚的に表現するフレームワーク」です。
（使い方や詳細はググってください→カスタマージャーニーマップ）
UX（ユーザーの体験）を考える際は「体験」に加え、「体験中のユーザーがどんな気持ちになるか」「体験後のユーザーにどんな考えが浮かぶか」などユーザーの「感情」や「思考」も検討しましょう。時間軸の上で変化するユーザーの「感情」や「思考」を具現化することで、隠れた要望を見いだせたり、ユーザーの要求とのズレを発見できるかもしれません。
BMC
ビジネスモデルキャンバス（Business Model Canvas）は「ビジネスモデルを図式化するためのフレームワーク」です。
VPCの拡張版です。ただ私はあまり使わないので詳細は割愛
（ご興味あればググってください→ビジネスモデルキャンバス）
デザインツール（プロトタイピングツール）
アイデアを視覚化するためのツールです。（ページ遷移など）簡単な動作も確認することができます。UI・UXの検討にも使えますし、見た目をちゃんと整えてクライアントへの確認資料の作成にも使えます。
（私は、一昔前まではパワポを使っていましたが、今は完全にデザインツール派です）
デザインツールはいろいろあるようですが、私のオススメは「Figma」と「Adobe XD」です
（どちらも無料で使えますし、googleアカウントでログインできます）
参考サイト：UI/UXデザインツール『Figma』入門
参考サイト：UI/UXデザインツール『Adobe XD』入門
おまけ
XDファイルをアップしています
上記で紹介した「VPC」や「カスタマージャーニーマップ」は、まったくのブランクで掲載しています。本当は使い方の例も載せたかったのですが、時間的に...（使い方は、他サイトをご参照くださいませ）
代わりと言っては何ですが、github上に上記のブランク画像（XDファイル）をアップして公開しています。
もしよければご活用ください。
github：UxDesignFrameリンク
UI・UX関連のサイト
- UX MILK - ときどき「ハッ」とさせられる記事があります
- chot.design - これからデザインを始められる方にいいかもしれません
SVG画像の入手元
アイコンとか有名サービスのロゴとか、デザインツールで使いたいなぁ、と思ったときにココから取ってます（主にSVGファイルを提供しているサイト）。
- Font Awesome - アイコン
- Feather - アイコン
- Material icons - アイコン
- ICOOON-MONO - アイコン
- Worldvectorlogo - 有名サービスのロゴ
さいごに
後半はだいぶ道が逸れましたが、UI/UXを説明するのに蛇口を使う例え話はいかがでしたでしょうか？
結局のところ、UXを考えるというのは、ユーザーにとって使い勝手が良く、喜んでもらえるように思考すること、だと理解しています。
「UI」や「UX」に近しいもので、使い勝手を意味する「ユーザビリティ（usability）」という単語がありますが、
- レバーひとつでお湯も水も出せる蛇口 → UI（モノ）
- レバーひとつでお湯も水も出せる → ユーザビリティ（機能·利便性）
- 冬でも快適な温度で頭を洗うことができる → UX（体験）
こんな感じでしょうか。「ユーザビリティ」はUIに付属する機能性を示す言葉でしょうか。
お金をいただくためにWEB絡みの仕事をしていますが、どうせならユーザーやクライアントに喜んでもらえる仕事がしたい。そのために今日もUXを考えよう