1.
UXとUXのためのデザインのはなし
プロダクト＆サービスグループ
佐々木 将之

2.
2nd FACTORY CO.,Ltd.
2
本日お話しすること
UXのはなし
UXDのはなし
HCDのはなし
弊社事例例のご紹介
質疑応答など

3.
2nd FACTORY CO.,Ltd.
3
自己紹介

4.
2nd FACTORY CO.,Ltd.
4
自己紹介
2007年年より、通信システム系受託
システム企業に⼊入社。⾃自社製品開
発部署にて、ホームネットワーク
系メディアプレイヤー関連のミド
ルウェア開発業務に従事。2012年年
11⽉月に株式会社セカンドファクト
リー⼊入社。
エンジニアとしてExTOUCH、
ExTOUCH Biz、QOOpaなどのプロ
ダクト・サービス開発に従事。
佐々⽊木 将之
エクスペリエンスアーキテクト
プロダクト＆サービスグループ

5.
2nd FACTORY CO.,Ltd.
5
株式会社セカンドファクトリー

6.
2nd FACTORY CO.,Ltd.
6
セカンドファクトリーの提供できること
UX＆CLOUD Professional Services
Comfortable experience for everyone everywhere
Device CLOUD
Consulting(Engagement)
Solution & Services
Design ＆ Development

7.
2nd FACTORY CO.,Ltd.
7
バランスのよい開発

8.
2nd FACTORY CO.,Ltd.
8
セカンドファクトリーのチームモデル

9.
2nd FACTORY CO.,Ltd.
9
セカンドファクトリーのチームモデル
エクスペリエンス
ストラテジスト
エクスペリエンス
マネージャー
エクスペリエンス
アーキテクト

10.
2nd FACTORY CO.,Ltd.
10
自己紹介
2007年年より、通信システム系受託
システム企業に⼊入社。⾃自社製品開
発部署にて、ホームネットワーク
系メディアプレイヤー関連のミド
ルウェア開発業務に従事。2012年年
11⽉月に株式会社セカンドファクト
リー⼊入社。
エンジニアとしてExTOUCH、
ExTOUCH Biz、QOOpaなどの⾃自社
プロダクト・サービス開発に従事。
佐々⽊木 将之
エクスペリエンスアーキテクト
プロダクト＆サービスグループ

11.
2nd FACTORY CO.,Ltd.
11
裏の自己紹介
「開発の楽しさを発⾒見見しよう。広
げよう。」「開発の現場を前進さ
せよう」をコンセプトとした
【DevLOVE】の裏裏⽅方に2010年年10
⽉月よりジョイン。2010年年度度産業技
術⼤大学院⼤大学履履修証明プログラム
⼈人間中⼼心デザイン履履修証明取得。
2011年年3⽉月より「現場で使える⼈人
間中⼼心デザインの実践」をコンセ
プトとした【hcdvalue】の⽴立立ち上
げより参加。
ちゃちゃき
勉強会イベント・ワークショップの企画・運営
DevLOVE & hcdvalue
chachaki

12.
2nd FACTORY CO.,Ltd.
12
社外勉強会コミュニティ
hcdvalue
DevLOVE
開発の楽しさを発⾒見見しよう。広げよう。
開発の現場を前進させよう。
現場で使える⼈人間中⼼心設計(HCD)の実践

13.
2nd FACTORY CO.,Ltd.
13
注意！
これから話すことは
「エンジニア」視点から⾒見見たUXやデザインのお話です。
「デザイナー」視点とは異異なる⾯面があります。

14.
2nd FACTORY CO.,Ltd.
14
私のモチベーション
エンジニアリングと
(創り出す⽅方法、⽣生み出す⽅方法、プラスの⽅方向)
デザインを
(⾒見見分ける⽅方法、⾒見見極める⽅方法、マイナスの⽅方向)
繋げていきたい

15.
2nd FACTORY CO.,Ltd.
15
本日お話しすること
UXのはなし
UXDのはなし
HCDのはなし
弊社事例例のご紹介
質疑応答など

16.
2nd FACTORY CO.,Ltd.
16
UXのはなし

17.
2nd FACTORY CO.,Ltd.
17
UX？

