Developer Summit 2009：
RIA環境を取り巻く技術の進化と環境の変化
- technology evolution and changing environment in RIA development -
2009/02/13
株式会社セカンドファクトリー
シニアエクスペリエンスアーキテクト
東賢
2nd FACTORY CO.,Ltd. CONFIDENTIAL

2nd FACTRY Co., ltd
アプリケーションに優しさを。
そして、おもてなしの心を。
長年のＲＩＡ開発経験と独自の構築プロセスに基づき、革新的なイ
ンターフェイスを持つアプリケーションを提供します。
アプリケーションやＷｅｂサイトを使いやすい「道具」と考え、毎日
使うものだからこそユーザビリティや優しさを確保した豊かなエク
スペリエンスを実現します。
2ndfactory=2FCはＲＩＡを通じクライアントにはＲＯＩの最大化とビジ
ネスの成功を、そしてエンドユーザーには豊かなエクスペリエンス
をお届けします。
1
2nd FACTORY CO.,Ltd. CONFIDENTIAL

About me : Ken Azuma （東 賢）
Senior Experience Architect of 2ndfactory
azuma@2ndfactory.com
http://www.syncrare.com/
Twitter / BrightKite / FriendFeed: kenazuma
LinkedIn : http://www.linkedin.com/in/kenazuma
Adobe Community Expert
http://www.adobe.com/communities/expert
s/members/KenAzuma.html
Microsoft MVP
https://mvp.support.microsoft.com/profile=B
DE5E9FE‐2703‐4846‐A5AA‐0247C32632DA
2
2nd FACTORY CO.,Ltd. CONFIDENTIAL

2008年に何が起こったか？
2008年は
UX元年だった
3
2nd FACTORY CO.,Ltd. CONFIDENTIAL

2008年に何が起こったか？
各企業は
UXの重要性を
（一応）
理解／認識した
4
2nd FACTORY CO.,Ltd. CONFIDENTIAL

2008年に何が起こったか？
What is UX
↓
How to do
For better UX
5
2nd FACTORY CO.,Ltd. CONFIDENTIAL

Portions of “How”: 知りたいところ
6
2nd FACTORY CO.,Ltd. CONFIDENTIAL

Portions of “How”: 知りたいところ
プラットフォーム
7
2nd FACTORY CO.,Ltd. CONFIDENTIAL

®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

Adobe Flash Platform Overview
Applications, Content and Video
Framework Clients Servers
Tools to Design and Develop
Flash Catalyst Flex
Flex Builder AIR
Flash CS4 Flash Media
Professional Server Family
Flash Player Data Services
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

Adobe Flash Platform Architecture
Applications, Content and Video
Framework
Tools to Design and Develop
Flex
Flash CS4
Professional
Clients
AIR Flash Player
Flash Catalyst
AMF, XML, JSON, SOAP, RSS, ATOM, etc.
HTTP/S, Sockets, RTMP, etc.
Servers
Flex Builder
BlazeDS
Flash Media
Data Services
Server Family
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

Adobe Flash Platform Architecture
Applications, Content and Video
Framework
Tools to Design and Develop
Flex
Flash CS4
Professional
Clients
AIR Flash Player
Flash Catalyst
AMF, XML, JSON, SOAP, RSS, ATOM, etc.
HTTP/S, Sockets, RTMP, etc.
Servers
Flex Builder
BlazeDS
Flash Media
Data Services
Server Family
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

Adobe Flash Platform Architecture: Client
Applications, Content and Video
Framework Components MXML
Flex
Declarative UI ActionScript
Runtimes
Browsers JavaScript, PixelBender
E4X, Binary Data
ActionScript
HTML, CSS, etc
Flash Player
H.264 Video
DOM APIs Real-time data 3D Effects
AAC Audio
JavaScript, OS / Desktop
PDF Integration
HTML, CSS, etc. Integration
AIR
Persistent
ActionScript Local Storage
Applications
Operating Systems Mac, Windows, Linux, Symbian,
Windows Mobile, Wii, PlayStation, etc.
Clients / Servers AMF, XML, JSON, SOAP, RSS, ATOM, etc.
HTTP/S, Sockets, RTMP, etc.
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

