画像の書き出しさえ必要無い、最速のプロトタイプ作成術とは？

f:id:tamusan100:20150930072659p:plain

画像の書き出しさえも必要とせず、プロトタイプを作成できたら楽だと思いませんか？

もしあなたがSketchユーザーであれば、プロトタイプツールは『InVision』を使われることを強くおすすめします。

さて、下記の記事でも紹介されていましたが、Sketchがどんどん流行してきているようですね。

海外だと、特にUIデザインでSketchがかなり使われているようです。

しかし、プロトタイピングツールについてはかなりの混戦状態の模様。

プロトタイピングツールは今でこそ沢山のサービスが乱立している状態ですが、基本的な機能はだいたい同じです。

プロトタイピングツールのよくある売り文句として「画像をドラッグアンドドロップで取り込むだけで…！」といいますよね。

しかし、その画像を取り込む作業がまずめんどくさくないですか？笑

例えば、デザインツールでモックアップを作ってたら、それがそのままプロトタイピングツールにもアートボード毎に同期してほしいですよね。

そう、まさにそれを解決するのが「InVision」なのです。

InVsion専用のプラグインである「InVision Sync」を使えば、Sketchのアートボードから自動でスライスしてInVisionに書き出してくれるのです。

使い方は簡単で、下記のサイトから「InVision Sync」をインストールして、サインインしておき、後はいつもと同じようにInVisionにアップロードするだけです。

「InVision Sync」をインストールすると、Finderに「InVision」というフォルダが作成されますが、InVisionからアップロードしたSketchファイルはこの中（作成したプロジェクトフォルダ > Assets > SourceFiles）に自動で保存されます。

以降はこの中に保存されたファイルを編集していけば、Sketchデータに加えた変更がそのままInVision側にも反映されます。

嬉しいのが、Sketchデータに変更を加えても、InVisiion側で設定したリンクは消えたりせずそのまま残るということです。

これなら、変更を加えてもその都度イチから設定しておいたリンクを復元する必要もありません。

このSketch + InVision Syncの組み合わせは本当に快適で、Sketchで普通にUIを作成していくだけで自動的に画像としてInVisionに書き出していってくれますので、こちら側で画像の書き出しさえ必要ありません。

ひととおりSketchでデザインし終わったら、InVisionにログインすれば必要な画像はすべてアップロードされていますので、あとはそれらにリンクをつないでいくだけでプロトタイプの完成です。

いやぁ便利な時代になりましたね笑

Sketch自体は、現在はMac専用ツールでありメジャーではないため、クライアントワーク等ではまだまだ導入しづらいかもしれません。

しかし、個人事業主や自社サービス会社内での少人数の開発体制であれば、かなりの威力を発揮します。

ぜひ一度試してみてください。

PS.

Sketchに関する書籍はまだ少ない（というかほとんど見たことがない）ですが、下記の書籍ではSketchに関しても基本操作から活用事例まで比較的ボリュームを割いて解説されています。

興味のある方はぜひ見てみてください。

Tortoise Shell