Embed Size (px)
Citation preview
Infragistics Propietary1
高速プロトタイピングで失敗しないUI開発
2016/7/29
Developers Summit 2016 Summer 【C-4】
インフラジスティックス・ジャパン株式会社
山口 慧
Infragistics Propietary2
Blogデスクトップ / Web / モバイル、様々な開発
プラットフォームにおける UI まわりの技術
をみています。
山口 慧（さとる）
インフラジスティックス・ジャパン株式会社
ソリューションコンサルタント
About me
Infragistics Propietary3
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)に対応したデスクトップコントロールテストツール提供開始。
Infragistics Propietary4
おかげさまで27周年！！
デスクトップ・Web・モバイル、様々なプラットフォーム向けに
高機能かつハイパフォーマンスな画面開発部品を提供
Infragistics Propietary5
Design – Develop - Run あなたのビジネスにInfragistics
Design Develop Test Data Insights
Mobile Collaboration
Indigo Studio を活用したUIデザインプロセスの改善
ユーザシナリオ考察、コードレスでのプロトタイプ作成からその検証までをトータルサポートします。
InfragisticsUltimate を活用した開発生産性の飛躍的な向上
さらに、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
Infragistics Propietary7
プロトタイピングされていますか？
全力でやりますよ。アプリはUXが全てでしょ？
それなりに時間をかけたいです。企画-開発間での調整にも。
B to C サービス・アプリ開発屋
B to B パッケージソフト開発屋
イメージの共有
アイデアの仮説検証
不特定多数のユーザや企業がターゲットの場合
Infragistics Propietary8
プロトタイピングされていますか？
そんなことする余裕ないですが？プロトタイピングを見積もりに入れて
良いならやりますよ？
受託開発のSIer
開発手戻り防止
要件の抜けモレ防止
基本的には設計書のレビューで済ませることが多いですね。
ユーザ企業のIT部門
特定のユーザがターゲットの場合
Infragistics Propietary9
特定のユーザがターゲットの場合
要求仕様
基本設計
詳細設計
実装
単体テスト
結合テスト
ユーザテスト
開発
ユーザ
「想像してたのと違うなぁ」
「実際に利用してみたら・・・」
「○○はどうやってやるんですか？」
「あ、ここにはこれが必要ですね。」
Infragistics Propietary10
共通して言えること
文字や言葉ではイメージ共有に限界がある↓
プロトタイピングが共通言語
Infragistics Propietary11
提示
どの様な UI/UX を提供するか？
適切な体験か？DESIGN VALIDATE
改善
Infragistics Propietary12
DESIGN
Paper prototypes
Fully coded prototypes
Flickr: Andy Bardill
Interactive prototypes
Static wireframes
linked together
Final App
$
$$$$
Unclear Clear
Infragistics Propietary13
同席してリモートで
PM
LOCATION #1
……
P M
LOCATION #1 LOCATION #2
Phone/ChatScreen share
VALIDATE
P
LOCATION #1
おまかせ
Unclear Clear
$
$$$$
Infragistics Propietary14
Be Fast
自社サービス・アプリケーションベンダー
早まるリリースサイクル、ビジネスアイデアをすぐ形に
IT部門, 受託開発
プロジェクト的にコストや時間の制限
デザインと評価の短いイテレーションで無駄にならない成果物を定める
Infragistics Propietary15
INDIGO STUDIO
• 「ユーザー ストーリ」に基づいた
画面プロトタイプ作成
• 「ユーザー操作」の結果を
アニメーション効果を用いて表示
• プロジェクトのゴールを視覚的に認識
DESIGN
INDIGODESIGNED.COM
• PC / タブレット / モバイルなど
様々な利用環境でのプロトタイプ検証
• 顧客からの早期フィードバック取得
• ユーザビリティ テストの自動化により
早期実施によるデザイン検証
VALIDATE
プロトタイプの共有
Infragistics Propietary17セッション当日はIndigo Studioで作成されたオンライン上のプロトタイプを使用しました。 http://bit.ly/indigo-slide
Infragistics Propietary18セッション当日はIndigo Studioで作成されたオンライン上のプロトタイプを使用しました。 http://bit.ly/indigo-slide
Infragistics Propietary19セッション当日はIndigo Studioで作成されたオンライン上のプロトタイプを使用しました。 http://bit.ly/indigo-slide
Infragistics Propietary20セッション当日はIndigo Studioで作成されたオンライン上のプロトタイプを使用しました。 http://bit.ly/indigo-slide
プロトタイプの作成例
Infragistics Propietary21セッション当日はIndigo Studioで作成されたオンライン上のプロトタイプを使用しました。 http://bit.ly/indigo-slide
プロトタイプの作成例
Infragistics Propietary22セッション当日はIndigo Studioで作成されたオンライン上のプロトタイプを使用しました。 http://bit.ly/indigo-slide
Infragistics Propietary23セッション当日はIndigo Studioで作成されたオンライン上のプロトタイプを使用しました。 http://bit.ly/indigo-slide
Infragistics Propietary24セッション当日はIndigo Studioで作成されたオンライン上のプロトタイプを使用しました。 http://bit.ly/indigo-slide
Infragistics Propietary25セッション当日はIndigo Studioで作成されたオンライン上のプロトタイプを使用しました。 http://bit.ly/indigo-slide
Infragistics Propietary26セッション当日はIndigo Studioで作成されたオンライン上のプロトタイプを使用しました。 http://bit.ly/indigo-slide
Infragistics Propietary27セッション当日はIndigo Studioで作成されたオンライン上のプロトタイプを使用しました。 http://bit.ly/indigo-slide
Ignite UI
Infragistics Propietary28セッション当日はIndigo Studioで作成されたオンライン上のプロトタイプを使用しました。 http://bit.ly/indigo-slide
Infragistics Propietary29
活用パターン
Infragistics Propietary30
よくある活用パターン(Inside a team)
デザイナー
デザイナー
開発者
開発者 開発者
開発者
開発者
開発者
ディレクター デザイナー
Indegodesigned.com
Infragistics Propietary31
よくある活用パターン(To end user)
設計者
ユーザ
Indegodesigned.com
開発者
Infragistics Propietary32
事例１ – デザイン刷新時の古参ユーザとの調整
パッケージ・サービスベンダー
メニュー構成や画面遷移、アセットなど刷新デザイン
シェア・コメント・ユーザビリティスタディの仕組みで既存ユーザの操作時間やミスオペ等から、影響度のチェック
新規仮想ユーザ
既存古参ユーザ
デザインの刷新を行いたいが、既存ユーザへ
の影響が心配。
現状維持が良い
改善できる点 ・ 諦める点 を決めてデザイン刷新
Infragistics Propietary33
事例２ – 大規模開発におけるFW展開
共通化チーム
UIデザインガイド
開発基盤共通部品
</>
設計者
エンドユーザ
Indigo Studioを用いた量産時の画面設計
ScreenParts による共通部品の組込み
UIデザインガイドに沿ったCSS定義
UIデザインガイドに沿ったテンプレート提供設計書
設計書へ落とし込み
手戻り防止デザインの均質化
Infragistics Propietary34
最後に
自社サービス・アプリケーションベンダー
アイデアを素早く形に、すぐに共有
チームのコミュニケーションUP
IT部門, 受託開発SIer
まずは始めよう
全体の底上げ
設計プロセスの一部として取入れ
完全日本語化 Coming soon !!Indigo Studio & Indigodesigned.com
Infragistics Propietary36
Indigo Studio リソース
プロトタイプ共有サイト
http://indigodesigned.com
製品概要紹介
http://jp.infragistics.com/products/indigo-studio
製品ヘルプページ
http://docs.indigodesigned.com/ja
Infragistics Propietary37
ありがとうございました！
