プロトタイプの作成、どうしていますか？

今回は、プロトタイピングツールの1つであるInVisionについてご紹介します。

  • InVisionの特徴が知りたい
  • InVisionか他タイピングツールかで迷っている
  • Sketchと連携してプロトタイプの作成をしたい
  • InVisionの使い方を知りたい

上記に当てはまる人にはぴったりな記事内容となっています。

それでは早速、ご覧頂きましょう。


InVision（インビジョン）とは

既にInVisionについてご存じかもしれませんが、まずはInVisionがどういうものなのか、基本情報のおさらいです。


アプリやWebサイトのプロトタイピングを作成するツール

InVisionは、WebデザインのUI/UXでプロトタイピングを複数のプロジェクトチームメンバーで作成したり確認できるツールです。

デザインなどをアップすれば、それに対してコメント・ログも共有可能。


デザインチェックツールとしても使われている

先述したことから読み取れるように、InVisionはプロトタイプを作成するだけでなく、デザインチェックツールとしても便利なツールといえます。


InVison（インビジョン）の特徴

この項目では、InVisonが持つ特徴についてご紹介します。


操作が簡単で直感的

公式サイトでも「5分以内にプロトタイピングの基本が完成する」という記載があるとおり、InVisonの操作はとても直感的で簡単です。

ファイルのアップロードを済ませ、画面遷移をプラスしていくだけでプロトタイプの作成を進めることができます。


Sketchとの同期がスムーズ

InVisonはSketchと同期するためのプラグインを公式で公開しています（Craft）。

そのプラグインを設定すれば、Sketchで画面遷移設定ができます。

ショートカットで簡単にInVisonのデータとアートボードを同期可能です。


デザインツールを使用しなくてもコーディング情報の確認ができる

プログラマーやコーダーがプロトタイプをチェックする時、PhotoshopやZeplinなどのデザインツールを利用することが多いです。

しかし、InVisonの「inspect」という機能を使えば、ブラウザでコーディング情報を確認することができます。

また、コーディング情報だけでなく、カラーコード、マージン幅なども確認可能です。

これによって実装効率が飛躍的にアップします。


どの箇所のコメントかが一目瞭然

フィードバックをする際、テキストで「～の～を修正してほしい」というような指示を出すことが一般的です。

しかし、InVisonなら、画面上のコメントしたい部分をクリックすれば、そこにコメントを入力することができます。

そのため、どこの部分に対するコメントかが明確となり、作業能率の向上が見込めるでしょう。


図でもコメントできる

テキストでコメントするだけでなく、線で囲ったり、図でコメントを送ることもできます。

画像の位置をここにしてほしい、などテキストでは伝えづらいことも、図でコメントすればわかりやすく伝えることができます。


ユーザー登録なしでコメントしてもらえる

ユーザー登録をしていない人も、プロトタイプに対してコメントすることができます。

プロジェクトチームメンバー以外に、クライアントにプロトタイプを閲覧してもらうこともできます。

その場合は初回のみメールアドレスと名前入力が必要です。ただし登録は不要。

ちなみに、アカウントにログインしている人でなければプロジェクトの作成はできません。


コメントへの返信機能がある

コメントに返信できる機能が搭載しています。

また、コメントに対して「いいね」もできます。


コメントの色分けができる

コメントカラーは4種類（ピンク、グレー、紫、水色）。

そのため、こんなことができます。

クライアント、ディレクター、プロジェクトチームメンバー、関連会社などで色分け。

指摘コメント、コメント完了、他メンバーに対する指示などで色分け。

自分たちに合った色分けを試してみると良いでしょう。


様々なデバイスでデザインチェックできる

URLをスマートフォンに送れば、スマートフォンでデザインのチェックなどをおこなうことができます。

ボタンサイズや文字の読みやすさなど、実機チェックができるのは修正を最小限にするための大きなポイント。

コーディング前にその確認ができるので大幅な修正が生じる可能性が低くなります。