18.
2nd FACTORY CO.,Ltd.
18
ISO9241-210における定義
Ø 製品やシステム、サービスの利利⽤用、および/もしくは予
想された使い⽅方によってもたらされる⼈人々の知覚と反応
1. 使⽤用前、使⽤用中、使⽤用後に起こる、ユーザの感情、新年年、嗜好、近く、⽣生理理学的・⼼心理理学
的な反応、態度度、達成感のすべてを含む。
2. ブランドイメージ、⾒見見た⽬目、機能、システムのパフォーマンス、インタラクティブシステ
ムのインタラクティブな振る舞いと⽀支援機能、事前の経験から⽣生じたユーザの内的および
⾝身体的状態、態度度、スキルとパーソナリティ、利利⽤用状況の結果である。
3. ユーザの個⼈人的⽬目標という観点から考えた時には、通常はユーザーエクスペリエンスに付
随する知覚的・感情的な側⾯面をユーザービリティは含むことができる。ユーザービリティ
の基準を⽤用いてユーザーエクスペリエンスの諸側⾯面を評価することができる。

19.
2nd FACTORY CO.,Ltd.
19
ISO9241-210における定義
Ø 製品やシステム、サービスの利利⽤用、および/もしくは予
想された使い⽅方によってもたらされる⼈人々の知覚と反応
1. 使⽤用前、使⽤用中、使⽤用後に起こる、ユーザの感情、新年年、嗜好、近く、⽣生理理学的・⼼心理理学
的な反応、態度度、達成感のすべてを含む。
2. ブランドイメージ、⾒見見た⽬目、機能、システムのパフォーマンス、インタラクティブシステ
ムのインタラクティブな振る舞いと⽀支援機能、事前の経験から⽣生じたユーザの内的および
⾝身体的状態、態度度、スキルとパーソナリティ、利利⽤用状況の結果である。
3. ユーザの個⼈人的⽬目標という観点から考えた時には、通常はユーザーエクスペリエンスに付
随する知覚的・感情的な側⾯面をユーザービリティは含むことができる。ユーザービリティ
の基準を⽤用いてユーザーエクスペリエンスの諸側⾯面を評価することができる。

20.
2nd FACTORY CO.,Ltd.
20
ヒトとモノ・サービスの関係
コンテキスト(利利⽤用状況)
ヒト 画⾯面
タッチ
ポイント
システム
Web
サービス
⼈人⼯工物
UX

21.
2nd FACTORY CO.,Ltd.
21
インタフェースによって感じ方が異なる例
h"p://blogs.yahoo.co.jp/kmatsui0317/11029354.html
h"p://www.hitachi.co.jp/area/kansai/portal/casestudy/2068288_39249.html
エスカレータ
スロープ式エスカレータ

22.
2nd FACTORY CO.,Ltd.
22
ヒトとモノ・サービスの関係
コンテキスト(利利⽤用状況)
ヒト 画⾯面
タッチ
ポイント
システム
Web
サービス
UX
フロントエンド バックエンド

23.
2nd FACTORY CO.,Ltd.
23
ヒトとモノ・サービスの関係
コンテキスト(利利⽤用状況)
ヒト 画⾯面
タッチ
ポイント
システム
Web
サービス
UX
インタラクション
Ix
インタフェース
UI

24.
2nd FACTORY CO.,Ltd.
24
ヒトとモノ・サービスの関係
コンテキスト(利利⽤用状況)
ヒト 画⾯面
タッチ
ポイント
システム
Web
サービス
UX
利利⽤用状況が異異なれば
同じUIでもUXは
異異なります

25.
2nd FACTORY CO.,Ltd.
25
利用状況によって感じ方が異なる例
Ø 「google map」
ファーストビューで現在位置が表⽰示
される
-‐‑‒ 現在位置の近くを探したい
もし
・検索索したかったら？
・絶対に現在位置情報を送信しては
いけない状況だったら？

26.
2nd FACTORY CO.,Ltd.
26
ここまでのまとめ
Ø UXはヒトの内⾯面の話です
– UXとUIは関連はするが別物です
– 字⾯面が似ているだけです
Ø UX「のための」デザインです(Design for UX)
– UX「を」デザインするのではないです(Design UX)
– 私達開発者がデザインする対象は「⼈人⼯工物」です
Ø 利利⽤用状況の把握が⼤大事です
– 全く同じUIでも、利利⽤用状況が異異なれば全く違うものになります

27.
2nd FACTORY CO.,Ltd.
27
ここまで
⼤大丈夫です？抽象的すぎます？

