1.
UXのためのUIデザイン

2.
対象
デザイン対象
スマートフォン向けアプリケーションのUI。
他のデバイス（タブレット、TV）上でのアプリケーションのUIにも応用できます。
対象となる人
UXデザイナー
UIデザイナー
UIに関わっているステークホルダー
2

3.
はじめに
どんなにすばらしいUXをユーザーに提供しようとしても、
UIがUXのためのデザインになっていないとユーザーは体験することが出来ません。
それはいろんな意味で残念。。
UXを正しく考慮したUIをデザインするためには、どうすればいいのでしょうか？
3

4.
アプリケーションを作るために
UX（体験）と、それを提供するためのUI（表現）と、UIやサービスを実現するための
Software（実現）それぞれの価値の最大化を図ることが大切です。
UX
Software UI
4

5.
UXとUIの境界
UX = ユーザー体験
語られる言葉は、体験です。
UI = ユーザーインターフェイス
語られる言葉は、インタラクションであり、ビジュアルであり、アーキテクチャです。
UX UI
UX=UIではありません。ユーザーがUIを通して体験することがUXです。
UIで語られる言葉がどんなに素晴らしくても、それがすなわちUXを実現しているとは言えません。
UIデザインの理由
デザインには理由が必要です。
UXの実現をUIの目的とした場合、『デザインの理由=UXを実現していること』です。
しかし、体験をUIの言葉で語るには限界があります。そのため、UXとUIをつなぐ言葉が必要になります。
5

6.
UXとUIをつなぐ言葉
UXを実現するために必要なアクション（ユーザーの行動）を整理することで、UXをUI
デザイン上の言葉に変換できます。
UX アクション UI
体験 インタラクション
ビジュアル
アーキテクチャ
6

7.
アクション
本ドキュメントでいうアクションとは、
ユーザーがUXを達成するために行う最小単位の行動を指します。
表現としては、
（ユーザーが）○○する。
（ユーザーが）△△を する。
7

8.
流れ
UXをインプットとし、アクションに変換後、UIデザインを行います。
挙げる
２つに分ける アクションの整理
優先順位をつける
つなげる
描く UIデザイン
8

9.
心構え： 立ち止まる
UXデザインとUIデザインのターニングポイントをあえて意識してみましょう。
UXの定義ができました。
早速UIを描いてみましょう！
ではなく、
アクションを整理してみましょう！
9

10.
１. 挙げる
UXを達成する上で、ユーザーがUIに対して行うアクションをできるだけたくさん挙げ
ます。
表現としては、
（ユーザーが）○○する。
（ユーザーが）△△を する。
10

11.
１. 挙げる
言葉の粒度を意識しましょう。
e.g. 友達のオススメの場所を確認するアプリ
レコメンドされている FBにアプリを 新規のレコメンドに レコメンド
レストランの 場所を見る。 登録する。 場所の名前を されている場所に
ギャラリーの中の
予約をする。 場所を検索する。 新規のレコメンドに
入れる。 写真を選択する。 チェックインする。
写真を撮る。
コメントを
つける。
場所のカテゴリー
既存のレコメンドに 既存のレコメンドに レコメンドを
を選ぶ。
自分の写真を ログアウトする。 撮った写真を コメントを カテゴリーで レコメンドの詳細を
（撮影時） 新規にレコメンドを
追加する。 確認する。 つける。 フィルターする。 見る。
投稿する。
（閲覧時）
11

12.
２. 2つに分ける
UXを達成するために必要なアクションを選び、以下の分類に振り分けます。
分類1. 一次的アクション（mandatory）
ユーザーがUXを達成する上で、必ず行うこと。
分類2. 二次的（副次的）アクション（optional）
1. 分類１の達成に不可避だが、二次的なもの。（e.g. アカウントを作る。）
2. サポートしなくてもユーザーはUXを達成できるが、サポートすることでよりよい
UXが提供できるもの。(mandatoryではないアクション。あったらより良くなる。)
12

