サービスデザイン方法論実践編...

© 2015 Goodpatch Inc. All rights reserved.

2015/11/28 @ Yahoo Japan CorporationGoodpatch Inc. Tetsuya Takeda

サービスデザイン方法論実践編第4回ペーパープロトタイピング Prottのご紹介


株式会社グッドパッチ　会社概要

3

Tokyo Berlin


デザインのチカラを証明する⇒デザインのチカラを信じる人を増やす ⇒世の中により良いプロダクトを増やす ⇒チームのデザインプロセスを変革する


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

https://prottapp.com/

*2015/10時点

https://prottapp.com/


Prottのポイント１高速プロトタイピング


高速プロトタイピングとPrott

13

はじめてでも戸惑わない操作性

UIが直感的で使いやすく、日本語にも対応しているので初めてでも操作に戸惑わない

Prott iOSアプリを使用すれば、スマートフォン実機で簡単にアプリのプロトタイプ編集、検証ができる

簡単にスマホ実機で編集・検証豊富なアクション設定

ジェスチャー、トランジションのバリエーションが豊富で、実際のアプリの挙動がイメージしやすい

叩き台になるプロトタイプをスピーディーにつくる


はじめてでも戸惑わない操作性

14

UIが直感的で使いやすく、日本語にも対応しているので初めてでも操作に戸惑わない

• 直感的に使えるUI、操作性

• 日本語表記対応（英語表記も対応）


簡単にスマホ実機で編集・検証

15

Prott iOSアプリ、Androidアプリを使用すれば、スマートフォン実機で簡単にアプリのプロトタイプ編集、検証ができる

• アプリを起動

　プロトタイプ編集プレビュー確認


豊富なアクション設定

16

• ジェスチャー、トランジションのバリエーションが豊富で、実際のアプリの挙動がイメージしやすい • 1つのホットスポットに対して複数（最大4つ）のリンク先、ジェスチャーが設定できます

• ジェスチャーは下記9種類 1.タップ 2.ダブルタップ 3.タップホールド 4.スワイプアップ 5.スワイプダウン 6.スワイプライト 7.スワイプレフト 8.ピンチイン 9.ピンチアウト

• トランジションは下記8種類 1.プッシュレフト 2.プッシュライト 3.スライドアップ 4.スライドダウン 5.スライドレフト 6.スライドライト 7.フリップレフト 8.フリップライト


Prottのポイント2 チームワーク活性化


チームワーク活性化とPrott

18

シームレスなコラボレーション

チームメンバーがどのような利用シーン、端末でもリアルタイムにプロトタイプの共有、コミュニケーションが可能

外部業務ツールとの連携

slack、HipChat、Dropbox等のコミュニケーションツール、データ共有ツールとAPI連携

プロトタイプに直接コメント

プロトタイプにPC、スマホから直接フィードバックコメントの投稿、レスが可能

「つくる、シェアする、フィードバックする」を繰り返してブラッシュアップする

簡単にプロトタイプをシェア

シェア機能を使えば、プロトタイプのURLを簡単にメンバーに送信・共有パスワード設定でロックも可能


シームレスなコラボレーション

19

チームメンバーがどのような利用シーン、端末でもリアルタイムにプロトタイプの共有、コミュニケーションが可能

レビュー

コメント

プロトタイプ編集

スマホ

PC

PC

ディレクター @外出先

デザイナー @自社オフィス

エンジニア @委託先オフィス

スマホ

スマホ


簡単にプロトタイプをシェア

20

シェア機能を使えば、プレゼンモード画面で確認

シェア設定画面

スマホ実機画面で確認

URL送信

URL送信

• シェアする相手のメールアドレスを入力してURL送信 • パスワード設定も可能

PC

スマホ

•シェアURLを簡単に送信・共有が可能 •パスワード設定でロックも可能


プロトタイプに直接コメント

21

PC、スマホからプロトタイプに直接フィードバックが可能

• プロトタイプにコメントを投稿（スマホからも可能）

• コメントにリプライ（スマホからも可能）

プロトタイプにコメント投稿コメントに対してリプライ投稿


外部業務ツールとの連携

22

✓slack、HipChatにアクティビティーを投稿

✓Dropboxからスクリーン画像をインポート

自動投稿ユーザー通知

画像データインポート


Prottのプロトタイプの種類

25

サービスデザイン方法論実践編...

Design