Adobe Flash Platform Architecture
Applications, Content and Video
Framework
Tools to Design and Develop
Flex
Flash CS4
Professional
Clients
AIR Flash Player
Flash Catalyst
AMF, XML, JSON, SOAP, RSS, ATOM, etc.
HTTP/S, Sockets, RTMP, etc.
Servers
Flex Builder
BlazeDS
Flash Media ColdFusion
Data Services
Server Family “Centaur”
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

Adobe Flash Platform Architecture: Server
XML, JSON, SOAP, RSS, ATOM, etc.
Clients / Servers HTTP/S, Sockets, RTMP, etc.
Partner Services and
Servers
other Server Platforms
ColdFusion
Flash Media BlazeDS LiveCycle ES
Server Family Data Services
On-Demand & Live Enterprise Data Capture
Messaging
Streaming Services and Output
Real Time Process
Remoting Remoting/AMF
Interactivity Automation
Protected Streams Data Management Security
Data Management
Resource Tiers ECM Message Legacy
ECM Message Legacy
Databases Directories
Databases Directories Repository Queues Systems
Repository Queues Systems
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

Adobe Flash Platform Architecture
Applications, Content and Video
Framework
Tools to Design and Develop
Flex®
Flash CS4
Professional
Clients
AIR™ Flash® Player
Flash Catalyst
AMF, XML, JSON, SOAP, RSS, ATOM, etc.
HTTP/S, Sockets, RTMP, etc.
Servers
Flex Builder
BlazeDS
Flash Media
Data Services
Server Family
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

Adobe Flash Platform Architecture: Tooling
Creative Suite Tools
Tools to Design and Develop
After Effects®
Interactive
Content
Flash CS4
Animation
Professional
Illustrator®
Visual Layout
Dreamweaver
®
Proto-typing FXG
Flash Catalyst
Design / Develop
Workflow
Fireworks®
Eclipse IDE
Photoshop®
Flex Builder Code Profiling
Debugging
Acrobat®
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

© 2008 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market
conditions, it should not be interpreted to be a commitment on the part of Microsoft, and cannot guaranteeguarantee the of any information provided after the date of this presentation.
not be interpreted to be a commitment on the part of Microsoft, and Microsoft Microsoft cannot the accuracy accuracy of any information provided after the date of this presentation.
MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.
Copyright 2008 Microsoft Corporation . All rights reserved.

プレゼンテーション テクノロジの選択
ASP.NET ASP.NET Windows
(HTML) AJAX Silverlight Presentation
Foundation
Windows Microsoft
Forms Office
DHTML
Win32
(AJAX)
開発生産性
Direct 3D Direct 3D
v9 v10
ユーザーインターフェイスの
リッチさ Availability: 1997 2005 2006
Copyright 2008 Microsoft Corporation . All rights reserved.

マイクロソフトのクライアント技術
技術 概要
(X)HTML (+ CSS) W3C標準。Webブラウザのみで動作可能。基本的にネットワーク接続が前提。
クロスプラットフォーム。
上記 + JavaScript Dynamic HTMLを駆使し、インタラクティブ性を向上
(ASP.NET) AJAX Asynchronous JavaScript + XML
Silverlight XAMLをベースとしたRIA技術。クロスプラットフォーム。JavaScriptや.NET対
応言語が使用可能。
Windows フォーム .NET FrameworkベースのWindows クライアントと技術。ドラッグ＆ドロップでUI
を構築可能。
MFC (Visual C++) Win32をベースとしたMFCベース
Office system Excel や Wordをプラットフォームとしてアプリケーションを実装
.NET Compact Framework Windows Mobileをターゲットとしたアプリケーション開発
WPF GPUのパワーをシンプルな方法(XAML)で活用
DirectX 10 GPUをフル活用。最新ゲーム品質のUIを実現
Media Center Edition MCML。7フィート(2.2M)インターフェース。リモコン操作
19
Copyright 2008 Microsoft Corporation . All rights reserved.

Richness
Reach

Iterative releases (6‐8w)
• Customer Feedback Driven
• May include new components
CodePlex
New Controls • “No‐brainer” upgrade
Project
Component “Quality Bands”
Experimental
Preview
Stable
Mature
• “Mature” band controls
Core
delivered with SDK/Tools
•
Runtime
Customers can replace with
CodePlex release for full
SDK/Tools Some controls may
control package
Release move to core runtime

