これまでのUIとこれからのUI
インフラジスティックス・ジャパン
シニアUXアーキテクト:  東 　賢インフラジスティックス・ジャパン株式会社

ɪnfrəˈdʒɪstɪks：インフラジスティックス
1. ニュージャージーに本社を置く  UI  コントロールを中⼼心としたソフトウェア製品を開発・販売するグローバルカンパニー
2. Infrastructure（基礎構造）+  logistics（後⽅方⽀支援）
3. インフラさん【俗称】

⾃自⼰己紹介• 東 　賢（Ken  Azuma）– インフラジスティックス・ジャパン株式会社– 代表取締役／シニアUXアーキテクト• Emailkazuma@infragistics.com• Bloghttp://bit.ly/IGazuma• Twitter@kenazuma• Facebook

http://www.facebook.com/azuma• LinkedIn

http://www.linkedin.com/in/kenazuma

UXの定義• Wikipedia  の定義

– ユーザーエクスペリエンス（UXと略略記されることが多い）とは、ユーザーがある製品やシステムを使ったときに得られる経験や満⾜足など全体を指す⽤用語である。
– ウェブ上での商品販売などソフトウェアやビジネスに関連して使われることが多いが、インタラクションデザイン全般に適⽤用される概念念である。
– ユーザーエクスペリエンスデザイン（User  Experience  Design）とは、カナダのトロント⼤大学の助教授であったビル・バクストンが提唱したユーザー・インターフェース設計理理論論。

UX? UI?

UX  って、すごい  UI  の事なの？

“UX” の要素
Surface  :  表層
Skeleton  :  ⾻骨格Structure  :  構造
Scope  :  要件
Strategy  :  戦略略Jesse James Garrett’s Elements of User Experience: http://www.jjg.net/elements/

UX Iceberg表層レイヤーでは最終的なビジュアルデザインを表現します

Surface  :  表層
Skeleton  :  ⾻骨格Structure  :  構造
Scope  :  要件
Strategy  :  戦略略骨格レイヤーではレイアウトと機能区画を表現します

Surface  :  表層
Skeleton  :  ⾻骨格Structure  :  構造
Scope  :  要件
Strategy  :  戦略略

構造レイヤーでは状態間のナビゲーションを定義します

Surface  :  表層
Skeleton  :  ⾻骨格Structure  :  構造
Scope  :  要件
Strategy  :  戦略略

タスクペインモーダルダイアログ

リボンウィザードUIにおけるすべての要素は、ユーザータスク＝要件に対応して作られます

Surface  :  表層
Skeleton  :  ⾻骨格Structure  :  構造
Scope  :  要件
Strategy  :  戦略略

ユーザータスク：• 数値を⼊入⼒力力する• テキストを⼊入⼒力力する• 式を⼊入⼒力力する• セルの書式設定を⾏行行う• 情報をソートする• 情報をフィルターする• 情報を集約する• データでグラフ描画する• データを保存する• データをインポートする  • データをエクスポートする• 印刷  •…

ビジネスゴールに向かって想定ユーザーや利用の背景を検討することで戦略を形作ります

Surface  :  表層
Skeleton  :  ⾻骨格Structure  :  構造
Scope  :  要件
Strategy  :  戦略略

ビジネスゴール：• 競合製品を⼊入れ替える• その他の連携製品のセールスに貢献する• 共有のための標準データフォーマットを確⽴立立する• …
想定ユーザー：• 会計担当者• ビジネスプランナー• 主婦• …
利利⽤用の背景：• オフィスのデスクトップ• モバイル環境でのラップトップ• スマートフォン• …

レイヤーの大別
Surface  :  表層
Skeleton  :  ⾻骨格Structure  :  構造
Scope  :  要件
Strategy  :  戦略略

Features : 機能
• ナビゲーションマップ
• ワイヤフレーム• UI  デザインガイドライン

Tasks : タスク• ユーザータスクと⾏行行動、ユースケース• テクノロジーに依存しない

Goals : ゴール• ビジネスゴール• コンセプト• ユーザーゴールに従ったユーザーモデル

UX? UI?

