Cntlog

プロトタイプ入門！初めてInvisionを使う人向けの機能と使い方の紹介

デザイン

投稿日

最近はSketchを使うことが増えて（というか一択）になっており様々なプロトタイプツールに手を出しているのですがその中でも一番汎用性が高く気にいっているのがInVisionです。

Invisionは英語製なので日本人には敬遠されがちで、あまり機能や便利さが広まっていないと思うので、私が使っている部分になりますがInVisionで出来ることをご紹介します。

inVisionとは

InVisionはプロトタイピングツールの一つでアプリやWebデザインのUI/UXをクライアントを含めたチームでコミュニケーションを取るWebサービスです。

EvernoteやAirbnbといった有名企業もinVisionを採用しているほどです。
プロトタイプはプロジェクトに関わる人数が多くなればなるほど、コミュニケーションコストを下げ、円滑に進行が出来ます。
InVisionは最近でもめまぐるしいサービスの更新があったりと目が離せない速度で進化しています。

プロトタイピングツールを使ったことがない方はイメージが付きづらいかもしれませんが、デザインやワイヤーフレームをInVisionにアップ（同期）することで、デザインに対してのコメントやログを共有することができます。

アプリのプロトタイプを作る際によく使われているイメージのあるinVisionですが、PCのデザインのチェックツールとしても活用できます。

inVisionを使っていくフロー

Invisionを案件に導入すると、流れは以下のような感じになります。

  • （アカウントを持っていれば）ログインをしてプロジェクトの作成
  • プロジェクトに参加メンバーのアカウントを追加
  • Sketchと同期
  • 各画面の画面遷移を設定する
  • プロジェクトを実機で見えるように担当者にシェアする
  • 担当者からフィードバック・コメントをもらう
  • ワイヤーがFIXしたものからワークフローを更新させてデザインをすすめていく
  • 担当者からフィードバック・コメントをもらう
  • デザインがFIXしたものからワークフローを更新して、コーディングを進めていく

inVisionの便利なところ

私は「inVision」を使い始めて半年くらいですが使ってみると本当に便利でデザインチェックが効率的になり手放せなくなりました。
立ち位置的にデザイナー版github的な依存度です。やばい。

Sketchで簡単同期

InvisioではSketchのプラグインを公式でだしていてそれを使えば、Sketchを立ち上げてるときにショートカット一つで簡単にInVisionのデータにアートボードを同期することができます。

アプリなどを作ると画面の更新が多いので、これが書き出し無しで一気に更新出来るのはすごく便利です。

簡単にコメントを残せる

クライアントに確認をする際、対面しながらコメントを貰えるのが一番ですが、なかなかお互いの時間が合わなくて先延ばしにしてプロジェクトが炎上する事はよくあると思います。

InVisionではプロジェクトに参加してない人でも簡単にコメントを残すことができます。
※最初だけメールアドレスと名前を入れていただく必要はあります。

とくにこのコメントの機能で使いやすいのが色分けと番号です。


番号が入っているとチャットなどで「◯番の件」なのだけど進捗どうですか？
とか「◯番の対応は完了しました」など的確なコミュニケーションがとれます。
今までは、「◯◯のページのへッダーにある…」なんて長々と書いてましたがInVsionを使えばそんな必要はありませんね。

もらったコメントには返信できたり「いいね」ができるのでコミュニケーションが取りやすいです。
メールなどでコミュニケーションをしているといろんな話が交じるのでコメントの部分だけで制限すると話がいろんなところに飛び火せずに済むのでコミュニケーションが円滑になります。

さらにコメントは対応したものはクローズの処理ができるので画面が古いコメントで埋もれることはありません。

色が付いていて便利なのはどの関係者が書いてるかを明確化できます。
私の場合はクライアント、ディレクター、社内担当者、パートナー会社の４カラーで分けてます。
コメントをクリックをすれば誰が書いたかがわかるのですが一覧の状態でどの関係者が書いているとチェックしやすいです。
例）デザイナーはディレクターの指示を確認しにいく。

ちなみにコメントはブラウザで行えるのでWindowsの人も大丈夫です。
SketchはMacだけですが確認はブラウザが使えればだれでも確認出来るので、Sketchを使わない手はないですね。

スマホは実機でチェック

URLをスマホに送れば、実機でチェックできます。
実際のボタンのサイズ感や文字の読みやすさはPCで見ているとイメージがつかなくて、この辺りをコーディング前の段階で実機で確認できる後の大きな修正を避けやすいので便利ですね。

プロトタイプが優秀



画面を遷移するというだけなどのプロトタイプも可能なのですが、InVisionはかゆいところに手がとどく感じになっています。
あると嬉しい、ヘッダー・フッターの固定の設定もあるのでコーダーさんに連絡漏れすることもなくなります。

遷移下記のような設定ができます。

