狠狠撸

Infragistics Propietary1
高速プロトタイピングで
失敗しないUI開発
2016/7/29
Developers Summit 2016 Summer 【C-4】
インフラジスティックス?ジャパン株式会社
山口慧

Blogデスクトップ / Web / モバイル、様々な開発
プラットフォームにおける UI まわりの技術
をみています。
山口慧（さとる）
インフラジスティックス?ジャパン株式会社
ソリューションコンサルタント
About me

Infragistics Japan Co., Ltd.
日本を含むアジア太平洋地域を担当
?1989年設立 (アメリカ/ニュージャージー州）
?1996年代理店経由で日本国内販売開始
?2003年開発コンポーネントNetAdvantage販売開始
?2006年インフラジスティックス?ジャパン設立
国内サポート強化。
?2007- WPF, Silverlight等マイクロソフトプラットフォーム
-2010年に対応した製品提供。
?2011年 HMTL5/jQuery等対応開始
?2012年 iOS対応コントロール提供開始
SharePointモバイルソリューション提供開始
?2013年開発ツールブランドをNetAdvantageからInfragisticsに変更
?2014年テストスイートであるHP Unified Functioal Testing(UFT),IBM Rational Functional
Tester(RTF)に対応したデスクトップコントロールテストツール提供開始。

おかげさまで27周年！！
デスクトップ?Web?モバイル、様々なプラットフォーム向けに
高機能かつハイパフォーマンスな画面開発部品を提供

Design – Develop - Run
あなたのビジネスにInfragistics
Design Develop Test Data
Insights
Mobile
Collaboration
Indigo Studio を
活用したUIデザ
インプロセスの
改善
ユーザシナリオ
考察、コードレ
スでのプロトタ
イプ作成からそ
の検証までを
トータルサポー
トします。
Infragistics
Ultimate を活用
した開発生産性
の飛躍的な向上
さらに、UI標準
と定めることで
見積もりの精緻
化や品質バラつ
きを防ぐことが
できます。
Infragistics
TestAdvantage
を活用したUIテ
ストの自動化
テストの抜け漏
れを機械的に防
いだり、メンテ
ナンス時の再テ
スト工数を大幅
に削減すること
が可能です。
ReportPlus
で手軽にBI
企業DBやSFA、そ
の他クラウドサー
ビスなど様々な情
報をつなぎ合わせ
て可視化し、シー
ムレスにユーザへ
提供。デスクトッ
プ、モバイル、ス
クラッチアプリ
ケーションへの組
み込みにも対応。
SharePlus
でSharePointを
モバイル活用
Online / Offline
気にすることな
くいつでも何処
からでも
SharePointを最
大限に活用でき
ます。

Indigo Studio
Design for Web / Mobile / Desktop
Share and view prototypes on any device
Collaborate using comments and conduct remote usability studies
Interactive prototypes, rapid & code free

プロトタイピングされていますか？
全力でやりますよ。
アプリはUXが全てでしょ？
それなりに時間をかけたいです。
企画-開発間での調整にも。
B to C サービス?アプリ開発屋
B to B パッケージソフト開発屋
イメージの共有
アイデアの仮説検証
不特定多数のユーザや企業がターゲットの場合

プロトタイピングされていますか？
そんなことする余裕ないですが？
プロトタイピングを見積もりに入れて
良いならやりますよ？
受託開発のSIer
開発手戻り防止
要件の抜けモレ防止
基本的には設計書のレビュー
で済ませることが多いですね。
ユーザ企業のIT部門
特定のユーザがターゲットの場合

特定のユーザがターゲットの場合
要求仕様
基本設計
詳細設計
実装
単体テスト
結合テスト
ユーザテスト
開発
ユーザ
「想像してたのと違うなぁ」
「実際に利用してみたら???」
「○○はどうやってやるんですか？」
「あ、ここにはこれが必要ですね。」

共通して言えること
文字や言葉ではイメージ共有に限界がある
↓
プロトタイピングが共通言語

提示
どの様な UI/UX を
提供するか？
適切な体験か？DESIGN VALIDATE
改善

DESIGN
Paper
prototypes
Fully coded
prototypes
Flickr: Andy Bardill
Interactive
prototypes
Static
wireframes
linked together
Final
App
$
$$$$
Unclear Clear

同席してリモートで
P
M
LOCATION #1
…
…
P M
LOCATION #1 LOCATION #2
Phone/Chat
Screen
share
VALIDATE
P
LOCATION #1
おまかせ
Unclear Clear
$
$$$$

Be Fast
? 自社サービス?アプリケーションベンダー
?早まるリリースサイクル、ビジネスアイデアをすぐ形に
? IT部門, 受託開発
?プロジェクト的にコストや時間の制限
デザインと評価の短いイテレーションで
無駄にならない成果物を定める

INDIGO STUDIO
? 「ユーザーストーリ」に基づいた
画面プロトタイプ作成
? 「ユーザー操作」の結果を
アニメーション効果を用いて表示
? プロジェクトのゴールを視覚的に認識
DESIGN
INDIGODESIGNED.COM
? PC / タブレット / モバイルなど
様々な利用環境でのプロトタイプ検証
? 顧客からの早期フィードバック取得
? ユーザビリティテストの自動化により
早期実施によるデザイン検証
VALIDATE
プロトタイプの
共有

続きは
Indigo Studio で！
http://bit.ly/indigo-slide

セッション当日はIndigo Studioで作成されたオンライン上のプロトタイプを使用しました。 http://bit.ly/indigo-slide

プロトタイプの作成例

Ignite UI

活用パターン

よくある活用パターン(Inside a team)
デザイナー
デザイナー
開発者
開発者開発者
開発者
開発者
開発者
ディレクターデザイナー
Indegodesigned.com

よくある活用パターン(To end user)
設計者
ユーザ
Indegodesigned.com
開発者

事例１ – デザイン刷新時の古参ユーザとの調整
パッケージ?サービス
ベンダー
メニュー構成や画面
遷移、アセットなど
刷新デザイン
シェア?コメント?
ユーザビリティスタ
ディの仕組みで既存
ユーザの操作時間や
ミスオペ等から、影
響度のチェック
新規仮想ユーザ
既存古参ユーザ
デザインの刷新を行い
たいが、既存ユーザへ
の影響が心配。
現状維持が良い
改善できる点 ? 諦める点を決めてデザイン刷新

事例２ – 大規模開発におけるFW展開
共通化チーム
UIデザインガイド
開発基盤
共通部品
</>
設計者
エンドユーザ
Indigo Studioを用い
た量産時の画面設計
ScreenParts による
共通部品の組込み
UIデザインガイドに
沿ったCSS定義
UIデザインガイドに
沿ったテンプレート
提供設計書
設計書へ落とし込み
手戻り防止
デザインの均質化

最後に
? 自社サービス?アプリケーションベンダー
?アイデアを素早く形に、すぐに共有
?チームのコミュニケーションUP
? IT部門, 受託開発SIer
?まずは始めよう
?全体の底上げ
?設計プロセスの一部として取入れ

完全日本語化 Coming soon !!
Indigo Studio & Indigodesigned.com

Indigo Studio リソース
? プロトタイプ共有サイト
http://indigodesigned.com
? 製品概要紹介
http://jp.infragistics.com/products/indigo-studio
? 製品ヘルプページ
http://docs.indigodesigned.com/ja

ありがとうございました！

狠狠撸

高速プロトタイピングで失敗しないUI開発 - Developer summit 2016 summer

Convert to study materialsBETA

More Related Content

高速プロトタイピングで失敗しないUI開発 - Developer summit 2016 summer