IS 525714/ISO27001- AITC Day 2011 -UXとそれを支えるゕーキテクチャ
株式会社セカンドフゔクトリー
取締役／シニゕUXゕーキテクト 東 賢
Twitter : kenazuma
2011/02/23

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

コンサルテゖング

UI設計／開発

製品開発／販売

トレーニング1

UXって?

2

ユーザーエクスペリエンスとは？

ユーザーが商品／サービ
スを通じて感じる

すべての体験
3

UXケーススタディ：スターバックス

4

UXケーススタディ：ハーレーダビッドソン

5

UXケーススタディ：寿司屋

6

リアルな体験から学ぶべきこと

これらの体験は点ではなく線で生み出されている
7

ユーザー体験では、一度良い体験をすると、元に戻りにくい8

情報システムにおけるユーザー？

9

プロダクトの進化

産業革命以後の生産能力向上によって多くの製品が差別化を考えるに至った

1885年製メルセデス10

ソフトウェアの進化

既に多くのソフトウェアが機能的には成熟し、機能だけでは競争優位を保つことができない状態

更なる顧客確保、生産性の向上のため、この転換期においてエクスペリエンスを差別化要因として考えてみては？
11

UIの変遷112

エクササ゗ズ：FURPS+FunctionalityU?

usability

Reliability
Performance
Supportability+ Constraint13

エクササイズ：ユーザビリティ

14

UX検討で変わるものは？

15

“Client Technology Today”：エクササイズ

オフィスを出てからの、皆さんの周囲にあるComputing環境を想像してください。

それは、Windows PCでしたか？
16

“Client Technology Today”：エクササイズ

想像以上にWindows PC以外の環境を想像したのではないでしょうか？

ComputingはPCだけのものではなくなっているようです。
17

“Client Technology Today”：エクササイズ

18

“Client Technology Today”：エクササイズ

Computingは、汎用的な利用から、より一層私たちの生活に寄り添うようにそれぞれの状況に最適化されつつあります。
19゗ンパクト：iPhoneは「形容詞」になった

20

Client Technologyを分解UIを実現するテクノロジー
ビジネスロジックを実現するテクノロジー

OS ／ブラウザ
コントロールデバイスを含むハードウェア

接続先のテクノロジー
21

UI実現テクノロジー

Windows Form

FlashWPF

AIR

Silverlight

jQuery

HTML5

ネイティブ
22

UI実現テクノロジー
提供可能な体験のレベル

開発のしやすさ＜ロジック＞

開発のしやすさ＜デザイン＞

要員確保

動作環境

WindowsForm

△

◎

△

◎

○

WPF

◎

◎

◎

△（○）

△

Silverlight

○◎

◎

△

○

HTML5

△（○）

△（○）

△（○）

△（○）

△（◎）

Flash/AIR

○（◎）

△（○）

◎○

◎

ネイティブ

∞

○△

△

○
23

UI実現テクノロジー：スコア
提供可能な体験のレベル

開発のしやすさ＜ロジック＞

開発のしやすさ＜デザイン＞

要員確保

動作環境

総合Windows
Form

13

13

2

10

WPF

33

3

1.5

111.5

Silverlight23

31211HTML5

1.5

1.5

1.5

1.5

28

Flash/AIR

2.5

1.5

32

312

ネイティブ

42112

1024

OS/ブラウザ

WindowsIE(6 – 9)Windows Embedded

Firefox

Mac OS/iOS

SafariAndroid

モバイルブラウザ
25

コントロールデバイス

タッチパネル
ペンタブレット
ジェスチャーレガシー
26

エクササイズ：Surfaceでは「何点まで」タッチを検出できる？

27

エクササイズ：これはなんでしょう？

28

社会動向
デバイス・ハードウェアの進化とユーザー体験の変化

29

社会動向
デバイス・ハードウェアの進化とユーザー体験の変化

ユーザーを取り巻くインタフェースは急速に進化
30

KINECT31

ハードウェア

PC
TV
モバイル

スレート
シチュエーション毎の最適化が必要！
32接続先のテクノロジー

Windows Azure

flickrなど写真サービス

Office 365

ｍixiなどSNS

Windows LiveYahoo!など
パブリックAPI

Salesforce

既存システム33

ビジネスゕプリケーションとRIA

34

UX検討を行う開発を取り巻く環境：ハ゗プ曲線

35

「増やす」ことよりも、「減らす」ことを考える「増やす」
リッチな゗ンタラクテゖビテゖ
魅力的なビジュゕルデザ゗ン

楽しい／格好良い／凄い！

NOW

改善

UX

無駄な動き

エラーコスト
サポートコスト「減らす」
36ゕプリケーションへの”忠誠心”

忠誠心を勝ち取る！
行動の変化

忠誠心

ROI

ビジネスゕプリケーション“進んで利用する”“気分が良くなる”“継続利用”UP