Business Application Frameworks
Business Business
Validation Data Loading App Services
Logic Controls
Base Frameworks
Controls
Data Shaping
Network / Data
• XML Navigation
Services Binding
• LINQ Control Model
Base Platform
CLR
Core UI Engine

Application Architecture for .NET
USERS
UI components
UI Process components
Service Interfaces
Operational Management
Business
Business Business
Components
Workflows Entities
Communication
Service
Security
Data Access Logic Components
Agents
Data Sources Services

Portions of “How”: 知りたいところ
開発手法
26
2nd FACTORY CO.,Ltd. CONFIDENTIAL

Key components of RIA platform
27
2nd FACTORY CO.,Ltd. CONFIDENTIAL

インタラクティブアプリケーションに必要な要素
ビットマップやベクターなどを用いた様々なグラフィックファイル
Asset ＜XAMLそのものやJPEG/PNGなどのファイル＞
アニメーションやステート間のトランジション
Interaction ＜XAMLのstoryboardによるアニメーション＞
アプリケーションの各画面におけるUIのレイアウト
Layout ＜XAMLのLayoutコントロールによるレイアウト＞
イベントハンドラやデータホルダを含むUIコントロール
UI Control ＜XAMLによるボタンやグリッドなどのUIコントロール＞
画面制御のためのコントロールロジック
Control Logic ＜.NET言語による画面ステートの制御ロジックやバリデーションなど＞
アプリケーションの実態であるビジネスロジック
Business Logic ＜.NET言語によるビジネスロジックの実装＞
29
2nd FACTORY CO.,Ltd. CONFIDENTIAL

開発手法：Des/Devチームの分け方
インテグレータモデル
ハーベストモデル
コラボレーションモデル
30
2nd FACTORY CO.,Ltd. CONFIDENTIAL

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

セカンドファクトリーのチームモデル
Business Domain
Presentation Domain
System Domain
32
2nd FACTORY CO.,Ltd. CONFIDENTIAL

セカンドファクトリーのチームモデル
Business Domain
inside-out Outside-in
Presentation Domain
System Domain
33
2nd FACTORY CO.,Ltd. CONFIDENTIAL

セカンドファクトリーのチームモデル
Business Domain
ビジネスゴール
Presentation Domain
デザイン（広義）
実装
System Domain
34
2nd FACTORY CO.,Ltd. CONFIDENTIAL

ロールとツールの関係（Microsoft）
システム インタラクション グラフィック
デベロッパー デベロッパー デザイナー
XAML
C# graphics
Visual Studio Expression Blend Expression Design
Other Tools
XAMLを媒介として、すべての実装メンバーが開発中のUI
におけるUXを常に確認しながら開発できる体制が
ツールとの連携によって整っている
35
2nd FACTORY CO.,Ltd. CONFIDENTIAL

ロールとツールの関係（Adobe）
システム インタラクション グラフィック
デベロッパー デベロッパー デザイナー
MXML
Action Script FXG / graphics
Flex Builder Flash Catalyst Illustrator
Other Tools
新たにFXGフォーマットが加わることによって、
CS4シリーズの圧倒的シェアを活かす土壌が整い、
Flexフレームワークによる開発でより高度な分業が
可能となった。
36
2nd FACTORY CO.,Ltd. CONFIDENTIAL

開発手法：会社／拠点間の分業
ある規模以上の開発を行う場合、
調達の観点からも分業可能な体制が
望まれるが、ＵＸ検討そのものは
分業が難しい作業が多い
同じコンセプトを共有しつつも実装を
確定的に落とし込んでいくことが重要
多くのケースでは、下層レイヤーの
分業が検討しやすい
37
2nd FACTORY CO.,Ltd. CONFIDENTIAL

開発手法：テスト
オートメーションテスト
エモーショナルテスト
38
2nd FACTORY CO.,Ltd. CONFIDENTIAL

Portions of “How”: 知りたいところ
プロトタイピング
39
2nd FACTORY CO.,Ltd. CONFIDENTIAL

