UXとUXのためのデザインのはなし (20130824 使いたくなるUIをつくる！フロントエンド勉強会)

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

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

3
自己紹介

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

5
株式会社セカンドファクトリー

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

7
バランスのよい開発

8
セカンドファクトリーのチームモデル

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

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

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

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

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

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

15
UXのはなし
UXDのはなし
HCDのはなし
質疑応答など

16
UXのはなし

17
UX？

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

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

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

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

22
ヒト画⾯面
タッチ
ポイント
システム
Web
サービス
UX
フロントエンドバックエンド

23
ヒト画⾯面
タッチ
ポイント
システム
Web
サービス
UX
インタラクション
Ix
インタフェース
UI

24
ヒト画⾯面
タッチ
ポイント
システム
Web
サービス
UX
利利⽤用状況が異異なれば
同じUIでもUXは
異異なります

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

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

27
ここまで
⼤大丈夫です？抽象的すぎます？

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
UX白書における定義(期間的概念)
予期的
UX
利利⽤用前
⼀一時的
UX
利利⽤用中
エピソード
的UX
利利⽤用後
累累積的
UX
利利⽤用時間
全体
体験を

想像する
体験するある体験を

内省する
回想する
iPhoneに触れる前、
CMなどetc.
iPhoneを

使ってる間etc.
iPhoneについてブロ
グに書くetc.

iPhoneが

無くてはならない

ものになる

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

31
UXのはなし
UXDのはなし
HCDのはなし
質疑応答など

32
UXDのはなし

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

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

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

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

37
ん？？
急に話変えました？

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

39
UXのための
⼈人⼯工物のデザイン

40
UXのための
UXを提供するための
仕組みのデザイン

41
UXのための
UXを提供する仕組み
の仕組みのデザイン

42
「仕組み」をつくる

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

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

45
UXのはなし
UXDのはなし
HCDのはなし
質疑応答など

46
HCDのはなし

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

48
ここのレイヤの話をします

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

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

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

52
調査・分析の対象
ユーザーの
要求事項の
明⽰示
ユーザーの
要求を満たす
解決策の作成
要求事項に
対する
設計の評価
把握と明⽰示
システムが
事項を満たす

53
ヒト画⾯面
(タッチ
ポイント)
システム
Web
サービス
UX

54
ヒト画⾯面
(デバイス)
システム
Web
サービス
UX
•  インタビュー

•  アンケート

•  参与観察

•  ペルソナ・シナリ
オ法や構造化
シナリオ法

•  KJ法やカード
ソート

•  KA法

55
解決策作成の対象
ユーザーの
要求事項の
明⽰示
ユーザーの
要求を満たす
解決策の作成
要求事項に
対する
設計の評価
把握と明⽰示
システムが
事項を満たす

56
ヒト画⾯面
(タッチ
ポイント)
システム
Web
サービス
UX

57
ヒト画⾯面
(タッチ
ポイント)
システム
Web
サービス
UX
•  ペーパープロト
タイピング

•  モックアップ

•  アクティングア
ウト

58
評価の対象
ユーザーの
要求事項の
明⽰示
ユーザーの
要求を満たす
解決策の作成
要求事項に
対する
設計の評価
把握と明⽰示
システムが
事項を満たす

59
評価の対象
ヒト画⾯面
(タッチ
ポイント)
システム
Web
サービス
UX

60
評価の対象
ヒト画⾯面
(デバイス)
システム
Web
サービス
UX •  ユーザーテスト

•  インタビュー

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

62
UXのはなし
UXDのはなし
HCDのはなし
質疑応答など

63
QOOPa

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

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

66
タスクボードの導入

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

68
UXのための
UXを提供する仕組み
の仕組みのデザイン

69
デザインとエンジニアリング
Development
Engineering Design

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

71
Incremental と Iterative
Design?
Engineering?

72
UXのはなし
UXDのはなし
HCDのはなし
質疑応答など

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

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

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

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

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

We are designing future experience.

UXとUXのためのデザインのはなし (20130824 使いたくなるUIをつくる！フロントエンド勉強会)

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to UXとUXのためのデザインのはなし (20130824 使いたくなるUIをつくる！フロントエンド勉強会)

Similar to UXとUXのためのデザインのはなし (20130824 使いたくなるUIをつくる！フロントエンド勉強会) (20)

More from chachaki chachaki

More from chachaki chachaki (20)

UXとUXのためのデザインのはなし (20130824 使いたくなるUIをつくる！フロントエンド勉強会)