O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
Infragistics Propietary1
高速プロトタイピングで
失敗しないUI開発
2016/7/29
Developers Summit 2016 Summer 【C-4】
インフラジスティックス・ジャパン株式会社
山口 慧
Infragistics Propietary2
Blogデスクトップ / Web / モバイル、様々な開発
プラットフォームにおける UI まわりの技術
をみています。
山口 慧(さとる)
インフラジスティックス・ジャパン株式会社
ソリューシ...
Infragistics Propietary3
Infragistics Japan Co., Ltd.
日本を含むアジア太平洋地域を担当
・1989年 設立 (アメリカ/ニュージャージー州)
・1996年 代理店経由で日本国内販売開始
・2...
Infragistics Propietary4
おかげさまで27周年!!
デスクトップ・Web・モバイル、様々なプラットフォーム向けに
高機能かつハイパフォーマンスな画面開発部品を提供
Infragistics Propietary5
Design – Develop - Run
あなたのビジネスにInfragistics
Design Develop Test Data
Insights
Mobile
Collaborati...
Indigo Studio
Design for Web / Mobile / Desktop
Share and view prototypes on any device
Collaborate using comments and con...
Infragistics Propietary7
プロトタイピングされていますか?
全力でやりますよ。
アプリはUXが全てでしょ?
それなりに時間をかけたいです。
企画-開発間での調整にも。
B to C サービス・アプリ開発屋
B to B ...
Infragistics Propietary8
プロトタイピングされていますか?
そんなことする余裕ないですが?
プロトタイピングを見積もりに入れて
良いならやりますよ?
受託開発のSIer
開発手戻り防止
要件の抜けモレ防止
基本的には設計...
Infragistics Propietary9
特定のユーザがターゲットの場合
要求仕様
基本設計
詳細設計
実装
単体テスト
結合テスト
ユーザテスト
開発
ユーザ
「想像してたのと違うなぁ」
「実際に利用してみたら・・・」
「○○はどうや...
Infragistics Propietary10
共通して言えること
文字や言葉ではイメージ共有に限界がある
↓
プロトタイピングが共通言語
Infragistics Propietary11
提示
どの様な UI/UX を
提供するか?
適切な体験か?DESIGN VALIDATE
改善
Infragistics Propietary12
DESIGN
Paper
prototypes
Fully coded
prototypes
Flickr: Andy Bardill
Interactive
prototypes
Stati...
Infragistics Propietary13
同席してリモートで
P
M
LOCATION #1
…
…
P M
LOCATION #1 LOCATION #2
Phone/Chat
Screen
share
VALIDATE
P
LOC...
Infragistics Propietary14
Be Fast
 自社サービス・アプリケーションベンダー
早まるリリースサイクル、ビジネスアイデアをすぐ形に
 IT部門, 受託開発
プロジェクト的にコストや時間の制限
デザインと評価...
Infragistics Propietary15
INDIGO STUDIO
• 「ユーザー ストーリ」に基づいた
画面プロトタイプ作成
• 「ユーザー操作」の結果を
アニメーション効果を用いて表示
• プロジェクトのゴールを視覚的に認識
D...
Infragistics Propietary16
続きは
Indigo Studio で!
http://bit.ly/indigo-slide
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
事例1 – デザイン刷新時の古参ユーザとの調整
パッケージ・サービス
ベンダー
メニュー構成や画面
遷移、アセットなど
刷新デザイン
シェア・コメント・
ユーザビリティスタ
ディの仕組みで既存...
Infragistics Propietary33
事例2 – 大規模開発におけるFW展開
共通化チーム
UIデザインガイド
開発基盤
共通部品
</>
設計者
エンドユーザ
Indigo Studioを用い
た量産時の画面設計
ScreenP...
Infragistics Propietary34
最後に
 自社サービス・アプリケーションベンダー
アイデアを素早く形に、すぐに共有
チームのコミュニケーションUP
 IT部門, 受託開発SIer
まずは始めよう
全体の底上げ
...
完全日本語化 Coming soon !!
Indigo Studio & Indigodesigned.com
Infragistics Propietary36
Indigo Studio リソース
 プロトタイプ共有サイト
http://indigodesigned.com
 製品概要紹介
http://jp.infragistics.com/p...
Infragistics Propietary37
ありがとうございました!
Próximos SlideShares
Carregando em…5
×

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

315 visualizações

Publicada em

At Developer summit 2016 summer - C4

[Description]
多様化するUIを背景に、アプリケーション開発における手戻りの防止やチーム内での意識合わせを目的に、プロトタイピングのニーズが高まりつつあります。プロトタイプの作成から評価まで手法は様々ありますが、そこに要する時間やコストと得られるフィードバックのバランスをどうとるかは大変難しい課題です。本セッションでは高速プロトタイピングツール「Indigo Studio」を活用し、動的なプロトタイプの作成からその評価・ユーザビリティテストまでのイテレーションを高速にまわす、失敗しないUI開発手法を解説いたします。

Publicada em: Tecnologia
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

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

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

×