もふもふ技術部

ベクタードローイングツールの決定版?Sketch3について


ハッカソンなどではそもそもデザイナーの参加率が低い場合が多く、
「 チームにデザインするメンバーがいない 」ということ、よくありますよね。
また、個人でつくるサービスはデザインも自分でしたい!とか。

そんなエンジニアのみなさんに使っていただけそうな手軽で効果的なデザインハックをご紹介していきたいと思います。

まず初回はツールから。最近注目のSketch3について。

Sketch3

http://bohemiancoding.com/sketch/

Sketch3はIllustratorやPhotoshopよりも操作感が軽くて気軽に扱えるにも関わらず、とても高機能なベクタードローイングツールです。Fireworksと比較される事もありましたが、今は様々なデバイスを想定したデザインへの対応から、必然的に選ばれるようになってきたのではないかと思います。

主な特徴は以下の通り。

軽量

起動が早く、操作感も軽い

高機能

photoshopのようなビットマップの高度な編集作業はできないのですが、Illustratorのように、複数アートボードが作成でき、様々なデバイスサイズを想定したデザインを一つのファイルで管理できます。
しかも既にいくつかのテンプレートが用意されているんです。

Web Design
02

iOS UI Design
04

iOS App Icon
03

画像の書き出しもフォーマットやサイズなど多数のオプションが用意されています。
こちらが書き出しのデモ。

拡張性

gruntやgulpで画像のエクスポートを自動化したりなど、オープンソースのプラグインで拡張が可能。

grunt-sketch
https://www.npmjs.org/package/grunt-sketch

gulp-sketch
https://github.com/cognitom/gulp-sketch

また、Sketch Mirrorという別売りのアプリでiOS端末でのライブプレビューができます。モバイル用のデザインにはかかせません!
https://itunes.apple.com/us/app/sketch-mirror/id677296955?mt=8

安価

以前より少し価格があがってしまったようなのですが、執筆時点では99USドル。

私自信は前のバージョンを試してはみたものの、しばらく放っておいたこのツール。最近iPhoneアプリのUIデザインをするようになってから、その使い易さに改めて気づき、Webデザインでも使うようになりました。その名の通りスケッチしているような気軽さで使えるのが気に入っています。便利さは使ってみて初めて実感できるものですね。

次回以降はsketchの機能を少し具体的にご紹介していきます!

追記:
InVisionというプロトタイピングツールがあるのですが、Sketch3に対応したもよう。
書き出したアセットもInVisionのプロジェクト内に保存できるなど、便利そうです。
InVisionも試していたところだったので、これを期にこちらも有償版にきりかえるかどうか検討中。

05

The following two tabs change content below.
のがわ さとみ

のがわ さとみ

最近はWEBデザイナーを名乗っています。 rebuild.fmを聞くのが趣味です。
のがわ さとみ

最新記事 by のがわ さとみ (全て見る)