Developers Summit 2011

嵩原將志 クラスメソッド株式会社

技術部 調達/マーケティング担当

18-D-1

これからの「RIA」の話をしよう ～システムの利用者と開発者にやさしい、UXとUI設計について～ 準備中

Developers Summit 2011

これからの �「 R I A 」 の �話 を し よ う�

嵩原 將志 クラスメソッド株式会社 技術部 マーケティング担当�

システム の利用者と開発者 にやさしいＵＸと ＵＩ設計について

18-D-1�

[RIA+Smartphone] �

　 �

自己紹介

　 �

嵩原將志(タケハラマサシ) Twitter: take3000

Blog：「IT雑用係が知ったかぶりを披露するブログ」http://takelog3000.blogspot.com/

facebook: http://www.facebook.com/profile.php?id=1833966702

Copyright  ©  CLASSMETHOD.   5

　 �

オープンな発想と 高い技術力により、 すべての人々の創造活動に貢献し続ける

Copyright  ©  CLASSMETHOD.   6Supply  RIA  Company

6  

　 �

　 �マーケティング購買・調達 営業／プロジェクト管理／ナナナナ会運営／社内勉強会講師／宴会部長／テスター（※炎上案件に限る）／司会業

　 �

プロジェクトマネジメント　プロジェクト計画 　見積もり 　契約 　および支援

　 �

Silverlight User Group

Flex User Group

参加コミュニティ

　 �

Silverlight User Group

参加コミュニティ

Flex User Group

　 �

Silverlight User Group

Flex User Group

参加コミュニティ

　 �

LT職人

DevLOVE 「Energized Work! LT大戦」�

@take3000�Takehara.Masashi�調達 ／ マーケティング�

#DevLOVE、#FxUG、 #redajp 、#SilverlightUG��

闇アジャイラー �

　 �

前置きが長くなりましたがそろそろ本編

～アジェンダ～ １．おさらい ２．RIAのいま 　　～主要な技術～ ３．UI,UXについて 　　～概念と手法～ ４．マネジメント・組織 ５．これからの「RIA」 ６．まとめ

Developers Summit 2011

これからの �「 R I A 」 の �話 を し よ う�

嵩原 將志 クラスメソッド株式会社 技術部 マーケティング担当�

システム の利用者と開発者 にやさしいＵＸと ＵＩ設計について

18-D-1�

[RIA+Smartphone] �

Developers Summit 2011

これからの �「 R I A 」 の �話 を し よ う�

嵩原 將志 クラスメソッド株式会社 技術部 マーケティング担当�

システム の利用者と開発者 にやさしいＵＸと ＵＩ設計について

18-D-1�

[RIA+Smartphone] �

　 �

一切無関係

　 � RIAにいたる 歴史　

By Aaron Logan, from http://www.lightmatter.net/gallery/albums.php �

　 �　 �１メインフレーム/ダム端末

�

２C/S

（クライアントサーバ）

３HTML Web

アプリケーション

４

RIA

使⍷勝手�

テクノロジーの進化 　 �

　 �

メインフレーム

http://blog.moatbasket.com/cat3/ http://jp.fujitsu.com/imgv3/jikeda/ikeda/facom128b-b.jpg �

　 �

クライアントサーバ�

http://www.aspcom.co.jp/aspcom/Technorogy/images/TechPage_image001.jpg �

NO IMAGE　 �

Web

HTTP;//??? �http://ameblo.jp/shikama/image-10490914958-10331735552.html �

NO IMAGE　 �

RIA

HTTP;//??? �

　 �　 �１メインフレーム/ダム端末

�

２C/S

（クライアントサーバ）

３HTML Web

アプリケーション

４

RIA

使⍷勝手�

　 �　 �１メインフレーム/ダム端末

�

２C/S

（クライアントサーバ）

３HTML Web

アプリケーション

４

RIA

５

RIA近未来編使⍷勝手�

　 �　 �１メインフレーム/ダム端末

�

２C/S

（クライアントサーバ）

３HTML Web

アプリケーション

４

RIA

５

RIA近未来編使⍷勝手�

違いは二つ

　 �　 �１メインフレーム/ダム端末

�

２C/S

（クライアントサーバ）

３HTML Web

