Intro

プロトパイはスマートデバイス向けのプロトタイピングツールです。コーディングを一行もしなくても精巧なプロトタイプを手軽に素早く作る事ができます。さらに、デバイス上で実際にプロトタイプのテストすることが可能であるため、実際の使用環境が下でシミュレーションする事もできます。

Explore design solutions

エンジニアの助けがなくても様々なインタラクションを実現することができます。

Communicate designs

精巧なインタラクションを簡単に説明することができます。

Research user feedback

開発前の段階でもユーザーのフィードバックを容易に受けることができます。

Concept Model

interaction concept model

プロトパイの概念モデルは、自然界で物体が動く原理に基づいています。インタラクションの対象となるオブジェクトが存在し、そのオブジェクトに対してのインタラクションは、トリガーによって制御され、そのレスポンスが結果として返ってきます。

上の例でスクリーンに見えるオブジェクトをタップする動作はトリガーで該当し,タップしたオブジェクトが動く反応はレスポンスです。

interaction piece table

自然界で元素が数多くの組み合わせによって様々な物質を構成するように,プロトパイでは様々なトリガーとレスポンスを組み合わせることで多様なインタラクションを作り出すことができます。上の表で左側はトリガーを,右側はレスポンスを意味します。中央はトリガーとレスポンスが有機的に結合されたコンポーネントを意味します。

Why ProtoPie?

プロトパイを利用することで得られるメリットは大きく四つげられます。

1. Low learning cost

プロトパイは直観的に理解できる概念モデルを持っているとともに、他のグラフィックツールと類のUIで構成されており、他のデザインツールに慣れている方なら容易に使用できます。

2. Code Free

プロトパイはコーディングをしなくても精巧なプロトタイプが手軽に制作することができます。複雑なコードや関数の代わりにインタラクションピース(トリガー,レスポンス)を組み合わせることで 多様なインタラクションが表現できます。

3. Multi-finger gestures & sensors

プロトパイはマルチタッチに対応していますので、二本指や三本指などを使用したインタラクションを活用するプロトタイプを制作することができます。また,スマートフォンに搭載されている様々なセンサーを利用することができます。また、他のプロトタイプとは違い、デバイス間通信が必要なサービスデバイス向けのプロトタイピングも可能です。

4. Test on real phones

プロトパイはスマートフォンからもプロトタイプを確認することができます。同時に複数のデバイスでプロトタイプのテストができるため、チーム内のデザイン会議やユーザーサーベイをするときなど、様々な場面で活用できます。

Layer

プロトパイでは、他のデザインツールのやり方と同じようにレイヤーのプロパティを調整することができます。レイヤーをはメニューバーから簡単に追加できます。また、レイヤーのサイズや位置を変更する方法も他のデザインツールと同じであるため、すぐに理解することが出来ます。

Layer Property

Position
キャンバス上でレイヤーの座標を設定します。
Size
レイヤーの大きさを設定します。
Rotation
レイヤーの角度を設定します。
Origin
レイヤーの位置、大きさ、角度を変更する際の基準点(原点)を設定します。
Radius
四角レイヤーの角の曲率を設定します。
Opacity
レイヤーの透明度を設定します。レイヤーの透明度を0に設定するとトリガーに反応しません。
Fill Color
レイヤーの色と色の透明度を設定します。色の透明度を0に設定してもトリガーに反応します。
Hit area
レイヤーのタッチ領域が任意に調整できます。
Allow Touch to Affect Lower layers
レイヤーがトリガーに反応しないように設定します。
Use as Mask
ベクトルレイヤーだけが持つプロパティであり、他のレイヤーをレイヤーマスクするように設定します。

Video Layer

プロトパイは動画レイヤをサポートします。h264でエンコーディングされたMP4形式の動画ファイルが使用できます。

Play Automatically
プロトタイプが実行されたら、自動的に動画を再生します。
Looping
動画を繰り返し再生します。

