Upgrade to Pro — share decks privately, control downloads, hide ads and more …

プロトタイピングツールの勧め

kurita
April 27, 2019

 プロトタイピングツールの勧め

初心者優しいLT会&交流会
2019/04/27(土)

プロトタイピング(Prototyping)とは、実働するモデル(プロトタイプ)を早期に製作する手法およびその過程を意味する。 その目的は、設計を様々な観点から検証する、機能やアイデアを形にすることでユーザーから早めにフィードバックを得るなど、様々である。

kurita

April 27, 2019
Tweet

More Decks by kurita

Other Decks in Design

Transcript

  1. 1
    プロトタイピングのすすめ
    初⼼者優しいLT会&交流会
    2019/04/27(⼟)
    配布⽤

    View Slide

  2. 2
    ⾃⼰紹介
    割愛

    View Slide

  3. 3
    つたえたい事

    View Slide

  4. 4
    プロトタイピングのこと

    View Slide

  5. 5
    プロトタイピング
    プロトタイピング(Prototyping)とは、実働す
    るモデル(プロトタイプ)を早期に製作する⼿
    法およびその過程を意味する。 その⽬的は、設
    計を様々な観点から検証する、機能やアイデア
    を形にすることでユーザーから早めにフィード
    バックを得るなど、様々である。

    View Slide

  6. 6
    プロトタイピング
    つくる
    テスト レビュー

    View Slide

  7. 7
    プロトタイピング
    堅実なウォーターフォール開発や
    ⾼速な短期間の開発単位を回すアジャイル
    もいいけど・・・
    UTを何度も繰り返し、UX改善を⾏える
    プロトタイピング開発もいい︕

    View Slide

  8. 8
    プロトタイピング
    デザイナ
    ディレクタ エンジニア
    ツール

    View Slide

  9. 9
    それが プロトタイピングツール︕

    View Slide

  10. 10
    プロトタイピングツール

    View Slide

  11. 11
    結局どれがいいの︖

    View Slide

  12. 12
    結論

    View Slide

  13. 13
    環境に合わせて使いこなす︕

    View Slide

  14. 14
    Sketch

    View Slide

  15. 15
    Sketch
    ポジティブ
    ・プラグインが多い、過去資産がある
    ネガティブ
    ・Windows で使えない︕
    ・有料
    引⽤︓https://techblog.istyle.co.jp/archives/2090

    View Slide

  16. 16
    Adobe XD

    View Slide

  17. 17
    Adobe XD
    ポジティブ
    ・Adobe 信者御⽤達︕
    ・最近使ってる⼈多い︕
    ・無料(制限有)
    ネガティブ
    ・ない︕︖
    引⽤︓https://techblog.istyle.co.jp/archives/2090

    View Slide

  18. 18
    Figma

    View Slide

  19. 19
    Figma
    ポジティブ
    ・ブラウザで使える(アプリもある)
    ・共同オンライン作業ができる
    ・無料(3プロジェクト)
    ネガティブ
    ・UIが英語
    引⽤︓https://note.mu/sonicjam/n/n6a9f46e6710a

    View Slide

  20. 20
    世間的にどうなの︖

    View Slide

  21. 21
    Google Trends
    ─ Figma
    ─ Adobe XD
    ─ Sketch
    ─ InVision
    Figma3.0 リリース
    Adobe XD リリース

    View Slide

  22. 22
    実際に使ってみて

    View Slide

  23. 23
    実際に使ってみて

    View Slide

  24. 24
    プロトタイピングツールは計画的に︕
    デザイナ
    ディレクタ エンジニア

    View Slide

  25. 25
    結論2

    View Slide

  26. 26
    エンジニア だけど デザイン を︕
    ディレクター だけど デザイン も︕
    デザイナー だけど プロトタイピング を︕

    View Slide

  27. 27
    つまり

    View Slide

  28. 28
    ・ディレクター の 構成ワイヤーツール
    ・デザイナー の UIデザインツール
    ・リサーチャー の UTプロトタイピングツール
    ・エンジニア の スタイルガイドツール

    View Slide

  29. 29
    スキル を超えた
    制作プラットフォーム である︕

    View Slide

  30. 30
    いろんなジョブをマスターして
    上級職 を⾝につけよう︕

    View Slide