UX  はプロダクトを通じた体験そのものであり、実現するべきゴールです。

UI  は  UX  を実現するための⼿手段であり、アプリケーションの顔です。

「ゴール」「タスク」「機能」の関係を理理解しておくことが重要です

ソフトウェアプロダクト
Tools
機能How?

タスク

What?

ゴール

Why?

UIとUXの比重

ソフトウェアプロダクト
Tools
機能UI	
タスク

ゴール

UX

UX と UI の関係（IGの場合）Infragistics Consulting Service
Integrates User Experience Design Principals
with Agile Development	  Sales	  UX	   UI	  Project	  Ini.a.on	  Engr	  Prod	  Mgt	  UX	  	  UI	  	  	  UI	  UX	  Project	  Execu.on:	  	  	  Phase	  1	  –	  UX	  Concept	  Design	  	  Project	  Execu.on:	  	  	  Phase	  2	  –	  UI	  Implementa.on	  	  	  Devel	  Supt	  UX	   UI	  Project	  Closing	  	  これまでの10年年間

これまでの10年年間で皆さんの周辺にあるアプリケーションがどのように変わってきたのか確認してみましょう2002

2002

2012

2012

その頃のウェブアプリケーション

J2EE  Java  Blueprint“オブジェクト指向”  ”DBとの接続”  ”論論理理構造と⾒見見栄えの曖昧さ”

これまでの10年年間変わったのは機能ではなくUIです
既に差別化の要因や開発上の課題は⼤大きく変化していますiPod / iPhone / iPad

“iPhone”  “iPad”  は形容詞化した。
その後に登場するデバイスの⾦金金額、ジェスチャーの利利⽤用、UIの基本ルールを決定づけた。

これまでの10年年間

この10年年で起こったことは。。。

GUI  =  Good  enough  UI
機能セットの飽和現象

さらなるユーザービリティ、アプリケーション全体に関わるUXの改善が求められるようになった。
仮説：ユーザーニーズ＜提供者の都合？

避けることのできない⼤大波“Consumerization of IT”

ユーザーは普段の⽣生活の中で⾼高度度なIT活⽤用体験を当たり前に享受している

Forrester Research, Inc.、『The Hour Of The Vendor Strategist: Three Mega Business Trends Will Reshape The Tech Sector』

UX がConsumerization of IT を加速する

ユーザーは普段の⽣生活の中で⾼高度度なIT活⽤用体験を当たり前に享受しているユーザーがエンタープライズITにおいても同様の体験を求める傾向が加速する

IDCの予測する
2012年年国内IT市場の主要10項⽬目
1

国内IT市場は、復復興財政⽀支出政策の影響を受け、スマートフォン、ITサービス、ソフトウェアが市場を押し上げる

2

国内クライアント市場は「マルチデバイス」時代に⼊入り、モバイルデバイスが国内IT市場の成⻑⾧長を牽引し続ける3

クラウドサービスがITのモダン化を加速させ、「モダンPaaS」を創⽣生する

4

ハイブリッドクラウド時代を迎え、クラウドサービス向けIT市場のフレームワークが形成される

5

事業継続／災害対策ソリューションは仮想化技術の進展とクラウドサービスの成熟によって再構築が進む

6

モバイルデバイス、3.9G/LTEサービスの早期展開によって通信事業者ネット
ワークインフラ市場が活性化する7

2012年年はビッグデータ活⽤用型アナリティクスビジネスのリーダーの座をかけた競争のスタートダッシュの年年になる

8

国内企業の海外ITシステム構築／運⽤用を巡る、国内・グローバル・オフショアベンダー間の競争が激化する

9

センサーネットからインターネットに接続する「スマートデバイス」が増え、デバイスの「ソーシャル化現象」が起きる

10

次世代の最初の10万のスマートシティソリューションは「第3のITプラットフォーム」上に構築される
http://www.idcjapan.co.jp/Press/Current/20111215Apr.html	

ガートナー  、2012年年以降降重要展望
Gartner Predicts 20121

2015年までに、低コスト・クラウド・サービスがアウトソーシング大手企業の収益の最大15%まで食い込む