画面全てのダウンロードが可能

資料作成のために、クライアントから画面全てのキャプチャがほしいといわれることがあります。

そんな時、InVisionなら画面一覧を一括でダウンロードすることができるので依頼されたほうの負担を軽減することが可能です。

プロジェクトに参加しているクライアントであれば自身でダウンロードしてもらうこともでき、最新のデータを取得してもらえます。


コミュニケーションが取りやすい

プロジェクトチームメンバー全員が同じ画面を共有できるため、コミュニケーションが取りやすいです。

「ここはこうしたほうが良いんじゃないか」「前のほうが良かった」など、リアルタイムで意見を出し合うことができるため、調整や修正が容易にできます。


プロジェクトの進捗がわかりやすい

InVisonはデフォルトで

  • 「In Progress（進行中）」
  • 「Need Review（レビュー待ち）」
  • 「On Hold （保留）」
  • 「Approved（承認済み）」

の4つのステータスがあります。

これによって、画面ごとのステータスをすぐに確認することが可能です。


有名企業が採用している

日本語対応していることもあり、日本ではプロトタイピングツールとしてProttが人気なイメージがあります。

しかし、世界に目を向けてみるとInVisonを利用している企業は多いです。

有名どころでいえば「Evernote」や「Airbnb」など。

InVisonはコミュニケーションが取りやすいツールであり、プロジェクトに関わる人が多くなればなるほど真価を発揮するツールです。

プロジェクトをスムーズに進めるためにはスムーズなコミュニケーションを取るのは必要不可欠。

InVisonはそんなニーズに応えることができるツールといえます。


InVision（インビジョン）のプラン・料金

InVisionには5つのプランが用意されています。

次項目より、各プランごとの内容を見ていきましょう。

紹介するのは下記の5つのプランです。

  • フリープラン
  • スタータープラン
  • プロフェッショナルプラン
  • チームプラン
  • エンタープライズプラン

エンタープライズプランを除き、支払い方法はどのプランもクレジットカード払いとなっています。


InVision（インビジョン）のプラン・料金①フリープラン

無料で使うことができるプランです。

プロトタイプ形式のプロジェクトの作成は1つまでという制限があります。

ただ、プロトタイプ形式以外のボード形式、フリーハンド形式のプロジェクトについては制限なしに作成することができます。

ちなみに、プロトタイプ形式のプロジェクトを作ったとしても、削除かアーカイブすれば新たにプロトタイプ形式のプロジェクトを作成可能です。


InVision（インビジョン）のプラン・料金②スタータープラン

月15ドルでプロトタイプ形式のプロジェクトを3つ作れるプランです。

年間払いにすると、1ヶ月あたり13ドルになります。

5人以下でプロジェクト開発をおこなう場合はこのプランにするのが良いでしょう。


InVision（インビジョン）のプラン・料金③プロフェッショナルプラン

月25ドルでプロトタイプ形式のプロジェクトを無制限で作れるプランです。

年間払いにすると、1ヶ月あたり22ドルになります。


InVision（インビジョン）のプラン・料金④チームプラン

チームメンバー5人まで、月99ドルでプロトタイプ形式のプロジェクトを無制限に作成できるプランです。

年間払いにすると、1ヶ月あたり89ドルで利用可能です。

5人分での料金なので、5人以上の大人数でプロジェクト開発をおこなう時はこのプランを選ぶと良いでしょう。


InVision（インビジョン）のプラン・料金⑤エンタープライズプラン

セキュリティ強化、細やかな権限管理ができるプランです。企業向け。

料金など詳細については公式サイトから問い合わせてみる必要があります。

なお、問い合わせ先はInVisionのセールスチームです。

オンラインミーティングの開催依頼が来る可能性があり、英語でのやり取りとなりますので、英語がわかる人も同席の上ミーティングしましょう。


InVision（インビジョン）のプラン変更

