Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
インタラクションツール最前線!
プロトタイピングツールの
使い分け
インタラクションツール最前線! // プロトタイピングツールの使い分け
目次
• 自己紹介
• 既存ツールの紹介
• インタラクションツールの比較
• ツールの使い分けについて
• まとめ
インタラクションツール最前線! // プロトタイピングツールの使い分け
いま話している人について
吉竹 遼
@ryo_pan
2011 年∼ 2014 年 10 月までフェンリル株式会社で受託開発に従事。
2014 年 10 月から Stand...
http://www.standardinc.jp
インタラクションツール最前線! // プロトタイピングツールの使い分け
これまでの活動
http://yo-ry.hateblo.jp/entry/2014/02/13/204727
インタラクションツール最前線! // プロトタイピングツールの使い分け
これまでの活動
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/ui-crunch-03
インタラクションツール最前線! // プロトタイピングツールの使い分け
これまでの活動
http://www.slideshare.net/ryoyos/amana-tech-night-vol2-pixate
既存プロトタイピングツールの紹介
※内容は個人の感想であるため、差を感じる場合があります
インタラクションツール最前線! // プロトタイピングツールの使い分け
ツールのカテゴリについて
http://www.standardinc.jp/reflection/article/prototyping-for-app-design/
インタラクションツール最前線! // プロトタイピングツールの使い分け
既存ツールの紹介
特徴 特徴
Adobe After Effects Atomic
価格:月 ¥2,180
習得難易度:★★★★☆
作業スピード:★★☆☆☆
再現性:?
共...
インタラクションツール最前線! // プロトタイピングツールの使い分け
既存ツールの紹介
特徴 特徴
Flinto Form
価格:月 $18 ∼ / ¥11,800(Mac App 単体)
習得難易度:★★★☆☆
作業スピード:★★★☆☆
再...
インタラクションツール最前線! // プロトタイピングツールの使い分け
既存ツールの紹介
特徴 特徴
Framer InVision
価格:$99
習得難易度:★★★★★
作業スピード:★☆☆☆☆
再現性:★★★★☆
共有:URL
プリセットサ...
インタラクションツール最前線! // プロトタイピングツールの使い分け
既存ツールの紹介
特徴 特徴
Keynote Pixate
価格:無料
習得難易度:★☆☆☆☆
作業スピード:★★★★☆
再現性:★☆☆☆☆
共有:ファイル
プリセットサイ...
インタラクションツール最前線! // プロトタイピングツールの使い分け
既存ツールの紹介
特徴 特徴
POP Principle
価格:2 プロジェクト無料 / 10 プロジェクト 月 $10 ∼
習得難易度:★☆☆☆☆
作業スピード:★★★★...
インタラクションツール最前線! // プロトタイピングツールの使い分け
既存ツールの紹介
特徴 特徴
Prott Origami / Quartz Composer
価格:1 プロジェクト無料 / 3 プロジェクト 月 ¥1,710 ∼
習得難...
インタラクションツール最前線! // プロトタイピングツールの使い分け
最近の傾向
トランジション型
インタラクション型
アニメーション型
その他
トランジション型
&
インタラクション型
トランジション型
&
インタラクション型
&
アニメー...
インタラクションツール最前線! // プロトタイピングツールの使い分け
インタラクションツールの分類と比較
インタラクションツール最前線! // プロトタイピングツールの使い分け
分類 - トランジションメイン
(この 2 つはどちらかと言うと中間)
得意
苦手
全体の遷移を確認しながらプロトタイプを作
れるので、凝った動きを作る必要がなければ
本物...
インタラクションツール最前線! // プロトタイピングツールの使い分け
インタラクションの 1 つとしてトランジションを作るた
め、スキルが必要。画面単位での管理もハードルは高い。
分類 - インタラクションメイン
得意
苦手
1 つの画面や ...
インタラクションツール最前線! // プロトタイピングツールの使い分け
活発
⃝
⃝
内部構造閲覧可
⃝
得意
オブジェクトの作成
グラフィックソフト連携
複数画面遷移
条件分岐
タイムライン編集
コード出力
サンプル / ドキュメント
オフラ...
インタラクションツール最前線! // プロトタイピングツールの使い分け
なるべく簡単にそれっぽい
モーションを作る
時間をかけて勉強して
多彩で精確なインタラクションを作る
このあたりはまだまだトレードオフ。条件によって比較内容も変わる。
例え...
ツールの使い分けについて
どこまで細分化するべきか?
トランジション型 インタラクション型
オーソドックスなのはこの組合せ
全体の設計をトランジション型で把握しつつ
細かい動きをインタラクション型で詰めていく
+
ぶっちゃけ目的と環境による
インタラクションツール最前線! // プロトタイピングツールの使い分け
なぜ作るのか
アイデアを素早く具現化して試行錯誤するため
こちらの意図を正確に相手に伝えるため
コミュニケーションや対話のため
話し合うことでお互いの誤解を無くし、
実現し...
インタラクションツール最前線! // プロトタイピングツールの使い分け
もう少し具体的に考えてみる
静的な画像や遷移図では伝わらない細かいニュアンスを
エンジニアと共有したい?
インタラクションツール最前線! // プロトタイピングツールの使い分け
もう少し具体的に考えてみる
遠隔地にいるクライアントやメンバーと
全体の設計についてコミュニケーションを取りたい?
インタラクションツール最前線! // プロトタイピングツールの使い分け
もう少し具体的に考えてみる
プロトタイプ作成経験のないメンバーにも
分かりやすく教えていきたい?
インタラクションツール最前線! // プロトタイピングツールの使い分け
• デザイナーの数が多い
• クライアントワークがメイン
• エンジニアとの距離が遠い
• プロダクトが小規模である
• こうったツールに予算があまり割けない
• チームメ...
目的を果たせるかどうか?
果たしたい目的は何か?
を考えてみることが大切
インタラクションツール最前線! // プロトタイピングツールの使い分け
実は・・・
AE で作っても詳細まで伝わるかもしれない
他アプリを参考にするだけでいいかもしれない
手書きのラフだけで伝わるかもしれない
ということもあり得る。
インタラクションツール最前線! // プロトタイピングツールの使い分け
まとめ
目的に合ったツールを見つけよう
環境に合ったツールを見つけよう
せっかくの場なので、他の人の話も聞いてみよう
ありがとうございました
Upcoming SlideShare
Loading in …5
×

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