Text Layer

テキストがをプロトパイ上で直接入力できます。

Size
テキストのサイズを調整できます。
Weight
フォントの太さを調整できます。
Alignment
フォントの左右,上下の整列を調整できます。
Line Spacing
テキストの行間を調整できます。

Container

コンテナーは多数のレイヤーをグループ化して一緒にコントロールしたり、スクロールやページングインタラクションを作る用途として用いられます。

Relative Coordinates

一般的にレイヤーのx,y座標はデバイスの左上を原点にした座標システムになりますが、コンテナー内のレイヤーはコンテナーの左上を原点にした座標システムになります。

Relative Coordinates

Clip Sublayers

プロパティパネルのクリップサブレイヤーをオンにすると、コンテナー領域だけが見えるようにできます。

Clip Sublayers

Scroll / Paging

プロパティパネルでコンテナーのスクロールまたはページングプロパティが設定できます。レイヤーパネルでコンテナー内にレイヤーを入れるだけでスクロールまたはページングが可能になります。

Scroll

縦、または横の長いレイヤーをスクロールします。

scroll interaction

Properties

Direction
レイヤーをスクロールまたはページングする方向を設定します。
Overscroll
オーバースクロールした時のバウンス効果をオンオフできます。

Paging

指でスクリーンを水平または垂直にドラッグする際に、ページングコンテナ ー内のレイヤーがページングコンテイナーの幅または高さの分だけ動きます。

paging interaction

Properties

Direction
レイヤーをスクロールまたはページングする方向を設定します。
Overscroll
オーバースクロールした時のバウンス効果をオンオフできます。

One-Time Trigger

ワンタイムトリガーはレスポンスを即時実行するトリガーです。レイヤーをタップしたり,特定の条件を満たした場合、ユーザーが設定した持続時間、アニメーションカーブ、リピート(繰り返し)などのプロパティを持ったレスポンスが実行されます。

Tap

レイヤーを一回タップした時にレスポンスを実行します。

tap trigger
Tap
Move

Trigger Property

Number of Fingers
最大,指5本まで同時にタッチができます。

Double Tap

レイヤーを素早く2回タップした時にレスポンスを実行します。

doubletap trigger
Double Tap
Move

Trigger Property

Number of Fingers
最大,指5本まで同時にタッチができます。

Touch Down

レイヤーに指が当った瞬間にレスポンスを実行します。

touchdown trigger
Touch Down
Move

Trigger Property

Number of Fingers
最大,指5本まで同時にタッチができます。

Touch Up

レイヤーから指が離れる瞬間にレスポンスを実行します。

touchup trigger
Touch Up
Move

Trigger Property

Number of Fingers
最大,指5本まで同時にタッチができます。

Long Press

レイヤーに一定時間長押しすると、レスポンスを実行します。

longpress trigger
Long Press
Move

Trigger Property

Number of Fingers
最大,指5本まで同時にタッチができます。
Pressing Time
指先でタッチスクリーンの同じ位置を押す時間。

Fling

レイヤーをスワイプ時、対象になるレイヤーは動きません。

fling trigger
Fling
Scale

Trigger Property

Direction
指先が動く方向を設定します。

Mouse Over

マウスのイベントです。マウスがオブジェクトと重なった際にレスポンスを実行します。

mouse over trigger
Mouse Over
Scale

Mouse Out

マウスのイベントです。マウスがオブジェクトから離れた際にレスポンスを実行します。

mouse out trigger
Mouse Out
Scale

Continuous Trigger

連続トリガーを使用すると、ターゲットレイヤーがユーザーの連続的な操作に応じて反応します。 レイヤーを動かしたり、回転させたり、サイズを調整したりすることができます。

Drag

レイヤーをドラッグして動かしたり、指の移動距離に応じてサイズと角度を調整することができます。

drag trigger
Drag
Move

Trigger Property

Number of Fingers
最大,指5本まで同時にタッチができます。

