インタラクションツール最前線！〜プロトタイピングツールの使い分け〜
•
26 j'aime•5,993 vues
2015年9月24日にdots.で開催したイベントでお話したスライドです。 http://eventdots.jp/event/569828
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à インタラクションツール最前線！〜プロトタイピングツールの使い分け〜
Similaire à インタラクションツール最前線！〜プロトタイピングツールの使い分け〜 (20)
Plus de Ryo Yoshitake
インタラクションツール最前線！〜プロトタイピングツールの使い分け〜
- 2. インタラクションツール最前線！ // プロトタイピングツールの使い分け 目次 • 自己紹介 • 既存ツールの紹介 • インタラクションツールの比較 • ツールの使い分けについて • まとめ
- 3. インタラクションツール最前線！ // プロトタイピングツールの使い分け いま話している人について 吉竹 遼 @ryo_pan 2011 年∼ 2014 年 10 月までフェンリル株式会社で受託開発に従事。 2014 年 10 月から Standard Inc に参画。
- 13. インタラクションツール最前線！ // プロトタイピングツールの使い分け 既存ツールの紹介 特徴 特徴 Adobe After Effects Atomic 価格：月 ¥2,180 習得難易度：★★★★☆ 作業スピード：★★☆☆☆ 再現性：？ 共有：ファイル プリセットサイズ：Free 端末確認：×（動画による確認は可） 価格：5 プロジェクト 月１5$ ∼ 習得難易度：★★☆☆☆ 作業スピード：★★★☆☆ 再現性：★★☆☆☆ 共有：URL ｜コメント可（月 25$ プランから） プリセットサイズ：iOS, Android,Desktop, Free 端末確認：⃝ 先日ベータテストを終えたサービス。機能的にはまだ未熟な部分が多 いが、タイムライン形式でアニメーションを制御することが可能。 円形や四角形のベタ塗りオブジェクトを作れたりもできる。 みんなご存知動画作成ソフト。本格的な動画を作るには時間もスキル も必要となるが、アプリに限定すれば難易度は高くない。自由に作れ てしまう分、出来は作り手の知識に左右される。
- 14. インタラクションツール最前線！ // プロトタイピングツールの使い分け 既存ツールの紹介 特徴 特徴 Flinto Form 価格：月 $18 ∼ / ¥11,800（Mac App 単体） 習得難易度：★★★☆☆ 作業スピード：★★★☆☆ 再現性：★★★☆☆ 共有：URL / ファイル (Mac App) プリセットサイズ：iOS, Android, Desktop, Free 端末確認：⃝ 価格：無料 習得難易度：★★★★★ 作業スピード：★☆☆☆☆ 再現性：★★★★☆ 共有：ファイル プリセットサイズ：Free 端末確認：⃝ QC と同じビジュアルプログラミングで記述をする。実は端末のカメ ラや傾きセンサーにアクセスできるという一面が。 Pixate に親を取られるのではと危惧している（妄想です）。 ここ 1 年大きな変化がなかったが、先日リリースされた Mac App に よってインタラクティブな UI の作成に強くなったため、一部の界隈 が非常に賑わった。Web と App でサービスの性質が異なる。
- 15. インタラクションツール最前線！ // プロトタイピングツールの使い分け 既存ツールの紹介 特徴 特徴 Framer InVision 価格：$99 習得難易度：★★★★★ 作業スピード：★☆☆☆☆ 再現性：★★★★☆ 共有：URL プリセットサイズ：iOS, Android,Desktop, Free 端末確認：⃝ 価格：1 プロジェクト無料 / 15 プロジェクト 月 15$ ∼ 習得難易度：★☆☆☆☆ 作業スピード：★★★★★ 再現性：★★☆☆☆ 共有：URL ｜コメント可 プリセットサイズ：iOS, Android,Desktop, Free 端末確認：⃝ 継続的にサービスがアップデートされている。また、Boards や Insight といった魅力的な関連サービスも展開している。コメント機 能も早くから実装されており、複数人での取り組みに使える。 CoffeeScript による記述でプロトタイプを作成する珍しいタイプ。 拡張性の面では最も秀でており、動画の再生や画像加工などを再現す ることも可能。反面、そこまでやる必要があるのか？という声も。
- 16. インタラクションツール最前線！ // プロトタイピングツールの使い分け 既存ツールの紹介 特徴 特徴 Keynote Pixate 価格：無料 習得難易度：★☆☆☆☆ 作業スピード：★★★★☆ 再現性：★☆☆☆☆ 共有：ファイル プリセットサイズ：Free 端末確認：× 価格：無料 / クラウド利用 月 $5 習得難易度：★★★★☆ 作業スピード：★★☆☆☆ 再現性：★★★★☆ 共有：ファイル / URL プリセットサイズ：iOS, Android, Free 端末確認：⃝ Prott などに比べるとトランジションの面は弱いものの、QC ほど時 間をかけなくともインタラクティブなアニメーションが作れることで 一躍有名に。クラウド利用がなければ基本無料なのも嬉しい。 価格が無料なこと、非デザイナーでも日常的に使う場面があることか ら、導入ハードルが低いのが特徴。WWDC のセッションでも取り上 げられている。端末で確認できないのが難点。
- 17. インタラクションツール最前線！ // プロトタイピングツールの使い分け 既存ツールの紹介 特徴 特徴 POP Principle 価格：2 プロジェクト無料 / 10 プロジェクト 月 $10 ∼ 習得難易度：★☆☆☆☆ 作業スピード：★★★★☆ 再現性：★☆☆☆☆ 共有：URL ｜コメント可 プリセットサイズ：iOS, Android, Windows 8(10) 端末確認：⃝ 価格：$99（Mac App） 習得難易度：★★★★☆ 作業スピード：★★☆☆☆ 再現性：★★★★☆ 共有：ファイル / URL プリセットサイズ：iOS, Android, Free 端末確認：⃝（iOS のみ） 元 Apple のエンジニアが制作したインタラクションツール。アクショ ン単位でアートボードを作成したり、アニメーションをタイムライン で編集できたりと、他ツールに比べて分かりやすい操作感が特徴。 モバイルアプリ単体でペーパープロトを撮影して気軽に作り始めるこ とができるため、初学者にも扱いやすい。 地味に Windows Store Apps が用意されている。
- 18. インタラクションツール最前線！ // プロトタイピングツールの使い分け 既存ツールの紹介 特徴 特徴 Prott Origami / Quartz Composer 価格：1 プロジェクト無料 / 3 プロジェクト 月 ¥1,710 ∼ 習得難易度：★☆☆☆☆ 作業スピード：★★★★☆ 再現性：★★☆☆☆ 共有：URL ｜コメント可 プリセットサイズ：iOS, Android,Desktop, Free 端末確認：⃝ 価格：無料 習得難易度：★★★★★ 作業スピード：★☆☆☆☆ 再現性：★★★★☆ 共有：ファイル プリセットサイズ：Free 端末確認：⃝（iOS のみ） 親に見捨てられた QC（更新は 2011 年でストップ）を Facebook が 魔改造してアプリに特化したインタラクションを持たせたもの。QC 自体の難易度が高いため、一定以上使いこなすには相当の時間が必要。 唯一の国産サービス。メニューもサポートも日本語が使えるのが嬉し い。コメントやワイヤーフレーム（有料プラン）など、チームでの利 用や初学者に向けた機能が揃っている。
- 21. インタラクションツール最前線！ // プロトタイピングツールの使い分け 分類 - トランジションメイン （この 2 つはどちらかと言うと中間） 得意 苦手 全体の遷移を確認しながらプロトタイプを作 れるので、凝った動きを作る必要がなければ 本物に近い動きが全体で作れる。 作れる動きは細かい条件分岐やカスタマイズ 性の強いものではなく、OS 標準に沿ったも のや簡単な数値変換によるものが多い。 画面単位のトランジションに対応したインタラクション を作るのが基本となるため、わかりやすいし管理もラク。 トランジション トランジション トランジション トランジション インタラクション インタラクション インタラクション
- 22. インタラクションツール最前線！ // プロトタイピングツールの使い分け インタラクションの 1 つとしてトランジションを作るた め、スキルが必要。画面単位での管理もハードルは高い。 分類 - インタラクションメイン 得意 苦手 1 つの画面や 1 つの機能に絞って自分が思 い描くインタラクションが作りやすい。 if 文のような条件分岐も作れるのが特徴。 全体的に習得難易度が高め。 画面遷移の動きを作るのが苦手な場合が多 く、作ったとしても中身は複雑になりがち。 インタラクション トランジション インタラクション インタラクション
- 23. インタラクションツール最前線！ // プロトタイピングツールの使い分け 活発 ⃝ ⃝ 内部構造閲覧可 ⃝ 得意 オブジェクトの作成 グラフィックソフト連携 複数画面遷移 条件分岐 タイムライン編集 コード出力 サンプル / ドキュメント オフライン作業 コミュニティ 比較 得意 得意 不得意 不得意 不得意 不得意 × ⃝ ⃝ ⃝ × ⃝ × × × ⃝ ⃝ ⃝ ⃝ × ⃝ ⃝ × × × × × × △ (CSS のみ ) × × × 対応予定アリ ⃝ 内部構造閲覧可 ⃝ 内部構造閲覧不可 ⃝ 内部構造閲覧可 ⃝ 内部構造閲覧可 ⃝ 内部構造閲覧可 ⃝ 内部構造閲覧可 ⃝ ⃝ × ⃝ ⃝ ⃝ ⃝ あまり活発 ではない そこそこ活発 活発ではない そこそこ活発 活発 活発 Sketch （コピペも可） △ （Sketch からコピペ可） △ （Sketch からコピペ可） × Sketch Photshop × Sketch
- 25. ツールの使い分けについて
- 26. どこまで細分化するべきか？
- 28. ぶっちゃけ目的と環境による
- 33. インタラクションツール最前線！ // プロトタイピングツールの使い分け • デザイナーの数が多い • クライアントワークがメイン • エンジニアとの距離が遠い • プロダクトが小規模である • こうったツールに予算があまり割けない • チームメンバーの興味が薄い などなど…… 環境を考えるのも大切
- 35. インタラクションツール最前線！ // プロトタイピングツールの使い分け 実は・・・ AE で作っても詳細まで伝わるかもしれない 他アプリを参考にするだけでいいかもしれない 手書きのラフだけで伝わるかもしれない ということもあり得る。
- 37. ありがとうございました