Blog

プロトタイピングツール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

 

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

 

最新の技術と手法を用いて、
IT分野で変化と進化を続ける
Webインテグレーター

神田北信ビルエントランス

株式会社GEEK 〒101-0033
東京都千代田区神田岩本町4-4 神田北辰ビル3F

CATEGORIES