ドラッグトリガーと組み合わせるレスポンスのプロパティ

Direction
指先が動く方向を設定します。
Limit
レイヤーが動く範囲の上限を設定します。
Ratio
レイヤーがドラッグされる距離と指が動く距離の比率を設定します。数値が100の時1:1の比で動いて、数値が大きくなるほど指の動きよりレイヤーの動きが大きくなります。

Pinch

二本の指がタッチスクリーンに触れた状態に指の間隔を広げたり狭めたりする動作でレイヤーのサイズが調整することができます。

pinch trigger
Pinch
Scale

The response properties linked to pinch triggers

Direction
指が動く方向を設定します。
Pivot
レイヤーのサイズや角度が変化する基準点を設定します。
Limit
レイヤーが動く範囲の上限を設定します。

Rotate

二本の指でレイヤーをつかんで回転することができます。

rotate trigger
Rotate
Rotate

回転トリガーと組み合わせるレスポンスのプロパティ

Pivot
レイヤーのサイズや角度が変化する際の基準点を設定します。

Sensor Trigger

デバイスのセンサーが使用できます。デバイス周辺の音の大きさ、デバイスの傾きなどを活用してレスポンスをコントロールするインタラクションを作ることができます。

センサートリガーにつながるレスポンスのプロパティ

