Intro

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

Explore design solutions

開発者の助けがなくても様々なインタラクションを具現することができます.

Communicate designs

精巧なインタラクションが簡単に説明できます.

Research user feedback

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

Concept Model

interaction concept model

プロトパイの概念モデルは,プログラミング言語よりは自然界で物体が動く原理に基づいています.オブジェクトの動きやインタラクションは,そのインタラクションをもたらすトリガー,インタラクションの結果を示すレスポンス,インタラクションの対象となるオブジェクトから構成されます.プロトパイもオブジェクト,トリガー,レスポンスを組み合わせることでインタラクションを記述するようになっています.

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

interaction piece table

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

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
最大,指5本まで同時にタッチができます.
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は補正をしていない基本設定であり,22は滑らかに補正された動きを表現します.[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

アイフォンのタッチスクリーンを押す強度によってレスポンスが実行できます.押す強度の値は最低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
最大,指5本まで同時にタッチができます.
Distance
プルが成功したときレイヤが移動する距離を設定します.
Follow Over Pulling
レイヤの移動距離を超過してドラッグする場合の動きを定義します.
Easing
レイヤが動く加速度を定義します.

Start

プロトタイプが実行されたりシーンが転換されたときベットのトリガーがなくても自動でレスポンスが実行されます.

onload trigger
Start
Move

Receive

デバイス間インタラクションが具現できます.独立的には使用できず,センド(送信)レスポンスと一緒に使われるトリガーです.センドレスポンスから転送する文字列とレシーブ(受信)トリガーで設定した文字列が一致するときにレスポンスを実行します.

Trigger Property

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

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

デバイス間インタラクションが具現できます.独立的には使用できず,センド(送信)レスポンスと一緒に使われるトリガーです.センドレスポンスから転送する文字列とレシーブ(受信)トリガーで設定した文字列が一致するときにレスポンスを実行します.

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