TSUNAGU GROUP TECHNOLOGIES

TGT TechBlogTGT TechBlog

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

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

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