Tortoise Shell

Webサービスの会社で働くデザイナーが、デザインやライフハックについてゆるく書き連ねるブログです。

プロトタイピングツール「InVision」が使いやすくて楽しい件

「InVision」というプロトタイピングツールが秀逸だったのでご紹介します。 

みなさん、Webやアプリを作成する際にプロトタイピングは行っていますか?

プロトタイピングは、実装を行う前にUI/UXの検討を行うことができます。

そのため、あらかじめプロトタイピングによってUIの整合性が取れているか、快適な操作性を持たせることができているか確かめることで、事前に重大な欠陥が生まれることを防ぎます。

また、やり直しも簡単なので、より良いプロダクトを作るために事前にたくさんの失敗をすることもでき、開発の初期段階からUIを洗練させていくことが可能です。 

そんなプロトタイピングを行うためのツールは既にたくさん普及していますが、その中でも今回はぜひ「InVision」の簡単さを知っていただきたいと思います。

InVisionの登録からプロジェクト作成まで

まず、公式サイトにログインしましょう!

f:id:tamusan100:20150908000038p:plain

右上の「SIGN UP FREE」をクリックすると、ウィンドウが開きます。

アカウント開設に必要なものは、メールアドレスとパスワードだけです。

さくさくっと入力して、「SIGN UP FREE」ボタンをクリックしてください。

f:id:tamusan100:20150908000140p:plain

最初にログインすると、既に3つプロジェクトが入っています。

これは「こんな感じでプロトタイプ作ってますよ」というサンプルなので、最初に眺めてみたらイメージがつかめるかもしれません。

さてさて、それでは自分用のプロジェクトを作っていきましょう。

右上の「+(プラス)」ボタンをクリックします。

f:id:tamusan100:20150908000238p:plain

ウィンドウが開くので、プロジェクト名を入力します。

その下のセレクトボックスからは、「Desktop」や「iPhone」などから選ぶことができます。

f:id:tamusan100:20150908000430p:plain自分用のプロジェクトが作成できました!

見ての通り、あとはここにじゃんじゃん画像を放り込んでいくだけです。

f:id:tamusan100:20150908000610p:plain

プロトタイプを作ってみよう

それでは、さっそく画像を放り込んでいきましょう!

今回は、サンプルとして2枚の画像を放り込んでみます。

こんな感じで、放り込んだワイヤーフレーム画像のサムネイルが並んで表示されました。

f:id:tamusan100:20150908000647p:plain

それでは、素材が揃ったのでプロトタイプを作っていきましょう!

まずは、任意の画像にマウスオーバーすると「VIEW SCENE」と表示されるのでクリックします。

f:id:tamusan100:20150908000727p:plain

すると、先ほど読み込ませたワイヤーフレームが表示されました。

このままではただの画像なので、ここからリンクエリアを設定しましょう。

f:id:tamusan100:20150908000804p:plain

画面下部のBUILD MODEのアイコンをクリックして選択した状態で、リンクを設定したい箇所をドラッグします。

すると、画像のようにリンク先を設定するウィンドウが表示されます。

「Link To」のドロップダウンメニューには、あらかじめ読み込ませていた画像一覧がリストとして表示されており、ここから選ぶことで任意の画像に飛ばせるという仕組みです。

f:id:tamusan100:20150908000846p:plain

無事にリンクが設定できました!

ここで、画面下部からBUILD MODEをPREVIEW MODEに切り替えておきましょう。

(目のアイコンです) 

さて、ここで先ほど設定したリンクをクリックすると…

f:id:tamusan100:20150908001202p:plain

画面が切り替わりました!

こんな感じで、じゃんじゃん画像を放り込んでプロトタイプを作っていけます。

f:id:tamusan100:20150908001226p:plain

以上、簡単でしたがInVisionの登録からプロトタイプの作成までを追っていきました!

細かい部分はわたしの解説が雑で分かりづらかったかもしれませんが(笑)、なんとなくざーっと眺めていて簡単そうですよね。 

ただ、この機能だけでは他のプロトタイピングツールとの差異は無いように思われるかもしれません。

しかし実際には、プラグインを使うことでSketchのアートボードから直接InVisionに自動で画像を書き出してくれたり、細かいアニメーションが指定できたりなど、かなりすごいやつなんです。

気になる方は調べてみてくださいね!

ちなみに、この本でも「Sketchと連携した便利ツール」ということで少し紹介されてました。

Web制作者のためのIllustrator&ベクターデータの教科書 マルチデバイス時代に知っておくべき新・グラフィック作成術

Web制作者のためのIllustrator&ベクターデータの教科書 マルチデバイス時代に知っておくべき新・グラフィック作成術

  • 作者: あわゆき,窪木博士,三階ラボ(長藤寛和、宮澤聖二),松田直樹
  • 出版社/メーカー: インプレス
  • 発売日: 2015/05/22
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログ (1件) を見る
 

まとめ

プロトタイピングツールはいくつか試してはみたのですが、今のところこのInVIsionが一番使いやすいですね。

特にSketchユーザーであれば、InVisionはいちいち画像を書き出さなくてもアートボードから画面を自動生成してくれるプラグインが死ぬほど便利なのでおすすめです。 

以上、InVisionの紹介でした!

もしプロトタイピングをしたことがない…という方は、ぜひ体験してみてください。