CPI x CSS Nite x 優クリエイト「After Dark」（11）にてSketchの基本的な使い方についてお話してきました。

準備中の様子

題して「ワイヤーフレーム・プロトタイプ制作に使うSketch」です。

Adobe Fireworksの新規開発中止をうけて注目を集めたSketch。実はWebページやアプリのUIデザインに最適化されたベクタードローイングツールとして有名です。そのSketchがバージョン3になり、さらに使いやすく大幅に機能強化されました。

本セッションでは、Sketchの基本からWebサイトのワイヤーフレームをスムーズに作る方法を紹介します。

と、言うような内容でワイヤーフレームなど軽量なものを作るのに、Sketchはおすすめだよー。というコトをデモを交えて解説しました。

話した内容からちょっとプラスα

ちょっとこぼれてしまった話として、iOSのmockupはテンプレートとして最初から準備されています。

上記のようにそれらを組み合わせれば、簡単に再現したいイメージを作れますね。

まとめ

ワイヤーフレームなど、「ちょっと作りたい」というときに使えるツールとしてさまざまなものがありますが今のところSketchで決定したというのが自分の所感です。

Cacooなどは共有や議論がしやすいメリットがありますし、OmniGraffleも高機能でさまざまなことができます。

そこでKeynoteに非常に近しい感触であり、さらにAI,PSに関連するような機能が用意されているというのはポイント高しです。

ニコニコ動画でいくつか動画を投稿しているのですが、それほどデザインに凝っている訳でもないスチルなどはSketchで作っています。

イベントでお話されていたFramer.jsで、動くモックアップを作るキレイな流れもできているのでこの機会に覚えてみてはいかがでしょうか！