TSUNAGU GROUP TECHNOLOGIES

TGT TechBlogTGT TechBlog

フロントエンドからバックエンドまでの技術ナレッジ

プロトタイピングツールInVisionの使い方(登録設定編)

初めましてWebディレクターアシスタントの小松と申します。

簡単に自己紹介します。

今年の2月からこちらで働いているど新人のディレクターです。 趣味はサッカー、バイク、自転車、ギターです。

当ブログでは考察だったり、サービスの使い方、その他雑談を書いていこうかと思います。 (これといってGeekな知識がないので・・・)



では早速ですがそこのアナタ 「InVision」というサービスをご存知?

知っている方流石です!

知らない方!僕も先月知りました。

InVisionというのはWFで実際に導線を体験できるようなサービスです。

下記リンクにアクセスしてアカウントを作っちゃいましょう。

http://www.invisionapp.com/

ではここから操作を説明していきます。

どうやってInVisionにWFを入れるかというと画像やpdfをポイっとするだけでOKです。

InVision_03

そして下の画像がポイっとしたやつを表示した画面です。 弊社サイトのWFを使用し説明していきます。

InVision_01

リンクの設定は赤枠の部分をクリックかキーボードのBを押すと設定出来るようになります。

リンク設定モードはbuild modeといいます。(ショートカットはbuildのBと覚えやすいです)



build modeにしたら、 あとはリンクを設定したいところをドラッグで選択し、遷移したい画像を選択するだけです!

InVision_04

そんなこんなを何個か設定すると下のような感じなります。

青でハイライトされている部分がリンク設定されている箇所です。

InVision_02

遷移を確認したい場合はpreview mode(目のマークをクリック!)かshiftを押しながらクリックすると設定したページへ遷移できます。

preview modeだとリンクの設置場所がハイライトされませんがCtrlかShiftキーを押すとハイライトされます。

InVision_05

以上がリンク設定の方法です。

では簡単に今日のおさらいを

  1. 画像やpdfをポイっとするだけでInVisionに取り込める
  2. リンク設定モードはbuild mode
  3. リンク設定はbuild mode時にドラッグして遷移先を選択するだけ
  4. preview modeで導線の確認ができる



下記は僕が知っているショートカットキー機能です。(下のマークにマウスのせると表示されるんですけどね)

▼プレビュー ・・・ P (preview mode)

▼リンク設定 ・・・ B (build mode)

▼コメント ・・・ C (comment mode)

▼画像一覧・・・T(なんの略ですかね?)



どうでしょうか。実際に導線を体験できるので、導線設計やクライアントへの説明でも大活躍しそうじゃないですか。

僕が初めて触った時は感動して思わずため息がもれました。



ただこのサービス・・・ リンクのコピペができません!

これは大問題!!膨大なページ数のサイトのグロナビを一つ一つ設定なんてしていたら日が暮れてしまいます。

そこで活躍するのが次回ご紹介する×××という機能です!! (古くさい煽りですみません。)

次回の更新で簡単に複数ページにリンク設定できる方法をご紹介します。 また、コメント機能も便利なのでこちらもいずれ。

次回をお見逃し無く!