Blog株式会社マネーフォワード公式開発者向けブログです。技術や開発手法、イベント登壇などを発信します。サービスに関するご質問は、各サービス窓口までご連絡ください。2016-05-23おすすめのプロトタイピングツール5選(2016年5月時点)こんにちは、デザイナーの大橋です。昨今のプロダクトデザインの制作フローにおいて、プロトタイピングは必須の作業の一部になっていると思います。そこで今回は、世の中にあるプロトタイピングツールの中で定番のものから最新の分析までできちゃうツールまで、いくつか紹介したいと思います。その前に、そもそもプロトタイプを作るメリットとは?個人的な意見ですが、下記の二点があると思います。エンジニアとの認識合わせができる事前に懸念点を発見し、開発やデザインに入る前にある程度の課題を解決するマネーフォワードでのプロトタイピングtoB、toCサービス共に積極的に利用しています。プロトタイプを作成したら、デザインチームやプロダクトの開発チーム内に共有。チーム内レビューやユーザーテストを繰り返し、トライ&エラーで、ブラッシュアップしていっています。プロトタイピングを開発期間に、最初から組み込む事で、プロトタイピング期間の確保とエンジニアに実装してもらってから問題に気付いて手戻りするという事が少なくなりました。XD簡易型は、基本的な動きや遷移を開発メンバー等と共有し、その機能やプロダクトが成り立つかを判断する。事前に課題を発見し解決するという感じかと思います。できるので、最初に取り入れたいプロトタイピングツールかと思います。簡易型+数値測定canvasflip簡易型の要素に加えて、出来上がったプロトタイプを使ってユーザテストをし、トラッキング・分析までを行う事ができます。行えるツールなのです。デザイナーは、ここで指定した値をそのままエンジニアに伝えればよいので、「ここをあと0.1秒だけ早くしたの見てみたい!」とか細かい調整を自分で行う事で、コミュニケーションコストを減らしつつ、細部にこだわったプロダクトをプロトタイプの段階で、作る事ができます。Studioこの中でも私的オススメのツールを5つを、あさーく紹介したいと思います。チームにInVisionを導入してみてカイゼンしたことでオススメな点を書いたので、ここでは触れていないオススメポイントをご紹介。以前の記事で、コメント機能が、優れているという点を書いたと思いますが、それにプラスして、Workflow機能を使うとより便利に使えるのではないかと思います。Workflow画面で、進捗具合や、どの画面がどのようなステータスなのかが可視化されます。レビュー依頼したい画面がどれなのかがすぐ分かるので、チームメンバーへの共有や、依頼されたメンバーが、どの画面をレビューすべきなのかが一目瞭然です。...などなど、さほどツールによる差はないかと思います。トラッキングレポートもヒートマップも無料とのこと(2016/05/19現在)世に出す前に事前に課題を潰せれば、リリース後に改善を続けて、UIのちょっとした変更などが減り、ユーザーにストレスを与える事が減るかと思います。ユーザーテストにより「数値を取れる」「ヒートマップで傾向が見える」事により、定量的なデータにより、UIの改善ができるので、課題の発見が可視化され、共有や裏付けのネタとしても活用できるのではないかと思います。Mobileでのセッションを聞いて、私でもできそう!と思い試して見ました。試してみたところ思ったより、直感的で簡単にできると感じました。CONNECT機能で、PCで作ったプロトタイプをスマホアプリとつなげる事で即座に反映、シームレスに実機での確認作業ができる点がよいなと感じました。無料で使えるし、ビデオチュートリアルも豊富にあるので、時間があれば一度試して見る価値ありだと思いまーす。https://www.gaprot.jp/pickup/tips/about-pixate5.craftのPROTOTYPE期待値デカイので、リリース前なのにご紹介。Sketchのプラグインのcraft。ワイヤーからUIデザイン→プロトタイプまで一貫してできるので、もうSketchだけインストールしておけば、アプリデザインは、コレ1つでOK?!みたいな感じです。invisionが出しているツールなので、invisionとの連携なども含めて今後に期待です。まとめどのプロトタイピングツールを使うにせよ、プロトタイプを作る事が目的ではなく、「チームメンバーに共有、認識を合わせて開発を進めること」「事前にプロトタイプを使って課題を発見→解決、ブラッシュアップのフローを回していく事」が大事かと思います。ここの作業をきちっとフローに組み込む事で結果的に、手戻りが減り、開発期間の短縮ができると思います。最後にマネーフォワードでは、プロトタイプツールを上手く使ってアウトプットを最大化できるデザイナーを募集しています。ご応募お待ちしています。読者になるこのブログについてはてなブログをはじめよう!moneyforwardDevさんは、はてなブログを使っています。ブログを報告する引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。