13.
２. 2つに分ける
２つの分類に入らないアクションは不要なので、思い切って捨てましょう。
分類１ 分類２ 不要なアクション
新規にレコメンドを
投稿する。 レストランの
レコメンドされてい
ログアウトする。 ギャラリーの中の
る 場所を検索する。 予約をする。
FBにアプリを 写真を選択する。
場所を見る。
登録する。
写真を撮る。
レコメンドの詳細を
新規のレコメンドに 見る。
場所の名前を
入れる。 レコメンドを
カテゴリーで
既存のレコメンドに 新規のレコメンドに 既存のレコメンドに フィルターする。
場所のカテゴリー コメントをつける。 コメントを 自分の写真を （閲覧時）
を選ぶ。 つける。 追加する。
（撮影時）
撮った写真を
確認する。
13

14.
３. 優先順位をつける
分類１、分類２それぞれに対し、優先順位を付けます。
以下のアクションの優先度が高くなるように、並べ替えてみましょう。
アクションの優先順位付けは、UIデザインの土台になります。
以下のようなアクションが、優先順位の高いものです。
ユーザーが期待するアクション(何をしたいか？)
ユーザーがよく行うアクション (何を行うか？)
14

15.
３. 優先順位をつける
ユーザーにとって必要なことを知る。→ユーザーがUXを達成することが出来る。
分類１: UXを達成するためのアクション 分類２ : 二次的なアクション
1. レコメンドされている場所を見る。 1. 場所を検索する。
1.1. レコメンドの詳細を見る。 2. Facebookにアプリを登録する。
2. 新規にレコメンドを投稿する。 3. ログアウトする。
2.1. 新規のレコメンドに場所の名前を入れる。
2.2. レコメンドする場所のカテゴリーを選ぶ。 分類２ : UXを高めるためのアクション
2.3. 写真を撮る。
2.3.1 撮った写真を確認する。 4. 新規のレコメンドにコメントをつける。
5. 既存のレコメンドに自分の写真を追加する。
6. 既存のレコメンドにコメントを付ける。
15

16.
4. つなげる
分類分けと優先度に基づいて、アクションのフローを作成します。
// 分類分け
分類１は少ないステップで達成できることが大切です。
分類２で分類１のアクションを妨げないようにしましょう。
// 優先度
優先度の高いものは、分類１の中でもより最短でたどり着けるようにしましょう。
優先度の付け方に迷ったものは、フローを分けるべきかもしれません。
16

17.
4. つなげる
場所の名前を
自分の写真を
レコメンドの 入れる。
追加する。
詳細を見る。
FBにアプリを
登録する。
場所のカテゴ
コメントをつ リー
ける。 を選ぶ。
レコメンドの レコメンドを
場所を見る。 投稿する。
写真を
写真を撮る。
確認する。
場所を検索す コメントを
る。 つける。
ログアウト
17

18.
5. 描く
フローに実際のUIをあてていきます。
分類１のアクションが含まれる画面を優先的に描きましょう。
分類１は画面上のわかりやすい位置に置くことが大切です。
分類２は二次的なアクション、もしくはよりよいUXを提供できるものですが、必須で
ないものです。そのため、分類１を優先したレイアウトにしましょう。
18

19.
5. 描く
19

20.
振り返り
UXのためのUIデザインをするために、 UX
1. アクションを元にUIデザインをする。
2. やらないことを捨て、できないことを残す。 アクション
挙げる
3. 必要なアクションを適切な場所に入れる。 ２つに分ける
優先順位をつける
1. 1.
2. 2.
3. 3.
UI
つなげる
描く
20

21.
効果
アクションを整理することで、以下の効果が得られます。
1. デザインの理由を明確にできます。
2. agile開発の場合、user storyの生成に利用できます。
3. user testの際に作成するスクリプトに流用できます。
4. ステークホルダーとの共通認識をもつことができます。
21

22.
補足
対象者へ
1. UIが適切かどうか、アクションに基づいて客観的にチェックしましょう。
2. 不要なアクションは、UXを阻害する恐れがあることを理解しましょう。
特にUIデザイナーへ
1. デザインに迷った時はアクションに立ち戻り、デザインの理由を考えましょう。
2. 要件追加は、アクションと照らし合わせて、要件の要不要の議論をしましょう。
22

23.
おまけ
私的UIデザインの原則
1.simplicity (簡素さ)
2.optimization (最適化)
3.consistency (一貫性)
4.flexibility (柔軟性)
23