プロトタイプとは？
デモンストレーション目的や新技術・新機構の
検証、量産前での問題点の洗い出しのために
設計・仮組み・製造された試験機・試作回路・
コンピュータプログラムのことを指す。
検証／問題点の洗い出しのため
に存在し、その全てを製品開発に
流用できるものではない。
40
2nd FACTORY CO.,Ltd. CONFIDENTIAL

プロトタイプ／モックアップ
プロトタイプ
モックアップ
41
2nd FACTORY CO.,Ltd. CONFIDENTIAL

どこをプロトタイピングするか？
多くのUXに優れた製品で
は、大きく差別化をできる
ポイントは全体に対して一
部であり、多くの部分で典
型的なパターンを利用して
いることが多い。
42
2nd FACTORY CO.,Ltd. CONFIDENTIAL

Demo : Quince
43
2nd FACTORY CO.,Ltd. CONFIDENTIAL

ビルディングブロック
44
2nd FACTORY CO.,Ltd. CONFIDENTIAL

市販コンポーネント
45
2nd FACTORY CO.,Ltd. CONFIDENTIAL

オープンソースコンポーネント／ライブラリ
46
2nd FACTORY CO.,Ltd. CONFIDENTIAL

SaaS
Amazon EC2
Akamai Edge Computing
Windows Azure
SalesForce
SAP
Social API
47
2nd FACTORY CO.,Ltd. CONFIDENTIAL

Brightcove Inc.

改善のための計測
49
2nd FACTORY CO.,Ltd. CONFIDENTIAL

復習：RIAテクノロジー選択のポイント
アプリケーションライフサイクルの視点で検討する
十分なエクスペリエンスを提供できるか
クライアントの動作環境にマッチしているか
将来の配布にあたって不要なコストがかからないか
開発者人口が十分か
提供企業が安定した体制を持っているか
総合的に見てマイクロソフトやアドビの
テクノロジーが優位といえる
50
2nd FACTORY CO.,Ltd. CONFIDENTIAL

復習：従来のHTMLやWinFormではだめなのか？
根本的にはテクノロジーの問題では
ない。状況に応じてもっとも都合のよ
いテクノロジーを選択すればよい。
• コンセプトに従い、一貫した操作性
を提供しているか？
• 優れたUXを継続的に支えるアーキテ
クチャ設計があるか？
51
2nd FACTORY CO.,Ltd. CONFIDENTIAL

ユーザーエクスペリエンスとは？（復習）
情報システム部門の連中は分
かっていない。今変更／改善
することがどれだけ重要か。
ユーザー部門の連中は分かっ
ていない。システムを安定稼
動させることがどれだけ重要
か。
52
2nd FACTORY CO.,Ltd. CONFIDENTIAL

結論：どちらも正しい
システム開発
検
討
レ
ギャップを埋めるための
ベ
ル
アーキテクチャが必要
ユーザー部門
時間軸
53
2nd FACTORY CO.,Ltd. CONFIDENTIAL

カットオーバーはスタートライン
プロジェクトはカットオーバーをもって
終了するようなものではなく、
アプリケーションのライフサイクルに
沿って継続的に改善されるべきものだ。
そのため、利用動向を知るための計測が
必要であり、計測データをもとに改善に
対応するアーキテクチャ設計が必要。
54
2nd FACTORY CO.,Ltd. CONFIDENTIAL

アーキテクチャの分割検討を行った場合
グラフィック等のアセット
インタラクション
UI（WF）
ビジネスロジック
ゲートウェイ
可変領域と安定領域にアーキテクチャ的な分割を行うことで
長期運用に対応した変更しやすい構造を作ることが出来る
55
2nd FACTORY CO.,Ltd. CONFIDENTIAL

• マーケティング部門のテクノロジーパートナー
• オンラインビジネス最適化を実現するための
オンラインマーケティングスイートを提供
© 2009 Omniture Inc.
56
2nd FACTORY CO.,Ltd. CONFIDENTIAL

Experience is an iceberg
見えている部分は全体の一部分にしか過ぎない。
検討するべきエクスペリエンスは
見えない部分も含めた全体を対象とする。
57
2nd FACTORY CO.,Ltd. CONFIDENTIAL

