AITC 2011年度 第6回「ユーザーエクスペリエンス技術部会」＆「ネットデバイスアプリケーション部会」

招待セミナー: ミツエーリンクス

金山豊浩

UXデザイン入門

2012年6月21日

株式会社ミツエーリンクス
第七本部(UX)
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved.

アジェンダ

0. 自己紹介&会社紹介
1. UXとは？
2. UXデザイン・プロセス
3. UXデザイン・ メソッド
a.
b.
c.
d.

コンテクスチュアル・インクワイアリ―
ペルソナ
ストーリーボードスケッチ

4. Q&A, ディスカッション
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved.

2

0. 自己紹介＆会社紹介

Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved.

3

金山豊浩（かなやま とよひろ）について

’88

‘01

‘09

職歴: SE → EC → UX

志: UXで日本と世界を繋ぐ
現職: UX Evangelist
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved.

4

UX コミュニティ活動

UPA member(‘01-)※Usability Professionals’ Association

UPA Japan Secretary

UXPA Asia Regional Director(予)※User Experience Professionals Association
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved.

5

Mitsue-Links ： Communication Design Company

UXalliance：

グローバル調査における世界的なUX企業の国際ネットワーク

ミツエーリンクスは、UXallianceパートナー（各国1社のみ）

1. UXとは?

Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved.

8

1. UXとは？

ユーザー体験

UserExperience

U X
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved.

91. UXとは？

(UXの具体例)

製品・サービスを使った時の体験

Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved.

10

1. UXとは？ (UXの構成要素)
役に立つ
useful

使いやすい

好ましい

usabledesirable
価値があるvaluable
バリアフリー

探しやすいである

findable

accessible
信頼できるcredible

Peter Moville 氏が提唱するUXのハニカム構造
出典：http://semanticstudios.com/publications/semantics/000029.php
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved.

11

1. UXとは？ (UXの構成要素)
ソフトウェアインターフェースとしてのWeb（タスク中心の要素定義）
具体的

表層

Webが内包する基本的な２重性

ハイパーテキスト・システムとしてのWeb（情報中心の要素定義）
制作完了

ビジュアルデザイン
インターフェース
デザイン

骨格

ナビゲーション
デザイン

構造

インタラクション
デザイン

情報ｱｰｷﾃｸﾁｬ

要件

機能仕様

コンテンツ
要件

時間

情報デザイン

ユーザーの需要戦略

サイトの目的
抽象的

ｺﾝｾﾌﾟﾄ定義

Jesse James Garrett氏が提唱するUXの要素 (5階層モデル)
出典：http://www.jjg.net/elements/translations/elements_jp.pdf より抜粋
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved.

12

1. UXとは？ (ウェブサイトの構成要素)
ロゴ＆グローバルナビ

表層

メニュー

骨格

コンテンツ

プロジェクト

構造
要件
戦略

サイト

SNS

お知らせ

提供者

利用者の狙いのニーズ

Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved.

AITCサイト13

1. UXとは？

（機能・性能重視から）
軽い
小さい

ユーザー
提供速い！

機能豊富

Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved.

14

1. UXとは？ （ユーザー体験重視へ）

目的

ユーザー

体験

使う場面

快適楽しい!

手順

Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved.

15

2. UXデザイン・プロセス

Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved.

16

和書『UXデザイン入門』（日本人向けに執筆）

出版： 2012年

Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved.

17

UXデザインの考え方（ユーザー要件反映）
ビジネス

経営者
企画部門
IT部門

要件
(戦略・企画)アーキテクトプログラマー

UX デザイン
製品

サービス

技術要件

ユーザー要件(機能仕様)(ユーザーニーズ)

Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved.

18

UXデザインの考え方 （繰返しプロセス）
ユーザーとニーズを知る

良い解決案

解決案を考える解決案を試す(プロトタイプ)
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved.

19

SDLC と UX デザイン
UX デザイン
企画・要件
保守設計

UI 設計
出荷実装
テスト

UI デザインCopyright(c) Mitsue-Links Co., Ltd. All Rights Reserved.

20

UX デザイン プロセス

ビジュアル
デザイン

ユーザー要件ストーリーボードスケッチ

ユーザビリティテスト

デザイン調査インタラクション
デザイン

UX デザインペルソナ

ワイヤーフレーム
プロトタイプ実装
開発

Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved.

21

3. UXデザイン・メソッド

Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved.

22

3-a. コンテクスチュアル・インクワイアリ

Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved.

23

