操作方法から分類するプロトタイプツール(概念メモ)

ざっくり自分のための分類。同じ型のものは良し悪しというよりそのチームに合ったものを使うと良い。コミュニケーションツールやテストの仕組みの有無はタイプ分類の対象に加えていません。

■ペーパープロトタイピング型

主に1枚絵に対して、アクション部のエリアを指定して画面を繋いでいく。PhotoshopやFireworksのようなデザインツールでホットスポットやスライスにリンク先を作るイメージに近い。
アプリ例) InVision/Prott/CanvasFlip などなど
他のツールとの連携が簡単で、位置が変わらなければ画像変更だけでデザイン変更に対応できる特徴(画像差し替えだけだからアクション部以外に内部でファイル内部品にインデックスをほとんど持たなくていいはず)
CanvasFlipは機能的には特殊でプロトタイプ上のヒートマップや利用解析が基本機能についている。

■オブジェクト型

オブジェクトと機能に関連はない。画面遷移の再現にアクションエリアを特別に指定する必要はない。Dreamweaverのリンクを画面遷移に対して行うイメージに近い。
アプリ例) Adobe Xd/marvelapp
もし、今後フォームとかモーダルダイアログ表示とかに対応するならコンポーネント型-2に分類してみたオブジェクト-アクションに変わりそうな気が。それ以外の方法が想像できない…

■コンポーネント型

1)オブジェクト-機能(パーツの定まったワイヤフレームから発展していく型)

グリッドだとか入力フォームだとか既に出来上がったコンポーネント(機能)を貼り付けて配置していく。デザインツールとの行き来は多少困難。
アプリ例) JustInmind
MSのVisual StudioというかEclipseのあれと言おうかプログラマがあーみたことある！ってタイプ

2)オブジェクト-アクション

配置はデザインツールのように行い、そのオブジェクトに対してアクション(スワイプだとかスクロールだとか)をドラッグ＆ドロップなどして紐付ける。
アプリ例) UXPin/Adobe Director/Pixate(Google)/Principle/atomic/protoPie
コンポーネント型との大きな違いはデザインと機能のひも付けのゆるさ。principleとAtomicはオブジェクト−アクションタイプでアニメーションをタイムラインで調整したい人向け
Visual Programming型もこれの発展と言えなくはない気はしてる。

■タイムライン型

マイクロインタラクションや遷移時アニメーションに主軸がありコレをタイムラインでコントロールする
アプリ例) After Effects
Flashも使い方によってはこっちだけど、Flashをコレで使うなら他を使ったほうがいいのでは。学習はちと大変。

■ビジュアルプログラミング型

画面やオブジェクトのプロパティ変化をアクションやアニメーション機能をもつ複数のパネルでプログラミングする。
アプリ例) Origami/Origami Studio/Neonto Studioなど
書き出せるので多分手間をかけた分は回収できる。Neonto StudioはXcode/Android Studioに対して出力できる。
ただし学習曲線は…
vvvv/TouchDesignerのような、本物のビジュアルプログラミングも転用できると思う。

■プログラミング型

実際に使える言語でのプロトタイプ。コストは高いけれどそのまま使える。
アプリ例) ネイティブ/Flash/HTML+JS
最初からクライマックス…もちろん学習曲線は…