HCD-net サービスデザイン方法論実践編 第4回ペーパープロトタイピングの講義の中で利用したスライド

1. © 2015 Goodpatch Inc. All rights reserved.
2015/11/28 @ Yahoo Japan Corporation
Goodpatch Inc. Tetsuya Takeda
サービスデザイン方法論実践編
第4回ペーパープロトタイピング
Prottのご紹介

2. © 2015 Goodpatch Inc. All rights reserved. 2© 2015 Goodpatch Inc. All rights reserved.

3. © 2015 Goodpatch Inc. All rights reserved.
株式会社グッドパッチ 会社概要
3
Tokyo Berlin

4. © 2015 Goodpatch Inc. All rights reserved. 4

5. © 2015 Goodpatch Inc. All rights reserved. 5
デザインのチカラを証明する
デザインのチカラを信じる人を増やす
世の中により良いプロダクトを増やす
チームのデザインプロセスを変革する

6. © 2015 Goodpatch Inc. All rights reserved. 6
世界140カ国以上、ユーザー数 4万5千人以上* に使われているプロ
トタイピングツールです。プロトタイピング文化を日本の開発現場に
広めることで、日本のプロダクトが世界レベルでよりユーザーに求め
られる素晴らしいプロダクトへとなることを一つの目標にしています。
https://prottapp.com/
*2015/10時点

7. © 2015 Goodpatch Inc. All rights reserved. 7

8. © 2015 Goodpatch Inc. All rights reserved. 8

9. © 2015 Goodpatch Inc. All rights reserved. 9

10. © 2015 Goodpatch Inc. All rights reserved. 11

11. © 2015 Goodpatch Inc. All rights reserved. 12
Prottのポイント１
高速プロトタイピング

12. © 2015 Goodpatch Inc. All rights reserved.
高速プロトタイピングとPrott
13
はじめてでも戸惑わない操作性
UIが直感的で使いやすく、日本語にも対応し
ているので初めてでも操作に戸惑わない
Prott iOSアプリを使用すれば、スマートフォ
ン実機で簡単にアプリのプロトタイプ編集、
検証ができる
簡単にスマホ実機で編集・検証 豊富なアクション設定
ジェスチャー、トランジションのバリエーショ
ンが豊富で、実際のアプリの挙動がイメージ
しやすい
叩き台になるプロトタイプをスピーディーにつくる

13. © 2015 Goodpatch Inc. All rights reserved.
はじめてでも戸惑わない操作性
14
UIが直感的で使いやすく、日本語にも対応しているので初めてでも操作に戸惑わない
• 直感的に使えるUI、操作性
• 日本語表記対応（英語表記も対応）

14. © 2015 Goodpatch Inc. All rights reserved.
簡単にスマホ実機で編集・検証
15
Prott iOSアプリ、Androidアプリを使用すれば、スマートフォン
実機で簡単にアプリのプロトタイプ編集、検証ができる
• アプリを起動
プロトタイプ編集 プレビュー確認

15. © 2015 Goodpatch Inc. All rights reserved.
豊富なアクション設定
16
• ジェスチャー、トランジションのバリエーションが豊富で、実際のアプリの挙動がイメージしやすい
• 1つのホットスポットに対して複数（最大4つ）のリンク先、ジェスチャーが設定できます
• ジェスチャーは下記9種類
1.タップ
2.ダブル タップ
3.タップ ホールド
4.スワイプ アップ
5.スワイプ ダウン
6.スワイプ ライト
7.スワイプ レフト
8.ピンチ イン
9.ピンチ アウト
• トランジションは下記8種類
1.プッシュ レフト
2.プッシュ ライト
3.スライド アップ
4.スライド ダウン
5.スライド レフト
6.スライド ライト
7.フリップ レフト
8.フリップ ライト

16. © 2015 Goodpatch Inc. All rights reserved. 17
Prottのポイント2
チームワーク活性化

17. © 2015 Goodpatch Inc. All rights reserved.
チームワーク活性化とPrott
18
シームレスなコラボレーション
チームメンバーがどのような利用シーン、端
末でもリアルタイムにプロトタイプの共有、
コミュニケーションが可能
外部業務ツールとの連携
slack、HipChat、Dropbox等のコミュニ
ケーションツール、データ共有ツールとAPI
連携
プロトタイプに直接コメント
プロトタイプにPC、スマホから直接フィード
バックコメントの投稿、レスが可能
「つくる、シェアする、フィードバックする」を繰り返してブラッシュアップする
簡単にプロトタイプをシェア
シェア機能を使えば、プロトタイプのURLを
簡単にメンバーに送信・共有
パスワード設定でロックも可能

18. © 2015 Goodpatch Inc. All rights reserved.
シームレスなコラボレーション
19
チームメンバーがどのような利用シーン、端末でも
リアルタイムにプロトタイプの共有、コミュニケー
ションが可能
レビュー
コメント
プロトタイプ編集
スマホ
PC
PC
ディレクター
@外出先
デザイナー
@自社オフィス
エンジニア
@委託先オフィス
スマホ
スマホ

19. © 2015 Goodpatch Inc. All rights reserved.
簡単にプロトタイプをシェア
20
シェア機能を使えば、
プレゼンモード画面で確認
シェア設定画面
スマホ実機画面で確認
URL送信
URL送信
• シェアする相手のメールアドレスを入力してURL送信
• パスワード設定も可能
PC
スマホ
• シェアURLを簡単に送信・共有が可能
• パスワード設定でロックも可能

20. © 2015 Goodpatch Inc. All rights reserved.
プロトタイプに直接コメント
21
PC、スマホからプロトタイプに直接フィードバックが可能
• プロトタイプにコメントを投稿
（スマホからも可能）
• コメントにリプライ（スマホか
らも可能）
プロトタイプにコメント投稿 コメントに対してリプライ投稿

21. © 2015 Goodpatch Inc. All rights reserved.
外部業務ツールとの連携
22
slack、HipChatにアクティビティーを投稿
Dropboxからスクリーン画像をインポート
自動投稿 ユーザー通知
画像データインポート

22. © 2015 Goodpatch Inc. All rights reserved. 23

23. © 2015 Goodpatch Inc. All rights reserved. 24

24. © 2015 Goodpatch Inc. All rights reserved.
Prottのプロトタイプの種類
25