デザイン調査とは？
 UXデザインの第一段階はユーザーを理解すること
 デザイン調査で明らかにすること
 ユーザーのゴール、モチベーション
 ユーザーの振る舞いパターン

Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved.

24ユーザーを理解するための手法 ユーザーインタビュー フォーカスグループ
 フィールドワーク（エスノグラフィ） アンケート カードソート ユーザビリティテスト
 コンテクスチュアル・インクワイアリ

Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved.

25

コンテクスチュアル・インクワイアリ
 ユーザーのコンテキスト（文脈）のなかに入り込んで質問を行っていく調査法
 師匠と弟子モデル(Hugh Beyer, Karen Holtzblatt) ユーザーについての質的データをもっとも効率よく効果的に収集できる(Alan Cooper, et al.)Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved.

26

ユーザーを観察する
1. コンテクスチュアル・インクワイアリの様子を観察してください。
2. どのような行動・モチベーション・ニーズの特徴があるかを、注意しながら観察してください。

Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved.

27

デザイン調査のアウトプット
発話・行動記録

Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved.

インタビューメモ28Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved.

29

3-b. ペルソナ

Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved.

30

ペルソナ・シナリオの作り方
架空のECサイト「梵天モール」
を例にご説明します。

インタビューメモ

Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved.

タイプ・行動変数の抽出とマッピング

ペルソナ/シナリオ作成

31

タイプ・行動変数の抽出とマッピング
D

性別

男性

梵天モールの利用頻度低いB

デジカメについてのリテラシー

低いA

商品スペック・機能の決定度合低い

A

メーカーへのこだわり弱いA

機能へのこだわり弱い

デザインへのこだわり

弱い

B

商品ページの閲覧時間

短いA

機能・スペックの閲覧有無あり

閲覧した商品数少ない

Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved.

A

B

D
DDA

B
A

D
DC
DA C
D高いC

B

高いC

B

高いC

強いC

B

強いC

A

強いC

B

長いB
D

女性C

A
B

DCなし
多い32

ペルソナ1「デジカメについて詳しくなく、価格・デザイン以外の選定基準がない」

鈴木優子（26）
女性タイプ– デジカメの機能についてはあまり詳しくなく、どのような機能が付いているものを買おうかは特に決まっていない。
– デジカメの選定基準は主に価格とデザイン（カラーバリエーション）、機能はできるだけ優れたものが良いが、特別なこだわりがあるわけではない。
– メーカーはある程度どこでも良い。

■行動シナリオ
優子は、家電を買うときは、インターネットショッピングモール「梵天モール」を利用することが多い。梵天モールを利用する理由は、なによりも価格が安いこと。すでに梵天モールの会員になっており、どの商品も3%オフで購入することができるため、他のショッピングモールを使うことはほとんどない。
優子はいま、デジカメの購入を考えており、いつものように梵天モールで商品を検討することにした。
優子は、デジタルカメラについてはあまり詳しくないため、とりあえずの選定基準は、価格の安さとデザイン。もちろん、その中で機能もできるだけ優れているものが良い。デザインは、できればピンク色のかわいいものが良いと思っている。
まずどのような機種があるのかを知りたいため、商品一覧ページから、予算に収まるものについて、ひとつひとつの商品情報を表示していく。いまは金銭的に余裕がなく、価格を気にしながら選ばなければならないが、梵天モールは価格がバラバラに表示されるので、探すのが大変だと思っている。
もし、ボーナスが出た後で金銭的に余裕があるときは、気に入ったデザインのものから順に見ていきたいと思っている。
商品情報ページでは、色のバリエーションや商品の特長を簡単にチェックして、良さそうであれば候補として覚えておいて、気に入らなければすぐに他の機種を見に行く。ひとつの商品情報ページの閲覧にはそれほど時間をかけずに、30種類くらいの商品について順番に見ていき、最終的にいくつか見たなかで最も良さそうな機種を選ぶ。
■ゴール
価格、デザイン、機能を一覧でぱっと見て、希望の条件を満たすものを選びたい。
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved.

33

3-c. ストーリーボード

Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved.

34

ストーリーボードとは（1/2）
 ペルソナがゴールを達成するための、一連のストーリーを絵コンテとして表したもの
ストーリーボード名： デジカメの購入…

Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved.

35

ストーリーボードとは（2/2）
ビジネス要件＆技術要件----------------------------ペルソナ・
シナリオ-------------------------

脳内モデル
ユーザーの視点を反映している
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved.