InVisionを使っていると「上位プランにしたい」「下位プランに落としたい」などのプラン変更の希望が出てくることがあるかもしれません。

InVisionは基本的に英語でのやり取り。

英語が不得手な人には敷居が高く感じるかもしれません。

Q＆Aも英語なので、Google翻訳で何とか読み解くしかありません。

そこで、この項目では英語が苦手な人でも安心できるよう、InVisionのプラン変更のやり方についてご紹介します。


Profileを選択

InVisionにログインし、右上のProfileを選択してください。

そして、「Billing」をクリックします。

すると、「Plans＆Billing」という画面に移行します。


Plan変更する

「Plans＆Billing」画面に表示されている「Your Plan」に現在登録しているプランが出ます。

そのプラン名の横に「Upgrade Plan」もしくは「Cancel Plan」というリンクが出るので、それを選択うしてください。

選びたいプランを選び、変更完了です。


InVision（インビジョン）の使い方①登録


InVisionの概要やプランなどがわかったところで、InVisionの使い方について詳しく解説していきます。

まずは登録のやり方からです。


公式サイトから登録スタート

公式サイトの右上にある「SIGN UP FREE」ボタンを押しましょう。

登録画面が出てくるので、「名前」「メールアドレス」「パスワード」を入力し送信します。

これで登録は完了です。

すぐにプロジェクトの作成ができます。

登録後は、InVisionのマイページが開きます。

マイページのトップ画面にはデモプロジェクトが並んでいるので、参考に中を覗いてみると良いでしょう。


InVison（インビジョン）の使い方②プロジェクトの作成


この項目からは、プロトタイプの作成方法についてお伝えします。

まずはプロジェクトを作成するところから始めましょう。


右上にある「＋」をクリック

＋ボタンをクリックし、プロジェクトタイプを選びます。

「プロトタイプ」と「ボード（画面遷移などの機能がないタイプ）」の2タイプが出てくるので、「プロトタイプ」を選んでください。


プロジェクト内容の設定

プロジェクト名を入力し、プロジェクトの設定端末（確認する端末のこと。ブラウザやiPhone、iPadなど）を選びます。

なお、プロジェクトの設定端末は1つしか選べません。


デザインファイルをアップロード

PDFやJPG、PNG、GIFなどの他にSketchやpsdのデータを直接アップロードすることができます。

共有したいデータをドラッグ＆ドロップしInVisionに入れ込みましょう。


InVision（インビジョン）の使い方③Sketchから同期する



プラグインをインストールする

InVisionのプラグイン・Craftをインストールします。


サインインする

サインインが完了すれば、あとはSketchで画面遷移の設定をおこなうだけです。


Sketch側の設定

遷移元のデータを選び、「c」キーを押します。

そして、遷移先の画面を選べば設定完了です。


InVision（インビジョン）の使い方④デザインのシェア

プロトタイプの作成が終わったら、画面右上に表示される「SHARE」ボタンを押してください。

そうすると、シェア画面（Share Prototype）に移行します。

シェア画面に表示されるURLをコピーし、シェアしたい人に送りましょう。

「Password Protect」を選べばパスワードをつけることも可能です。


InVision（インビジョン）の解約について

万が一、試してみたけれど合わなかった…という時のために、InVisionを解約する方法についても記載しておきます。


有料プランの解約はプラン変更と同じ

有料プランから無料プランにダウングレードする場合は「InVision（インビジョン）のプラン変更」の方法でダウングレードすることができます。


アカウント登録を削除したい場合

アカウントの削除については、メールで依頼をする必要があります（英語でのやり取りとなります）。


まとめ

世界的に有名なプロトタイピングツール・InVisionについてご紹介しましたが、いかがだったでしょうか。

まだ日本では認知度が高いとはいえないツールではありますが、使い勝手の良さと直感的な操作性が魅力のツールです。

プロトタイプの作成、UI/UXデザインの確認作業などをもっとスムーズにこなしたいと思っている人は導入を検討してみることをおすすめします。