アプリケーション

４

RIA

５

RIA近未来編使⍷勝手�テクノロジーの進化 設計手法の進化

　 �

http://www.aspcom.co.jp/aspcom/Technorogy/images/TechPage_image001.jpg �

テクノロジーの進化

http://en.wikipedia.org/wiki/File:John_Underkoffler,_TED_2010.jpg �

　 �

実行環境の広がり

　 �

Adobe Open Screen

Project (2008～)

　 � “Write Once, Run Anywhere”

　 �Adobe Flash

　 �Adobe Flash

ランタイムを配布 仕様の標準化

　 �

Adobe Flash http://wwwimages.adobe.com/www.adobe.com/images/shared/product_mnemonics/165x165/

flashplayer_165x165.png �

　 　 �

　 �実行環境 Flash Player AIR 開発環境 Flash Builder(Flex Builder) Flash Catalyst Flash Professional (FlashCS) 言語 MXML / ActionScript3.0

　 �

Flashプラットフォームとモバイル

　 � AIR for Android

　 �

Packager for iPhone

http://www.adobe-flashlite.com/wp-content/uploads/2010/10/0450132ae.jpg �

　

　 �

http://www.thelinkportal.com/wp-content/uploads/2010/10/silverlight-logo.jpg �

　 　 �

　 �実行環境 Silverlight 開発環境 Visual Studio Expression Studio (Web, Design, Blend) 言語 XAML C# 他多数

　 �

Silverlightのモバイル

　 �

Windows Phone 7

http://www.microsoft.com/windowsphone/en-us/features/default.aspx�

　 �

Design Language “Metro”

http://www.microsoft.com/windowsphone/en-us/features/default.aspx�

　 �

Design Language “Metro”

http://www.microsoft.com/windowsphone/en-us/features/default.aspx�

─ Principles ─Clean, Light, Open, FastCelebrate TypographyAlive in MotionContent, Not ChromeAuthentically Digital

　 　 �

http://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/HTML5-logo.svg/128px-HTML5-logo.svg.png �

　 　 �

「HTML5があれば 　Flashはいらなく 　なるの？」

　 �

　 　 �

時間の流れ

高度な機能

HTML

Flash

　 　 �

時間の流れ

高度な機能

HTML

HTML5 Flash

Flash Silverlight

　 　 �

時間の流れ

高度な機能

ユーザーの要求

　 　 �

時間の流れ

高度な機能

ユーザーの要求

Just Enough ?

　 �HTMLでやること、Javascriptでやること、Flash・Silverlightでやること。ごっちゃにしないこと。安直な解決策に飛びつかないでトレードオフも考慮してちゃんと考えること

　 �

適材適所で採用すること。HTML5はFlash、Silverlightに代わる ものではない

　 �

テクノロジーの話については、ビジネスやマーケティングの都合で発言する人が目立つ。

　 �

対応 -

Packager for iOS

-

Silverlight Flash

Android

iOS (iPhone,iPad)

対応

対応

HTML5

対応 対応 Windows Phone 7 対応

　 � 移植容易性 開発生産性 テスト（環境種類別） 技術習得難易度 技術者数 ユーザー要求の複雑さ 開発期間＋稼働期間

　 � 移植容易性 開発生産性 テスト（環境種類別） 技術習得難易度 技術者数 ユーザー要求の複雑さ 開発期間＋稼働期間

　 � 移植容易性 開発生産性 テスト（環境種類別） 技術習得難易度 技術者数 ユーザー要求の複雑さ 開発期間＋稼働期間

指数的 工数増

　 � 移植容易性 開発生産性 テスト（環境種類別） 技術習得難易度 技術者数 ユーザー要求の複雑さ 開発期間＋稼働期間

システムライフサイクルを考えて技術を採用すること

　 �

http://www.aspcom.co.jp/aspcom/Technorogy/images/TechPage_image001.jpg �

テクノロジーの進化 更なる

http://en.wikipedia.org/wiki/File:John_Underkoffler,_TED_2010.jpg �

　 �

RIAと切っても切り離せない、入力装置の進化

　 �キーボード／マウス （間接的なIF） タッチパネルディスプレイ （タンジブルIF） ジェスチャー系（NUI） （インタンジブルIF）