5,253 views

Published on

2015年9月24日にdots.で開催したイベントでお話したスライドです。
http://eventdots.jp/event/569828

Published in: Design
  • Be the first to comment

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

  1. 1. インタラクションツール最前線! プロトタイピングツールの 使い分け
  2. 2. インタラクションツール最前線! // プロトタイピングツールの使い分け 目次 • 自己紹介 • 既存ツールの紹介 • インタラクションツールの比較 • ツールの使い分けについて • まとめ
  3. 3. インタラクションツール最前線! // プロトタイピングツールの使い分け いま話している人について 吉竹 遼 @ryo_pan 2011 年∼ 2014 年 10 月までフェンリル株式会社で受託開発に従事。 2014 年 10 月から Standard Inc に参画。
  4. 4. http://www.standardinc.jp
  5. 5. インタラクションツール最前線! // プロトタイピングツールの使い分け これまでの活動 http://yo-ry.hateblo.jp/entry/2014/02/13/204727
  6. 6. インタラクションツール最前線! // プロトタイピングツールの使い分け これまでの活動 http://www.slideshare.net/ryoyos/origami-32856872
  7. 7. インタラクションツール最前線! // プロトタイピングツールの使い分け これまでの活動 http://www.standardinc.jp/reflection/article/prototyping-for-app-design/
  8. 8. インタラクションツール最前線! // プロトタイピングツールの使い分け これまでの活動 http://www.slideshare.net/ryoyos/creative-insights-01-42453782
  9. 9. インタラクションツール最前線! // プロトタイピングツールの使い分け これまでの活動 http://www.slideshare.net/ryoyos/ui-crunch-03
  10. 10. インタラクションツール最前線! // プロトタイピングツールの使い分け これまでの活動 http://www.slideshare.net/ryoyos/amana-tech-night-vol2-pixate
  11. 11. 既存プロトタイピングツールの紹介 ※内容は個人の感想であるため、差を感じる場合があります
  12. 12. インタラクションツール最前線! // プロトタイピングツールの使い分け ツールのカテゴリについて http://www.standardinc.jp/reflection/article/prototyping-for-app-design/
  13. 13. インタラクションツール最前線! // プロトタイピングツールの使い分け 既存ツールの紹介 特徴 特徴 Adobe After Effects Atomic 価格:月 ¥2,180 習得難易度:★★★★☆ 作業スピード:★★☆☆☆ 再現性:? 共有:ファイル プリセットサイズ:Free 端末確認:×(動画による確認は可) 価格:5 プロジェクト 月15$ ∼ 習得難易度:★★☆☆☆ 作業スピード:★★★☆☆ 再現性:★★☆☆☆ 共有:URL |コメント可(月 25$ プランから) プリセットサイズ:iOS, Android,Desktop, Free 端末確認:⃝ 先日ベータテストを終えたサービス。機能的にはまだ未熟な部分が多 いが、タイムライン形式でアニメーションを制御することが可能。 円形や四角形のベタ塗りオブジェクトを作れたりもできる。 みんなご存知動画作成ソフト。本格的な動画を作るには時間もスキル も必要となるが、アプリに限定すれば難易度は高くない。自由に作れ てしまう分、出来は作り手の知識に左右される。
  14. 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. 15. インタラクションツール最前線! // プロトタイピングツールの使い分け 既存ツールの紹介 特徴 特徴 Framer InVision 価格:$99 習得難易度:★★★★★ 作業スピード:★☆☆☆☆ 再現性:★★★★☆ 共有:URL プリセットサイズ:iOS, Android,Desktop, Free 端末確認:⃝ 価格:1 プロジェクト無料 / 15 プロジェクト 月 15$ ∼ 習得難易度:★☆☆☆☆ 作業スピード:★★★★★ 再現性:★★☆☆☆ 共有:URL |コメント可 プリセットサイズ:iOS, Android,Desktop, Free 端末確認:⃝ 継続的にサービスがアップデートされている。また、Boards や Insight といった魅力的な関連サービスも展開している。コメント機 能も早くから実装されており、複数人での取り組みに使える。 CoffeeScript による記述でプロトタイプを作成する珍しいタイプ。 拡張性の面では最も秀でており、動画の再生や画像加工などを再現す ることも可能。反面、そこまでやる必要があるのか?という声も。
  16. 16. インタラクションツール最前線! // プロトタイピングツールの使い分け 既存ツールの紹介 特徴 特徴 Keynote Pixate 価格:無料 習得難易度:★☆☆☆☆ 作業スピード:★★★★☆ 再現性:★☆☆☆☆ 共有:ファイル プリセットサイズ:Free 端末確認:× 価格:無料 / クラウド利用 月 $5 習得難易度:★★★★☆ 作業スピード:★★☆☆☆ 再現性:★★★★☆ 共有:ファイル / URL プリセットサイズ:iOS, Android, Free 端末確認:⃝ Prott などに比べるとトランジションの面は弱いものの、QC ほど時 間をかけなくともインタラクティブなアニメーションが作れることで 一躍有名に。クラウド利用がなければ基本無料なのも嬉しい。 価格が無料なこと、非デザイナーでも日常的に使う場面があることか ら、導入ハードルが低いのが特徴。WWDC のセッションでも取り上 げられている。端末で確認できないのが難点。
  17. 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. 18. インタラクションツール最前線! // プロトタイピングツールの使い分け 既存ツールの紹介 特徴 特徴 Prott Origami / Quartz Composer 価格:1 プロジェクト無料 / 3 プロジェクト 月 ¥1,710 ∼ 習得難易度:★☆☆☆☆ 作業スピード:★★★★☆ 再現性:★★☆☆☆ 共有:URL |コメント可 プリセットサイズ:iOS, Android,Desktop, Free 端末確認:⃝ 価格:無料 習得難易度:★★★★★ 作業スピード:★☆☆☆☆ 再現性:★★★★☆ 共有:ファイル プリセットサイズ:Free 端末確認:⃝(iOS のみ) 親に見捨てられた QC(更新は 2011 年でストップ)を Facebook が 魔改造してアプリに特化したインタラクションを持たせたもの。QC 自体の難易度が高いため、一定以上使いこなすには相当の時間が必要。 唯一の国産サービス。メニューもサポートも日本語が使えるのが嬉し い。コメントやワイヤーフレーム(有料プラン)など、チームでの利 用や初学者に向けた機能が揃っている。
  19. 19. インタラクションツール最前線! // プロトタイピングツールの使い分け 最近の傾向 トランジション型 インタラクション型 アニメーション型 その他 トランジション型 & インタラクション型 トランジション型 & インタラクション型 & アニメーション型 機能が複合的になってきている
  20. 20. インタラクションツール最前線! // プロトタイピングツールの使い分け インタラクションツールの分類と比較
  21. 21. インタラクションツール最前線! // プロトタイピングツールの使い分け 分類 - トランジションメイン (この 2 つはどちらかと言うと中間) 得意 苦手 全体の遷移を確認しながらプロトタイプを作 れるので、凝った動きを作る必要がなければ 本物に近い動きが全体で作れる。 作れる動きは細かい条件分岐やカスタマイズ 性の強いものではなく、OS 標準に沿ったも のや簡単な数値変換によるものが多い。 画面単位のトランジションに対応したインタラクション を作るのが基本となるため、わかりやすいし管理もラク。 トランジション トランジション トランジション トランジション インタラクション インタラクション インタラクション
  22. 22. インタラクションツール最前線! // プロトタイピングツールの使い分け インタラクションの 1 つとしてトランジションを作るた め、スキルが必要。画面単位での管理もハードルは高い。 分類 - インタラクションメイン 得意 苦手 1 つの画面や 1 つの機能に絞って自分が思 い描くインタラクションが作りやすい。 if 文のような条件分岐も作れるのが特徴。 全体的に習得難易度が高め。 画面遷移の動きを作るのが苦手な場合が多 く、作ったとしても中身は複雑になりがち。 インタラクション トランジション インタラクション インタラクション
  23. 23. インタラクションツール最前線! // プロトタイピングツールの使い分け 活発 ⃝ ⃝ 内部構造閲覧可 ⃝ 得意 オブジェクトの作成 グラフィックソフト連携 複数画面遷移 条件分岐 タイムライン編集 コード出力 サンプル / ドキュメント オフライン作業 コミュニティ 比較 得意 得意 不得意 不得意 不得意 不得意 × ⃝ ⃝ ⃝ × ⃝ × × × ⃝ ⃝ ⃝ ⃝ × ⃝ ⃝ × × × × × × △ (CSS のみ ) × × × 対応予定アリ ⃝ 内部構造閲覧可 ⃝ 内部構造閲覧不可 ⃝ 内部構造閲覧可 ⃝ 内部構造閲覧可 ⃝ 内部構造閲覧可 ⃝ 内部構造閲覧可 ⃝ ⃝ × ⃝ ⃝ ⃝ ⃝ あまり活発 ではない そこそこ活発 活発ではない そこそこ活発 活発 活発 Sketch (コピペも可) △ (Sketch からコピペ可) △ (Sketch からコピペ可) × Sketch Photshop × Sketch
  24. 24. インタラクションツール最前線! // プロトタイピングツールの使い分け なるべく簡単にそれっぽい モーションを作る 時間をかけて勉強して 多彩で精確なインタラクションを作る このあたりはまだまだトレードオフ。条件によって比較内容も変わる。 例えばチームで同じツールを共用しようと思うと、インタラクションメインのツールは 教えるハードル、練習するハードルなどが存在する。
  25. 25. ツールの使い分けについて
  26. 26. どこまで細分化するべきか?
  27. 27. トランジション型 インタラクション型 オーソドックスなのはこの組合せ 全体の設計をトランジション型で把握しつつ 細かい動きをインタラクション型で詰めていく +
  28. 28. ぶっちゃけ目的と環境による
  29. 29. インタラクションツール最前線! // プロトタイピングツールの使い分け なぜ作るのか アイデアを素早く具現化して試行錯誤するため こちらの意図を正確に相手に伝えるため コミュニケーションや対話のため 話し合うことでお互いの誤解を無くし、 実現したい世界に近づくため
  30. 30. インタラクションツール最前線! // プロトタイピングツールの使い分け もう少し具体的に考えてみる 静的な画像や遷移図では伝わらない細かいニュアンスを エンジニアと共有したい?
  31. 31. インタラクションツール最前線! // プロトタイピングツールの使い分け もう少し具体的に考えてみる 遠隔地にいるクライアントやメンバーと 全体の設計についてコミュニケーションを取りたい?
  32. 32. インタラクションツール最前線! // プロトタイピングツールの使い分け もう少し具体的に考えてみる プロトタイプ作成経験のないメンバーにも 分かりやすく教えていきたい?
  33. 33. インタラクションツール最前線! // プロトタイピングツールの使い分け • デザイナーの数が多い • クライアントワークがメイン • エンジニアとの距離が遠い • プロダクトが小規模である • こうったツールに予算があまり割けない • チームメンバーの興味が薄い などなど…… 環境を考えるのも大切
  34. 34. 目的を果たせるかどうか? 果たしたい目的は何か? を考えてみることが大切
  35. 35. インタラクションツール最前線! // プロトタイピングツールの使い分け 実は・・・ AE で作っても詳細まで伝わるかもしれない 他アプリを参考にするだけでいいかもしれない 手書きのラフだけで伝わるかもしれない ということもあり得る。
  36. 36. インタラクションツール最前線! // プロトタイピングツールの使い分け まとめ 目的に合ったツールを見つけよう 環境に合ったツールを見つけよう せっかくの場なので、他の人の話も聞いてみよう
  37. 37. ありがとうございました

×