Question
?
58
2nd FACTORY CO.,Ltd. CONFIDENTIAL

59
2nd FACTORY CO.,Ltd. CONFIDENTIAL

1 参考：UXとは？
60
2nd FACTORY CO.,Ltd. CONFIDENTIAL

ユーザーエクスペリエンスとは？
ユーザーが商品／サー
ビスを通じて感じる
すべての体験
61
2nd FACTORY CO.,Ltd. CONFIDENTIAL

体験とは？
哲学で、個々の主観のうち
に直接的または直観的に見
いだされる生き生きとした
意識過程や内容＜広辞苑＞
62
2nd FACTORY CO.,Ltd. CONFIDENTIAL

体験とつく言葉…
体験学習、体験談、体験記、アハ体験、体験版ダウ
ンロード、感動体験、追体験、悲しい体験、
トラウマ的体験…
「体」の字が入っていることからも、自らの体を使っ
たり、体にしみこんでくるような強い経験をすることで、
良いこともあれば悪いこともある。
63
2nd FACTORY CO.,Ltd. CONFIDENTIAL

エクササイズ：
情報システム／
アプリケーション
×
体験
64
2nd FACTORY CO.,Ltd. CONFIDENTIAL

UXケーススタディ：スターバックス
65
2nd FACTORY CO.,Ltd. CONFIDENTIAL

UXケーススタディ：ハーレーダビッドソン
66
2nd FACTORY CO.,Ltd. CONFIDENTIAL

UXケーススタディ：寿司屋
67
2nd FACTORY CO.,Ltd. CONFIDENTIAL

リアルな体験から学ぶべきこと
これらの体験は
点ではなく線で
生み出されている
68
2nd FACTORY CO.,Ltd. CONFIDENTIAL

ユーザーエクスペリエンスとは？（復習）
ユーザーが商品／サービスを
通じて感じるすべての体験
↓
最良の体験の提供が競合に対
する優位を得るための
差別化要因となる
69
2nd FACTORY CO.,Ltd. CONFIDENTIAL

プロダクトの進化
産業革命以後の生産能力向上に
よって多くの製品が差別化を考
えるに至った
1885年製メルセデス
70
2nd FACTORY CO.,Ltd. CONFIDENTIAL

ソフトウェアの進化
既に多くのソフトウェアが機能的には
成熟し、機能だけでは競争優位を保つ
ことができない状態
更なる顧客確保、生産性の向上のため、
この転換期においてエクスペリエンス
を差別化要因として考えてみては？
71
2nd FACTORY CO.,Ltd. CONFIDENTIAL

重要なファクター：クラウドコンピューティング
「クラウドコンピューティングは、ITサービスの工業化と
コモディティ化に向かう破壊的なトレンドである」
「市場の利益率を超えているサービスは減少する」
「価格モデルはさらに競争が激化し、簡素化され、標準化が進む」
「あらたなITサービスを調達するときのオプションとして、
クラウドコンピューティングサービスを検討すべき」
「ベンダーが提示する価格の競争力を確認し、クラウドと従来のITモデル
を比較したときに、クラウドコンピューティングプロバイダとの関係管理に
必要となる作業の削減方法を見つけるべき」
「ベンダー管理の必要性の低下」「定期的なサービスレベルの報告と追
跡は標準化され、最小限にできる」「ベンダー関係とそのために必要な管
理の重要性が低下する」「ベンダーとの関係は、個々の取引ごとになり、
戦略性が薄れる」
2008.11 – Gartner -
72
2nd FACTORY CO.,Ltd. CONFIDENTIAL

エクササイズ：大手SIのシステム／ソリューションのカタログ
アーキテクチャ図などをのぞいて、ほ
ぼすべてのシステム／ソリューション
に関して「画面キャプチャ」が無い
コンシューマ向けのアプリケーション
や他業種の製品ではほぼありえないこ
とが普通になっている。
73
2nd FACTORY CO.,Ltd. CONFIDENTIAL

For users …
WYS IWYG
“What You Get Is What You See”
「ユーザーにとっては、目に見えるものがすべて」
74
2nd FACTORY CO.,Ltd. CONFIDENTIAL

1953 75
2nd FACTORY CO.,Ltd. CONFIDENTIAL

