More Related Content Similar to X dev 20121106 Similar to X dev 20121106 (20) 2. INFRAGISTICS 【名】
ɪnfrədʒɪˈstɪks ： インフラジス
ティックス
1. ニュージャージーに本社を置く UI コントロールを中心とし
たソフトウェア製品を開発・販売するグローバルカンパニー
2. Infrastructure（基礎構造）+ logistics（後方支援）
3. バイク乗りが社長の東京・原宿の会社【日本】
4. インフラさん【俗称】
10. Consumerization of IT が期待値を引き上げる
ユーザーは普段の生活の中で
高度なIT活用体験を当たり前に享受している
ユーザーがエンタープライズITにおいても
同様の体験を求める傾向が加速する
11. Touch = More Speed!
タッチインターフェイスであることによって、アプリケーションに
これまで以上のレスポンススピードを求めることになる。
12. “App” = more update! Less cost!
デプロイメントコスト
メンテナンスサイクル
グローバルマーケット
低価格化
これまでの開発／リリー
スサイクルでは追いつけ
なくなる。
13. 身近に接する IT が一貫性を持ち、直感的である
ユーザーは普段の生活の中で
高度なIT活用体験を当たり前に享受している
Forrester Research, Inc.、『The Hour Of The Vendor Strategist: Three Mega Business Trends Will Reshape The Tech Sector』
17. DEV-ICE-AGE
この変革の時代を生き残るための
２つのキーポイントとは：
開発スピードを加速させる生産性
ユーザー体験のデザイン
20. 組み立てるのは何か？
ベクターやビットマップによるアイコンなど、
アセット UI 上でそのまま表示されるもの
スタイル UI コントロールに適用される外観
モーション 状態内／状態間のアニメーション
ネスト構造を持ったグループ化されたレイアウトコ
レイアウト ントロール
多くはデータバインドの対象となる UI コントロー
UI コントロール ル
スクリーン 複数のレイアウトを管理する画面の集合
これらの項目はUIガイドラインの項目として書かれるような
ポイントとして押さえるべき大項目となる
21. UIコントロールを活用した開発
重要なポイント
設計にコンポーネントを合わせるのではなく、
コンポーネントを設計時点の選択肢として検討することで最大の効率化が実現
フェーズ 標準コントロール使用 UIコントロールを使用
設計 • 標準のコントロールでカ • 多機能なコンポーネントを前
バーできない仕様は、追加 提とすることで、多くの仕様
開発の為の設計が必要 を吸収することが可能
• 早期に多くの機能を備えたプ
ロトタイプの実装が可能
実装（拡張） • 標準コントロールの拡張 • コンポーネントの機能の範囲
• 単体テスト で仕様が決定している場合、
拡張は不要
本実装 • コーディング等負荷大 • プロパティベースの効率的な
• 機能が増えればその分テス 開発
トの負荷大 • 製品でテスト済みなので単体
テストの負荷小
結合テスト • Bugfixの負荷大 • Bugfixの負荷小
• パフォーマンスチューニン • パフォーマンスチューニング
グの負荷大 の負荷小
22. 実工数比較
コンサルティング会社A様のケース
チャートコンポーネント（ローソク足）をご活用
30人日
13人日
開発効率に2倍以上の差!
単体テスト
「テスト工数が圧倒的に変わってくる」
21
23. お客様導入事例
カブドットコム証券株式会社様
• NetAdvantage（WindowsForms）を採用し、
大幅に開発効率を向上
（通常3～4ヶ月→1ヶ月に短縮）
• Gridのソートや列の並び替え機能や
ツリー、ツールバー機能等を活用 株価情報の一覧表示画面
→開発工数の削減
• デザインツールAppStylistにより、
アプリの外観を一元的に設定・管理
→デザイン工数の削減
※詳細は弊社サイトをご参照下さい
http://jp.infragistics.com/jirei/kabudotcom.aspx
発注パネル
25. パフォーマンス検証例
• 業界最速のデータグリッド
– 対象コントロール：XamGrid
– テスト内容：xamGrid をさまざまな ItemSource へバインドし、
LayoutUpdated イベントの描画にかかった時間を測定
– 想定操作：データの読み込み時のエンド ユーザーの待ち時間を測定
■表1：描画に要した時間 ※IList へバインド - 10 列、1,000,000 行のデータ
弊社製品 競合製品 I 競合製品 II
所要時間 (ms) 1,028 2,050 99% 遅い 1,962 90% 遅い
メモリ使用量
91,852 88,964 0.3% 尐ない 90,683 0.1% 多い
- テスト前(KB)
メモリ使用量
91,762 144,394 57% 多い 128,511 40% 多い
- テスト後(KB)
■表2：描画に要した時間 ※ObservableCollection へバインド - 10 列、1,000,000 行のデータ
弊社製品 競合製品 I 競合製品 II
所要時間 (ms) 1,028 2,025 96% 遅い 1,962 90% 遅い
メモリ使用量 - テスト前
91,852 91,360 等しい 90,660 1% 尐ない
(Kb)
メモリ使用量 - テスト後
91,762 113,795 24% 多い 128,207 39% 多い
(Kb)
※詳しくは、パフォーマンスホワイトペーパーをご参照下さい。
http://jp.infragistics.com/innovations/performance-whitepapers.aspx#13967
27. 株式会社セカンドファクトリー
UI＆CLOUD Professional Services
UI・CLOUDに関するコンサルティング及びトレーニング
設計/開発及び開発支援、R&D代行業務
自社プロダクト（Office365向けアプリ、電子書籍）
2nd FACTORY CO.,Ltd. CONFIDENTIAL 26
30. ユーザーインターフェース/インタラクション
出展：www.meti.go.jp/press/20071001007/004_bessi.pdf （主要寸法項目の年代別平均値(2007.10) 経済産業省）
2nd FACTORY CO.,Ltd. CONFIDENTIAL 29
31. ユーザーインターフェース/インタラクション
iOS Windows Phone7
デザインガイドライン UIガイドライン
ボタンサイズは44×44pxを基準とする。 タッチさせるオブジェクトの表現は7mm/26px以上、
オブジェクトの反応範囲9mm/34px以上を推奨。
ボタン間には最低8pxの余白を設ける。
オブジェクトサイズを並べる場合は、最低でも
2mm/8pxの マージンが必要。
2nd FACTORY CO.,Ltd. CONFIDENTIAL 30
33. ユーザー体験＝UXとは ??
• UX = 見た目 ?
• UX = デザイナーの仕事 ?
• UX = ユーザビリティ ?
• UX = クリック数が尐ないこ
と？
2nd FACTORY CO.,Ltd. CONFIDENTIAL 32
34. What is “UX” ??
• ISO9241-210 (国際規格)
「製品、システムまたはサービスに対する使用、および/または使用を
予想したときの人の知覚と反応」
注釈１：ユーザエクスペリエンスには、使用前、使用中、使用後に生じるユーザの感情、信念、
嗜好、知覚、生理学的・心理学的な反応、行動や達成の全てを含む。
注釈２：ユーザエクスペリエンスは、ブランドイメージ、見た目、機能、システム性能、対話行
動や対話システムの補助機能、以前の経験から生じるユーザの内的・身体的状態、態度、技能や
個性、および利用状況の結果である。
注釈３：ユーザの個人的目標という観点から考えた時には、通常はユーザエクスペリエンスに付
随する知覚的・感情的な側面を、ユーザビリティは含むことができる。ユーザビリティの評価基
準はユーザエクスペリエンスの諸側面を評価するのに用いることができる。
2nd FACTORY CO.,Ltd. CONFIDENTIAL 33
35. What is “UX” ??
ユーザーが得られる有意義な体験と行動
そのもの
ユーザーが本当にやりたいこと(ユーザー
が気が付いていないことも含めて)を、
「楽しく」、「面白く」、「心地よく」
できること
2nd FACTORY CO.,Ltd. CONFIDENTIAL 34
37. 全機能を盛り込むことがゴールではない
工数入力ツールの機能一覧
No 機能 No 機能
1 作業項目(時間)入力機能 11 工数集計ダウンロード機能
2 作業項目(時間)修正機能 12 集計データ検索機能
3 日付変更(カレンダー) 13 マスタ管理機能
4 過去日の作業項目コピー機能 14 システム管理機能
5 直近作業表示機能 15 パスワード変更機能
6 プロジェクト新規追加機能
7 工程新規追加機能
8 プロジェクト削除機能
9 工程削除機能
10 プロジェクト検索機能
2nd FACTORY CO.,Ltd. CONFIDENTIAL 36
40. 全機能を盛り込むことがゴールではない
タッチデバイスで何をさせるのか？どんな価値を提供するの
か？
No 機能 No 機能
1 作業項目(時間)入力機能 11 工数集計ダウンロード機能
2 作業項目(時間)修正機能 12 集計データ検索機能
3 日付変更(カレンダー) 13 マスタ管理機能
4 過去日の作業項目コピー機能 14 システム管理機能
5 直近作業表示機能 15 パスワード変更機能
6 プロジェクト新規追加機能
7 工程新規追加機能 1日の作業が入力
8 プロジェクト削除機能 しやすいことに注力する！
初期表示は…メニューじゃない！
9 工程削除機能 1日のタイムライン
「何時から何時間、何した？」
10 プロジェクト検索機能
2nd FACTORY CO.,Ltd. CONFIDENTIAL 39
41. 優れたUXの事例
Sony ウォークマン
2nd FACTORY CO.,Ltd. CONFIDENTIAL 40
44. よりシンプルな手法
仮説
ユーザー、課題の理解
インタラクション設計
早期の検証 プロトタイプ開発
このフローを踏む(1度でも)ことにより、
UXは大きく向上する
2nd FACTORY CO.,Ltd. CONFIDENTIAL 43
46. システム開発におけるUXデザインの要素
具体的
Surface：表層
Skeleton：骨格
Structure：構造
Scope：要件
Strategy：戦略
抽象的
出典：Jesse James Garrett’s Elements of User Experience
http://www.jjg.net/elements 2nd FACTORY CO.,Ltd. CONFIDENTIAL 45
47. システム開発におけるデザインの要素
具体的
• 快適なインターフェース
• 快適なインタラクション
デザインガイドラインの活用
UIコントロールによる生産性向上
• 差別化されたユーザー体験
ユーザー、課題の理解
プロトタイプによる早期の検証
抽象的
出典：Jesse James Garrett’s Elements of User Experience
http://www.jjg.net/elements 2nd FACTORY CO.,Ltd. CONFIDENTIAL 46
48. UIコントロールの有効活用
単体 結合 システム
要件定義 基本設計 詳細設計 開発
テスト テスト テスト
従来、導入が検討されたのは開発一歩手前、あ
るいは開発に着手してからであり、要件が完全
に固まった状態であった。そのため、やむを得
ずコントロールのカスタマイズをされるケース
も多く、あまり効率の良い状態ではない。
単体 結合 システム
要件定義 基本設計 詳細設計 開発
テスト テスト テスト
有効活用されているお客様では、共通して「設
計段階においてUIコンポーネントで要件が満た
せるかどうかについて評価」を行い、開発の難
易度を決定されている。結果として見積もりが
正確になり、手戻りが尐なくなる。
49. 私たちが協業でお届けできるものは：
コードレベルで再利用可能な 継続的な開発に利用できる
実際にコントロールを配置した
仮説
練りこまれたUXを表現するための
ユーザー、課題の理解
レイアウトデザイン UI ガイドライン
インタラクション設計
グラフィックアセット 触れる、実機で動く、最終に近い、
テーマ／スタイル ユーザーの想像力を喚起できる
早期の検証 プロトタイプ開発
ビジュアルデザイン プロトタイプ
実際に利用できる成果物をお届けしてい
きます。
2nd FACTORY CO.,Ltd. CONFIDENTIAL 48