http://en.wikipedia.org/wiki/File:QWERTY_keyboard.jpg �

http://en.wikipedia.org/wiki/File:MS-Arc-Mouse.jpg �http://en.wikipedia.org/wiki/

File:IPhone_4_in_hand.jpg �

http://www.360bargains.co.uk/wp-content/uploads/2010/09/kinect-bowling.jpg �

　 �キーボード／マウス （間接的なIF） タッチパネルディスプレイ （タンジブルIF） ジェスチャー系（NUI） （インタンジブルIF）

http://en.wikipedia.org/wiki/File:QWERTY_keyboard.jpg �

http://en.wikipedia.org/wiki/File:MS-Arc-Mouse.jpg �http://en.wikipedia.org/wiki/

File:IPhone_4_in_hand.jpg �

http://www.360bargains.co.uk/wp-content/uploads/2010/09/kinect-bowling.jpg �

http://en.wikipedia.org/wiki/File:CLI-GUI-NUI.png �

　 �

関連する技術の発達 ・サーチエンジン ・クラウド

　 �

この検索が非常に優秀�

　 �

ハードウェア（購⼊入/設置/設定等）

クラウド設定のみ

開発費⽤用

開発費⽤用

教育

UI開発

利⽤用者補助

教

育

サーバ保守

サ

｜

バ

保

守規模に応じてスケールアウトしやすい。安価に⾼高信頼な構成を組みやすい

追加開発

追加開発

利⽤用者視点でのUIデザインとRIA技術を使った⾼高品質設計

サーバー側と疎結合な設計であれば、追加開発やUIの変更に対応しやすい。

従来のシステム開発前後に掛かる費⽤用

初期コストを押さえつつ、使い勝⼿手の良いアプリケーションによって、導⼊入時や運⽤用時のコストを削減

クラウドとRIAを活⽤用した場合に掛かる費⽤用

　 �

RIAそのもの、周辺技術の進化により、今まで以上にいつでもどこでも誰でも利用できるようになる。

　 �

技術的に高度化し、 自由が増えるのであれば、 当然、考慮するべき事柄 は増える

　 �

そこで設計方法論が重要になる

方法論の進化 　 �

　 �

User Experience

User Experience Design

　 �

そもそもUXってなに？

ウィキペディアによると �

http://blogs.toonboom.com/professional/wp-content/uploads/2008/05/wikipedia-logo.png �

　 �

ユーザーがある製品やシステムを使ったときに得られる経験や満足など全体を指す用語である。

@IT情報マネジメント によると

　 �

製品やサービスの使用・消費・所有などを通じて、人間が認知する（有意義な）体験のこと。

　 �

元々は「ユーザーへ優れた経験を与えるためのデザイン」

ダン・サファー T model for IXD 　 �

　 �

ユーザーエクスペリエンスデザイン

インフォメーション アーキテクチャ

コミュニケーション デザイン

ユーザーインターフェース エンジニアリング

ユーザービリティ エンジニアリング

ヒューマンファクツ

インダストリアル デザイン

ヒューマン・コンピュータ インターフェース

インタラクションデザイン

　 �

ユーザーエクスペリエンスデザイン

インフォメーション アーキテクチャ

コミュニケーション デザイン

ユーザーインターフェース エンジニアリング

ユーザービリティ エンジニアリング

ヒューマンファクツ

インダストリアル デザイン

ヒューマン・コンピュータ インターフェース

インタラクションデザイン

　 �

ユーザーエクスペリエンスデザイン

インフォメーション アーキテクチャ

コミュニケーション デザイン

ユーザーインターフェース エンジニアリング

ユーザービリティ エンジニアリング

ヒューマンファクツ

インダストリアル デザイン

ヒューマン・コンピュータ インターフェース

インタラクションデザイン

　 �

ユーザーエクスペリエンスデザイン

インフォメーション アーキテクチャ

コミュニケーション デザイン

ユーザーインターフェース エンジニアリング

ユーザービリティ エンジニアリング

ヒューマンファクツ

インダストリアル デザイン

ヒューマン・コンピュータ インターフェース

インタラクションデザイン

　 �

ユーザーエクスペリエンスデザイン

インフォメーション アーキテクチャ

