1. TOP
  2. ツール
  3. InVisionの有能さに気づいた

InVisionの有能さに気づいた

こんにちは、WebデザイナーのYoshita (@YOSHITA81095809) です。

ここ最近、会社の案件でガッツリAtomic Design+React.jsコンポーネントベースのGUIを実装しています。

多人数のチームで、Sketchで作成したGUIやDesign Systemをチーム内で共有する際に「InVision」がめちゃくちゃ有能なサービスであることに気がついたので、少しまとめてみようと思い、今回筆を取りました。

▼InVision公式サイト

 

 

複数人のチームでこそ真価を発揮するInVision

InVision自体は以前から使用していたのですが、今まではGUIイメージ作成を私一人で担当していたこともあり、InVisionの機能に関してはあまり深掘りせずに以下の一部の機能だけしか使用しておりませんでした。

・プロトタイピング機能
・FE側がデザインスペックを確認できるinspect mode
・「Share」で共有リンクを発行して誰にでもイメージだけ共有

これだけでも十分便利だったのですが、現在Joinしているプロジェクトでは複数人でのGUIの作成と、その他たくさんのステークホルダーを巻き込みながら進める必要があります。

より効率的に作業フローを進めていくうえで、開発初期段階の技術選定において、世に出ている沢山のツールの検証も行いつつ、今まで使用していたInVisionも実際どういった機能があるのかを深掘りしました。

すると、InVisionにはまだまだ便利な機能が沢山あることに気づき、今更ながら、このサービスの有能さに気づくことになりました。

今までInVisionの本当のポテンシャルを全然発揮できていなかったのだと痛感しました。

 

 

今まで気づけていなかった機能 5選

では具体的に5つほど紹介していきます。
いやその機能は普通に気づけよwとかツッコみたい方もいるかも知れませんが何卒ご了承ください。

 

1つのプロジェクトに何人でも招待して共有できる。

一人で使用していたこともあり、まずこの機能に気づけておりませんでした;
今までは、アップしたアートボードを「Shere」でURLを生成してイメージを共有しており、少し煩わしい思いをしていました。

しかし、各人にInVisionアカウント(無料)を作成してもらえれば、誰でも何人でもプロジェクトに招待することができます。プロジェクトオーナーでなくても、プロジェクトに属している誰もが新たに他の誰かを招待することもできます。

現在、私がいるプロジェクトではグラフィック作成スタッフ、FE、設計、システム、ディレクターやその他ステークホルダーを招待し、全部で25人以上でプロジェクト内を共有しています。

 

WORKFLOWで進捗管理

現在のプロジェクトではAtomicDesign+Reactで実装しているため、コンポーネントごとにアートボードを細かく分けています。
ただ、各アートボードが今どういう状態なのか?編集中なのか?FIXしているのか?レビュー待ちの状態なのか。作成者以外がステータスを常に把握するのは難しいと思います。

そこで、各アートボードのステータスを「WORKFLOW」という機能で管理&共有することができます。

WORKFLOWでは、標準で「On Hold(保留)」「In Progress(進行中)」「Need Review(レビュー)」「Approved(承認)」の4つの状態カテゴリが用意されています。
ステークホルダーにレビュー依頼中のものは「Need Review」の状態となり、承認できれば「Approved」へドラッグしてステータスを変更します。FE側はそれらの状態を確認し実装に入るわけです。

各アートボードがどういう状態か、ここで全員に共有することができます。
状態によってカラーが用意されており、SCREENSで一覧で見た時も状態のカラーがドットで表示されるので、状態が判断しやすくなっております。

 

メンションをつけてコメント出来る

各人にInVisionの個人アカウントを作成してもらい、プロジェクトに招待さえすれば、@でメンションをつけてコメントすることが出来ます。新規コメントがあればメールで相手に通知が飛びます。

FE側からの質問や要望、ステークホルダーからの依頼などのやり取りをInVision内で一括して行う事ができ、やりとりが手軽になりコミュニケーションコストが抑えられます。

 

Slackと連携して、コメント等があった際は通知が飛ぶようにできる

InVisionの設定には、Slackと連携する機能があります。
Slackに専用のチャンネルだけ用意しておき、新規コメントがついた場合や、アートボードに更新がかかった際などに、そこに更新通知が来るようにすることができます。
これを設定することで更新に気づきやすくなり、確認漏れを防ぐことができます。

 

書き出すSVGや画像をinspect modeのAssetからダウンロードできる

inspect modeの左上のタブに「ASSETS」という項目があります。
こちらはアートボード内で書き出しが必要なPNG・JPEG・SVGがあった場合、Sketch上でエクスポート設定さえ行っておけば、このASSETS画面から画像データをダウンロードできるという優れものです。

今まで画像データに関しては、カンプとは別に書き出してFE側へ受け渡すという作業を行っていたのですが、それはもう必要なくなりました。

FE側でASSETSから必要に応じてダウンロードしてもらうだけでよいのです。

画像受け渡しにかかる手間や漏れなど、意識する必要もなくなりました。

 

 

まとめ

今回は個人的に気づいたInVisionの機能を紹介させていただきました。

今回紹介しなかった機能で、「Design System Manager」もすごく良い機能なのですが、細かい仕様に問題があって、実用にはあと一歩でした…今後のアップデートに期待します。

それを差し引いてもInVisionは充分有能なサービスなので、引き続き活用していきます!

それではまた!

 

P.S
InVision Studio、全然盛り上がってないな;