28.
2nd FACTORY CO.,Ltd.
28
UX白書について
Ø UX⽩白書とは？
UXの薄い本
ドイツのDagstuhlで専⾨門家(研究
者・実務家)30名が「UXの概念念」に
ついて共通認識識を形成すべく、
2010年年9⽉月に実施したセミナーにて
議論論された内容をまとめた宣⾔言⽂文。
2011年年2⽉月英語版web公開。
2011年年12⽉月⽇日本語版web公開。 h"p://www.allaboutux.org/uxwhitepaper
h"p://site.hcdvalue.org/docs

29.
2nd FACTORY CO.,Ltd.
29
UX白書における定義(期間的概念)
予期的
UX
利利⽤用前
⼀一時的
UX
利利⽤用中
エピソード
的UX
利利⽤用後
累累積的
UX
利利⽤用時間
全体
体験を
想像する
体験する ある体験を
内省する
回想する
iPhoneに触れる前、
CMなどetc.
iPhoneを
使ってる間etc.
iPhoneについてブロ
グに書くetc.
iPhoneが
無くてはならない
ものになる

30.
2nd FACTORY CO.,Ltd.
30
UXのはなしのまとめ
Ø UXは製品・サービスに「触れている間」だけではない
– 製品・サービスに触れる前
– 製品・サービスに触れた後、思い返す時
– それによって「意味」が形成される

31.
2nd FACTORY CO.,Ltd.
31
本日お話しすること
UXのはなし
UXDのはなし
HCDのはなし
弊社事例例のご紹介
質疑応答など

32.
2nd FACTORY CO.,Ltd.
32
UXDのはなし

33.
2nd FACTORY CO.,Ltd.
33
UXDの話
では、製品・サービスに対する反応は、
全部「UX」なのではないか？
⇒はい。私はそう思います。
⇒⼤大事なのは「UX」ではなく「UXD(Design for UX)」
の視点だと思っています。

34.
2nd FACTORY CO.,Ltd.
34
UXDの話
Ø デザイン
– 意匠(装飾)
– 設計(こちらの意味で使っています！)
Ø UXのために「設計」する
Ø UXのために「計画」する
⇒UXを「再⽣生産可能」なものにする

35.
2nd FACTORY CO.,Ltd.
35
産業革命以降の話
使い⼿手 作り⼿手
1:1
産業⾰革命
以前
使い⼿手
作り⼿手
N:1
産業⾰革命
以後
「⼀一点もの」
使い⼿手にfixしたものづくり
⼤大量量⽣生産・⼤大量量消費
コスト競争
⾼高機能化

36.
2nd FACTORY CO.,Ltd.
36
あるUXを共通の認識に
あるUX
開発者 デザイナ 運⽤用担当
ユーザー
サポート マーケタ

37.
2nd FACTORY CO.,Ltd.
37
ん？？
急に話変えました？

38.
2nd FACTORY CO.,Ltd.
38
UXDのレイヤー構造
ユーザーを共通認識識とした
組織のデザイン
ユーザーのシナリオのデザイン
ユーザーのことを考えた
UI・グラフィックのデザイン

39.
2nd FACTORY CO.,Ltd.
39
UXDのレイヤー構造
ユーザーを共通認識識とした
組織のデザイン
ユーザーのシナリオのデザイン
ユーザーのことを考えた
UI・グラフィックのデザイン
UXのための
⼈人⼯工物のデザイン

40.
2nd FACTORY CO.,Ltd.
40
UXDのレイヤー構造
ユーザーを共通認識識とした
組織のデザイン
ユーザーのシナリオのデザイン
ユーザーのことを考えた
UI・グラフィックのデザイン
UXのための
⼈人⼯工物のデザイン
UXを提供するための
仕組みのデザイン

41.
2nd FACTORY CO.,Ltd.
41
UXDのレイヤー構造
ユーザーを共通認識識とした
組織のデザイン
ユーザーのシナリオのデザイン
ユーザーのことを考えた
UI・グラフィックのデザイン
UXのための
⼈人⼯工物のデザイン
UXを提供するための
仕組みのデザイン
UXを提供する仕組み
の仕組みのデザイン

42.
2nd FACTORY CO.,Ltd.
42
「仕組み」をつくる

43.
2nd FACTORY CO.,Ltd.
43
あるUXを軸に組織をつくる
あるUX
開発者 デザイナ 運⽤用担当
ユーザー
サポート マーケタ

44.
2nd FACTORY CO.,Ltd.
44
ここまでのまとめ
Ø 開発者にとって、⼤大事なのはUXそのものよりUXD
Ø 再⽣生産可能な体験を提供するための話をしましょう
Ø どのレイヤの話をしたいのか
– UXを考えたUIのデザイン
– ユーザーシナリオのデザイン
– ユーザーシナリオを考えられる組織のデザイン