コミュニケーション デザイン

ユーザーインターフェース エンジニアリング

ユーザービリティ エンジニアリング

ヒューマンファクツ

インダストリアル デザイン

ヒューマン・コンピュータ インターフェース

インタラクションデザイン

　 �

ユーザーエクスペリエンスデザイン

インフォメーション アーキテクチャ

コミュニケーション デザイン

ユーザーインターフェース エンジニアリング

ユーザービリティ エンジニアリング

ヒューマンファクツ

インダストリアル デザイン

ヒューマン・コンピュータ インターフェース

インタラクションデザイン

　 �

ユーザーエクスペリエンスデザイン

インフォメーション アーキテクチャ

コミュニケーション デザイン

ユーザーインターフェース エンジニアリング

ユーザービリティ エンジニアリング

ヒューマンファクツ

インダストリアル デザイン

ヒューマン・コンピュータ インターフェース

インタラクションデザイン

　 �

ユーザーエクスペリエンスデザイン

インフォメーション アーキテクチャ

コミュニケーション デザイン

ユーザーインターフェース エンジニアリング

ユーザービリティ エンジニアリング

ヒューマンファクツ

インダストリアル デザイン

ヒューマン・コンピュータ インターフェース

インタラクションデザイン

　 �

ユーザーエクスペリエンスデザイン

インフォメーション アーキテクチャ

コミュニケーション デザイン

ユーザーインターフェース エンジニアリング

ユーザービリティ エンジニアリング

ヒューマンファクツ

インダストリアル デザイン

ヒューマン・コンピュータ インターフェース

インタラクションデザイン

　 �

ユーザーエクスペリエンスデザイン

インフォメーション アーキテクチャ

コミュニケーション デザイン

ユーザーインターフェース エンジニアリング

ユーザービリティ エンジニアリング

ヒューマンファクツ

インダストリアル デザイン

ヒューマン・コンピュータ インターフェース

インタラクションデザイン

　 �

ユーザーエクスペリエンスデザイン

インフォメーション アーキテクチャ

コミュニケーション デザイン

ユーザーインターフェース エンジニアリング

ユーザービリティ エンジニアリング

ヒューマンファクツ

インダストリアル デザイン

ヒューマン・コンピュータ インターフェース

インタラクションデザイン

JJギャレット User

Experience “５S”

　 �

　 �

具体的

抽象的

Surface:表層

Skeleton:骨格

Structure:構造

Scope:要件

Strategy:戦略

　 �

具体的

抽象的

User Experience Diagram

　 �

　 �Information Design Interaface Design Interaction Design

Written Language Graphic Design

Sound Motion

Programming

「概念的すぎるし、 　考えることが多す 　ぎる。どうしたら 　よいか？」

　 �

　 �

指針はシンプルに

　 �

どんなユーザーエクスペリエンスも、目的は効率の改善だ。これは基本的に、2つの形式になる。

“ウェブ戦略としての「ユーザーエクスペリエンス」“より

　 �

（１）人がより早く作業できるようにすること。

“ウェブ戦略としての「ユーザーエクスペリエンス」“より

　 �

（２）より間違いが少なくなるようにすることだ。

“ウェブ戦略としての「ユーザーエクスペリエンス」“より

　 �

「早く」 「間違わない」

　 �

（例）

　 �

　 �

これだけシンプルだと�きわめて効率が良い�

　 �

これまでの手法における 注意点

　 �

～設計手法～ DFD法 ER図 UML

　 �

～見積もり手法～ ファンクションポイント法 COCOMOⅡ

　 �

いずれも良い手法ではあるが、利用者視点・感情などが表現されない

　 �

セオリーを押さえてしっかりやっている技術者ほどはまり込む

　 �

進化の課程における クラスメソッドの場合

　 �

ソフトウェア開発のライフサイクルとＵＸデザイン

企画・要件�

テスト �

保守�

出荷�

設計�

実装�

　 �

ソフトウェア開発のライフサイクルとＵＸデザイン

企画・要件�

テスト �

保守�

出荷�

設計�

実装�

ＵＩデザイン �

ＵＸデザイン／ �ＵＩ設計�

　 �

　 �

　 �

途中の成果物

コンポーネントデモアプリケーション

