プロトタイピングツールInVisionの使い方(テンプレートの設定方法)

プロトタイピングツールInVisionの使い方(テンプレートの設定方法)

どうもお久しぶりです。
アシスタントディレクターの小松です。

ここ最近はW杯のおかげで寝不足気味です。
個人的にフランス代表のユニフォームが一番好きですが、もう敗退してしまったので買うタイミングを逃しました。

さて本題です。inVisionの使い方第2弾でございます。
前回はリンクの設定方法をご紹介しました。
ただ、問題なのがリンクのコピペができないという点です。

その問題を解決するのがテンプレートという機能です!!
それではテンプレートの使い方を引き続き弊社コーポレートサイトのWFで説明していきます。

まずは、普通にリンクの設定を行ってください。
設定時に【include hotspot in template】というチェックボックスがあるのでチェックを入れます。
そうすると【Create New】というボタンが現れます。

 

 

img01

 

 

 

Create Newボタンをクリックすると、テキストボックスが現れるので、そこにテンプレート名を記述します。
今回はグローバルナビのテンプレートを作成しますので、global naviと名付けました。

 

 

 

img02

 

 

 

そしてSaveをしてもらうと、inVisionのヘッダー部分に変化が起きます。
下記のような状態になればテンプレートの作成に成功しています。

 

 

 

img04

 

 

 

では、テンプレートを他のページに反映させていきましょう。
設定したいページへ行き、ヘッダー部分から任意のテンプレートを選ぶだけです。
それではサービスページにもリンクを反映させてみます。

 

 

 

img05

 

 

 

緑色のオーバーレイがかかっているところがテンプレートが反映されている箇所です。

テンプレートは作成後、修正も可能です。
例えば、「あっ!お問い合わせへのリンクをテンプレートに入れていない!」なんてことがあっても大丈夫です。
やり方はいつも通りリンクを設定してもらう時に【include hotspot in template】をチェックし、
セレクトで追加したいテンプレートを選択するだけです。
そうすると他のページで適用しているテンプレートにも反映されます。

 

 

img06

 

いかがでしょうか。
少し残念なのが、結局全ページにテンプレートを反映させる必要があるという点です。
ただ、それを差し引いても導線設計の確認には役立つツールだと思います!

 

投稿者プロフィール

GEEKstaff
GEEKstaff
株式会社GEEKの制作チームです。
Web業界の気になるニュースのまとめと、制作に役立つ記事を投稿しています
このエントリーをはてなブックマークに追加
はてなブックマーク - プロトタイピングツールInVisionの使い方(テンプレートの設定方法)
Facebook にシェア
[`evernote` not found]

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です