インタラクションツール最前線！〜プロトタイピングツールの使い分け〜

インタラクションツール最前線！

プロトタイピングツールの使い分け

インタラクションツール最前線！ // プロトタイピングツールの使い分け

目次

• 自己紹介• 既存ツールの紹介• インタラクションツールの比較• ツールの使い分けについて• まとめ


いま話している人について

吉竹遼@ryo_pan

2011年～ 2014年 10月までフェンリル株式会社で受託開発に従事。2014年 10月から Standard Inc に参画。

https://twitter.com/ryo_pan

http://www.standardinc.jp

http://www.standardinc.jp/


これまでの活動

http://yo-ry.hateblo.jp/entry/2014/02/13/204727

http://yo-ry.hateblo.jp/entry/2014/02/13/204727



http://www.slideshare.net/ryoyos/origami-32856872

http://www.slideshare.net/ryoyos/origami-32856872



http://www.standardinc.jp/reflection/article/prototyping-for-app-design/




http://www.slideshare.net/ryoyos/creative-insights-01-42453782

http://www.slideshare.net/ryoyos/creative-insights-01-42453782



http://www.slideshare.net/ryoyos/ui-crunch-03

http://www.slideshare.net/ryoyos/ui-crunch-03



http://www.slideshare.net/ryoyos/amana-tech-night-vol2-pixate

既存プロトタイピングツールの紹介※内容は個人の感想であるため、差を感じる場合があります


ツールのカテゴリについて




既存ツールの紹介

特徴特徴

Adobe After Effects Atomic

価格：月¥2,180

習得難易度：★★★★☆

作業スピード：★★☆☆☆

再現性：？

共有：ファイル

プリセットサイズ：Free

端末確認：×（動画による確認は可）

価格：5 プロジェクト月１5$～

習得難易度：★★☆☆☆

作業スピード：★★★☆☆

再現性：★★☆☆☆

共有：URL ｜コメント可（月 25$プランから）

プリセットサイズ：iOS, Android,Desktop, Free

端末確認：◯

先日ベータテストを終えたサービス。機能的にはまだ未熟な部分が多いが、タイムライン形式でアニメーションを制御することが可能。円形や四角形のベタ塗りオブジェクトを作れたりもできる。

みんなご存知動画作成ソフト。本格的な動画を作るには時間もスキルも必要となるが、アプリに限定すれば難易度は高くない。自由に作れてしまう分、出来は作り手の知識に左右される。



特徴特徴

Flinto Form

価格：月 $18～ / ¥11,800（Mac App 単体）

習得難易度：★★★☆☆

作業スピード：★★★☆☆

再現性：★★★☆☆

共有：URL / ファイル (Mac App)

プリセットサイズ：iOS, Android, Desktop, Free

端末確認：◯

価格：無料

習得難易度：★★★★★

作業スピード：★☆☆☆☆

再現性：★★★★☆



端末確認：◯

QCと同じビジュアルプログラミングで記述をする。実は端末のカメラや傾きセンサーにアクセスできるという一面が。Pixate に親を取られるのではと危惧している（妄想です）。

ここ 1年大きな変化がなかったが、先日リリースされたMac App によってインタラクティブなUI の作成に強くなったため、一部の界隈が非常に賑わった。Webと Appでサービスの性質が異なる。



特徴特徴

Framer InVision

価格：$99



再現性：★★★★☆

共有：URL


端末確認：◯

価格：1 プロジェクト無料 / 15 プロジェクト月 15$ ～

習得難易度：★☆☆☆☆

作業スピード：★★★★★

再現性：★★☆☆☆

共有：URL ｜コメント可


端末確認：◯

継続的にサービスがアップデートされている。また、Boards やInsight といった魅力的な関連サービスも展開している。コメント機能も早くから実装されており、複数人での取り組みに使える。

CoffeeScript による記述でプロトタイプを作成する珍しいタイプ。拡張性の面では最も秀でており、動画の再生や画像加工などを再現することも可能。反面、そこまでやる必要があるのか？という声も。



特徴特徴

Keynote Pixate

価格：無料


作業スピード：★★★★☆

再現性：★☆☆☆☆



端末確認：×

価格：無料 / クラウド利用月 $5



再現性：★★★★☆

共有：ファイル / URL

プリセットサイズ：iOS, Android, Free

端末確認：◯

Prott などに比べるとトランジションの面は弱いものの、QCほど時間をかけなくともインタラクティブなアニメーションが作れることで一躍有名に。クラウド利用がなければ基本無料なのも嬉しい。

価格が無料なこと、非デザイナーでも日常的に使う場面があることから、導入ハードルが低いのが特徴。WWDCのセッションでも取り上げられている。端末で確認できないのが難点。



特徴特徴

POP Principle

価格：2 プロジェクト無料 / 10 プロジェクト月 $10～



再現性：★☆☆☆☆


プリセットサイズ：iOS, Android, Windows 8(10)

端末確認：◯

価格：$99（Mac App）



再現性：★★★★☆

共有：ファイル / URL