2

2013年には消費者向けソーシャル・ネットワークへの投資バブルが、2014年にはエンタプライズ・ソーシャ
ル・ソフトウェア・ベンダーへの投資バブルがはじける3

2016年までに、企業における電子メール・ユーザーの少なくとも半数が、デスクトップ・クライアントではなくブラウザやタブレット、モバイル・クライアントを利用するようになる4

2015年までに、スマートフォンとタブレットをターゲットにしたモバイル・アプ
リケーションの開発プロジェクトはネイティブPCプロジェクトを上回り、その比率は4対1になる

5

2016年までに、企業の40%がすべてのタイプのクラウド・サービスの利用に際し、独立した機関によるセキュリティ・テストの結果をクラウド選定条件にする

6

2016年末には、Global 1000企業の半数以上が顧客に関する機密データをパブリック・クラウドに格納するようになる

7

2015年までに、ほとんどの企業においてIT支出の35%がIT部門の予算枠外で管理されるようになる

8

2014年までに、米国で消費されているアジア調達の完成品およびアセンブリの20%が、北米・中南米にシフトする

9

2016年までに、新たな脆弱性を狙ったサイバー犯罪により、経済的損失は年間10%の割合で増加する

10

2015年までに、80%のクラウド・サービスの価格にグローバル燃料サーチャージが含まれるようになる

11

2015年までを通じ、Fortune 500企業の85%以上が、ビッグ・データを競合優位性確保のために効果的に活用することに失敗する
http://www.gartner.co.jp/press/html/pr20111214-01.html	

本格的なマルチデバイス時代への突⼊入

利利⽤用シナリオ／スクリーンサイズ／インプットデバイス／OS／ブラウザなど様々な要素の多様化に対応する必要が出てきているマルチ？

スクリーンサイズ
フォームファクター
インプットデバイス
OS
ブラウザー
UIテクノロジーHTML5？

HTML5が中長期的にみて最有力のUIテクノロジーであることに疑いはない

しかし、現時点ではHTML5が目指す環境はまだ存在していない！まだ4.5！
パフォーマンス、生産性、トータルのUXなどを検討し、UIテクノロジーを選択する必要がある。

Windows  8

Web標準とネイティブアプリの関係

Web Standard Application

Reach

Third Party Framework

要求に対してバランスを取る必要がある

要求

Native Application
Third Party FrameworkRich

Bring Your Own Device

BYOD
デバイスの持ち込みにともなって、⽇日常の体験のレベルも持ち込まれることになるタッチユーザーインターフェイス

マルチデバイス対応における必須対応項⽬目であり、これまでとは違うアプローチが必要になってくるCLI : Command Line Interface

CLI : Command Line Interface

CLI : Command Line Interface

CLI : Command Line Interface

CLI : Command Line Interface

CLI : Command Line Interface

GUI : Graphical User Interface

GUI : Graphical User Interface

GUI : Graphical User Interface

GUI : Graphical User Interface

GUI : Graphical User Interface

GUI : Graphical User Interface

Natural User Interface

Natural User Interface

Natural User Interface

Go!

Natural User Interface

Natural User InterfaceGo!

Q:小学校高学年におけるNintendo DSの普及率？

ユーザーインターフェイスの変遷

Command-line UIGraphical UINatural UI

それぞれの段階で開発の方法も対象も変わっている。
NUIへ至る過程でのタッチ UI の登場はCUI→GUIの変革と同等あるいは更に大きなインパクトをもたらすと考えられる。
仮説：ユーザーニーズ＞提供者の都合！

UIの変遷とテクノロジーのギャップ
CLIGUINUI

新たなUIが⼀一般化する前に、現世代のテクノロジーで次世代のUIを実現しようとする期間がある
この期間においては淘汰されるリスクと共に市場のバランスを変える⼤大きなチャンスがある！

Transform!

これまでのプロセスの全てをUX  を前提に⾒見見直す時が来た！

開発プロセス、ワークフロー、アーキテクチャ、チームモデル、ツール、⾔言語
この変⾰革の時代でチャンスをつかむために組織も個⼈人も俊敏に⽣生まれ変わる必要がある！