内部利⽤用オリジナルデモ

インタラクション指⽰示付きバージョン

完成版

　 �

ラフ ヴィジュアルデザインのコンセプトの検証（モックアップ）

　 �

ワイヤーフレーム、ペーパープロトタイピング ナビゲーション、インタラクションの検証

　 �

プロトタイプ 技術検証

　 �

UI設計上の注意点

　 �

ユーザビリティルール

　 �

ユーザビリティルール 第一のルール：アクセス 第二のルール：有効性 第三のルール：進歩 第四のルール：支援 第五のルール：文脈

　 �

第一のルール：アクセス

　 �

第二のルール：有効性

　 �

第三のルール：進歩

　 �

第四のルール：支援

　 �

第五のルール：文脈

　 �

ユーザインタフェース 設計の原則

　 � ユーザインタフェース 設計の原則 ・構造の原則 ・単純化の原則 ・可視性の原則 ・フィードバックの原則 ・寛容の原則 ・再利用の原則

　 �

・構造の原則

　 �

・単純化の原則

　 �

・可視性の原則

　 �

・フィードバックの原則

　 �

・寛容の原則

　 �

・再利用の原則

　 �

その他の手法の紹介 ペルソナ分析法

　 �

マネジメント http://themarketinglady.co.uk/images/Strategy%20Image.jpg �

　 �

プロセス http://themarketinglady.co.uk/images/Strategy%20Image.jpg �

　 �

http://upload.wikimedia.org/wikipedia/commons/0/05/Development-iterative.gif�

UP:統一プロセス

　 �

　 　 �

http://upload.wikimedia.org/wikipedia/commons/6/6c/Agile_Software_Development_methodology.jpg �

アジャイルであるべき？

　 �

アジャイルも良いけど、 受け入れられる変化にも 限度がある。

　 �

UXを取り入れたRIA開発において受け入れられない変化 ・コンセプト ・採用した技術

　 � Adobe AIRの クロスドメイン（例）

　 �

　

「どういったスキル 　の技術者でチーム 　を組織するのか？」

　 �

　 �

RIA-UXのチーム http://upload.wikimedia.org/wikipedia/commons/5/55/11-04-06-USChuddle.jpg �

　 �

プロジェクトの体制

http://shermanux.com/Files/UXKit/UX_Kit_Aug09.pdf�

開発側の体制は簡略化したものです

　 �

UXデザインチーム（※役割）

http://shermanux.com/Files/UXKit/UX_Kit_Aug09.pdf�

　 �Information Design Interaface Design Interaction Design

Written Language Graphic Design

Sound Motion

Programming

　 �

必要なスキルセットは多い。UIデザイナーがいないのは論外だが、一人のUIデザイナーに丸投げできるようなものではない。

　 �

現実、チームのアサインが望ましいが、いろいろ厳しかったりもするので、デザイナー一人のケースが多い

　 �

大切な事は、一人といえども考えなければならないことはこれだけの要素をもっていることであり、それぞれに求められるスキルは別のものであるということ。

「UXデザイナーを 　雇いたいのだが、 　どこで雇える？」

　 �

　 �

残念ながら日本には非常に少ない。適正のある（と思われる）人を雇って育ててください！

　 �

育ててください！

「次のような依頼が 　多くて困ってます」

　 �

　 �

http://www.aspcom.co.jp/aspcom/Technorogy/images/TechPage_image001.jpg �

既存のアプリを 寸分違わず リプレイスして ください。

　 �

情報化戦略

事業戦略

中⻑⾧長期経営戦略経営層�

業務系�

技術系�

事業戦略

情報化戦略 情報化戦略

　 �

情報化戦略

事業戦略

中⻑⾧長期経営戦略経営層�

業務系�

技術系�

事業戦略

情報化戦略 情報化戦略

　 �

情報化戦略

事業戦略

中⻑⾧長期経営戦略経営層�

業務系�

技術系�

事業戦略

情報化戦略 情報化戦略

　 �

情報化戦略

事業戦略

中⻑⾧長期経営戦略経営層�

業務系�

技術系�

事業戦略

情報化戦略 情報化戦略

　 �

情報化戦略

事業戦略

中⻑⾧長期経営戦略経営層�

