4kaku design

マーケティングを勉強しているWebデザイナーのノート

Sketch 3をデザインワークのメインに使い出して、そろそろ2ヶ月。社内のメンバーとUIを共有したいケースも増えてきました。
そんなときに使えるWebサービス「InVision」のご紹介をします。


Sketch 3 Advent Calendar 2014 の15日目の記事です


Sketch 3 Advent Calendar 2014の15日目を担当させていただきます、名古屋の駆け出しWebデザイナーのいまいりさこ(@i_mairy)と申します。

Fireworksから乗り換えて2ヶ月のSketch初心者なので、Fireworksユーザーにとって魅力的な(&懐かしい)機能をご紹介させていただきます。

Fwユーザーにこそおすすめしたい「InVision」

InVisionは、Sketchで作ったモックアップでページ遷移やポップアップを再現することができるWebサービスです。
Fireworksユーザーさんにわかりやすく言うなら「.sketchファイルでホットスポットが使える」ツールです。これ言っちゃうと身も蓋もないんですけどね。現状Sketchのデフォルトの機能ではカンプ内にリンク範囲を設定することはできないので、手軽にリンクやマウスオーバーを再現する方法としてご案内します。

InVisionのおすすめポイントと注意点

今回はSketchで作ったモックアップをインタラクティブに動かすために使いますが、psdやai、png、jpgを取り込むこともできます。URLでシェアできるので複数人で共有する場合もとっても便利なんですが、2個以上のプロジェクトを作ると有料になるのでご注意ください。(→プラン価格表

InVisionの使い方

1. Sketchで複数ページのモックアップを作成

ページ遷移を再現するには、複数ページのデザインが必要です。Sketchで作ったデザインファイルはアートボードごとに画像を分割して取り込んでくれるので、ばらばらに書きだしておく必要はありません。



2. InVisionで新しいプロジェクトを作成

InVisionのユーザー登録ができたら、新しいプロジェクト(モックアップの単位)を作ります。

プロジェクトごとに対象デバイスを選択できるので、今回は「iPhone」を選択してプロジェクトを作成しました。「Project Name」は競合しなければ好きな名前をつけてください。




3. デザインファイルを取り込む

Sketchファイルをドラッグ&ドロップするだけ!アートボード数が多いと少し読み込みに時間がかかります。待ちましょう。




4. 画像内にホットスポットを設置

下部のメニューバーから「ホットスポット設置」を選択し、画面上のリンクさせたい位置にホットスポット(↓の図では水色になっている位置)を設置します。ホットスポットが設置できたら、遷移先のファイルを指定。このとき、アートボード名で検索をかけるのでSketchでデータを作る時点でわかりやすいアートボード名をつける必要があります。



5. 共有すればWeb上でも見られます

URLでモックアップを共有できるので、チームで共有したり実機で確認したりがお手軽です。



サンプル(2014年12月17日24時まで公開)

今回はブラウザ経由でデザインファイルを読み込みましたが、InVisionSyncというデスクトップアプリ経由でも取り込めるようです。管理するプロジェクト数が多くなるとブラウザ経由での作業はめんどうくさくなるので、プロジェクトが同時進行で動く可能性の高い方はSyncを使っていただいてもよさそうです。

明日のSketch 3 Advent Calendar 2014のご担当は石本 光司さんです。