【WebDesign】InVisionをつかってコード要らずのプロトタイプと最強のシェア・確認環境を作る

Screen-Shot-2015-01-21-at-03.39.44
Free Web & Mobile (iOS, Android) Prototyping and UI Mockup Tool | InVision

Webデザインをする上でコレは便利!とおもったサービスがありましたので使い方とあわせてご紹介致します。

コード要らずのプロトタイプ

デザイナーがプロトタイプ、ある程度のHTML/CSSをかけることが求められていますが、このサービスを使えばコード要らずでプロトタイプが作れます。

シェアしてブラッシュアップのフローが簡単

そして何より素晴らしい機能がシェアでしょう。デザインのプロトタイプをシェアし、複数人によるレビュー、コメントに対応しています。

実践

今回はサンプルでWebサイトを作っておきました。
home

sign-up-hover

sign-up

以上3ページ作りました。(結構面倒でした)

プロジェクトの作成

Screen-Shot-2015-01-22-at-00.19.02
登録後、MyPageでNew projectボタンを押してプロジェクトを作成できます。

Screen-Shot-2015-01-22-at-00.19.13

色々とプラットフォームごと用意されますが、とりあえず今回はDesktopです。

画像の登録

Screen-Shot-2015-01-22-at-00.20.02

まず、各画面の画像を登録します。
もしマウスオーバーで表示するメニューがあるとすれば、その表示画面も必要です。
とにかく全ての動きを漏れ無く抑えておけば間違いありません。

今回は3枚しか用意してないので、全部登録しました。

Build Modeで各ファイルをリンク付

ページビューを見ると、下部にBuild Modeというボタンが有ります。ホットスポットとよばれるアクショントリガーをつくります。

Screen-Shot-2015-01-22-at-00.20.37

例えばこのように、

Screen-Shot-2015-01-22-at-00.21.03

Hoverしたら、Sign-Up-Hoverを表示させるようにしてみました。
Clickしたときにはサインアップのモーダルを表示させたものにリンクしました。

さっそくLiveShare

Screen-Shot-2015-01-22-at-00.22.04

右下のボタンからシェアを開始します。

まるでコーディングされたWebページのように、HoverやClickに反応して画像が変わります。モックアップとしては十分でしょう。

Screen-Shot-2015-01-22-at-00.25.40

LiveShareでは複数人が参加しながら手書きやテキストでリアルタイムな意見だしができます。

コメント機能が秀逸

LiveShareだけでなく、通常のShareでもコメントをつけることができます。

Screen-Shot-2015-01-22-at-00.27.36

なお、これらはプロジェクトの画面から一覧にしてみることもでき、修正タスクの管理にも便利なツールです。

Screen-Shot-2015-01-22-at-00.27.47

まとめ

いかがでしたか?
チームでデザインについてやりとりときはもちろん、クライアント案件でも使えそうですね。

デザインファイルを確認してもらうとき、PDFをたくさん用意して、画面遷移図を書いて、それでもまだわかってもらえない。なんてこと、このサービスで軽減できそうですよね!

フォローして続編をチェック

@universionsをフォロー