はじめようプロトタイピング（2013/09 技術ひろば.net 勉強会）

はじめようプロトタイピング〜もう⼿戻りなんて⾔わせない！〜

インフラジスティックス・ジャパン株式会社山口 慧SYamaguchi@infragistics.comTwitter @g_dayori

技術ひろば.net 勉強会 2013/09/21

本日のメニュー• どんなもの？• なぜ必要？• どうやるの？• やってみよう！

- Indigo Studio Demo!

自己紹介

Blog

山口 慧（やまぐち さとる）インフラジスティックス・ジャパン株式会社デベロッパー・サポート エンジニア

– 5年ほどSier → Infragistics（現在）– 英語勉強中– ラーメン大好き

INFRAGISTICS 【名】

ɪnfrədʒɪˈstɪks ： インフラジスティックス1. ニュージャージーに本社を置く UI コントロールを中心としたソフトウェ

ア製品を開発・販売するグローバルカンパニー2. Infrastructure（基礎構造）+ logistics（後方支援）3. バイク乗りが社⻑の東京・原宿の会社【日本】4. インフラさん【俗称】

NETADVANTAGE

Cross Platform Modern User Experience

XAML styles to match published Microsoft themes.

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

What’s Prototyping ?

プロトタイプ

プロトタイプの作製と評価 → 製造・量産へ

“検証や改良を目的とした試作機”

ソフトウェア プロトタイピング

要件定義 設計 開発 単体・結合テスト

ユーザテスト リリース

後工程になるほど修正コストが大きくなるから、ユーザに早めに評価してもらおう。

手戻り

なぜ手戻りが起きるのか

要求仕様

基本設計

詳細設計

実装

単体テスト

結合テスト

ユーザテスト

• 手戻りの原因– 確認漏れ、不具合、その他– 利⽤シーン– 利⽤シナリオ– 未体験– 特にユーザビリティ– そもそもイメージしてない

（できない）

開発

ユーザ

仕様変更..

ソフトウェア プロトタイピングといっても、最終目的は、

ユーザにより良いモノを提供すること結果的に、手戻りが無くなり総工数短縮にも繋がる。そもそも、戻れるだけありがたい。

• デザイン• 機能性• 使用感• ユーザ体験

etc・・・

モバイルデバイスの普及• スマホ個⼈利⽤が急激に増えたため

–ユーザ体験のしきい値が非常に高い。–少しでもストレスを感じるとすぐ使わなくなる。–非機能要件で、ユーザ評価が急激に落ちる。

本来の目的である機能要件がどうかの前に、ユーザ体験のハードルをクリアしなければならない・・・

エンタープライズユーザの変化•主役はIT部門から利⽤部門主導へ•ユーザ不在はもう許されない

対象年齢:生後６カ月より

“頑張って完璧に作ったつもりが、そもそも作るものを間違っていました…”

なんていう事のないように、最初にゴールをしっかり確認しよう。

プロトタイピングで• シーン・シナリオをしっかり考える。• ユーザに体験させ、UI・UXの評価。• 要件や構造設計なども確認。

How to make a Prototype ?

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

ペーパープロトタイピング• 紙とペン(とはさみ)• その場で手軽に• 捨てやすい

（思い入れがない）

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

ある PhotoShop

Excel, PowerPoint

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

プログラミング

しっかり決めよう• システム構造評価• UI・UX評価• プレゼンテーション・クリエーション

• どのタイミングで？• どうやって？• どこまで作り込む？は目的によって明確に！

要求仕様 設計 開発 単体・結合テスト

ユーザテスト リリース

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

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

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

Indigo StudioDemo!!

Indigo StudioSneak peak!!

Version 2• Platform Picker• Touch Gestures• Screen-to-Screen Transitions• HTML5 Device Support• iOS Platform Pack• Document Designs with PDF Export etc…

インフォメーション• ブログ（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におまかせを！）

構想

開発ツール

プロトツール

設計作業

プロトタイピングしよう• プロタイピングでユーザと早期に合意

形成し、着地点をしっかり定める。• 適当な⽅法で、目的を意識して• Indigo Studio を使う

（お願いします！）

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