業務系�

技術系�

事業戦略

情報化戦略 情報化戦略

　 �

情報化戦略

事業戦略

中⻑⾧長期経営戦略経営層�

業務系�

技術系�

事業戦略

情報化戦略 情報化戦略

技術的なフィードバックの量が少ないか、もしくはまったくされていない。上意下達の情報化戦略を行っている？ �（そもそも縦型階層になっていることもおかしい）�

　 �

http://www.aspcom.co.jp/aspcom/Technorogy/images/TechPage_image001.jpg �

既存のアプリを 寸分違わず リプレイスして ください。

　 �

http://www.aspcom.co.jp/aspcom/Technorogy/images/TechPage_image001.jpg �

あまり意味が無い

　 �

http://upload.wikimedia.org/wikipedia/commons/5/5d/Battle_of_Nagashino.jpg �

道具が変われば、 戦い方も変わる

　 �

情報化戦略 事業戦略

中⻑⾧長期経営戦略経営層�

業務系�技術系�

　 �

情報化戦略 事業戦略

中⻑⾧長期経営戦略経営層�

業務系�技術系�

User Experience

　 �

　 �情シス �

ユーザー� 開発者�

ITシステム

SIer �

顧客�

現場Mgr�

経営層�事業戦略？担当�

発注

構築

依頼いちおう構築

運⽤用

利⽤用

要望

命令

要望

　 �

　 �情シス �

ユーザー� 開発者�

ITシステム

SIer �

顧客�

現場Mgr�

経営層�事業戦略？担当�

発注

構築

依頼いちおう構築

運⽤用

利⽤用

要望

命令

要望

UXはここに対する局所最適と勘違いされている可能性�

「業務アプリの使い 　勝手なんてどうで 　もいいんじゃな 　いの？」

　 �

たとえうまく行えなくても、単に何かを行う能力そのものが、成功のために十分であるような初歩的な段階がある。

使いやすいソフトウェア ─より良いユーザインタフェースの設計を目指して─

　 �

　 　 �

時間の流れ

高度な機能

ユーザーの要求

　 �

従業員の組織に対するロイヤリティや帰属意識の低下

　 �

目に見づらいところで、 業務効率を下げている 可能性がある。 それもコスト

　 �

ではその逆を考えた ことがあるのか？

　 �

UI/UXの負債

　 �

XPJUGで市谷さん(@papanda) が紹介していた図

　 �

競争力の 源泉

人事給与 経理

次世代研究 コミュニケーション

非コアコンピタンス�コアコンピタンス�

ミッション クリティカル�

非ミッション クリティカル�

　 �

競争力の 源泉

人事給与 経理

次世代研究 コミュニケーション

非コアコンピタンス�コアコンピタンス�

ミッション クリティカル�

非ミッション クリティカル�

適切に�動けば、 �安ければ�安いほど�良い�

　 �

競争力の 源泉

人事給与 経理

次世代研究 コミュニケーション

非コアコンピタンス�コアコンピタンス�

ミッション クリティカル�

非ミッション クリティカル�

SaaS PKG

　 �

競争力の 源泉

人事給与 経理

次世代研究 コミュニケーション

非コアコンピタンス�コアコンピタンス�

ミッション クリティカル�

非ミッション クリティカル�

SaaS PKG

確かにそうだが、 �それは「使っている間」�も含めての話で�「使い始めるまで」 �だけの話ではない�

　 �

価値がおざなりにされ、 安く作ることだけが 重要視されている

　 �

検収印をもらうことが 目的であれば、成長す るサービスなどは構築 できない！

　 �

そのためには契約形態 にも新しいデザインが 必要！

　 �

実費償還契約

　 　 �コスト

利益

　 　 �コスト

利益

　 　 �コスト

利益

　 �

検証の割合が多い プロジェクトで特 に有効

　 �

ラフ、モックアップ、ワイヤーフレーム、プロトタイプ

　 �

検証は定まった工数で 正解がでるとは限らない

　 �

テクノロジーと手法の進化にあわせて、契約形態も進化する必要がある！

　 �

そんな大げさな話でなく、 明日からすぐできること

　 �

よいUIを褒めてください

　 �

デザインやユーザビリティが語られるほとんどのケースは悪い体験に基づく

