どうも、まさとらん（@0310lan）です！

Webアプリやサイトを、たった1人で作ることってあまり無いですよね？

トップデザインだけでも複数人が担当することも珍しくないわけで…、そんな時に、場所を問わずいつでもオンラインで「ブレスト的なミーティング」を実現できるWebサービスが海外で注目されているのでご紹介しようと思います。

それが、「inVision」です！


 

どうやって使うの！？

まず、無償のアカウントを登録したら、自分専用のマイページが表示されます。

ここに、フォトショなどで製作中のデザイン画像や、ラフスケッチをスキャンした画像などを放り込んでいきます。


 

もし、すでに稼働中のWebアプリやサイトの場合は、専用のChromeアプリを使うと1クリックでキャプチャしてくれるので便利です。


 

画像が用意できたら、プロジェクトに入り「LiveShare」ボタンをクリックします。


 

そして、生成されたURLを一緒にミーティングしたい人へシェアします。


 

これだけで、開発中のデザインを複数人で共有しながら「リアルタイムミーティング」を実現できるわけです。


それぞれのマウスに名前が表示されており、そのまま自由に手描きすることも可能です。

 

もちろん、その場ですぐにチャットもできます。


 

文章で伝えられなければ、音声チャットも利用できます。


 

また、タブを切り替えるだけで、ホワイトボードを利用することも可能です！


ホワイトボードに描いた内容は、1クリックで画像として保存することもできます。

 

ちなみに、シェアされたURLは「スマホのブラウザ」からも参加可能で、「手描き」との相性は抜群ですね！


 

 

非エンジニアも開発に参加できる優れたUI！

実は、「inVision」を使うことで、ほぼ完成に近いプロトタイプを作ってしまうことも可能です。

例えば、

iPhone用のWebサイトを製作する場合を見てみましょう。

 

まず、新規プロジェクト画面で専用テンプレートを選択します。


 

そして、プロトタイプ用の画像をどんどん放り込んでいきます。


ちゃんとした画像でなくても、ワイヤーフレームや手描きスケッチなどでも問題ありません。

 

あとは、画像の中にあるボタンを、マウスでドラッグしながら範囲を指定します。


 

すると、指定したボタンを「どのように動かしたいか？」というのを、細かく設定できるようになります。


上記の場合は、「タップをしたら、左から右へ指定の画像を表示する」という設定にしてみました。

 

そして、ビューモードで動作を確認すれば、その通りに動いてるのが分かります！


 

そのままURLを共有したり、埋め込みタグを使ったりして複数人で挙動の確認をすることも可能。


（スマホで確認すれば、まるでアプリが動いているように錯覚します…）

 

さらに、このままボタンなどを作り込んでから、再び「リアルタイムミーティング」に進んでしまうことも可能ですね！

このように、プロトタイプを作りながら「複数人でミーティング」をやったりなど、やっていることは複雑な作業のはずなんですが、とても簡単に扱えるように工夫されている点が最大の魅力とも言えそうです。

2014年8月現在、EvernoteやAirbnb、ebayにPayPalなど…、大手IT企業が次々と「inVision」を使い始めている理由も分かるような気がします。（参考：CUSTOMERS）

 

 

おまけ

最後に、アプギガで過去に紹介した「Webアプリ開発」を手助けしてくれる、良質なサービスも合わせてご紹介しておきます！

【Webアプリの開発でありがちな問題を「一発解消」するWebサービス10選が便利過ぎる！】


開発からデザイン、テストまで、幅広くサポートしてくれる貴重なWebサービスばかりを厳選してみました。

ご興味ある方は、ぜひ一読くださいませ！

 

まとめ

複数人で、画面を共有したり、1つのデザインに対してコメントをするような類似サービスはいくつかありますが、現時点においては「inVision」の方が圧倒的に使いやすかったです。

これから、Webアプリやサイトなどを作る予定のある方は、まずラフスケッチを「inVision」に読み込ませてから、試行錯誤するのがスタンダードになりそうです。

 

 

written by まさとらん