Sketch 3 の魅力

どうも。@1shiharaTです。
今度 「Sketch 3 勉強会 in NAGOYA」を開くついでに集客がうまくいっていない(汗) ので記事を欠かさせていただきます。

Sketch の魅力

Sketch 3 は、Bohemian Coding 社が開発・販売している Mac 用のベクタードローイングソフトです。

ベクタードローイングソフトといえば思いつくのは、米 Adobe 社が開発・販売している Illustrator
もしくは Inkscape などが頭に浮かぶかも知れません。

Sketch はベクタードローイングソフトという名を冠しながら、
ピクセルを前提にしているという不思議なソフトです。

「新規開発が事実上中止となっている Adobe Fireworks の後継ソフト」

というキャッチコピーを良く聞くかもしれませんが、
実際に使っている身としては、その機能・操作性を大きく凌駕しているのではないかと感じています。

そこで Sketch の魅力について、幾つか上げていこうと思います。

1. 軽い。Mac に特化している。

Adobe 製品を使っていると感じる、重い という感覚。
誰しもその胸にしまいながら、仕方なく使用しているという方も多いのではないでしょうか?

Sketch はとにかく軽いです。さくさく軽快に動きます。

起動・操作のレスポンス供に Adobe 製品とは比べ物になりません.

Apple のフレームワークを活用し、ネイティブアプリとして開発されているため、iCloud や バージョン機能などもフルに取り込まれています。

Artboard 2

2. 細かい操作性。

Sketch の ユーザーインターフェース は、初見で見た時に「こんなシンプルでまともなの作れんの?」と不安を覚えることがあるかもしれません。

しかし、シンプル イズ ベスト とはよく言ったもので、そのUIにすべてがつまっています。

キーセットを覚えるまでは慣れないかもしれませんが、
(といっても自然に使える程度) ほとんど Adobe 製品と同じような感覚で使用できます。

9bc78e0013062bcf047c408041ebc0a2

上記のGIFのような操作はもちろん、
これに Shift キーを合わせて使用すると 10px ずつマージンを測りながら移動できます。

3. シンボル・スタイルの共有

sketch-share

Fireworks にはお馴染みの機能である、シンボル機能も Sketch には搭載されています。

ボタンを繰り返し設置したり、
h1,h2,h3 などのHTMLタグに合わせてスタイルを共有したり。

より、コーディングの時のことを頭で考えながら作ることができるようになりました。

4. 充実した書き出し機能

5bfd179df55e0d0adc312e3bedff44aa

Sketch はベクターベースのドローイングソフトですが、
豊富な書き出し機能により、 Web デザインにもより使いやすいものとなっています。

png, jpg といった従来のフォーマットはもちろん、
svg,eps, PDF での書き出しも容易です。

シェイブやレイヤーをスライスする時も、一々選択範囲を指定せずとも、簡単にスライスすることができます。

5. プラグインによる拡張

Sketch は、jstalk で機能拡張用のプラグインを書くことができ、その多くが Github などで公開されています。

最近では、 Sketch toolbox というアプリでプラグイン管理をすることができるようになりました。(まだベータ版ですが)

  • sketch-mesure : レイヤーの幅や高さ、丸みなどの情報を別レイヤーとして自動生成してくれます。
    2014-10-07 22.06.20

  • content-generator : 写真やテキストのダミーを自動生成してくれます。
    日本語版も配布されています。

  • Duplicator : 素の状態でもレイヤーをコピーしやすいですが、このプラグインを使用することでより柔軟に複製することが出来ます。

25272d8a99674f5396f3a86eef1f6f03

6. ページ・アートボード

イラストレーターではおなじみのアートボード、
Fireworks でお馴染みのページが Sketch には容易されています。

Web サイトを作る時に、ページ毎にファイルを分けて保存するとなると、
ファイル数も膨大になりがちですが、
Sketch では、一つのファイル内で完結することができます。

また、アートボードも作成できるため、
一つのページ内に、PC・タブレット・モバイルのデザインを作成しつつ、
ページ毎にデザイン制作を進めていくことができます。

もちろん、前述した「シンボル」機能もページ・アートボードを超えて共有することができます。

これにより、いくつかのページをコンポーネントデザイン用のページに当てて、シンボル機能を使用し、ページごとにコンポーネントを挿入するなんてことも可能です。

sketch-workflow

7.その他地味に使えるところ

1. 画像の切り抜き・貼り付け

Sketch は画像の編集が苦手なのですが、
なんとかごまかせます。

例えば、ダブルクリック後に選択範囲を決めコピペすると、
その選択した範囲のビットマップ画像を別レイヤーとして作成してくれたりします。

2. Photoshop、Illustrator からコピペ

その他デザインソフトから、コピペでデータを受け渡しもできます。
ベクターベースのレイヤーでしたら、ほとんど誤差なしで Sketch に貼り付けることができます。


いかがでしょうか?
上記のことは、Sketch 3 の機能ほんの一部です。
10月18日の Sketch 3 勉強会 in NAGOYA では、こもりまさあき さんにもっと詳しくわかりやすく Sketch 3 の解説をしていただけますので、
是非ご来場ください!

Sketch 3 勉強会 in NAGOYA + Webデザインと開発の未来

1shiharaT
本名 : 石原隆志

2013年からWeb業界に身を置き、GrowGroup株式会社でWordPressやEC-CUBEなどのCMSを中心にWeb制作をやってます。

1件の返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です