UI/UXデザインツール『InVision Cloud』入門

1-1. InVision Cloudとは何か?

  • UIデザイン
  • UXデザイン
  • プロトタイピング

InVision CloudはWebブラウザ上で動作するアプリケーションで、プロトタイプ・フリーハンド・ボードという機能によって、デザインに関するコミュニケーションの円滑化を行うためのツールです。

公開日:2019/04/07最終更新日:2019/04/07

1.はじめに

InVisionはCEOのクラーク・バルバーグ(Clark Valberg)によって2011年にニューヨークで創業されたデザインツールを提供する会社です。創業当初はプロトタイピングツールとして「InVision」を提供していましたが、会社を買収したり機能が増えるに伴って製品も増え、現在は「デジタルプロダクトデザインプラットフォーム」の総称として「InVision」という名称が使われています。

2017年にはベンチャーキャピタルなどから1億ドルの資金調達を行っており、総調達額は約2.3億ドルになりました。この豊富な資金を使って新製品の開発・マーケティング・M&Aを活発に行なっています。

2018年の段階で社員は約700名、すべてのメンバーがリモートワークで参画しており、これからの新しい働き方を推進する企業としても有名です。

オフィスなし! 700人がリモートで働くスタートアップの強み
https://www.businessinsider.jp/post-176523

2.InVisionの主な製品

2018年2月現在、InVisionからは大きく3つの製品がリリースされています。

InVision Cloud

このカリキュラムで取り扱っていく製品です。詳しい内容は後述します。

InVision Studio

2018年に正式リリースされた最新のデザインツールです。画面のデザインからプロトタイプの作成まで一気通貫で行うことができ、高度なレスポンシブ対応やアニメーションの作成ができるのが特徴です。今後はサードパーティによるプラグインの販売や、UIキット・デザインライブラリを配布できる仕組みが提供される予定です。

InVision DSM

InVisionが過去に買収したBrand.aiというサービスをリブランディングして提供しているのがこの「DSM」です。DSMというのはDesign System Managerの略で、近年注目されているデザインシステムを管理するためのツールとして注目されています。デザインデータをコンポーネントごとに管理したり、チーム内でデザインデータを共有することができる仕組みです。

3.InVision Cloudの主な機能

InVision Cloudは創業当時から提供されているプロトタイプ作成の機能に加え、フリーハンド・ボードと呼ばれる機能が追加された製品です。

Prototype - プロトタイプを作成する

SketchやPhotoshopなどで作成した画面をアップロードして、画面遷移と遷移のアニメーションを再現することができる機能です。ブラウザ上での操作だけではなく、Sketch上でプラグインを利用することによって編集することも可能です。

Freehand - デジタルホワイトボードによるコラボレーション

他のユーザーとリアルタイムに共有されたまっさらな白い画面で、絵や文字を書き込んだりしてコミュニケーションができる機能です。プロトタイプ機能とも連携しており、画面のアップロードもシームレスに行うことができます。

Board - ムードボードを作成する

Pinterestのような感覚で画像をアップしたりメモやテーマカラーを追加してムードボードが作成できる機能です。コメントのやりとりもできるようになっており、オンライン上でディスカッションするための機能が備わっています。

4.Adobe XD・Sketchとの比較

InVision Cloudの類似製品としてはAdobe XDとSketchが挙げられます。

Adobe XDとの違い

Adobe XDはデザイン〜プロトタイプの作成〜共有まで1つにまとまった形になっていますが、InVision Cloudには画面のデザインを作成する機能がありません。デザインの作成をするためにはPhotoshopやSketchを使うか、最新のInVision Studioを組み合わせる必要があります。

Sketchとの違い

もともとSketchにはプロトタイプの作成機能がなかったため、InVisionはSketchと密に連携することによってデザイン〜プロトタイプの作成〜共有までを行えるツールとして提供されていました。しかし最近はSketch上でプロトタイプの作成が行えるようになったため、その部分での機能差はあまりありません。

一見、InVision Cloudにはデザインを作成する機能がないため、Adobe XDやSketchに比べてやや機能不足であるように見えますが、コミュニケーションをやりとりする機能の充実さ(コメント・フリーハンド・ボード)や、新製品であるInVision Studio・DSMも合わせて比較すると、数あるデザインツールの中でも珍しい0から10をカバーすることができる横断的なデザインツールであることがわかります。これがまさにInVisionが実現する「デジタルプロダクトデザインプラットフォーム」という世界観です。

理解度チェック







このレッスンの著者