ペルソナの体験をストーリーとして記述し、絵コンテとして描き表す。
ペルソナ視点での体験の記述
ストーリーボード

実装モデル
技術を反映している36

ストーリーボードを作成する意義と利点
 どのようなユーザー体験を提供しようとしているのかを認識/明示できる。デザイン目標の記述。システムは手段。
 ペルソナのゴールと脳内モデルを反映 ビジネス要件からのストーリーではない デザイン上、注力すべきストーリーを認識/明示（優先順位付け）

 システムが提供すべき情報や機能を導出する助けとなる⇒ 情報と機能の検討は次のスケッチでやります！

Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved.

37

ストーリーボードの作り方
1. ペルソナがゴールを達成するための、最良のストーリーをペルソナごとに考案
2. 考案したストーリーを、ストーリーボードとして描き起こすストーリー名： デジカメの購入
ペルソナ： 鈴木優子
• デジカメを買いたいと指示。
• 価格、デザイン、機能を「パッ」と一覧。
• 希望の条件を満たすものを「簡単」に比較。
• 購入製品を選択。

Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved.

38

ストーリーボードの作り方（補足） 通常、１つのシステムに対し複数のストーリーが書ける。例：「購入」、「購入キャンセル」など⇒ デザイン上、注力すべきストーリーのみ作成
 コマの割り方についてペルソナにとっての、行動、期待、関心の一区切りごとにコマを設ける⇒ システム要件や想定される画面遷移の側面からは考えない

Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved.

39

ストーリーボードの描き方（コマの構成/書式）
4.優子は価格、デザイン、機能を「パッ」と一覧し、希望の条件を「簡単」に指示するデザインとか値段がすっごく見やすい！
「ピンク」で「手ぶれ補正付き」のものも簡単に探せるのね！

ペルソナの感情を表す絵を入れる。

Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved.

ペルソナの行動/振る舞いを、ペルソナを主語として書く。
デザイナが意図するペルソナの体験をペルソナの言葉で書く。
もしくは、ペルソナの期待・希望を書く。

画面内容については、次のスケッチで描くため、ここでは描きません。
40

3-d. スケッチ

Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved.

41

スケッチ

[Alan Cooper]
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved.

42

スケッチはプロトタイプではない[Bill Buxton]

 スケッチの目的はアイデアの創出・具体化で、「探究」のステージ。プロトタイプの目的はユーザーなどから評価を得る「検証・改善」のステージ
スケッチ

Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved.

プロトタイプ

喚起

説教

示唆

説明

探究

洗練

質問

回答

提案

テスト

刺激

解決

仮の具体的漠然描写

43

3. Q&A, ディスカッション

Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved.

44参考資料
川西 裕幸、栗山 進、潮田 浩
UXデザイン入門, ISBN 978-4-8222-9610-0

使いやすいソフトウェア, ISBN 4-320-09746



About Face 3 インタラクションデザインの極意, ISBN 4-04-867245-0

インタラクションデザインの教科書, ISBN 4-8399-2238-2



Subject to Change, ISBN 4-87311-385-2

Designing for the Digital Age, ISBN 0-470-22910



Effective UI, ISBN 0-596-15478-3

UX Design, ISBN 0-321-60737-6

Sketching User Experience, ISBN 0-12-374037-3

Larry Constantine
Alan Cooper
Dan SafferPeter Merholz
Kim Goodwin
AndersonRuss Unger
Bill Buxton

Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved.

45

UX関連コミュニティ
 HCD-Net (人間中心設計推進機構)
http://www.hcdnet.org/
 UXPA (User Experience Professionals’ Association)
http://www.upassoc.org/
 IAI (Information Architecture Institute)
http://iainstitute.org/
 IxD (Interaction Design Association)
http://www.ixda.org/
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved.

46

国際的なUXイベント
 APCHI 2012 [2012年8月28～31日@松江](Asia Pacific Conference on Computer Human Interaction)

http://apchi2012.org/
 UX Masterclass in Moscow [2012年9月21日]
http://www.uxmasterclass.com/
 World Usability Day 2012 [2012年11月8日]
http://www.worldusabilityday.org/※世界各国で同時開催。日本でも開催予定。
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved.

47

ご清聴ありがとうございました。
E-mail: kanayama-toyohiro@mitsue.co.jp

Website: http://www.mitsue.co.jp/english/〒163-1115 東京都新宿区西新宿6丁目22番1号
新宿スクエアタワー15階
会社案内：http://www.mitsue.co.jp/

Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved.

48