リンク先設定

  • ページ内遷移
  • リンクバック
    • アプリのプロトタイプを作る時あると凄く便利です
  • オーバーレイ
    • バーガーメニューやライトボックスのような画面を作る時便利
  • プロジェクトで並んだ前/後の画面
  • 外部URL
    • 結構別のサービスに飛ばすという状況があるのでないと不便
  • プロジェクト内の指定の画面
    • 当たり前ですが好きな画面に遷移できます。

トリガーのジェスチャー

  • タップ
  • 右にスワイプ
  • 左にスワイプ
  • 上にスワイプ
  • 下にスワイプ

遷移時の切り替わり方

  • 上から出てくる
  • 下から出てくる
  • 右から出てくる
  • 左から出てくる
  • 右反転
  • 左反転
  • ポップアップ

本当はもっと色々あるのですが上手く説明できないので、出来るものだけを抜粋しています。
オーバーレイ時はもっと細かい指定ができたりします。（例：背景の透過率とか！）

画面のステータスが確認できる

案件を進めていく中で今、どれが確認待ちでどれを進めているか、どれがFIXしていてコーディングしているかなど、画面毎のステータスがわからないという事はよくあることかと思います。

InVisionでは、プロトタイプだけでなく画面のステータスも登録することが可能です

デフォルトでは、下記のようなステータスが登録されています。
以前は名前も変更できて、項目の追加もできた記憶があるのですが、今はできないようです。

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

Trelloを使っている人はこういった看板形式の管理は馴染みがありますね。

assetsの共有

InVisoinでSketchデータで同期すると使用しているフォントとスライスデータも一緒にダウンロード出来るようになります。


コーダーの方はデザインデータをもらってもラスタライズされてないデータがあると、「フォントがなくてスライスできない」なんて事で悩まされる事があるかもしれませんがInVisionをSketchで使うとそんなコミュニケーションからはおさらばできて、自分の仕事に集中できます。
（有料FONTも同期できちゃうのでおぉ…ライセンス…ってる）

プロトタイピングツールというとデザイナーが使ってメリットがあるように思われてたかもしれませんがプログラマー・コーダーの人にもInvitionだと使うメリットがあるんですよ。

ビデオチャットもある

ビデオチャットなんていらない、ハングアウトはSkypeなどほかサービスを使えばと思われるかもしれませんが、InVisionを使うメリットはあります。

それが画面共有ではなく同時に編集しながら会話出来ることです。
一緒に編集できる事で一方的なコミュニケーションにならず円滑に進める事ができます。
またビデオチャットをするということはすでにプロジェクトに参加している関係者の可能性が高いので、わざわざ別サービスのアカウントを聞く必要もなくて良いです。

私が大人数で使った事があるわけではないので、音質で不具合があればほかサービスに切り替える選択肢になります。

コーディングの情報も確認できる

InvisionにSketchでデータを上げると、実はコーディング情報をブラウザで確認することができます。
その機能はinspectといいます。
Photoshopなどを使っていたコーダー・プログラマーの人からするとデザインツールを使用せずに確認出来るのはすごく便利なんじゃないかなと思います。



コーディング情報は以下のものが確認できます。

  • 色
  • 高さ・横幅
  • ほかオブジェクトの距離
  • 角丸
  • 透過

デザインのログが残せる

InVisionではデザインの過去の履歴が自動で残せます。
更新された時間別にその時の画像に戻れます。



昔のバージョンはどんなだっけとか、コーダーの人がどこが更新されたのかわからないときも自分が触っていた頃のバージョンと比較して適所のみ更新する事ができて便利です。

slackに同期出来る

slackに同期すると下記のような事で更新があるとslackで通知されますので当事者以外でもInvition上のアクティビティーが見えて便利です。

↑はわかりやすいように日本語翻訳したもので実際は英語です。

気がついたらInVisionに見に行けるくらいの気軽さがあると様々なテンションの人が参加できて便利で世良いですね。

画面の一覧をダウンロード出来る

プロジェクトを進めていると、資料の作成やらなんやらで画面全部のキャプチャがほしいときがあると思います。Photoshopで作っていたらそんな事を頼もうものなら、デザイナの負担が大きいのですがSketch＆InVisionであればそんな苦労はありません。

プリジェクト内の画面を一括でダウンロード出来きます。
当然クライアントもプロジェクトに参加していれば使える機能なので、クライアント側で画面が必要になったときに最新版のデータが取得出来るので安心して使えますね。

inVisionの使い方

InVisionは有料プランもありますが、無料プランもあります。
無料プランでは、プロジェクトが１個作れますので気軽に始めることができます。

慣れてきて、InVisionの必要性が高まって来たらプランを変更すると良いと思います。私はそうしてます。

プロジェクトの作りかた

InVisionではプロジェクト単位で区切ってい行きます。
プロジェクト毎に端末の設定（iPhone,iPadなど）、アサインするメンバー、素材など他のプロジェクトに影響することはありません。



