こんにちは。サイボウズ デザイングループの樋田（といだ）です。
今年の6月にデザイナーとしてサイボウズへ中途入社しました。
今は社内でプロトタイピングおじさんやってます。
プロトタイピングってもう開発のプロセスには欠かせないものになってますよね。
サイボウズの開発でもいままでプロトタイピングをやってきたのですが、プロトタイピングをより開発に活かすべく新しいツールを導入することにしました。
理想のツールを探して
これまではInVIsionだけでプロトタイプを作っていたのですが、InVisionのプロトタイプだけでは実装とのずれがあって詳細な検討ができない…という不満がありました。
そこで実装に近い"動く"プロトタイプが作れるツールを導入することにしました。
主な目的はこの3点
- 早く出来る
- 簡単にできる（学習コストが低い）
- 再現度が高い
世の中にはたくさんのプロトタイピングツールがあるので 理想のツールを探して片っ端から試してみました。
各ツールそれぞれ特徴があるのですが、大きくまとめると
- 再現度：Webアプリケーション < ネイティブアプリ
- 共有： Webアプリケーション > ネイティブアプリ
- 簡単：Webアプリケーション < ネイティブアプリ
あとはGUI志向のツールよりプログラミングに近いツール（条件分岐などを使う）のほうが プロトタイプで再現できることが多くなります。
上記のような事情を考えつつ最終的に候補に残したのが以下の2つです。
Flinto for Mac
Principle
（なんかどちらもWebサイトが似てる…）
どちらもMacのCore Animationを利用したGUIベースのプロトタイピングツールです。
プログラミングレスでアニメーションも含めたモックアップを手軽に作ることができます。
こんな感じのプロトタイプがすぐできる（※デモなので開発中のプロダクトとは関係ありません）
どちらのツールにするかものすごーく悩んだのですが、最終的にはFlinto for Macを選びました。
Flintoは日本語にローカライズされており、日本語のチュートリアルも充実しています。
社内への普及も考えると、学習コストは低いにこしたことはありません。
さっそく使ってみた
さっそく担当のプロジェクトで使ってみました。
Flintoのようなアニメーションを再現できるプロトタイピングツールは、マイクロインタラクションのような細部の検討に使うイメージがあったのですが、
今回は完成イメージの共有のために、要件が決まった段階ですぐにFlintoで動かせるプロトタイプを作ってみました。
みんなの反応
Sketchでざーっとデザインをつくり、Flintoでアニメーションをつけました。大体2〜3時間ぐらいの作業です。 できたものを持ってみんなに見せてみたところ…
- あれ、もう出来てるの？
- 動いてるものを見るとテンション上がるね！
- 作ろうとしているのがイメージしやすくて良いね
- これそのままリリースできればいいのに…
おお、良い反応です。そのままリリースはできないですけどね…
細部の検討というより、あえて事前に動くものをつくってしまうことで完成イメージを全員で共有することができました。
さらに、動くものを触りながら「これちょっと違和感あるな〜」とか「この実装はちょっと厳しいかも〜」
といったフィードバックも得られやすくなりました！
ついでに社内ヒアリングもしてみた
Flintoで作ったプロトタイプを使って社内ヒアリングもやってみました。
これも絵だけ見せるよりも格段にフィードバックが得られやすくなりました。
ものにもよりますが、言わなければプロトタイプだとバレないレベルでヒアリングができます。
やってみてわかったFlintoプロトタイピングのコツ
実際にプロジェクトで活用してみていくつかポイントがわかりました。
- 早くつくる
- 小さくつくる
- 継続的に改善する
早くつくる
プロトタイプ全般にいえることですがプロトタイプを作るのに時間をかけてしまうと、作った頃には役に立たない…。なんてことになりがちです。
Flintoは細部までこだわることができるツールですが、できるだけ早く形にして共有するのが重要そうです。
小さくつくる
実装に近いプロトタイピングができるFlintoですが、できるのはあくまでプロトタイプです。
実際の製品を再現しようと、本物みたいな巨大なプロトタイプを作ってしまうと検証ポイントがぶれてしまう危険があります。
できるだけ検証したいポイントやストーリーをしぼって小さくつくるとブレずに検証が進められます。
継続的に改善する
プロトタイピングを検証して見つけた改善ポイントはすぐにプロトタイプに反映してみるのが良かったです。
すぐに反映→検証→反映...を繰り返すと実装前にプロトタイプで詰められます。
すぐに改善を反映できるようSketchとFlintoで連携がとれるようにしておくとスムーズです。
Flinto for Mac Sketch Plugin
まとめ
以上サイボウズでのFlintoを使ったプロトタイピングの話でした。
今は
- 全体の共有 → InVision
- ストーリーの検証 → Flinto for Mac
という使い分けを自分はしています。 Flinto以外にも色々な手段でプロトタイピングをしているのですが、それはまた別の機会にお話できればと思います。
今後もデザインを開発プロセスで活かすべく改善を続けていきます。 サイボウズで一緒にプロトタイピングしたい方はこちらでデザイングループの紹介をしてます！
UX Cafe Facebookページでも情報発信中です！
