LIFULL Creators Blog

「株式会社LIFULL(ライフル)」の社員によるブログです。

モック作成ツール「InVision」ってどんなもの?

こんにちは、HOME'Sアプリのデザインを担当している、いちはらです。

アプリのデザインには欠かせないモックづくりの行程ですが、
沢山の種類があって、どのツールを使うか迷うところだと思います。

 

今回は、モック作成ツールの「InVision」について書こうと思います。
現在ツールの導入を検討している方の参考になればと思います。

 

 InVisionってなに?

EvernoteやAirbnbなどの有名な企業が採用しているモックアップ作成ツールです。
海外のサービスなので英語です。 

f:id:homes_designers:20150519113425p:plain 

 

どうやって使うの?

f:id:homes_designers:20150518165840p:plain

 

使い方を、ざっくり説明すると以下の3ステップ。

  1.  画像のアップロードはドラッグ&ドロップ!
  2.  画像をリンクをつなげて、トランジション(アニメーション)をつける
  3.  URLをシェアする

以上です。複雑な操作はないので面倒くさがりの私にぴったりです。

 

 

ここが便利

このツールが便利だなと感じたのは、第三者へのモックのシェアが簡単なところです。URLをシェアするだけで、相手はログインなどの必要なくモックを確認し、コメントを残すことができます。

 

f:id:homes_designers:20150518165838p:plain 

実際に、Windowsアプリを開発した際、外部の方と電話しながら、InVisionのコメントツールを使ってみたのですが言葉だけで説明するよりも、とても説明しやすかったです。そして、なんかずっと笑っていました。面白かったです。

 

こちらがそのときに開発したアプリです。

apps.microsoft.com

 

 

シェアする際は、もちろんパスワード設定もできて安心ですよ。

以下の空欄にURLが表示されます。

f:id:homes_designers:20150519130537p:plain

 

これだけ覚えておけば大丈夫

使い方をもう少し説明します。
まずはつなげたい画像をアップロードします。ドラッグ&ドロップです。

f:id:homes_designers:20150519130734p:plain

 

編集したい画面をクリックすると以下のようなページ遷移します。

f:id:homes_designers:20150519130756p:plain

1、ページ下部にある、四角+ポインタのアイコンをクリック。

2、マウスが「+」に変わります、リンク範囲を設定。

3、ボックスが表示されます。遷移先+ジェスチャー+トランジションを設定して、Saveを押してください。

 

基本的な操作はこれだけです。

 

リンクを張るときにテンプレートリンクも設定できます。

webの「ホームボタン」や「ログインボタン」等、必ず同じページに遷移するリンクを設定することで、同じ作業を繰り返さなくてすみます。

 

 

f:id:homes_designers:20150518165837p:plain 

ページ切り替えのジェスチャーは上記、6個。基本的なものがそろっています。
贅沢をいうとピンチインアウトがあるとうれしいです。

 

f:id:homes_designers:20150518165835p:plain

ページ遷移のアニメーション(トランジション)は12個。多いです!
ほとんどカバーできます。
アプリ内のページ遷移はSlide、アプリ間の移動にはFlowが使えます。
ちょっとしたアプリ内のページ遷移にはDissolveがおすすめです。

 

 f:id:homes_designers:20150519113517p:plain

細かいところですが、ステータスバーの設定ができるのが便利です。

色が自由に設定できます。HOME'Sのステータスバーはオレンジなのでそのように設定します。地味ですが、かゆいところに手が届く機能です。

 

他にも

Sketchとの連携ができます。使いこなせばAdobe系ソフトがなくてもアプリデザインができちゃいそうですね。興味あるのですがなかなか手がつけられません…。

 

まとめ

それぞれ好みもあると思いますので、興味のある方は、まず無料版で試してみると良いと思います。私は、最近は国内サービスのProttも使っています。いろいろ試して、快適なモックアップライフを楽しみましょう!