2013 年 09 月 21 日に弊社 山口 (@g_dayori) が技術ひろば.net 勉強会にて Indigo Studio を紹介させていただいた際に使用したスライドです。

1. はじめようプロトタイピング
〜もう⼿戻りなんて⾔わせない！〜
インフラジスティックス・ジャパン株式会社
山口 慧
SYamaguchi@infragistics.com
Twitter @g_dayori
技術ひろば.net 勉強会 2013/09/21

2. 本日のメニュー
• どんなもの？
• なぜ必要？
• どうやるの？
• やってみよう！
- Indigo Studio Demo!

3. 自己紹介
Blog
山口 慧（やまぐち さとる）
インフラジスティックス・ジャパン株式会社
デベロッパー・サポート エンジニア
– 5年ほどSier → Infragistics（現在）
– 英語勉強中
– ラーメン大好き

4. INFRAGISTICS 【名】
ɪnfrədʒɪˈstɪks ： インフラジスティックス
1. ニュージャージーに本社を置く UI コントロールを中心としたソフトウェ
ア製品を開発・販売するグローバルカンパニー
2. Infrastructure（基礎構造）+ logistics（後方支援）
3. バイク乗りが社⻑の東京・原宿の会社【日本】
4. インフラさん【俗称】

5. NETADVANTAGE

6. Cross Platform Modern User Experience

7. XAML styles to match published Microsoft themes.

8. Indigo Studio
• 2012/12 リリース
• プロトタイプ作成ツール
• 2013/9/21 現在、無料で提供中！

9. What’s
Prototyping ?

10. プロトタイプ
プロトタイプの作製と評価 → 製造・量産へ
“検証や改良を目的とした試作機”

11. ソフトウェア プロトタイピング
要件定義 設計 開発
単体・結合
テスト
ユーザ
テスト
リリース
後工程になるほど
修正コストが大き
くなるから、
ユーザに早めに評
価してもらおう。
手戻り

12. なぜ手戻りが起きるのか
要求仕様
基本設計
詳細設計
実装
単体テスト
結合テスト
ユーザテスト
• 手戻りの原因
– 確認漏れ、不具合、その他
– 利⽤シーン
– 利⽤シナリオ
– 未体験
– 特にユーザビリティ
– そもそもイメージしてない
（できない）
開発
ユーザ
仕様変更..

13. ソフトウェア プロトタイピング
といっても、最終目的は、
ユーザにより良いモノを
提供すること
結果的に、手戻りが無くなり総工数短縮にも繋がる。
そもそも、戻れるだけありがたい。
• デザイン
• 機能性
• 使用感
• ユーザ体験
etc・・・

14. モバイルデバイスの普及
• スマホ個⼈利⽤が急激に増えたため
– ユーザ体験のしきい値が非常に高い。
– 少しでもストレスを感じるとすぐ使わなくなる。
– 非機能要件で、ユーザ評価が急激に落ちる。
本来の目的である
機能要件がどうかの
前に、ユーザ体験の
ハードルをクリアしな
ければならない・・・

15. エンタープライズユーザの変化
•主役はIT部門から利⽤部門主導へ
•ユーザ不在はもう許されない
対象年齢:生後６カ月より

16. “頑張って完璧に作ったつもりが、
そもそも作るものを間違っていました…”
なんていう事のないように、最初に
ゴールをしっかり確認しよう。
プロトタイピングで
• シーン・シナリオをしっかり考える。
• ユーザに体験させ、UI・UXの評価。
• 要件や構造設計なども確認。

17. How to make a
Prototype ?

18. 手法
• ペーパー
• 非専用ツール
• 専用ツール
• プログラミング

19. ペーパープロトタイピング
• 紙とペン(とはさみ)
• その場で手軽に
• 捨てやすい
（思い入れがない）

20. 非専用ツール（モックアップ）
• 大概のPCに既に入ってる
• 静的には強い
• 付属の専用ツールなども
ある PhotoShop
Excel, PowerPoint

21. 専用ツール
• 速い
• 動的に強い
• プログラミング知識いらず
• ツールによって様々
• アニメーション
• トランジション
• 画面遷移図
• スマホ上で動作
• スマホ上で作れる Indigo Studio

22. プログラミング

23. しっかり決めよう
• システム構造評価
• UI・UX評価
• プレゼンテーション・クリエーション
• どのタイミングで？
• どうやって？
• どこまで作り込む？
は目的によって明確に！
要求仕様 設計 開発
単体・結合
テスト
ユーザ
テスト
リリース

24. • 2013/9/21 現在、無料で提供中！
いつダウンロードするの？

25. Story Board
• シナリオを描きます。
• ポイント
– 用意されたシーンを組み合わせて、ユーザがアプリ
ケーションを実際に利⽤するシナリオを描く
– 自分のイラストしたものを、インポート可能
– 作成したスクリーンのインポートも可能

26. Screen
• プロトタイプを作ります。
• ポイント
– エレメントを配置してUI設計
– インタラクションの付加
– アニメーションの付加
– 画面遷移図の俯瞰
– プロトタイプ共有

27. Indigo Studio
Demo!!

28. Indigo Studio
Sneak peak!!
Version 2
• Platform Picker
• Touch Gestures
• Screen-to-Screen Transitions
• HTML5 Device Support
• iOS Platform Pack
• Document Designs with PDF Export etc…

29. インフォメーション
• ブログ（about Indigo Studio）
http://blogs.jp.infragistics.com/tags/Indigo
%20Studio/default.aspx
• 機能要望提出・投票（英語）
http://indigostudio.uservoice.com/forums/
185426-welcome-to-indigo-studio-product-
ideas-
• サポート
弊社HPよりアクセス！（@g_dayoriにおまかせを！）

30. 構想
開発
ツール
プロト
ツール
設計
作業

31. プロトタイピングしよう
• プロタイピングでユーザと早期に合意
形成し、着地点をしっかり定める。
• 適当な⽅法で、目的を意識して
• Indigo Studio を使う
（お願いします！）

32. ご清聴
ありがとうございました！