Smoothness
センサーの値にマッピングしたレイヤーの動きをなめらかにする補正ができます。1補正をしていない基本設定になっており、223とはなめらかに補正された動きを表現します。[2より3に強めの補正がかかります。
Mapping Range - Device's Sensor 4
インタラクションを実行させるセンサーの値の範囲を入力します。
Mapping Range - Response's Layer 5
センサーの値に合わせて動くレイヤーの範囲の値を入力します。

Tilt

デバイスを傾ける角度によってレスポンスを実行することができます。

tilt trigger
Tilt
Move
tilt image

Trigger Property

Axis
デバイスが回転する回転軸を選択します。

Compass

デバイスの羅針盤機能を利用してデバイスが向く方位によってレスポンスを実行することができます。

compass trigger
Compass
Rotate
compass niddle

Sound

デバイス周辺の音の大きさによってレスポンスを実行することができます。

sound trigger
Sound
Scale

3D Touch

3DTouchに対応したiPhoneのみ、タッチスクリーンを押す強度によってレスポンスを実行できます。押す強度の値は最低0から最大6.7まで認識できます。

3dtouch trigger
3D Touch
Scale

Proximity

デバイスの近接センサーを使用することができます。近接センサーから離れたり、近づいた時にレスポンスを実行します。

Proximity trigger
Proximity
Opacity

Trigger Property

Far to Near
デバイスが近づいた時にレスポンスを実行します。
Near to Far
デバイスが離れた時にレスポンスを実行します。

Conditional Trigger

ユーザーが設定した条件を満たした時にだけレスポンスが実行されるようにします。

Chain

動くレイヤーがある時に、そのレイヤーの変化によって関連付けられた他のレイヤーを影響を与えます。

chain trigger
Drag
Move
Chain
Scale

Trigger Property

Property
他のレイヤーのプロパティを変更する時に基準となるプロパティを選択します。

Response Properties after Chain

Trigger’s Layer Mapping Range 1
チェインのターゲットレイヤーの動作範囲を入力します。
Response’s Layer Mapping Range 2
チェインのターゲットレイヤーの動作に合わせて動くレイヤーの範囲値を入力します。

Range

レイヤーのプロパティが変わる際、ユーザーが設定した条件を満たした場合にレスポンスを実行します。ユーザーはレイヤーの座標やサイズのようなプロパティを直接設定した値を基準にして、基準より大きい小さいまたは含む含まないなどの状況に対する条件を設定することができます。

range trigger
Drag
Move
Range
Scale

Trigger Property

Greater than or equal to 1
ターゲットレイヤーのプロパティが特定の値以上の時に実行されます。
Less than or equal to 2
ターゲットレイヤーのプロパティが特定の値以下の時実行されます。
Between 3
ターゲットレイヤーのプロパティが特定範囲内の値になったときに実行されます。
Not between 4
ターゲットレイヤーのプロパティが特定範囲内の値にならなかったときに実行されます。

Pull

プルは成功と失敗の概念があるトリガーです。レイヤーを一定距離以上または一定速度以上にドラッグしたとき成功だと認められます。成功した場合、現在レイヤーの座標からユーザーが入力した距離だけ移動し、失敗する場合は元の位置に戻ります。

pull trigger
Pull
Scale

Trigger Property

Direction
指先が動く方向を設定します。
Distance
プルが成功したときレイヤが移動する距離を設定します.
Follow Over Pulling
レイヤーの移動距離を超過してドラッグする場合の動きを設定します。
Easing
レイヤーが動く加速度を設定します。

Start

プロトタイプが実行されたり、シーンが転換された際に、自動でレスポンスが実行されます、

onload trigger
Start
Move

Receive

デバイス間インタラクションを可能にします。デバイス単体では使用できず、Send(送信)レスポンスと一緒に使われるトリガーです。センドSendレスポンスから転送する文字列とReceive(受信)トリガーで設定した文字列が一致するときにレスポンスを実行します。

Trigger Property

Channel
通信するチャンネルを選択します。デバイス間インタラクションを可能にするためにはプロトパイスタジオを設定します。Android Broadcastingは一つのアンドロイドデバイス内にあるアプリ同士で通信するための用途に用いられます。
Message ID
転送する文字列を設定します。Send(送信)レスポンスで設定した文字列とReceive(受信)トリガーで設定した文字列が一致するとき,デバイス間のインタラクションが実行できます。

Response

レスポンスはトリガーにより発生した結果となるインタラクションピースです。トリガーと組み合わせる方式によって異なるプロパティを持ちます。

Move

レイヤーの位置を移動させます。

Move
レイヤーが移動する座標を設定します。
move response

Scale

レイヤーのサイズを調整します。

Size
レイヤーのサイズを幅widthと高さheightで調整します。コンテナーのサイズを調整する時にはコンテナー内のレイヤーのサイズには変化がありません。
Factor
レイヤーのサイズをパーセント%で調整します。コンテナーのサイズを調整する時,コンテナー中のレイヤーも一緒にサイズ調整されます。
scale response

Rotate

レイヤーを設定した角度で回転させます。

Rotate To
レイヤーが回転する角度の絶対値を設定します。
Rotate By
レイヤーの角度を設定した値の分ずつ増加または減少させます。
Direction
レイヤーが回転する方向を設定します。
rotate response

3D Rotate

レイヤーを3次元回転させます。

Rotate To
レイヤーが回転する角度の絶対値を設定します。
Rotate By
レイヤーの角度を設定した値の分ずつ増加または減少させます。
Direction
レイヤーが回転する方向を設定します。
Pivot
レイヤーが回転する方向を設定します。
Perspective Depth
レイヤーが3次元回転するとき歪曲の程度が設定できます。数値が小さくなるほど歪曲が大きくなります。
3d rotate response

Opacity

レイヤーの透明度を変更します。

Change To
変更される透明度の値を設定します。
opacity response

Color

レイヤーの色を変更します。

Change To
変更されるレイヤーの色を設定します。
color response

Radius

レイヤーの角の曲率を変更します。

Change To
変更される角の曲率の値を設定します。
radius response

Scroll

レイヤーを特定の方向にスクロールします。

Scroll
レイヤーをスクロールして移動する距離の値を入力します。
scroll response

Reorder

レイヤーの順番を変更します.レイヤートがコンテナの中にある場合コンテナー中に位置するレイヤー同士の順番が変わります。

Reorder
レイヤーが配列した順番を変えます。
reorder response

Jump

シーン間の移動ができます。

Jump To
移動するシーンを選択できます。
Transition
シーン移動をする時にトランジション効果を入れることができます。
Reset to initial state
移動するシーンの状態を初期状態に戻します。このオプションを付けなかった場合、そのシーンで最後に起きたインタラクションの状態のまま移動します。
jump response

Playback

動画レイヤーがコントロールできます。動画の再生や停止、特定区間にジャンプするなどができます。

Play
動画を再生します。
Pause
動画を一時停止します。
Seek
動画の特定区間にジャンプします。M:SS形式で特定区間が入力できます。

Text

テキストのプロパティや内容が変更できます.テキストレスポンスは持続時間がありません。

Change To
テキストの内容を変更します。
Size
テキストのサイズを変更します。
Weight
テキストの太さを変更します。
Alignment
テキストの左右または上下の整列を変更します。
Line Spacing
テキストのサイズを変更します。
text response

Send

デバイス間のインタラクションを可能にします。デバイス単体では使用できず,Send(送信)レスポンスと一緒に使われるトリガーです。Sendレスポンスから転送する文字列とReceive(受信)トリガーで設定した文字列が一致するときにレスポンスを実行します。

Vibrate

デバイスに振動を与えます。

設定可能なオプションはありません。

vibrate response

Condition

レスポンスが実行するための条件を設定します。コンディションピースで設定した条件を満たすときに,以下に羅列したレスポンスが実行されます。

Greater than
ターゲットレイヤのプロパティが特定の値を超える場合にのみ実行します。
Greater than or equal to
ターゲットレイヤのプロパティが特定の値以上の場合にのみ実行します。
Less than
ターゲットレイヤのプロパティが特定の値未満の場合にのみ実行します。
Less than or equal to
ターゲットレイヤのプロパティが特定の値以下の場合にのみ実行します。
Equal to
ターゲットレイヤのプロパティが特定の値と一致しる場合にのみ実行します。
Not equal to
ターゲットレイヤのプロパティが特定の値と一致しない場合にのみ実行します。
condition response

Timeline / Valueline

プロトパイではトリガーの種類によってレスポンスの実行範囲をタイムラインとバリューラインに区分して表示します。タイムラインやバリューラインを通してレスポンスの持続時間とスタートディレイ、マッピングレンジが視覚的に確認でき,レンジバーにマウスオーバーしたときに表示されるバー(またはハンドル)をドラッグして持続時間と開始点を調整することができます。

*連続トリガーに使用されるレスポンスは決められた持続時間やマッピングされる値がないため、タイムライン、バリューラインはありません。

Timeline

タイムラインはレスポンスの持続時間、ディレイ、リピート(繰り返し)設定を視覚化して表示します。多数のレスポンスが一緒に使用されるマイクロインタラクションを作製するときにタイムラインを使うとより効率的に各レスポンスのタイミングが調整できます.

timeline image

Valueline

バリューラインはトリガーに割り当てられたレイヤーと、レスポンスに割り当てられたレイヤーの動作範囲を表示します。

valueline image

Scene

二つ以上の画面が必要な場合は、シーンから追加することができます。また,複雑なプロトタイプの場合は機能単位でシーンを分離することで、インタラクションパネルの可読性を向上させるとができます。

scene list

Manage Scene

シーンパネルでシーンの順番を変えたり複製することができます。

manage scene modal

Scene Transition

ジャンプレスポンスを使用するとシーン間の移動ができます。iosのデフォルト機能であるトランジション効果がを使用することが可能であり,アニメーションすることなくすぐにシーンの移動させることもできます。

Animation Curve

現実の物体は一定な速度で動く場合がはほとんどありません。したがって、人間は一定の速度よりは加速、減速、加減速が入っている動きをより自然だと感じます。これらの動きはイージングファンクション(easing-function)と3次ベジェ(Cubic-Bezier) 、スプリング(spring)を適切に活用することで自然で美麗なアニメーションが作れることができます。

Easing Function

最初から用意された加速度に関するプリセットです。プロパティパネルのイーズイン(ease-in),イーズアウト(ease-out)、イーズインアウト(ease-in-out)の中から選べます。

EaseIn

  • easeInSine

  • easeInCubic

  • easeInQuint

  • easeInCirc

  • easeInElastic

  • easeInQuad

  • easeInQuart

  • easeInExpo

  • easeInBack

  • easeInBounce

easeOut

  • easeOutSine

  • easeOutCubic

  • easeOutQuint

  • easeOutCirc

  • easeOutElastic

  • easeOutQuad

  • easeOutQuart

  • easeOutExpo

  • easeOutBack

  • easeOutBounce

EaseInOut

  • easeInOutSine

  • easeInOutCubic

  • easeInOutQuint

  • easeInOutCirc

  • easeInOutElastic

  • easeInOutQuad

  • easeInOutQuart

  • easeInOutExpo

  • easeInOutBack

  • easeInOutBounce

Cubic-Bezier

四つの数字を組み合わせてカスタマイズしたイージングカーブ(easing curve)使えます。このサイトでカスタマイズした3次ベジェ値を簡単に作ることができます。

*今後アプリ内で直接3次ベジェのグラフを操作しながら設定できる機能を提供する予定です。

Example

  • Cubic-bezier
    ( 0.39, 0, 0.23, 1)

  • Cubic-bezier
    ( 0.71, 0.41, 0.32, 0.76)

Spring

スプリングカーブはレイヤーがバネの様に弾けるアニメーションを作ります。

*今後アプリ内で直接スプリングカーブのグラフを操作しながら設定できる機能を提供する予定です。

Example

  • 600, 16

  • 250, 19

Shortcut

Overall

macOS Windows
Hide ProtoPie Command + H -
Hide Others Command + Option + H -
Toggle Full Screen Command + Control + F -
Minimize Window Command + M Ctrl + M
Toggle Layer Panel Command + Option + 1 Ctrl + Alt + 1
Toggle Interaction Panel Command + Option + 2 Ctrl + Alt + 2
Toggle Layer and Interacton Command + Option + 3 Ctrl + Alt + 3

Manage a prototype

macOS Windows
New Command + N Ctrl + N
Open Command + O Ctrl + O
Close Command + W Ctrl + W
Save Command + S Ctrl + S
Save as Command + Shift + S Ctrl + Shift + S
Upload to Cloud Command + U Ctrl + U
Rename Command + R Ctrl + R
Edit Text Layer Command + Return Ctrl + Enter

Insert interaction elements

macOS Windows
Image Layer I I
Rectangle Layer R R
Oval Layer V V
Container Layer N N
Tap Trigger T T
Drag Trigger D D
Chain Trigger C C
Move Response M M
Scale Response S S
Opacity Response O O

Edit a prototype

macOS Windows
Undo Command + Z Ctrl + Z
Redo Command + Shift + Z Ctrl + Shift + Z
Copy Command + C Ctrl + C
Paste Command + V Ctrl + V
Delete Delete Delete
Group Layers with Container Command + G Ctrl + G
Ungroup Layers from Container Command + Shift + G Ctrl + Shift + G
Collapse Command + [ Ctrl + [
Expand Command + ] Ctrl + ]

Run a prototype

macOS Windows
Run Prototype Command + R Ctrl + R
Toggle Preview Command + P Ctrl + P
Bring Preview to front Ctrl + Tab Ctrl + Tab

Control a view

macOS Windows
Zoom In Command + =,
Z + click
Ctrl + =,
Z + click
Zoom Out Command + -,
Z + Option + click
Ctrl + -,
Z + Alt + click
Actual Size Command + 0 Ctrl + 0
Center Canvas Command + 1 Ctrl + 1
Panning Spacebar + click move Spacebar + click move
Language selector
TOP