プリセットサイズ：iOS, Android, Free

端末確認：◯ （iOS のみ）

元Apple のエンジニアが制作したインタラクションツール。アクション単位でアートボードを作成したり、アニメーションをタイムラインで編集できたりと、他ツールに比べて分かりやすい操作感が特徴。

モバイルアプリ単体でペーパープロトを撮影して気軽に作り始めることができるため、初学者にも扱いやすい。地味にWindows Store Apps が用意されている。



特徴特徴

Prott Origami / Quartz Composer

価格：1 プロジェクト無料 / 3 プロジェクト月 ¥1,710 ～



再現性：★★☆☆☆



端末確認：◯

価格：無料



再現性：★★★★☆



端末確認：◯（iOSのみ）

親に見捨てられたQC（更新は 2011年でストップ）を Facebook が魔改造してアプリに特化したインタラクションを持たせたもの。QC自体の難易度が高いため、一定以上使いこなすには相当の時間が必要。

唯一の国産サービス。メニューもサポートも日本語が使えるのが嬉しい。コメントやワイヤーフレーム（有料プラン）など、チームでの利用や初学者に向けた機能が揃っている。


最近の傾向

トランジション型

インタラクション型

アニメーション型

その他

トランジション型&

インタラクション型

トランジション型&

インタラクション型&

アニメーション型

機能が複合的になってきている


インタラクションツールの分類と比較


分類 - トランジションメイン

（この 2つはどちらかと言うと中間）

得意

苦手

全体の遷移を確認しながらプロトタイプを作れるので、凝った動きを作る必要がなければ本物に近い動きが全体で作れる。

作れる動きは細かい条件分岐やカスタマイズ性の強いものではなく、OS標準に沿ったものや簡単な数値変換によるものが多い。

画面単位のトランジションに対応したインタラクションを作るのが基本となるため、わかりやすいし管理もラク。

トランジション




インタラクション




インタラクションの1つとしてトランジションを作るため、スキルが必要。画面単位での管理もハードルは高い。

分類 - インタラクションメイン

得意

苦手

1つの画面や 1つの機能に絞って自分が思い描くインタラクションが作りやすい。if 文のような条件分岐も作れるのが特徴。

全体的に習得難易度が高め。画面遷移の動きを作るのが苦手な場合が多く、作ったとしても中身は複雑になりがち。






活発

◯

◯内部構造閲覧可

◯

得意

オブジェクトの作成

グラフィックソフト連携

複数画面遷移

条件分岐

タイムライン編集

コード出力

サンプル /ドキュメント

オフライン作業

コミュニティ

比較

得意得意不得意不得意不得意不得意

× ◯ ◯ ◯ × ◯

× × × ◯ ◯ ◯ ◯

× ◯ ◯ × × × ×

× × △(CSS のみ )

× × ×対応予定アリ


◯内部構造閲覧不可





◯ ◯ × ◯ ◯ ◯ ◯

あまり活発ではないそこそこ活発活発ではないそこそこ活発活発活発

Sketch（コピペも可）

△（Sketch からコピペ可）

△（Sketch からコピペ可）

× SketchPhotshop × Sketch


なるべく簡単にそれっぽいモーションを作る

時間をかけて勉強して多彩で精確なインタラクションを作る

このあたりはまだまだトレードオフ。条件によって比較内容も変わる。例えばチームで同じツールを共用しようと思うと、インタラクションメインのツールは

教えるハードル、練習するハードルなどが存在する。

ツールの使い分けについて

どこまで細分化するべきか？

トランジション型インタラクション型

オーソドックスなのはこの組合せ

全体の設計をトランジション型で把握しつつ細かい動きをインタラクション型で詰めていく

+

ぶっちゃけ目的と環境による


なぜ作るのか

アイデアを素早く具現化して試行錯誤するため

こちらの意図を正確に相手に伝えるため

コミュニケーションや対話のため

話し合うことでお互いの誤解を無くし、実現したい世界に近づくため


もう少し具体的に考えてみる

静的な画像や遷移図では伝わらない細かいニュアンスをエンジニアと共有したい？



遠隔地にいるクライアントやメンバーと全体の設計についてコミュニケーションを取りたい？



プロトタイプ作成経験のないメンバーにも分かりやすく教えていきたい？


• デザイナーの数が多い• クライアントワークがメイン• エンジニアとの距離が遠い• プロダクトが小規模である• こうったツールに予算があまり割けない• チームメンバーの興味が薄い

などなど……

環境を考えるのも大切

目的を果たせるかどうか？果たしたい目的は何か？を考えてみることが大切


実は・・・

AEで作っても詳細まで伝わるかもしれない他アプリを参考にするだけでいいかもしれない手書きのラフだけで伝わるかもしれない

ということもあり得る。


まとめ

目的に合ったツールを見つけよう環境に合ったツールを見つけよう

せっかくの場なので、他の人の話も聞いてみよう

ありがとうございました

Design

インタラクションツール最前線！〜プロトタイピングツールの使い分け〜