チームにInVisionを導入してみてカイゼンしたこと

こんにちは、マネーフォワードの大橋＠デザイナーです。

みなさんはプロトタイピングツールの「 InVision 」をご存知でしょうか。
Evernoteをはじめ、様々な企業で導入されているサービスです。
http://www.invisionapp.com/

マネーフォワードでもInVisionを活用して、エンジニア・デザイナーをはじめチーム内のコミュニケーション円滑化を図っています。

そこで今回は、InVisionを導入して良かった点を紹介させていただきます。

InVisionの主な機能

プロトタイピングツールデザイン共有LiveShare (リアルタイムなミーティング機能)コメント機能

1. コミュニケーションが円滑になった

エンジニア・デザイナーだけでなく、マーケターや意思決定者を含めた、プロジェクトメンバー全員が各画面を見ながら議論できる。コメント機能によって様々な観点での意見を集約でき、意思決定が早くなった。「ここのワーディング、ちょっと違和感あるかも」とか「エンジニア的な観点から、ここは△△した方がいいんじゃない？！」とか「グロースハック結果から、ここは□□の方針で」とか

2. コメント機能で、非効率なコミュニケーションを減った

コメント機能にて会話のログを残すことで、議論した点や質問事項を記録できる。InVision上に記録が残っているため、チーム内で共有できるとともに、直感的に思い出しながら修正できる。その結果、非効率な聞き直しや、重複した議論を回避することができる。

3. プロトタイプでのチェックにより手戻りが減った

プロトタイプを関係者がチェックできる。プロトタイプで仕様や遷移導線を共有できるため、デザイナー・エンジニア間での認識の相違が減った。早期にワーディング・仕様の深い議論に入れるため、実装フェーズからの手戻りが減った。

4. Desktop Sync機能で、最新データをInVision上で共有できる

これが一番オススメ機能！Desktop Sync機能により、常に最新のSketchデータ・PhotoshopデータをInVision上に共有できる。InVisionにあるものをマスタデータとしてエンジニアの方に共有できる。一度作った画面を更新するとInVision上に反映され、プロトタイピングをやり直さなくていい。画面単位で書きだしてくれるため、一度SketchでExportしてから一枚一枚アップロードするという作業が減らせる。

5.おまけ

Adobe Photoshop CC 2015 リリースで、Sketchライクなアートボードが追加されました。
これにより、Photoshop派の人もよりアプリのデザインがしやすくなるかも♪
https://helpx.adobe.com/jp/photoshop/using/artboards.html

また、InVisionもサポートしてるそうです。
http://blog.invisionapp.com/adobe-invision-team-up-to-support-photoshop-artboards/

Historyの時間がアメリカ時間っぽかったり、更新状態に多少タイムラグがあったり、たまに落ちたり、まだまだ使いこなせてなかったり、、、、
色々課題はありつつも、InVisionを使い始めたことによりコミュニケーションが改善して、仕事の効率UPできました。