①＋ボタンをクリック



①PROTOTYPEの方を選択してください
※BOARDは画像を貼れますが、画面遷移などのプロトタイプの機能はありません。
ビジュアルや素材の確認に向いてます。（Pinterestみたいな感じです）



  • ①プロジェクト名を設定してください
  • ②プロジェクトで設定する端末を決定してください。（複数選択はありません）
  • ③決定

Sketchからの同期

SketchとInVisionの同期はInVisionの公式が出しているCRAFTというものを使います。



インストールすると①のバーが追加されています。これがCRAFTです。
①を押すとサインインを求められますのでログインをして、先程作成したプロジェクトを登録してください。



その後は全部一気に同期するか、同期したいアートボードを選択して、「sync to InVision」をクリックすれば登録したプロジェクトに同期が走ります。

画面の説明



①SCREEN
Sketchなどで同期した画像が配置されます。
②WORKFLOW
SCREENで登録している画像が今確認中なのかOKが出たものなのかなどステータスを管理できます。
③ACTIVITY
画面が更新されたときなど、いつ誰が更新・削除したかなど確認できます。
④COMMENTS
SCREENに登録された画像にコメントがいつ誰にされたかが確認できます。
⑤ASSETS
Sketchで設定されたスライス画像やSketchで使われているフォントなどがアップロードされます。
Sketchファイルをここに配置することも可能です。

SCREEN画面の詳細

SCREEN画面ではコメントをつけたり、画面遷移の方法を登録できたりします。
またSketchで同期していれば、オブジェクトの座標はコーディングに必要な情報も確認できます。



① PREVIEW MODE
画面をチェックするモードです

② BUILD MODE
画面遷移のタップ場所、タップの仕方などを登録するMODEです

選択エリアを選ぶとどこに遷移するか・どんな風に遷移するかなど設定できます。
外部サイトにも飛ばすことができるので便利です

③COMMENT MODE
コメントをするMODEです

④INSPECT MODE
コーディング情報を確認するMODEです

⑤HISTORY MODE
その画面のデザインデータの変更履歴が確認できます。

シェアの仕方

シェアの付け方は２種類ありまして、一つはプロジェクト全体をシェアする方法。
もう一つは単一の画面をシェアする方法です。
画面がたくさんあってチェックする人に画面をわかりやすく送りたい場合は単一の画面をシェアすると間違いがなくて良いです。

画面のシェアの仕方



①を押すとこの画面に遷移するので、その後②を押すとURLが表示されますのでそれをコピーするだけです。
③はシェアしたときの設定を変更することができます。

デフォルトではコメントだけ可能になっているのでクライアントでWEBが苦手な方には選択肢が減って見えるので使いやすくなるかと思います。クライアントのリテラシー、関わってほしい箇所に応じて変更することをオススメします。

コメントの付け方



①SCREEN詳細のCOMMENT MODEを選択するとCOMMENTが可能になります。
②コメントの丸ボタンの色が変更できるのでシーンに合わせて変更するのをオススメします。
例えばディレクターが書く場合、クライアントが各場合でCOMMENTの色を変更するなど。

アセットの共有



①を押してASSETSを選択するとこの画面に入ります。
ここでSketchのファイルをドラック＆ドロップするとSketchファイルに登録されたスライスデータがimagesディレクトリに書き出されます。

InVisionで少しだけ懸念しているところ

英語版しかないのでクライアントやディレクターにに嫌がられる傾向があります。
またはプロトタイプがまだ普及していないのでよくわかってもらいにくく、結果提案者がフォローする事が増えて本来しないといけない事に時間が取れず心が折れる場合もあります。

結構な量の画像を読み込むのでプレビューしすぎてると通信制限食らうかもしれないと感じています。

そのあたりの懸念は可愛いもので得られるメリットはとても大きいので私はどんどん使って行きますけどね。

価格



1プロジェクトは1アカウント無料で作ることができます。
有料のアカウントでは下記のようなプランが用意されています。

  • 月額15$:３プロジェクト
  • 月額25$:無制限のプロジェクト
  • 月額99$:無制限のプロジェクトで管理メンバーを５人まで登録

最後に

InVisionはSketch専用のように書いてますがPhotoshopでも使えます。
ただ、Photoshopだと重いので快適性を損なわれるのであまりオススメはできません。

Photoshopを使うくらいなら、素直にAdobe Xdを使ったほうが良いのかなというのが個人の感想です。
それでもInVisionが使いたいという人は是非Sketchを使って見てください。
私が感動したSketchの感触は下記にまとめていますのでご興味ありましたらご覧ください。

現役WebデザイナーがデザインツールをSketch一択にした理由

Adobe Xdを使っている人で物足りない・もっと別のサービスを使ってみたいと思った人にInVision＆Sketchという選択肢を一つお送りできたら幸いです(*ゝω・*)

カテゴリ:デザインの記事