こんにちは、HOME'Sアプリのデザインを担当している、いちはらです。
アプリのデザインには欠かせないモックづくりの行程ですが、
沢山の種類があって、どのツールを使うか迷うところだと思います。
今回は、モック作成ツールの「InVision」について書こうと思います。
現在ツールの導入を検討している方の参考になればと思います。
InVisionってなに？
EvernoteやAirbnbなどの有名な企業が採用しているモックアップ作成ツールです。
海外のサービスなので英語です。
どうやって使うの？
使い方を、ざっくり説明すると以下の３ステップ。
- 画像のアップロードはドラッグ&ドロップ！
- 画像をリンクをつなげて、トランジション(アニメーション)をつける
- URLをシェアする
以上です。複雑な操作はないので面倒くさがりの私にぴったりです。
ここが便利
このツールが便利だなと感じたのは、第三者へのモックのシェアが簡単なところです。URLをシェアするだけで、相手はログインなどの必要なくモックを確認し、コメントを残すことができます。
実際に、Windowsアプリを開発した際、外部の方と電話しながら、InVisionのコメントツールを使ってみたのですが言葉だけで説明するよりも、とても説明しやすかったです。そして、なんかずっと笑っていました。面白かったです。
こちらがそのときに開発したアプリです。
シェアする際は、もちろんパスワード設定もできて安心ですよ。
以下の空欄にURLが表示されます。
これだけ覚えておけば大丈夫
使い方をもう少し説明します。
まずはつなげたい画像をアップロードします。ドラッグ&ドロップです。
編集したい画面をクリックすると以下のようなページ遷移します。
１、ページ下部にある、四角＋ポインタのアイコンをクリック。
２、マウスが「＋」に変わります、リンク範囲を設定。
３、ボックスが表示されます。遷移先＋ジェスチャー＋トランジションを設定して、Saveを押してください。
基本的な操作はこれだけです。
リンクを張るときにテンプレートリンクも設定できます。
webの「ホームボタン」や「ログインボタン」等、必ず同じページに遷移するリンクを設定することで、同じ作業を繰り返さなくてすみます。
ページ切り替えのジェスチャーは上記、６個。基本的なものがそろっています。
贅沢をいうとピンチインアウトがあるとうれしいです。
ページ遷移のアニメーション（トランジション）は12個。多いです！
ほとんどカバーできます。
アプリ内のページ遷移はSlide、アプリ間の移動にはFlowが使えます。
ちょっとしたアプリ内のページ遷移にはDissolveがおすすめです。
細かいところですが、ステータスバーの設定ができるのが便利です。
色が自由に設定できます。HOME'Sのステータスバーはオレンジなのでそのように設定します。地味ですが、かゆいところに手が届く機能です。
他にも
Sketchとの連携ができます。使いこなせばAdobe系ソフトがなくてもアプリデザインができちゃいそうですね。興味あるのですがなかなか手がつけられません…。
まとめ
それぞれ好みもあると思いますので、興味のある方は、まず無料版で試してみると良いと思います。私は、最近は国内サービスのProttも使っています。いろいろ試して、快適なモックアップライフを楽しみましょう！
