【UX】「UX(ユーザー・エクスペリエンス)」、「UXプロセス」、「UXデザイン」とは？

UXとは？

「ユーザーの実益」を考慮するのではなく「ユーザーの体験」を重視する考え方です。

UXの例

• 普通の列車→豪華列車
• コーヒーの販売→カフェ

UXのポイント

• 革新的な技術が必要なわけではなくアイディアが重要になる。
• 各個人によって評価が変わる
• 「使用中」だけでなく「使用前」や「使用後」におけるユーザーの感情も含む
• ユーザービリティもUXの一部

「使用中」だけでなく「使用前」や「使用後」におけるユーザーの感情も含む

使用前の体験

• ネットや店頭やCMで新製品情報をみる。
• リアルやSNSで友達が製品を使ってるのを見た

使用後の体験

• 製品使用後にメルカリに出品する。

ユーザビリティもUXの一部

UXはユーザビリティと比べると製品、ユーザー、場面、反応と個人にとどまらない考え方でより広く製品の価値を捉えています。

UXと関連する概念

UI（ユーザーインターフェイス）

UXを実現するための製品側の仕様や設計のことを指します。

• ユーザーと製品の接点となる。
• 形やスペックや仕様がある。

ユーザビリティ

UXの一部で効率的に目標を達成できるか。