　 �

悪いものほど記憶にのこる

　 �

良いものは？

　 �

意識しないで扱える良いものは記憶にのこらない

　 �

正しい行動パターン 　 １．考える 　 ２．実行する 　 ３．確認する

　 �

正しくない行動パターン （使い方を） １．考える （恐る恐る） ２．実行する （使い方が間違っていないか） ３．確認する

　 �

　

　 �

そもそもの目的に対して 注意を払えない、そんな ソフトウェアの存在は正 しいのだろうか？

　 �ITシステム、ソフトウェアいずれも道具であり、使い勝手が良いことは当たり前である。 人がそれまでできなかったことをできるようにするのが道具として正しいあり方ではないか。

　 �

良いものを意識して 褒めること

　 �

UXへ向かう最初の一歩

　 �

まとめ

DevLOVE 「Energized Work! LT大戦」�

@take3000�Takehara.Masashi�調達 ／ マーケティング�

#DevLOVE、#FxUG、 #redajp 、#SilverlightUG��

闇アジャイラー �

LT職人らしく LT風に

まとめます

　 �

　 � RIAにいたる 歴史　

By Aaron Logan, from http://www.lightmatter.net/gallery/albums.php �

　 �　 �１メインフレーム/ダム端末

�

２C/S

（クライアントサーバ）

３HTML Web

アプリケーション

４

RIA

５

RIA近未来編使⍷勝手�

　 �　 �１メインフレーム/ダム端末

�

２C/S

（クライアントサーバ）

３HTML Web

アプリケーション

４

RIA

５

RIA近未来編使⍷勝手�テクノロジーの進化 設計手法の進化

　 �

Adobe Open Screen

Project (2008～)

　 �

Adobe Flash http://wwwimages.adobe.com/www.adobe.com/images/shared/product_mnemonics/165x165/

flashplayer_165x165.png �

　

　 �

http://www.thelinkportal.com/wp-content/uploads/2010/10/silverlight-logo.jpg �

　 　 �

http://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/HTML5-logo.svg/128px-HTML5-logo.svg.png �

　 �

Adobe Open Screen

Project (2008～)

　 　 �

時間の流れ

高度な機能

ユーザーの要求

　 　 �

時間の流れ

高度な機能

ユーザーの要求

Just Enough ?

　 �

対応 -

Packager for iOS

-

Silverlight Flash

Android

iOS (iPhone,iPad)

対応

対応

HTML5

対応 対応 Windows Phone 7 対応

　 � 移植容易性 開発生産性 テスト（環境種類別） 技術習得難易度 技術者数 ユーザー要求の複雑さ 開発期間＋稼働期間

　 � 移植容易性 開発生産性 テスト（環境種類別） 技術習得難易度 技術者数 ユーザー要求の複雑さ 開発期間＋稼働期間

システムライフサイクルを考えて技術を採用すること

　 �キーボード／マウス （間接的なIF） タッチパネルディスプレイ （タンジブルIF） ジェスチャー系（NUI） （インタンジブルIF）

http://en.wikipedia.org/wiki/File:QWERTY_keyboard.jpg �

http://en.wikipedia.org/wiki/File:MS-Arc-Mouse.jpg �http://en.wikipedia.org/wiki/

File:IPhone_4_in_hand.jpg �

http://www.360bargains.co.uk/wp-content/uploads/2010/09/kinect-bowling.jpg �

http://en.wikipedia.org/wiki/File:CLI-GUI-NUI.png �

この検索が非常に優秀�

　 �

ハードウェア（購⼊入/設置/設定等）

クラウド設定のみ

開発費⽤用

開発費⽤用

教育

UI開発

利⽤用者補助

教

育

サーバ保守

サ

｜

バ

保

守規模に応じてスケールアウトしやすい。安価に⾼高信頼な構成を組みやすい

追加開発

追加開発

利⽤用者視点でのUIデザインとRIA技術を使った⾼高品質設計

サーバー側と疎結合な設計であれば、追加開発やUIの変更に対応しやすい。

従来のシステム開発前後に掛かる費⽤用

初期コストを押さえつつ、使い勝⼿手の良いアプリケーションによって、導⼊入時や運⽤用時のコストを削減