コンシューマーゕプリケーション“選択される”“気分が良くなる”“継続利用”

UP37

“忠誠心を勝ち取り、維持せよ”
UXを維持する仕組み無しに継続的な開発を行った場合
新規ビジネスニーズ

新規ビジネスニーズIt’s OK.

Great
継続開発

No !
継続開発
時間UXを維持する仕組みと共に継続的な開発を行った場合
新規ビジネスニーズGreat !

新規ビジネスニーズGreat !
継続開発

Great !

ユーザーからの”忠誠心”

継続開発
38

情報システム部門

39

高度なUX維持のために情報システム部門が必要なものは。。。

“ビルデゖングブロックセット”“゗ンストラクションガ゗ド”“実行可能なサンプル”

40

ビジネスゕプリケーションの要素：M-V-VMの場合

View

データを視覚化して表示しユーザーの操作を受け取る要素

View-Model

ViewのためのModelであり、両者のゕダプターとなる要素

Modelゕプリケーションが扱うデータと手続きを表現する要素

41

ビジネスゕプリケーションの要素：View
ゕセット

ベクターやビットマップなどのグラフゖックフゔ゗
ルや、ビデオなどのメデゖゕフゔ゗ル：素材スタ゗ル

UIコントロールへ適用するスタ゗ル゗ンタラクションストーリーボードによる状態間のゕニメーション

ビヘ゗ビゕ

View層のための複雑なロジックをカプセル化したもの

レ゗ゕウト

ネスト構造を持った
レ゗ゕウトコントロールの集合

UIコントロール

標準UIコントロール、カスタムコントロール、ユーザーコントロール<データバ゗ンド可能なUI要素>
42

ゕプリケーション開発ワークフロー
understanding

Getting idea

Data ModelingDefining patterns

Develop mock-up

Wire frame

Graphic design

ビルデゖング
ブロックセットInteraction

behavior

Instruction guide゗ンストラクションガ゗ド

UI Control

templates

Style

Asset

Sample code

LayoutInitial application

実行可能なサンプル43

エクササ゗ズ：パワーポ゗ント

多くのプロ向けグラフゖックツールが存在するにもかかわらず、ビジネスプレゼンテーション用にパワーポ゗ントが存在し、圧倒的なシェゕを持っているのはなぜか？
周辺環境も含め、パワーポ゗ントが良いプレゼン資料を繰り返し作成するために“ビルデゖングブロックセット”“゗ンストラクションガ゗ド”“実行可能なサンプル”を備えているからだと考えられる。
44

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

45ゕセット（.NETの場合）全てのゕセットはXAML-Readyでなくてはならない
ワ゗ヤフレームとゕセットが揃ったとき、正しいXAMLにならなくてはならない
Resource XAML はただのKey/Valueにすぎない
実際に確認できるリゕルなゕセットリストを作る
ビジュアル要素に関するガイダンスを作るべきである46

スタ゗ル（.NETの場合）

スタ゗ル適用は難易度が高いため、部分的な変更を検討する

要素のサ゗ズを特定できる場合には、それぞれのサ゗ズに合わせて作成すると楽である
Expression Designの事を忘れない
練りこまれたスタイルを標準コントロールに適用できれば、極めて価値の高い資産となる

47

ビヘ゗ビゕ（.NETの場合）

コードビハ゗ンドコードを書きたくなったら、ビヘ゗ビゕにすることを検討する

特定の状況でしか呼び出されない機能がある場合、
ビヘ゗ビゕにすることを検討する
ビヘ゗ビゕはデザ゗ナーにとって分かりやすい単位であることを意識する
練りこまれたスタイルを標準コントロールに適用できれば、極めて価値の高い資産となる

48

゗ンタラクション（.NETの場合）

その゗ンタラクションに意味はあるか？
基本的に、インタラクションは他の要素に対して独立しているべきである
スクリーン間、ステート間両方のインタラクションを認識する
゗ンタラクションをゕセットの一つとして捉えると良い49

インタラクション≠アニメーション

50

レ゗ゕウト（.NETの場合）

プロジェクトの状況に応じた詳細なレ゗ゕウトガ゗ドを作成するできるだけ多くのXAMLサンプルを提供する
ガ゗ドやサンプルは、基本的なUX検討を含んでいなければならないレ゗ゕウトはネスト構造を許しているべきである

51

UIコントロール（.NETの場合）

標準？カスタム？ユーザーコントロール？
UIコントロールの機能に着目し、見た目に着目しない再利用性について考えすぎないそれぞれの状況に最適なコントロールのセットを用意する

52

エクササ゗ズ：UIコンポーネント

どのUIコンポーネントの機能で表現可能ですか？

53テクノロジーがユーザーを救うには何が必要か？

テクノロジー

デベロッパー（だけ）？

ユーザー

54

テクノロジーがユーザーを救うには何が必要か？

テクノロジーBusiness Enabler !
ユーザー55