45.
2nd FACTORY CO.,Ltd.
45
本日お話しすること
UXのはなし
UXDのはなし
HCDのはなし
弊社事例例のご紹介
質疑応答など

46.
2nd FACTORY CO.,Ltd.
46
HCDのはなし

47.
2nd FACTORY CO.,Ltd.
47
どう作る？
Ø UXDが⼤大事なのはなんとなく分かった。
Ø じゃあ、どうやってつくるの？

48.
2nd FACTORY CO.,Ltd.
48
ここのレイヤの話をします
ユーザーを共通認識識とした
組織のデザイン
ユーザーのシナリオのデザイン
ユーザーのことを考えた
UI・グラフィックのデザイン
UXを提供するための
仕組みのデザイン

49.
2nd FACTORY CO.,Ltd.
49
こうやったらいいのでは？
ユーザーやその周辺のことを
分析する
ユーザーのための製品・サービ
スを企画する・作ってみる
ユーザーが体験できているか
評価する
ユーザーやその周辺のことを
調べる

50.
2nd FACTORY CO.,Ltd.
50
こうやったらいいのでは？
分析する
作ってみる
評価する
調べてみる
よしやろう！
いい製品だ！

51.
2nd FACTORY CO.,Ltd.
51
ISO9241-210のHCDプロセス
ユーザーの
要求事項の
明⽰示
ユーザーの
要求を満たす
解決策の作成
要求事項に
対する
設計の評価
利利⽤用状況の
把握と明⽰示
⼈人間中⼼心設計
プロセスの計画
システムが
ユーザーの要求
事項を満たす

52.
2nd FACTORY CO.,Ltd.
52
調査・分析の対象
ユーザーの
要求事項の
明⽰示
ユーザーの
要求を満たす
解決策の作成
要求事項に
対する
設計の評価
利利⽤用状況の
把握と明⽰示
⼈人間中⼼心設計
プロセスの計画
システムが
ユーザーの要求
事項を満たす

53.
2nd FACTORY CO.,Ltd.
53
調査・分析の対象
コンテキスト(利利⽤用状況)
ヒト 画⾯面
(タッチ
ポイント)
システム
Web
サービス
UX

54.
2nd FACTORY CO.,Ltd.
54
調査・分析の対象
コンテキスト(利利⽤用状況)
ヒト 画⾯面
(デバイス)
システム
Web
サービス
UX
• インタビュー
• アンケート
• 参与観察
• ペルソナ・シナリ
オ法や構造化
シナリオ法
• KJ法やカード
ソート
• KA法

55.
2nd FACTORY CO.,Ltd.
55
解決策作成の対象
ユーザーの
要求事項の
明⽰示
ユーザーの
要求を満たす
解決策の作成
要求事項に
対する
設計の評価
利利⽤用状況の
把握と明⽰示
⼈人間中⼼心設計
プロセスの計画
システムが
ユーザーの要求
事項を満たす

56.
2nd FACTORY CO.,Ltd.
56
解決策作成の対象
コンテキスト(利利⽤用状況)
ヒト 画⾯面
(タッチ
ポイント)
システム
Web
サービス
UX

57.
2nd FACTORY CO.,Ltd.
57
解決策作成の対象
コンテキスト(利利⽤用状況)
ヒト 画⾯面
(タッチ
ポイント)
システム
Web
サービス
UX
• ペーパープロト
タイピング
• モックアップ
• アクティングア
ウト

58.
2nd FACTORY CO.,Ltd.
58
評価の対象
ユーザーの
要求事項の
明⽰示
ユーザーの
要求を満たす
解決策の作成
要求事項に
対する
設計の評価
利利⽤用状況の
把握と明⽰示
⼈人間中⼼心設計
プロセスの計画
システムが
ユーザーの要求
事項を満たす

59.
2nd FACTORY CO.,Ltd.
59
評価の対象
コンテキスト(利利⽤用状況)
ヒト 画⾯面
(タッチ
ポイント)
システム
Web
サービス
UX

60.
2nd FACTORY CO.,Ltd.
60
評価の対象
コンテキスト(利利⽤用状況)
ヒト 画⾯面
(デバイス)
システム
Web
サービス
UX • ユーザーテスト
• インタビュー