ペースレイヤリング

差別化システム
記録システム変更更ペース

⾰革新システム

もちろん、UIを含むアプリケーションは⾰革新システム。
その他のレベルと混同せずに扱っていく。
http://www.gartner.co.jp/b3i/research/110817_app/index.html

インフラジスティックスとお客様
利利⽤用のポイント／傾向
•
•
•
•
•
•
•

開発／テスト双⽅方における⼯工数の削減
パフォーマンスの⾼高さ（特にグリッド／チャート）
⼿手軽に⼀一貫した優れたスタイルによる外観の⾼高い品質を得ることが可能
⽇日本法⼈人によるダイレクトサポート
サブスクリプション／アップグレードにおける継続的な価値向上
ソースコードの開⽰示（100万⾏行行以上の洗練されたコード！）
どの製品でも⼀一貫したアーキテクチャと同じアプローチをとっていることによる学習コス
トの削減

SIer

• プロジェクトにおける⼯工数の削減• 提案／設計時のラピッドプロトタイピングにも利利⽤用

ISV• ⾃自社製品の継続的アップグレードに伴う価値向上• 弊社製品による他のプラットフォームへの迅速な対応

In-house IT• セルフ開発スキーム確⽴立立における標準パーツとしての利利⽤用• 「作らない」ための弊社製品の利利⽤用

ユーザーインターフェイス開発において、いかに⽣生産性を⾼高め、優れたUXを実現するための⽀支援が出来るかを追求インフラジスティックスとお客様
利利⽤用のポイント／傾向

NetAdvantage  ラインアップ
NetAdvantage  Ultimate  (\220,000）
オールインワンパッケージ（下記全９パッケージのセット）

NetAdvantage  for  .NET 　(\148,000)
業務⽤用パッケージスイート（下記6パッケージのセット）

NetAdvantage            jQuery

NetAdvantage
Reporting\95,000\95,000※表⽰示価格＝通常サポートライセンス価格 　      プライオリティーサポートは1ライセンス                      につき+\50,000にてご利利⽤用頂けます。  NetAdvantage
Windows  Phone\95,000

NetAdvantage  各単体パッケージ  (\95,000）

サポート  サービス
E-‐‑‒mail  /  電話による技術サポート

サポート回数

1次回答までの時間

通常サポートNOLIMIT-Priorityサポート

NOLIMITDAYS

トライアル版NOLIMIT-Emailサポート

電話サポート(9am-‐‑‒6pm)(20 DAYS)

2

サービス
リリース取得UXワークショップのご案内
新しいトレーニングプログラムとして、UXワークショップを開始します。
開発現場のプロセスにUX検討を組み込むことについて体系的に学習しませんか？

UXという概念念の基礎を学ぶ•

UX検討のための基礎的な考え⽅方を学び、代表的な検討⼿手法やプロセスについて学んでいきます。何のために優れたUXを求めるのか、⼀一緒に考えていきましょう。

パターンで学ぶ•

UIの構成要素を学ぶ•

優れたUXを届けるための⼊入り⼝口であるUIについて、その構成要素を学び、継続的な開発プロセスにおいてどのようなアーキテクチャで対応するのかについて学んでいきます。

優れたUXを届けるための「レシピ」ともいえる良良いパターンを参考にして、アプリケーションにどのように組み込めるかを学んでいきます。あえて悪いパターンについてもお伝えします。

実際のUIを題材に学ぶ•

実際のUIを参考にしながら、どのような改善が可能であるかについて考えていきましょう。皆さんの開発しているUIでも構いません！講師が改善のお⼿手伝いを致します。

UXが⼤大事なのはわかるが、実際にどのようなアプローチで開発に組み込んでいけばよいかわからない、という⽅方に特にお勧めです！
※スクール形式で2⽇日間のトレーニングを想定しております。
※講師派遣型のプライベートトレーニングも随時実施予定です。

リスクをチャンスに変換していこう！

この技術的不不連続の時代において、リスクだけでなく⼤大きなチャンスに⽬目を向けて、⼤大胆にアクションして⾏行行きましょう！