やーまんぶろぐ

気が向いた時にだけ書くブログ

Prottを使ってペーパープロトを作成する方法

Prottというサービスを使ってペーパープロトを作成する方法をメモしておきます。
prottapp.com

Prottとは

紙にスケッチした画面を撮影して、遷移の仕方を指定するだけで、簡単にプロトタイプを作成できるサービスです。

テンプレート用紙を印刷する

まずはテンプレート用紙を印刷します。無料であります。
popapp.in

私はiPhone 6 Plus の用紙を印刷しました。

こちらに画面をスケッチします。

Prottの画面遷移

スケッチした画面を撮影して、画面遷移を作っていきます。

Prottのジェスチャーとトラジション

下のジェスチャーとトラジションから1つずつ選択して画面遷移を作ります。

アクションを発生させるためのジェスチャー
f:id:yamano3201:20160507225327p:plain
f:id:yamano3201:20160507225355p:plain

次のページに移動するときのトラジション
f:id:yamano3201:20160507225225p:plain
f:id:yamano3201:20160507225242p:plain

TODOアプリの画面遷移

サンプルとしてTODOアプリを作ってみました。
トップ画面とログイン画面のジェスチャー、トラジションをメモしておきます。

トップ画面

f:id:yamano3201:20160507230815p:plain
ターゲット:ログイン
ジェスチャー:タップ
トラジション:プッシュレフト
※ログインしか作りませんでした。

ログイン画面

f:id:yamano3201:20160507231230p:plain
ターゲット:戻る
ジェスチャー:タップ
トラジション:プッシュライト
※プッシュライトで戻る動きを表現しています。

ターゲット:ログイン
ジェスチャー:タップ
トラジション:ディゾルブ
※ポップアップへのトラジションが難しかったです。
※ディゾルブ(フェードアウトとフェードインをくり返す)で表現したけどちょっとしっくりきてないかも。

デモ

f:id:yamano3201:20160507233453g:plain

下の流れでデモしています。
トップ→ログイン→戻る→トップ→ログイン→ログイン成功→戻る→トップ→ログイン→ログイン成功→TODOを追加→キャンセル→TODOを追加→OK→OK→削除→キャンセル→削除→OK

最後に

今回は単純なTODOアプリのペーパープロトを作成してみました。
次作るアプリもProttを使ってペーパープロトを作成してから、作りたいと思います。

気が向いたら、また書きます。