Web制作・アプリ開発などですごく便利なInvisionの基本的な使い方とSketchと連携する方法を写真付きで解説します。
無料のプランがあるので気になる方は、とりあえず無料会員登録して使ってみてください。
では参ります。
Invisionの使い方
Invision公式サイトから簡単に登録できます。
プロジェクトを作成する
登録してログインするとこんな画面になります。
“Create Project(プロジェクトの作成)”をクリックします。
プロジェクトのタイプを選ぶ
今回はプロトタイプを選択
プロジェクト名を入れる
今回は”test”という名前にしてます。
SketchもしくはPhotoshopと連携
僕はSketchを主に使っているのでSketchを連携させています。
連携させるのに「Craft」というプラグインが便利です。
以下の記事で紹介しています。
初心者でも簡単に使えるSketchのおすすめ時短プラグイン５選
超便利なので使いましょう！！
写真の右側にあるように .jpg / .png / .gif などのファイルでも作れます。
Sketchと連携させる
先ほど紹介した「Craft」というプラグインをインストールすると、Sketchの画面の右上に写真のようなツールバーが表示されます。
一番上のアイコンをクリックします。
すると、Invisionにサインインするように言われるのでサインインしましょう。
上の赤枠で先ほど作ったプロジェクト(今回は”test”)を選びます。
All artboards on active page : 全てのアクティブなページを連携する Only selected artboards : 選択したアートボードだけと連携する Include hotspots when syncing : ホットスポットを連携時に含める ＊ホットスポットについては後で出てきます。
連携完了です。
今回は、ふと思い立って作った動物保護系のサイトのSketchを例として使っています。
プロトタイプを作る
マウスでホバーすると“View Screen”と出てくるのでクリックします。
すると以下のようなプレビュー画面になります。
完成後、スクロールやクリックして、動きを確かめることができます。
ホットスポットの作成
クリック＆ドラッグでホットスポットを作成できます。
ホットスポットにリンクをつける
作成したホットスポットに行き先のリンクをつけます。
以下のようなメニューからリンク先を選択できます。
一応英語解説
Another point on this screen : このスクリーンの他のポイント Link back / Close : 最後に開いたスクリーン / 閉じる Screen as Overlay : 覆い被せる Previous Screen in Series : 前のスクリーン Next Screen in Series : 次のスクリーン External URL : 外部のURL
ジェスチャーとトランジションをつける
ジェスチャー
英語は解説なくてもわかりますね
トランジション
色々あるので実際に試して違和感がないものを見つけてください。
＊違和感の例：スマホで右にスワイプしたのに左にスクロールするwwとか
コメントを残す・共有する
「ここはこうしてほしい」
という風なコメントが簡単に共有できます。
気になる箇所をクリックしてコメントできます。
コメントがある場合、このようにコメントの数が表示されます。
丸いアイコンの色は変更可能です。
クリックすると、誰が何とコメントしたか確認できます。
シェア＆ライブシェアする
右下からライブシェアもしくは普通のシェアができます。
ライブシェアの画面はこんな感じ
Pointerで他の人に何を指しているか見せれるし、
Sketch Toolでアイデアなどを描けます。
他にもテキストを入れたりも可能です。
リンクをシェアすることで、他の人を追加できます。
普通に共有したい場合は”Live Share”の隣の”Share”をクリックして、招待しましょう。
上の画像に写ってないですが、下の方に“Public Share Link”とあるので、それを他の人に教えることで共有もできます。
インスペクトモード
この画面で一つ一つの要素の詳細が確認できます。
左の緑の枠内はSketchの要素名など
右の青の枠内はwitdh / height、使われているフォント・カラーなど全て表示されます。
開発者にとってとても便利な機能ですね。
要素をクリックすると以下のように細かいところまで見れます。
要素と要素の間隔も一目でわかります。
またクリックした要素の詳細も右側に表示されます。
font-family / font-weight / font-style / color / alignment / size / spacing / opacity が一目でわかります。
素晴らしい・・・
最後にヒストリーモード
これで過去に遡れます。
パパパパーン、タイムマシーーーーン〜みたいなやつですww
まとめ：Invision最高
Invisionの基本的な使い方、Sketchとの連携方法について書いていきましたが、いかがでしたでしょうか？
Sketchを使っている僕としては最高なプロトタイピングツールだなと感じました。
簡単に連携できるし、操作も簡単・軽いです。
共有も非常に簡単でSketchとの相性抜群です。
どんどん使い込みたい人は有料プランもありますのでチェックして見てください。
プランはこんな感じです。
Proプランの値段はまぁまぁしますが、選ぶ価値ありです。
とりあえず無料で試して、よく使うようになって、１プロジェクトだけじゃ足りない場合はアップグレードしましょう(^^)
では〜
参考：Invision(公式)