クラウドとRIAを活⽤用した場合に掛かる費⽤用

　 �

User Experience

User Experience Design

　 �

ユーザーエクスペリエンスデザイン

インフォメーション アーキテクチャ

コミュニケーション デザイン

ユーザーインターフェース エンジニアリング

ユーザービリティ エンジニアリング

ヒューマンファクツ

インダストリアル デザイン

ヒューマン・コンピュータ インターフェース

インタラクションデザイン

　 �

具体的

抽象的

Surface:表層

Skeleton:骨格

Structure:構造

Scope:要件

Strategy:戦略

　 �Information Design Interaface Design Interaction Design

Written Language Graphic Design

Sound Motion

Programming

　 �

ユーザビリティルール 第一のルール：アクセス 第二のルール：有効性 第三のルール：進歩 第四のルール：支援 第五のルール：文脈

　 � ユーザインタフェース 設計の原則 ・構造の原則 ・単純化の原則 ・可視性の原則 ・フィードバックの原則 ・寛容の原則 ・再利用の原則

　 �

「早く」 「間違わない」

　 �

http://upload.wikimedia.org/wikipedia/commons/0/05/Development-iterative.gif�

UP:統一プロセス

　 �

UXを取り入れたRIA開発において受け入れられない変化 ・コンセプト ・採用した技術

　 �

プロジェクトの体制

http://shermanux.com/Files/UXKit/UX_Kit_Aug09.pdf�

開発側の体制は簡略化したものです

　 �

UXデザインチーム（※役割）

http://shermanux.com/Files/UXKit/UX_Kit_Aug09.pdf�

「UXデザイナーを 　雇いたいのだが、 　どこで雇える？」

　 �

　 �

育ててください！

　 �

競争力の 源泉

人事給与 経理

次世代研究 コミュニケーション

非コアコンピタンス�コアコンピタンス�

ミッション クリティカル�

非ミッション クリティカル�

　 �

競争力の 源泉

人事給与 経理

次世代研究 コミュニケーション

非コアコンピタンス�コアコンピタンス�

ミッション クリティカル�

非ミッション クリティカル�

適切に�動けば、 �安ければ�安いほど�良い�

　 �

競争力の 源泉

人事給与 経理

次世代研究 コミュニケーション

非コアコンピタンス�コアコンピタンス�

ミッション クリティカル�

非ミッション クリティカル�

SaaS PKG

　 �

競争力の 源泉

人事給与 経理

次世代研究 コミュニケーション

非コアコンピタンス�コアコンピタンス�

ミッション クリティカル�

非ミッション クリティカル�

SaaS PKG

確かにそうだが、 �それは「使っている間」�も含めての話で�「使い始めるまで」 �だけの話ではない�

　 �

実費償還契約

　 　 �コスト

利益

　 　 �コスト

利益

　 　 �コスト

利益

　 �

テクノロジーと手法の進化にあわせて、契約形態も進化する必要がある！

　 �

さいごに

　 �

User Experience Designをやることは、 本質的な価値追求に

向かうこと （受託なら顧客にとっての価値）

　 �

RIAの自由度は価値追求にとって武器になる。

（もちろんいらないときもある）

　 �

実費償還契約は 発注者、受注者が リスクを共有し、

本質的な価値追求に むかう土壌を作る

　 �

ITシステムにかかわる すべての人が共通の 目的を持つこと。

　 �

現実は？

　 �

ソフトウェアの 内部構造にしか 気を配れない

(自称)アーキテクト

　 �

「決まったこと」を 「守らせる」こと だけが全てである

管理者

　 �

「いかに多くやらせるか」が目的化している調達

　 �

いつまでも古い 商慣習にしがみ

つく法務

　 �

誰のための ソフトウェアか？

　 �

誰のための デザインか？

　 � 今と未来をより 良くしようと 試みる人たちの

ために ソフトウェアを

つくる

　 �

RIAとUX 自由さ創造性

　 �

実費償還契約 現実と向きあう したたかさ

　 �

これが

　 �

　 �

オープンな発想と 高い技術力により、 すべての人々の創造活動に貢献し続ける

Supply  RIA  Company 280  

Supply  RIA  Company 281  

ご清聴 ありがとう ございました。