【13-c-3】 ria 開発をとりまく技術の進化と環境の変化
TRANSCRIPT
2nd FACTORY CO.,Ltd. CONFIDENTIAL
Developer Summit 2009:
2009/02/13株式会社セカンドファクトリー
シニアエクスペリエンスアーキテクト
東 賢
RIA環境を取り巻く技術の進化と環境の変化 -
technology evolution and changing environment in RIA development
-
2nd FACTORY CO.,Ltd. CONFIDENTIAL 1
長年のRIA開発経験と独自の構築プロセスに基づき、革新的なイ
ンターフェイスを持つアプリケーションを提供します。
アプリケーションやWebサイトを使いやすい「道具」と考え、毎日
使うものだからこそユーザビリティや優しさを確保した豊かなエク
スペリエンスを実現します。
2ndfactory=2FCはRIAを通じクライアントにはROIの最大化とビジ
ネスの成功を、そしてエンドユーザーには豊かなエクスペリエンス
をお届けします。
アプリケーションに優しさを。そして、おもてなしの心を。
2nd
FACTRY Co., ltd
2nd FACTORY CO.,Ltd. CONFIDENTIAL 2
Senior Experience Architect
of 2ndfactory
[email protected] 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
About me : Ken Azuma (東 賢)
2nd FACTORY CO.,Ltd. CONFIDENTIAL 3
20082008年は年はUXUX元年元年だっただった
2008年に何が起こったか?
2nd FACTORY CO.,Ltd. CONFIDENTIAL 4
各企業は各企業はUXUXの重要性の重要性をを
(一応)(一応)理解/認識理解/認識したした
2008年に何が起こったか?
2nd FACTORY CO.,Ltd. CONFIDENTIAL 5
What is UXWhat is UX↓↓
How to do How to do For better UXFor better UX
2008年に何が起こったか?
2nd FACTORY CO.,Ltd. CONFIDENTIAL 6
Portions of “How”: 知りたいところ
2nd FACTORY CO.,Ltd. CONFIDENTIAL 7
Portions of “How”: 知りたいところ
プラットフォーム
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
Adobe Flash Platform Overview
Flash Player
Flex Flash Media Server Family
Tools to Design and Develop Clients ServersFramework
AIRFlash CS4 Professional
Flash Catalyst Flex Builder
Data Services
Applications, Content and Video
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
Adobe Flash Platform Architecture
Flex Builder
Flex
Flash Media Server Family
Flash Catalyst
Flash CS4 Professional
Tools to Design and Develop
Clients
Servers
Framework
AMF, XML, JSON, SOAP, RSS, ATOM, etc.HTTP/S, Sockets, RTMP, etc.
Flash PlayerAIR
Applications, Content and Video
BlazeDSData Services
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
Adobe Flash Platform Architecture
Flex Builder
Flash Player
Flex
Flash Catalyst
Flash CS4 Professional
Tools to Design and Develop
Clients
Servers
Framework
AIR
AMF, XML, JSON, SOAP, RSS, ATOM, etc.HTTP/S, Sockets, RTMP, etc.
Applications, Content and Video
Flash Media Server Family
BlazeDSData Services
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
Runtimes
Browsers JavaScript,
HTML, CSS, etc
DOM APIsFlash Player
H.264 VideoAAC Audio Real-time data
ActionScript PixelBender
3D Effects
E4X, Binary Data
Adobe Flash Platform Architecture: Client
Clients / Servers
AIR
JavaScript,
HTML, CSS, etc.
ActionScript
OS / Desktop Integration
Local Storage
PDF Integration
Persistent Applications
Operating Systems
AMF, XML, JSON, SOAP, RSS, ATOM, etc.HTTP/S, Sockets, RTMP, etc.
FrameworkFlex
MXML
ActionScript
Components
Declarative UI
Applications, Content and Video
Mac, Windows, Linux, Symbian, Windows Mobile, Wii, PlayStation, etc.
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
Adobe Flash Platform Architecture
Flex Builder
Flash Player
Flex
Flash Catalyst
Flash CS4 Professional
Tools to Design and Develop
Clients
Servers
Framework
AIR
AMF, XML, JSON, SOAP, RSS, ATOM, etc.HTTP/S, Sockets, RTMP, etc.
Applications, Content and Video
Flash Media Server Family
BlazeDSData Services
ColdFusion“Centaur”
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
Adobe Flash Platform Architecture: Server
Clients / Servers XML, JSON, SOAP, RSS, ATOM, etc.HTTP/S, Sockets, RTMP, etc.
Resource TiersDatabasesDatabases DirectoriesDirectories ECM
Repository
ECM
Repository
Message
Queues
Message
Queues
Legacy
Systems
Legacy
Systems
Servers
Flash Media Server Family
On-Demand & Live Streaming
Real Time
Interactivity
Protected Streams
LiveCycle ES
Process Automation
Security
Data Capture and Output
ColdFusion
Enterprise Services
Remoting/AMF
Data Management
Partner Services and other Server Platforms
Messaging
Remoting
BlazeDS
Data Services
Data Management
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
AMF, XML, JSON, SOAP, RSS, ATOM, etc.HTTP/S, Sockets, RTMP, etc.
Adobe Flash Platform Architecture
Flex Builder
Flash®
Player
Flex®
Flash Catalyst
Flash CS4 Professional
Tools to Design and Develop
Clients
Servers
Framework
AIR™
Applications, Content and Video
Flash Media Server Family
BlazeDSData Services
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
Adobe Flash Platform Architecture: Tooling
Creative Suite Tools
After Effects®
Fireworks®
Dreamweaver
®
Illustrator®
Photoshop®
Acrobat®
FXG
Tools to Design and Develop
Flex Builder
Eclipse IDE
Code Profiling
Debugging
Flash CS4 Professional
Interactive
Content
Animation
Visual Layout
Flash CatalystProto-typing
Design / Develop
Workflow
Copyright 2008 Microsoft Corporation . 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
not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the 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.
©
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 not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the 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(HTML)
Windows Forms
Win32
Direct 3D v9
Availability: Availability: 2005 2006
DHTML(AJAX)
1997
ASP.NET AJAX
Direct 3Dv10
Microsoft
Office
WindowsPresentationFoundation
Silverlight
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
RichnessRichness
ReachReach
CodePlex CodePlex ProjectProject
New ControlsNew Controls
Iterative releases (6‐8w)
Component “Quality Bands”ExperimentalPreviewStableMature
SDK/Tools SDK/Tools ReleaseRelease
• Customer Feedback Driven• May include new components• “No‐brainer”
upgrade
• “Mature”
band controls
delivered with SDK/Tools•
Customers can replace with
CodePlex release for full
control package
Core Core RuntimeRuntime
Some controls may
move to core runtime
Business Application FrameworksBusiness Application Frameworks
Base FrameworksBase Frameworks
Base PlatformBase Platform
Network /ServicesNetwork /Services
ControlsControlsData
BindingData
Binding
CLRCLR
Core UI EngineCore UI Engine
Data Shaping•
XML
•
LINQ
Data Shaping• XML• LINQ
Business
Logic
Business
Logic ValidationValidation App ServicesApp Services
NavigationNavigation
Data LoadingData Loading
Control ModelControl Model
Business
Controls
Business
Controls
Application Architecture for .NET
Service Interfaces
USERS
UI components
UI Process components
BusinessEntities
BusinessWorkflows
BusinessComponents
Data Access Logic Components ServiceAgents
Data Sources Services
Sec
urity
Ope
ratio
nal M
anag
emen
t
Com
mun
icat
ion
2nd FACTORY CO.,Ltd. CONFIDENTIAL 26
Portions of “How”: 知りたいところ
開発手法
2nd FACTORY CO.,Ltd. CONFIDENTIAL 27
Key components of RIA platform
2nd FACTORY CO.,Ltd. CONFIDENTIAL 29
インタラクティブアプリケーションに必要な要素
AssetAsset ビットマップやベクターなどを用いた様々なグラフィックファイル<XAMLそのものやJPEG/PNGなどのファイル>
InteractionInteraction アニメーションやステート間のトランジション<XAMLのstoryboardによるアニメーション>
LayoutLayout アプリケーションの各画面におけるUIのレイアウト<XAMLのLayoutコントロールによるレイアウト>
UI ControlUI Control イベントハンドラやデータホルダを含むUIコントロール<XAMLによるボタンやグリッドなどのUIコントロール>
Control LogicControl Logic 画面制御のためのコントロールロジック<.NET言語による画面ステートの制御ロジックやバリデーションなど>
Business LogicBusiness Logic アプリケーションの実態であるビジネスロジック<.NET言語によるビジネスロジックの実装>
2nd FACTORY CO.,Ltd. CONFIDENTIAL 30
開発手法:Des/Devチームの分け方
インテグレータモデルインテグレータモデル
ハーベストモデルハーベストモデル
コラボレーションモデルコラボレーションモデル
2nd FACTORY CO.,Ltd. CONFIDENTIAL 31
セカンドファクトリーのチームモデル
2nd FACTORY CO.,Ltd. CONFIDENTIAL 32
セカンドファクトリーのチームモデル
Business DomainBusiness Domain
Presentation DomainPresentation Domain
System DomainSystem Domain
2nd FACTORY CO.,Ltd. CONFIDENTIAL 33
insideinside--outout OutsideOutside--inin
セカンドファクトリーのチームモデル
Business DomainBusiness Domain
Presentation DomainPresentation Domain
System DomainSystem Domain
2nd FACTORY CO.,Ltd. CONFIDENTIAL 34
セカンドファクトリーのチームモデル
Business DomainBusiness Domain
Presentation DomainPresentation Domain
System DomainSystem Domain
ビジネスゴールビジネスゴール
デザイン(広義)デザイン(広義)
実装実装
2nd FACTORY CO.,Ltd. CONFIDENTIAL 35
ロールとツールの関係(Microsoft)
システムシステムデベロッパーデベロッパー
インタラクションインタラクションデベロッパーデベロッパー
グラフィックグラフィックデザイナーデザイナー
C#XAML
graphics
Visual
Studio Expression Blend Expression Design
Other Tools
XAMLを媒介として、すべての実装メンバーが開発中のUI におけるUXを常に確認しながら開発できる体制が
ツールとの連携によって整っている
2nd FACTORY CO.,Ltd. CONFIDENTIAL 36
ロールとツールの関係(Adobe)
システムシステムデベロッパーデベロッパー
インタラクションインタラクションデベロッパーデベロッパー
グラフィックグラフィックデザイナーデザイナー
Action ScriptMXML
FXG / graphics
Flex Builder Flash Catalyst Illustrator
Other Tools
新たにFXGフォーマットが加わることによって、CS4シリーズの圧倒的シェアを活かす土壌が整い、Flexフレームワークによる開発でより高度な分業が
可能となった。
2nd FACTORY CO.,Ltd. CONFIDENTIAL 37
開発手法:会社/拠点間の分業
ある規模以上の開発を行う場合、調達の観点からも分業可能な体制が望まれるが、UX検討そのものは
分業が難しい作業が多い
同じコンセプトを共有同じコンセプトを共有しつつも実装をしつつも実装を 確定的に落とし込んでいくことが重要確定的に落とし込んでいくことが重要
多くのケースでは、下層レイヤーの多くのケースでは、下層レイヤーの分業が検討しやすい分業が検討しやすい
2nd FACTORY CO.,Ltd. CONFIDENTIAL 38
開発手法:テスト
オートメーションテストオートメーションテスト
エモーショナルテストエモーショナルテスト
2nd FACTORY CO.,Ltd. CONFIDENTIAL 39
Portions of “How”: 知りたいところ
プロトタイピング
2nd FACTORY CO.,Ltd. CONFIDENTIAL 40
プロトタイプとは?
デモンストレーション目的や新技術・新機構の 検証、量産前での問題点の洗い出しのために 設計・仮組み・製造された試験機・試作回路・ コンピュータプログラムのことを指す。
検証/問題点の洗い出しのため検証/問題点の洗い出しのために存在し、に存在し、その全てを製品開発にその全てを製品開発に
流用できるものではない。流用できるものではない。
2nd FACTORY CO.,Ltd. CONFIDENTIAL 41
プロトタイプ/モックアップ
プロトタイププロトタイプ
モックアップモックアップ
2nd FACTORY CO.,Ltd. CONFIDENTIAL 42
多くのUXに優れた製品では、大きく差別化をできる ポイントは全体に対して一 部であり、多くの部分で典 型的なパターンを利用して いることが多い。
どこをプロトタイピングするか?
2nd FACTORY CO.,Ltd. CONFIDENTIAL 43
Demo : Quince
2nd FACTORY CO.,Ltd. CONFIDENTIAL 44
ビルディングブロック
2nd FACTORY CO.,Ltd. CONFIDENTIAL 45
市販コンポーネント
2nd FACTORY CO.,Ltd. CONFIDENTIAL 46
オープンソースコンポーネント/ライブラリ
2nd FACTORY CO.,Ltd. CONFIDENTIAL 47
Amazon EC2Akamai Edge ComputingWindows Azure
SalesForceSAPSocial API
SaaS
Brightcove Inc.
2nd FACTORY CO.,Ltd. CONFIDENTIAL 49
改善のための計測
2nd FACTORY CO.,Ltd. CONFIDENTIAL 50
復習:RIAテクノロジー選択のポイント
十分なエクスペリエンスを提供できるか十分なエクスペリエンスを提供できるか
クライアントの動作環境にマッチしているかクライアントの動作環境にマッチしているか
将来の配布にあたって不要なコストがかからないか将来の配布にあたって不要なコストがかからないか
開発者人口が十分か開発者人口が十分か提供企業が安定した体制を持っているか提供企業が安定した体制を持っているか
アプリケーションライフサイクルの視点で検討するアプリケーションライフサイクルの視点で検討する
総合的に見てマイクロソフトやアドビの総合的に見てマイクロソフトやアドビの
テクノロジーが優位といえるテクノロジーが優位といえる
2nd FACTORY CO.,Ltd. CONFIDENTIAL 51
復習:従来のHTMLやWinFormではだめなのか?
根本的にはテクノロジーの問題では根本的にはテクノロジーの問題ではない。状況に応じてもっとも都合のよない。状況に応じてもっとも都合のよ
いテクノロジーを選択すればよい。いテクノロジーを選択すればよい。
••コンセプトに従い、コンセプトに従い、一貫した操作性一貫した操作性 を提供しているか?を提供しているか?
••優優れたれたUXUXをを継続的に支えるアーキテ継続的に支えるアーキテ クチャ設計クチャ設計があるか?があるか?
2nd FACTORY CO.,Ltd. CONFIDENTIAL 52
ユーザーエクスペリエンスとは?(復習)
情報システム部門情報システム部門の連中は分の連中は分 かっていない。今かっていない。今変更/改善変更/改善 することがどれだけ重要か。することがどれだけ重要か。ユーザー部門ユーザー部門の連中は分かっの連中は分かっ ていない。システムをていない。システムを安定稼安定稼 動動させることがどれだけ重要させることがどれだけ重要 か。か。
2nd FACTORY CO.,Ltd. CONFIDENTIAL 53
結論:どちらも正しい
時間軸
検討レベル ギャップを埋めるための
アーキテクチャが必要
システム開発システム開発
ユーザー部門ユーザー部門
2nd FACTORY CO.,Ltd. CONFIDENTIAL 54
カットオーバーはスタートライン
プロジェクトはカットオーバーをもってプロジェクトはカットオーバーをもって 終了するようなものではなく、終了するようなものではなく、
アプリケーションのライフサイクルにアプリケーションのライフサイクルに 沿って継続的に改善されるべきものだ。沿って継続的に改善されるべきものだ。
そのため、利用動向を知るための計測がそのため、利用動向を知るための計測が 必要であり、計測データをもとに改善に必要であり、計測データをもとに改善に 対応するアーキテクチャ設計が必要。対応するアーキテクチャ設計が必要。
2nd FACTORY CO.,Ltd. CONFIDENTIAL 55
ビジネスロジックビジネスロジック
UIUI((WFWF))
グラフィック等のアセットグラフィック等のアセット
インタラクションインタラクション
ゲートウェイゲートウェイ
可変領域と安定領域にアーキテクチャ的な分割を行うことで可変領域と安定領域にアーキテクチャ的な分割を行うことで長期運用に対応した変更しやすい構造を作ることが出来る長期運用に対応した変更しやすい構造を作ることが出来る
アーキテクチャの分割検討を行った場合
2nd FACTORY CO.,Ltd. CONFIDENTIAL 56
© 2009 Omniture Inc.
•
マーケティング部門のテクノロジーパートナー
•
オンラインビジネス最適化を実現するための オンラインマーケティングスイートを提供
2nd FACTORY CO.,Ltd. CONFIDENTIAL 57
Experience is an iceberg
見えている部分は全体の一部分にしか過ぎない。検討するべきエクスペリエンスは
見えない部分も含めた全体を対象とする。
2nd FACTORY CO.,Ltd. CONFIDENTIAL 58
QuestionQuestion ??
2nd FACTORY CO.,Ltd. CONFIDENTIAL 59
2nd FACTORY CO.,Ltd. CONFIDENTIAL 60
参考:UXとは?1
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 65
UXケーススタディ:スターバックス
2nd FACTORY CO.,Ltd. CONFIDENTIAL 66
UXケーススタディ:ハーレーダビッドソン
2nd FACTORY CO.,Ltd. CONFIDENTIAL 67
UXケーススタディ:寿司屋
2nd FACTORY CO.,Ltd. CONFIDENTIAL 68
これらのこれらの体験体験はは
点点ではなくではなく線線でで
生み出されている生み出されている
リアルな体験から学ぶべきこと
2nd FACTORY CO.,Ltd. CONFIDENTIAL 69
ユーザーエクスペリエンスとは?(復習)
ユーザーが商品/サービスをユーザーが商品/サービスを 通じて感じるすべての通じて感じるすべての体験体験
↓最良の体験の提供が競合に対最良の体験の提供が競合に対
する優位を得るためのする優位を得るための
差別化要因差別化要因となるとなる
2nd FACTORY CO.,Ltd. CONFIDENTIAL 70
プロダクトの進化
産業革命以後の生産能力向上に産業革命以後の生産能力向上に
よって多くの製品がよって多くの製品が差別化差別化を考を考
えるに至ったえるに至った
1885年製メルセデス
2nd FACTORY CO.,Ltd. CONFIDENTIAL 71
ソフトウェアの進化
既に多くのソフトウェアが機能的には 成熟し、機能だけでは競争優位を保つ ことができない状態
更なる顧客確保、生産性の向上のため、更なる顧客確保、生産性の向上のため、 この転換期においてこの転換期においてエクスペリエンスエクスペリエンス
をを差別化要因差別化要因として考えてみては?として考えてみては?
2nd FACTORY CO.,Ltd. CONFIDENTIAL 72
重要なファクター:クラウドコンピューティング
「クラウドコンピューティングは、「クラウドコンピューティングは、ITITサービスの工業化とサービスの工業化と
コモディティ化に向かう破壊的なトレンドである」コモディティ化に向かう破壊的なトレンドである」「市場の利益率を超えているサービスは減少する」「市場の利益率を超えているサービスは減少する」
「価格モデルはさらに競争が激化し、簡素化され、標準化が進む」「価格モデルはさらに競争が激化し、簡素化され、標準化が進む」「あらたな「あらたなITITサービスを調達するときのオプションとして、サービスを調達するときのオプションとして、
クラウドコンピューティングサービスを検討すべき」クラウドコンピューティングサービスを検討すべき」「ベンダーが提示する価格の競争力を確認し、クラウドと従来の「ベンダーが提示する価格の競争力を確認し、クラウドと従来のITITモデルモデル
を比較したときに、クラウドコンピューティングプロバイダとの関係管理にを比較したときに、クラウドコンピューティングプロバイダとの関係管理に
必要となる作業の削減方法を見つけるべき」必要となる作業の削減方法を見つけるべき」「ベンダー管理の必要性の低下」「定期的なサービスレベルの報告と追「ベンダー管理の必要性の低下」「定期的なサービスレベルの報告と追
跡は標準化され、最小限にできる」「ベンダー関係とそのために必要な管跡は標準化され、最小限にできる」「ベンダー関係とそのために必要な管
理の重要性が低下する」「ベンダーとの関係は、個々の取引ごとになり、理の重要性が低下する」「ベンダーとの関係は、個々の取引ごとになり、
戦略性が薄れる」戦略性が薄れる」
2008.112008.11
––
GartnerGartner
--
2nd FACTORY CO.,Ltd. CONFIDENTIAL 73
エクササイズ:大手SIのシステム/ソリューションのカタログ
アーキテクチャ図などをのぞいて、ほ ぼすべてのシステム/ソリューション に関して「画面キャプチャ」が無い
コンシューマ向けのアプリケーションコンシューマ向けのアプリケーション や他業種の製品ではや他業種の製品ではほぼありえないほぼありえないここ とが普通になっている。とが普通になっている。
2nd FACTORY CO.,Ltd. CONFIDENTIAL 74
For users …
WYS IWYGWYS IWYG
“What You Get Is What You See”「ユーザーにとっては、目に見えるものがすべて」
2nd FACTORY CO.,Ltd. CONFIDENTIAL 75
1953
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 81FPD International 2008
2nd FACTORY CO.,Ltd. CONFIDENTIAL 82FPD International 2008
2nd FACTORY CO.,Ltd. CONFIDENTIAL 83CEATEC JAPAN 2008HITACHI
2nd FACTORY CO.,Ltd. CONFIDENTIAL 84
Microsoft Surface
2nd FACTORY CO.,Ltd. CONFIDENTIAL 85
NUI + Microsoft
2nd FACTORY CO.,Ltd. CONFIDENTIAL 86
iPod
→ iPhone
2nd FACTORY CO.,Ltd. CONFIDENTIAL 87
エクササイズ:身の回りの「UI」を思い出してみよう
日常生活に優れたユーザーインター日常生活に優れたユーザーインター フェイスが浸透しつつあるフェイスが浸透しつつある
ユーザーは、ユーザーは、業務システム業務システムをを
どのように見ているだろうか?どのように見ているだろうか?
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 92
業務システムとUX
システムのシステムの顔顔でありであり入出力入出力 の起点であるの起点であるUIUIを通じて、を通じて、 ユーザーのユーザーの業務システム業務システム を通じた体験を通じた体験をよりよいをよりよい
ものにできるはず!ものにできるはず!
2nd FACTORY CO.,Ltd. CONFIDENTIAL 93
参考:RIAとは?2
2nd FACTORY CO.,Ltd. CONFIDENTIAL 94
リッチインターネットアプリケーションとは?
wikipedia : wikipedia : リッチインターネットアプリケーションリッチインターネットアプリケーション
((Rich Internet ApplicationRich Internet Application、、RIARIA)は、)は、 ウェブブラウザなどのクライアントの機能ウェブブラウザなどのクライアントの機能
を活かした、柔軟なインターフェースをもを活かした、柔軟なインターフェースをも つウェブつウェブアプリケーションアプリケーションのこと。従来ののこと。従来の DHTMLDHTMLややFlashFlashなどの新しい技術が含まれなどの新しい技術が含まれ る総称的な概念である。る総称的な概念である。
2nd FACTORY CO.,Ltd. CONFIDENTIAL 95
では、アプリケーションとは?
wikipedia : wikipedia : アプリケーションソフトウェア、応用ソアプリケーションソフトウェア、応用ソ
フトウェア(フトウェア(Application SoftwareApplication Software)とは、)とは、 コンピュータの基本ソフトウェアの上でコンピュータの基本ソフトウェアの上で
動作し、動作し、 特定の目的を果たすための機能を提供特定の目的を果たすための機能を提供
するソフトウェアのこと。するソフトウェアのこと。
2nd FACTORY CO.,Ltd. CONFIDENTIAL 96
再:リッチインターネットアプリケーションとは?
なんらかのリッチな要素があり、イン ターネットを利用していて、特定の目的
を果たすための機能を提供するソフト ウェア
ユーザーを含む全てのステークホル ダーに豊かな体験を提供し、リッチを感
じていただく取り組み
2nd FACTORY CO.,Ltd. CONFIDENTIAL 97
では、リッチとは?
Adobe Systems Technical Evangelist James Wardが考える”リッチ”を構成する要素
Connected(接続性)
Alive(躍動感)
Interactive(双方向)
Responsive(反応が良い)
2nd FACTORY CO.,Ltd. CONFIDENTIAL 98
そのリッチで変わるものは?
システムの利用率システムの利用率
単位時間当たりの生産性単位時間当たりの生産性
成功割合の向上とユーザーエラーの削減成功割合の向上とユーザーエラーの削減
サポートコストの削減サポートコストの削減
なによりユーザーのロイヤルティ!なによりユーザーのロイヤルティ!
2nd FACTORY CO.,Ltd. CONFIDENTIAL 99
成功割合の向上とユーザーエラーの削減
NCRNCRの調査によると、良いデザインの基本原理に従ってスクリーンを再デザインすの調査によると、良いデザインの基本原理に従ってスクリーンを再デザインす
ると、スループットはると、スループットは25%25%向上し、かつエラーは向上し、かつエラーは25%25%減少します。減少します。
[Gallaway, 1981][Gallaway, 1981]
Zone ResearchZone Researchの調査によると、の調査によると、62%62%ののWebWeb顧客はオンラインで購入したい項目を顧客はオンラインで購入したい項目を
探すのをあきらめています。(そして、探すのをあきらめています。(そして、20%20%はは22ヶ月の間にヶ月の間に33回以上あきらめていま回以上あきらめていま
す。)す。)
[Nielsen, 1998b][Nielsen, 1998b]
1515の大きなコマーシャルサイトのの大きなコマーシャルサイトのJaredJared
SpoolSpoolの研究によると、たとえテスト作業の研究によると、たとえテスト作業
が与えられる前に正しいホームページにいたとしても、ユーザーは時間内にが与えられる前に正しいホームページにいたとしても、ユーザーは時間内に42%42%しし
か情報を見つけられません。か情報を見つけられません。
[Nielsen, 1998b][Nielsen, 1998b]
2nd FACTORY CO.,Ltd. CONFIDENTIAL 100
エクササイズ:最近提案したプロジェクトのきっかけは?
「残念ながら現在の「残念ながら現在のITIT投資状況は投資状況は 保守・運用管理向けが保守・運用管理向けが88割で、革新向割で、革新向
けの投資はわずかけの投資はわずか22割にすぎない。」割にすぎない。」--マイクロソフトマイクロソフト
--
新しくパイを広げるような新しくパイを広げるような新規プロジェクトを作るためには、新規プロジェクトを作るためには、
わかりやすい訴求わかりやすい訴求が必要が必要
2nd FACTORY CO.,Ltd. CONFIDENTIAL 101
UXと数字
JAL 1.6 JAL 1.6 --> 2.3> 2.3
JRAJRA 95%95%
PASONA PASONA ““00””
2nd FACTORY CO.,Ltd. CONFIDENTIAL 102
アーキテクチャ設計の重要性
2nd FACTORY CO.,Ltd. CONFIDENTIAL 103
最表層以外の要素の変更が全体に影響する最表層以外の要素の変更が全体に影響する
グラフィック等のアセットグラフィック等のアセット
インタラクションインタラクションUIUI((WFWF))
ビジネスロジックビジネスロジックゲートウェイゲートウェイ
アーキテクチャ分割の検討をしない場合
2nd FACTORY CO.,Ltd. CONFIDENTIAL 104
ビジネスロジックビジネスロジック
UIUI((WFWF))
グラフィック等のアセットグラフィック等のアセット
インタラクションインタラクション
ゲートウェイゲートウェイ
可変領域と安定領域にアーキテクチャ的な分割を行うことで可変領域と安定領域にアーキテクチャ的な分割を行うことで長期運用に対応した変更しやすい構造を作ることが出来る長期運用に対応した変更しやすい構造を作ることが出来る
アーキテクチャの分割検討を行った場合
2nd FACTORY CO.,Ltd. CONFIDENTIAL 105
インタラクション≠アニメーション
「業務システムにはアニメーションは「業務システムにはアニメーションは 必要ないだろう」という意見必要ないだろう」という意見
インタラクションはユーザーの動きをインタラクションはユーザーの動きを 正しく促すためのガイドと捉える正しく促すためのガイドと捉える
2nd FACTORY CO.,Ltd. CONFIDENTIAL 106
クラウドコンピューティング等の台頭にあたり:
機能の一つ一つではなく、それらが相機能の一つ一つではなく、それらが相 互に作用し、互に作用し、一連の文脈的意味を持つ一連の文脈的意味を持つ シナリオシナリオを作る必要があるを作る必要がある
業務知識を持って、それぞれの機能を業務知識を持って、それぞれの機能を 縫い合わせ、縫い合わせ、デザインされたデザインされたUXUXとと
一体となるアーキテクチャ設計一体となるアーキテクチャ設計が必要が必要
2nd FACTORY CO.,Ltd. CONFIDENTIAL 107
デザインデザイン はは
実装実装 するものである。するものである。
アーキテクチャとともに重要な考え方
2nd FACTORY CO.,Ltd. CONFIDENTIAL 108
プロジェクトファシリテーションタイプ
I/O, A
PII/O
, API
Architecture
systemsystem designdesign
2nd FACTORY CO.,Ltd. CONFIDENTIAL 109
ユーザーエクスペリエンスコンサルティングタイプ
Development Team, CompaniesDevelopment Team, Companies
CustomerCustomerPM
2nd FACTORY CO.,Ltd. CONFIDENTIAL 110
エクスペリエンスデザイン適用タイプ
systemsystem
2nd FACTORY CO.,Ltd. CONFIDENTIAL 111
エクスペリエンスアーキテクチャ適用タイプ
DesignDesign
2nd FACTORY CO.,Ltd. CONFIDENTIAL 112
エクスペリエンスデベロップメント提供タイプ
Produce, DirectionProduce, Direction
CustomerCustomerPM
2nd FACTORY CO.,Ltd. CONFIDENTIAL 113
セカンドファクトリーの基本開発ワークフロー
2nd FACTORY CO.,Ltd. CONFIDENTIAL 114
マイクロソフトのRIAテクノロジーへのアプローチ
2nd FACTORY CO.,Ltd. CONFIDENTIAL 115
これまでのRIA
:
Surfing
変化する環境の中である時点で最高のパフォーマンスを出す。同様のパフォーマンスを安定して提供することは難しい。
個人の技能に依存する割合が非常に大きい。
2nd FACTORY CO.,Ltd. CONFIDENTIAL 116
これからのRIA
: sk8 + rampage
ある安定した環境をベースとして信頼し、その上で最高のパフォーマンスを出す。
安定環境に再現性があるため、パフォーマンスに集中できる。環境を作成/維持するメンバーを含めたチームプレイ。