61.
2nd FACTORY CO.,Ltd.
61
ここまでのまとめ
Ø UXD(シナリオのデザイン)の⼀一例例としてのHCDプロセ
スをご紹介しました
Ø 調査→分析→試⾏行行→評価のプロセスは単なるPDCAです
し、⼿手法・技法もおおよそ揃ってきました。約10年年の積
み上げがありますので、使わない⼿手はないかなぁと思い
ます。

62.
2nd FACTORY CO.,Ltd.
62
本日お話しすること
UXのはなし
UXDのはなし
HCDのはなし
弊社事例例のご紹介
質疑応答など

63.
2nd FACTORY CO.,Ltd.
63
QOOPa

64.
2nd FACTORY CO.,Ltd.
64
QOOPa
Ø クラウドアプリケーション
Ø スマートフォンを利利⽤用
– ⾼高価なハンディ不不要
Ø BYOD・ソーシャル
– SNSを活⽤用して広告可能

65.
2nd FACTORY CO.,Ltd.
65
QOOPa
ハンディ端末
お客様の
スマートフォン
オーダーシステム
クラウドアプリケーション
Wifi や 3G で利用可能
常に最新のアプリケーションをご提供！
お客様のスマホでも！
キッチン端末

66.
2nd FACTORY CO.,Ltd.
66
タスクボードの導入

67.
2nd FACTORY CO.,Ltd.
67
これはUXD？
Ø UIデザインと開発の協業
Ø スマートフォンを中⼼心としたシナリオデザイン
Ø そこに⾄至るためのチームのタスク・意識識の共有

68.
2nd FACTORY CO.,Ltd.
68
UXDのレイヤー構造
ユーザーを共通認識識とした
組織のデザイン
ユーザーのシナリオのデザイン
ユーザーのことを考えた
UI・グラフィックのデザイン
UXのための
⼈人⼯工物のデザイン
UXを提供するための
仕組みのデザイン
UXを提供する仕組み
の仕組みのデザイン

69.
2nd FACTORY CO.,Ltd.
69
デザインとエンジニアリング
Development
Engineering Design

70.
2nd FACTORY CO.,Ltd.
70
プロセス
開発プロセス
エンジニアリング
プロセス
デザイン
プロセス
1
2
7
8
3
4
5
6
調査
分析
解決策
評価
要件定義
設計
実装
テスト

71.
2nd FACTORY CO.,Ltd.
71
Incremental と Iterative
Design?
Engineering?

72.
2nd FACTORY CO.,Ltd.
72
本日お話しすること
UXのはなし
UXDのはなし
HCDのはなし
弊社事例例のご紹介
質疑応答など

73.
2nd FACTORY CO.,Ltd.
73
私のモチベーション
エンジニアリングと
(創り出す⽅方法、⽣生み出す⽅方法、プラスの⽅方向)
デザインを
(⾒見見分ける⽅方法、⾒見見極める⽅方法、マイナスの⽅方向)
繋げていきたい

74.
2nd FACTORY CO.,Ltd.
74
まとめ(1/4)
Ø UXはヒトの内⾯面の話です
– UXとUIは関連はするが別物です
Ø UX「のための」デザインです(Design for UX)
– UX「を」デザインするのではないです(Design UX)
– 私達開発者がデザインする対象は「⼈人⼯工物」です
Ø 利利⽤用状況の把握が⼤大事です
– 全く同じUIでも、利利⽤用状況が異異なれば全く違うものになります

75.
2nd FACTORY CO.,Ltd.
75
まとめ(2/4)
Ø UXは製品・サービスに「触れている間」だけではない
– 製品・サービスに触れる前
– 製品・サービスに触れた後、思い返す時
– それによって「意味」が形成される

76.
2nd FACTORY CO.,Ltd.
76
まとめ(3/4)
Ø 開発者にとって、⼤大事なのはUXそのものよりUXD
Ø 再⽣生産可能な体験を提供するための話をしましょう
Ø どのレイヤの話をしたいのか
– UXを考えたUIのデザイン
– ユーザーシナリオのデザイン
– ユーザーシナリオを考えられる組織のデザイン

77.
2nd FACTORY CO.,Ltd.
77
まとめ(4/4)
Ø UXD(シナリオのデザイン)の⼀一例例としてのHCDプロセ
スをご紹介しました
Ø 調査→分析→試⾏行行→評価のプロセスは単なるPDCAです
し、⼿手法・技法もおおよそ揃ってきました。約10年年の積
み上げがありますので、使わない⼿手はないかなぁと思い
ます。

78.
We are designing future experience.