76
2nd FACTORY CO.,Ltd. CONFIDENTIAL

77
2nd FACTORY CO.,Ltd. CONFIDENTIAL

78
2nd FACTORY CO.,Ltd. CONFIDENTIAL

79
2nd FACTORY CO.,Ltd. CONFIDENTIAL

80
2nd FACTORY CO.,Ltd. CONFIDENTIAL

FPD International 2008
81
2nd FACTORY CO.,Ltd. CONFIDENTIAL

FPD International 2008
82
2nd FACTORY CO.,Ltd. CONFIDENTIAL

HITACHI CEATEC JAPAN 2008
83
2nd FACTORY CO.,Ltd. CONFIDENTIAL

Microsoft Surface
84
2nd FACTORY CO.,Ltd. CONFIDENTIAL

NUI + Microsoft
85
2nd FACTORY CO.,Ltd. CONFIDENTIAL

iPod → iPhone
86
2nd FACTORY CO.,Ltd. CONFIDENTIAL

エクササイズ：身の回りの「UI」を思い出してみよう
日常生活に優れたユーザーインター
フェイスが浸透しつつある
ユーザーは、
業務システムを
どのように見ているだろうか？
87
2nd FACTORY CO.,Ltd. CONFIDENTIAL

エクササイズ：水道の蛇口
88
2nd FACTORY CO.,Ltd. CONFIDENTIAL

エクササイズ：大変だ！このままじゃ火事になる！
89
2nd FACTORY CO.,Ltd. CONFIDENTIAL

エクササイズ：大変だ！このままじゃ火事になる！
① ② ③ ④
90
2nd FACTORY CO.,Ltd. CONFIDENTIAL

基本的なユーザビリティの概念
91
2nd FACTORY CO.,Ltd. CONFIDENTIAL

業務システムとUX
システムの顔であり入出力
の起点であるUIを通じて、
ユーザーの業務システム
を通じた体験をよりよい
ものにできるはず！
92
2nd FACTORY CO.,Ltd. CONFIDENTIAL

2 参考：RIAとは？
93
2nd FACTORY CO.,Ltd. CONFIDENTIAL

リッチインターネットアプリケーションとは？
wikipedia :
リッチインターネットアプリケーション
（Rich Internet Application、RIA）は、
ウェブブラウザなどのクライアントの機能
を活かした、柔軟なインターフェースをも
つウェブアプリケーションのこと。従来の
DHTMLやFlashなどの新しい技術が含まれ
る総称的な概念である。
94
2nd FACTORY CO.,Ltd. CONFIDENTIAL

では、アプリケーションとは？
wikipedia :
アプリケーションソフトウェア、応用ソ
フトウェア（Application Software）とは、
コンピュータの基本ソフトウェアの上で
動作し、
特定の目的を果たすための機能を提供
するソフトウェアのこと。
95
2nd FACTORY CO.,Ltd. CONFIDENTIAL

再：リッチインターネットアプリケーションとは？
なんらかのリッチな要素があり、イン
ターネットを利用していて、特定の目的
を果たすための機能を提供するソフト
ウェア
ユーザーを含む全てのステークホル
ダーに豊かな体験を提供し、リッチを感
じていただく取り組み
96
2nd FACTORY CO.,Ltd. CONFIDENTIAL

では、リッチとは？
Adobe Systems Technical Evangelist
James Wardが考える”リッチ”を構成する要素
Connected（接続性）
Alive（躍動感）
Interactive（双方向）
Responsive（反応が良い）
97
2nd FACTORY CO.,Ltd. CONFIDENTIAL

そのリッチで変わるものは？
システムの利用率
単位時間当たりの生産性
成功割合の向上とユーザーエラーの削減
サポートコストの削減
なによりユーザーのロイヤルティ！
98
2nd FACTORY CO.,Ltd. CONFIDENTIAL

