Pixate勉強会で使用した資料です。

1. プロトタイピングの目的・範囲・ツール
Partner : Satoshi Omiya (webtron Inc.)

2. プロトタイピングの目的

3. 何のためにプロトタイピングするか？
• デザインやアイディアの試行錯誤
• ユーザビリティの向上
• デザインや設計の評価
• 実装時の手戻りを減らす
• チーム内やクライアントとの合意形成
• デザイナー⇄エンジニア間の意思疎通
など

4. プロトタイピングの役割は大きく２つ
• デザインやアイディアの試行錯誤
• ユーザビリティの向上
• デザインや設計の評価
• 実装時の手戻りを減らす
開発ツール
• チーム内やクライアントとの合意形成
• デザイナー⇄エンジニア間の意思疎通
コミュニケーションツール
様々なプロトタイピングサービスの
登場により役割が大きくなってきた

5. プロトタイピングの範囲

6. プロトタイピングの範囲
後期初期
それぞれの範囲に適したプロトタイピングツールを使おう
アイディア
画面デザイン
画面遷移
全体構造
手触り・使い心地
フィードバック
低 高
詳細度
開発フェーズ

7. 範囲に適したプロトタイピングツール

8. 開発フェーズ
後期初期
手触りや使い心地
フィードバック
詳細度：低 詳細度：高
アイディア・画面デザインの検討
画面遷移や
全体構造の検討
ペーパー
プロトタイピング

9. ペーパープロトタイピング
ペンやマーカーを使って画面デザインのアイディアを出しているところ

10. ペーパープロトタイピング
実寸でプリントアウトした画面を切り刻んで「オズの魔法使い」などの手法でユーザビリティテストを行う

11. ペーパープロトタイピングパッド
THE GUILD ではプロトタイピングに特化したレポート用紙「Paper Prototyping Pad」をつくりました

12. ペーパープロトタイピングパッド
iPhone実寸のグリッド入り＆各種ガイド線付なので NavigationBar や TabBar なども簡単に線を引けます

13. ペーパープロトタイピングパッド
https://goo.gl/qujtfI

14. 開発フェーズ
後期初期
アイディア
画面デザイン
手触りや使い心地
フィードバック
詳細度：低 詳細度：高
画面遷移や全体構造の検討

15. 画面遷移や全体構造の検討
複数画面を登録し、各画面をリンクさせていくタイプ

16. 画面遷移や全体構造の検討
画面内に配置したHotSpotに遷移先画面をリンクして画面遷移をシミュレートできます

17. 画面遷移や全体構造の検討
LIVESHAREなどデザインレビュー、作業者間コミュニケーションのサポート機能が豊富

18. 画面遷移や全体構造の検討
ペーパープロトタイプと連携しやすい機能が特徴

19. マイナスを０に近づける
ユーザビリティや設計の整合性などを検証してリファインし、不具合や瑕疵をなくす
アイディア、画面デザイン 画面遷移や全体構造
実用的品質（Pragmatic Quality）は、もはや当たり前に

20. UXの捉え方：Hassenzahlのモデル
ユーザがUXをどう捉えているかを説明
内 容
表 現
機能性
インタラクション
製 品 の 特 徴
実用的属性（Pragmatic Attributes）
操作性
刺激・共感・喚起
快楽的属性（Hedonic Attributes）
顕 在 的 な 製 品 の 特 性
状 況
魅力
楽しさ
満足
結 果
よいUXの醸成には「実用的品質」と「快楽的品質」が求められる
Hassenzahl, 2003

21. ０をプラスに
手触りや使い心地といった快楽的品質（Hedonic Quality）を高めていく
手触り・使い心地・フィードバック

22. インタラクションデザインの重要性
Android の Material Design ガイドラインでは画面遷移時のパーツの動きなどが細かく定義されている

23. インタラクションデザインのプロトタイピング
デザインスキルに加えエンジニアリングスキルが必要とされるため
十分に検討することや満足のいく成果を出すことが難しい部分
デザイン能力 エンジニアリング能力
ビジュアル・モーションデザインをユーザの操作によってどのように変化するかを動的に定義する必要がある
＋

24. 開発フェーズ
後期初期
画面デザイン
アイディア
詳細度：低 詳細度：高
手触りや使い心地フィードバックを検討
画面遷移や
全体構造の検討

25. Origami
パッチと呼ばれる要素を線で繋いでいくことで、インタラクティブなモックアップを作成することができます

26. Principle
複数の画面間の遷移のシミュレートができ、かつインタラクティブなUIも作ることができる

28. ありがとうございました