HCD(人間中心設計）

スペックを重視するのではなく使用者のニーズを第一とする考え方、今ではISOの国際標準にも盛り込まれている考え方です。

人間工学

感性工学

認知心理学

アクセシビリティ

UD（ユニバーサルデザイン）

高齢者も利用者とする考え方

バリアフリー

障害者も利用者とする考え方

UXの問題点

UXはユーザーのメリットを無視してその気がないユーザーにも設計者が意図して不誠実に設計して利益をえようとする問題があります。例えば下記のような問題があります。

• キュレーションメディアへ他サイトから記事の流用
• 芸能人のステマ
• 登録は簡単だが退会の難易度をあげる。
• 子供が親に内緒でソシャゲに多額な課金をしてしまう。

これらの問題は作り手側が利益を得るために意図してUXの設計をしたものです。ただ、モラルや誠実さの観点からすれば非常に問題のある設計と言えるでしょう。「ユーザーの実益」よりも「ユーザーの体験」を重視するUXと言っても明らかにモラルのない設計をすることは市場の衰退にも繋がるので避けるようにしましょう。

UX自体は形のない物ですが下記のような流れで仕事を進めることになります。

企画検討

行動観察

個々のセンスに依存する作り手側が時代を読んでニーズを見つけるより、最近はユーザーが持っている潜在的なニーズを得てそれを元に企画を考える手法が一般的になっています。実際の現場でユーザーの行動を観察する行動観察により潜在ニーズを発見します。先入観に囚われすぎると思わぬ発見ができにくかったりするので思い込みは避けます。

フォトダイアリー

行動観察は観察者に過剰な労力がかかるので写真とその時の情報を行動者に文書化してもらうフォトダイアリーという簡易的な行動観察の手法も取られる場合があります。

アンケート

あまり込み入った質問は不向きなので潜在ニーズを得るというよりは大まかなニーズの傾向を把握するのに用いられます。点数を付けてもらうような形式にしておけば定量化も可能です。

インタビュー

質問する側も回答する側も自由に行えるので潜在ニーズの発掘ができる可能性が上がる。定量的なデータは得にくく定性的な情報収集にむいています。

• 直接インタビュー
• 電話インタビュー
• ビデオチャットインタビュー

ジャーニーマップ

収集したデータを記述して関係者と共有する手法、時間軸でユーザーがどのような変化が起きたかまとめます。Webや実店舗等の異なるメディアをまたぐユーザー行動の変化を表現するのに適しています。特に昨今は一つの複数メディアを用いて行動するのが当たり前の時代なのでそれらを含めてユーザーの行動を把握することが非常に重要になっています。

• 行動の変化
• 感情の変化
• 思考の変化

ペルソナ/シナリオ

架空の個人のプロフィール、行動等を詳細にまとめます。実在の人物像として感じられることが重要。ターゲットを明確にすることで製品の特徴を前面に出していくことが求められる。結果として人の心に刺さりやすい製品になります。広い層にうけるような製品を目指すとなんの特徴もない製品になりかねないので注意です。

• ペルソナは１製品に複数作る場合がある（親子をターゲット）
• ペルソナは関係者間で合意を取りながら作成する。

ストーリーボード

漫画のようにペルソナがゴールまで達成するまでの流れを絵や文字で表すことです。ここで考えたプロセスに沿ったUIを作れば良い。このストーリーボードを作ることこそがUXデザインの肝と言えるでしょう。

仕様検討

最適なUIを模索します。下記の手法で形にしていきます。最近ではワイヤーフレームの作成や画面フローの作成せずに、まとめてXD等のプロトタイピングツールを使って作成することが増えているようです。クライアントによってどのような手法を使うかは使い分けが必要になるようです。

ワイヤーフレーム

各画面内のボタンや表示エリアのレイアウトを簡単な情報構造で表したものでスケッチのようなものです。複数画面ある場合は各画面に置いてそれぞれワイヤーフレームを作成します。

用途

情報構造についてお互いの認識をすり合わせるために使います。

デザインカンプ

Photoshop等で画像や文言等を当て込んでワイヤーフレームよりも詳しく見せる手法です。まだ未定の場合は仮で当て込んだりします。

画面フロー

画面遷移図とも呼びます。通常はワイヤーフレームと同時並行で作成されることが多いです。

ペーパープロトタイピング

案が妥当かどうか簡易的にテストをすることです。被験者を実際に用意して進行役が被験者の操作に応じて画面を遷移させたりします。(実際に動くものはないです。）、細かい仕様のテストはできないですが大雑把な根幹部分に関わる問題は解決できます。

また、プロトタイピング自体は第三者にレイアウトや意図をわかり安く伝えることができるWebデザインの手法として広く普及しています。

主なプロトタイピングツール

今は多くのプロトタイピングツールが出ています。特に人気なのは「sketch」と「Adobe XD」でしょう。

• portt
• STUDIO
• inVision
• Marvel
• CanvasFlip
• Principle
• Botsociety
• Origami Studio
• Adobe XD
• sketch

モックアップ

質感やスペック等を得るものです。HTMLやCSS等でWebブラウザ上で客に見せていくこと。サーバーサイドの実装までは行いません。

設計開発

実装

製品を作ることです。そのままの意味です。

ユーザビリティテスト

被験者にテストをしてもらいます。被験者には頭の中で考えていることを発話しながら操作してもらう思考発話法等があります。定性的で原因を推測しやすく総合評価が可能になります。

ヒューリスティック評価

被験者を使わず専門家が経験に基づいて行うユーザービリティ評価になります。それでも各個人の評価に依存してしまいがちになるので複数評価者を用意してチェックリストを使って客観的に評価する手法もあります。

認知的ウォークスルー

専門家が被験者になりきってどのようなつまづきが発生しそうか考えることです。完成度の低い仕様書やプロトタイプレベルでも評価は可能です。（一般の被験者には難しいことなので専門家に行ってもらうことが可能です。）

リリース後

リリース後は製品のフォローをします。フォローで得られた知見は次の製品開発にも役立ったりします。

アクセスログ

Webサイトのアクセス解析をする。開発前のテストに比べて何倍ものデータが手に入るので結果を簡単に定量化できます。欠点としては「ユーザーの振る舞いの原因」はわからないことです。

A/Bテスト

同じページに対してA案、B案と作成し同時に公開します。確率50%でアクセスを振り分けるようにします。成績が良い方のページを採用します。ハードウェアとかではできないのでWebならではのテスト方法になります。

ユーザーの声を収集する。

市場における自社製品の実態を把握します。

• ネット上でのレビュー、SNS、口コミ
• アンケート、インタビュー、ユーザビリティテスト

競合との比較

すでにリリースされた製品を評価します。二つの製品を評価する際に前に見た製品が後の製品の評価に影響するという順序評価等を意識することも重要になります。影響しないようにクロスさせたりある被験者には一つの製品の評価だけ求めるというような手法をとったりします。

ガイドライン

評価によって得られた効果のある知見を設計ガイドラインとしてルール化すること。開発の手戻りの手間が減ります。新しい担当者の教育用資料としても活用できます。

手法の開発

これまでにはない成果を出したい場合には新しい手法を開発する必要があります。

避けるデザイン

人間の短期記憶には限界があるので1ページに情報を詰め込みすぎないこと。(情報量は5〜9個までにする。）

画面デザイン

視線移動へ配慮する。

ユーザーの視線は左上から右下へ遷移する。（例えばメニューを左上に置き、保存ボタンを右下に配置する等）

ゾーニングを意識する。

左サイドバーはコンテンツを切り替えるゾーン、上メニューは全画面で共通するエリア等

フィードバックを与えること。

フィードバックがあるとユーザーに安心感を与える。見た目だけじゃなく音や感触等の触覚フィードバックもあります。

• ボタンを押した際に色が変わったりボタンが凹んだりするデザインがある。
• プログレスバーを用意する。
• カメラのシャッター音

メタファ

専門用語を使わないこと。

• デスクトップ（GUIを机に喩えている。）

強調

• 危険な状況を警告
• 重要な情報をアピール
• 他と情報を区別したい場合
• 元々何も意識していないユーザーに気づかせるため。

寛容性

ユーザーが常に四六時中その場で対応できるわけではないので基本的にユーザー側からアクションを起こさない限りは処理を開始しないようにする。また、ユーザーが操作を間違えた際でもすぐに取り消して前の操作の状態に戻せるのが望ましいでしょう。

一貫性

システム全体で一貫した操作作法で行えること。初めて使うアプリでも過去の操作経験から操作方法をユーザーが類推することができるようになります。

わかりにくい言い回しを避ける

二重否定、主語が不明確、難しい用語等の使用は避けます。

パターン

入力

何を入力させるかをプレースホルダーに記述するパターン

参照：https://byte.yonelabo.com/

メリット

• ラベルで入力内容を記述するよりも画面スペースを節約できる。

初期値を入力しておくパターン

参照：https://keisan.casio.jp/exec/user/1355670543

メリット

• すでに入力されている値がよく入力される値であれば入力を効率化できる。

デメリット

• 入力内容が多種多様に渡るツールの場合は向いていない。