成功割合の向上とユーザーエラーの削減
NCRの調査によると、良いデザインの基本原理に従ってスクリーンを再デザインす
ると、スループットは25%向上し、かつエラーは25%減少します。
[Gallaway, 1981]
Zone Researchの調査によると、62%のWeb顧客はオンラインで購入したい項目を
探すのをあきらめています。（そして、20%は2ヶ月の間に3回以上あきらめていま
す。）
[Nielsen, 1998b]
15の大きなコマーシャルサイトのJared Spoolの研究によると、たとえテスト作業
が与えられる前に正しいホームページにいたとしても、ユーザーは時間内に42%し
か情報を見つけられません。
[Nielsen, 1998b]
99
2nd FACTORY CO.,Ltd. CONFIDENTIAL

エクササイズ：最近提案したプロジェクトのきっかけは？
「残念ながら現在のIT投資状況は
保守・運用管理向けが8割で、革新向
けの投資はわずか2割にすぎない。」
-マイクロソフト -
新しくパイを広げるような
新規プロジェクトを作るためには、
わかりやすい訴求が必要
100
2nd FACTORY CO.,Ltd. CONFIDENTIAL

UXと数字
JAL 1.6 -> 2.3
JRA 95%
PASONA “0”
101
2nd FACTORY CO.,Ltd. CONFIDENTIAL

アーキテクチャ設計の重要性
102
2nd FACTORY CO.,Ltd. CONFIDENTIAL

アーキテクチャ分割の検討をしない場合
グラフィック等のアセット
インタラクション
UI（WF）
ビジネスロジック
ゲートウェイ
最表層以外の要素の変更が全体に影響する
103
2nd FACTORY CO.,Ltd. CONFIDENTIAL

アーキテクチャの分割検討を行った場合
グラフィック等のアセット
インタラクション
UI（WF）
ビジネスロジック
ゲートウェイ
可変領域と安定領域にアーキテクチャ的な分割を行うことで
長期運用に対応した変更しやすい構造を作ることが出来る
104
2nd FACTORY CO.,Ltd. CONFIDENTIAL

インタラクション≠アニメーション
「業務システムにはアニメーションは
必要ないだろう」という意見
インタラクションはユーザーの動きを
正しく促すためのガイドと捉える
105
2nd FACTORY CO.,Ltd. CONFIDENTIAL

クラウドコンピューティング等の台頭にあたり：
機能の一つ一つではなく、それらが相
互に作用し、一連の文脈的意味を持つ
シナリオを作る必要がある
業務知識を持って、それぞれの機能を
縫い合わせ、デザインされたUXと
一体となるアーキテクチャ設計が必要
106
2nd FACTORY CO.,Ltd. CONFIDENTIAL

アーキテクチャとともに重要な考え方
デザイン
は
実装
するものである。
107
2nd FACTORY CO.,Ltd. CONFIDENTIAL

プロジェクトファシリテーションタイプ
system design
Architecture
I/O, API
I/O, API
108
2nd FACTORY CO.,Ltd. CONFIDENTIAL

ユーザーエクスペリエンスコンサルティングタイプ
Customer
PM
Development Team, Companies
109
2nd FACTORY CO.,Ltd. CONFIDENTIAL

エクスペリエンスデザイン適用タイプ
system
110
2nd FACTORY CO.,Ltd. CONFIDENTIAL

エクスペリエンスアーキテクチャ適用タイプ
Design
111
2nd FACTORY CO.,Ltd. CONFIDENTIAL

エクスペリエンスデベロップメント提供タイプ
Customer
PM
Produce, Direction
112
2nd FACTORY CO.,Ltd. CONFIDENTIAL

セカンドファクトリーの基本開発ワークフロー
113
2nd FACTORY CO.,Ltd. CONFIDENTIAL

マイクロソフトのRIAテクノロジーへのアプローチ
114
2nd FACTORY CO.,Ltd. CONFIDENTIAL

これまでのRIA : Surfing
変化する環境の中である時点で最高のパフォーマンスを出す。
同様のパフォーマンスを安定して提供することは難しい。
個人の技能に依存する割合が非常に大きい。
115
2nd FACTORY CO.,Ltd. CONFIDENTIAL

これからのRIA : sk8 + rampage
ある安定した環境をベースとして信頼し、
その上で最高のパフォーマンスを出す。
安定環境に再現性があるため、パフォーマンスに集中できる。
環境を作成／維持するメンバーを含めたチームプレイ。
116
2nd FACTORY CO.,Ltd. CONFIDENTIAL