この記事はSketchの古いバージョンを元に書いた内容です。最新バージョンでは、動作が異なる場合があります。
SketchはOSX向けのベクターベースのグラフィックツールです。AdobeでいうところのPhotoshopというよりはFireworks（やIllustrator）に近く、ワイヤーフレームのような軽いものから、ユーザーインターフェイスのデザインやイラストレーション・アイコン作成などもこなせるアプリです。
実は先週あたりからこの記事をポツポツと書いていたら、Fireworksが新規機能開発終了というビッグニュースが入ってきまして、こんなタイミングでこの記事を出したらｱﾜﾜﾜとか思いながらも、空気を読まずに公開します。
置き換えしようぜ！という意向ではなく、こんなアプリもあるよというスタンスですので、生暖かく見守ってあげてください。
Sketchの基本。というSketch（Sketch 3）の基本操作にフォーカスした電子書籍をリリースしました。詳しくはこちらの「Sketchの基本。」のページをご覧ください。
ワイヤーフレーム作成に便利かなと思う機能
マルチアートボード
Illustratorのように、1ドキュメントに複数のアートボードを配置することができます。それぞれのアートボードをデバイスサイズにしておけば、デバイスごとのモジュールの位置を検討しやすいですし、一覧性にも優れますね。
こもりまさあきさんが公開されていたSketchのテンプレートから。文字が小さいですが、左からiPhone・SmartPhone+・Tablet・Desktopと並んでいます。
ちなみにFireworksのようなページ機能もあります（ただし、単純にページを増やせるというだけで、マスターページなどの機能はなし）。
テキストオブジェクトのスケーリング
Sketchはテキストオブジェクトの扱いが少し賢いです。グループ化したオブジェクトのサイズを変更したら、テキストオブジェクトが扁平しちゃって…ということがありません。
テキストオブジェクトを内包するグループの幅を変更した場合、設定されているテキストオブジェクトの幅だけを調整し、テキストサイズ自体はオリジナルサイズを保持します。
同じく、グループ化したオブジェクトの高さを変更した場合、テキストサイズを変更するようになっています。どちらの場合もオブジェクトの高さを変えて、テキストのオーバーフローを回避します。
マルチデバイスのワイヤーフレームを作成する上で幅を変更することはよくあると思うので、実に気の利いた動作ではないでしょうか。
当然ながら、縦横同比率で拡大縮小すると、テキストオブジェクトも同様に拡大縮小します。
プロパティのリンク
プロパティのリンク機能があります。DTPアプリやワープロアプリでよくある、スタイルシートと言った方が分かりやすいでしょうか。
スタイリングに関するオブジェクトのプロパティ（e.g. 不透明度）を変更すると、リンクされているオブジェクトのプロパティも即座に変更されます。
まだ有効活用できていないのですが、同じブロックをリンクしておけば、とりあえずザックリと色を入れたときや、フォントなども一括で変更することができます。
グラフィックツールとして便利かなと思う機能
塗りや線の複数設定
Illustratorのアピラランスほど複雑なことはできませんが、Sketchでも1つのオブジェクトに対して、複数の塗りや線・ドロップシャドウなどを設定できます。これのおかげで、複数のオブジェクトを重ね合わせて…ということをせずとも、ある程度の表現が可能になっています。
オブジェクトの扱い
言うまでもなくSketchはベクターベースのグラフィックアプリです。拡大縮小による画質の劣化はありませんし、プリミティブのプロパティからCSSプロパティも取得できます。
また回転させたオブジェクトを再編集する場合、Sketchではオブジェクトが回転した値を持っているので、回転していない状態と同様に扱えます。
ちなみに回転させたオブジェクトのCSSプロパティをFireworksで取得すると「transform:matrix()」、Sketchで取得すると「transform:rotate()」になります。
グリッド
通常の正方形グリッドは当然ながらありますが、グリッドシステムのグリッドも簡単に作成できます。またVertical Rhythmのベースとなるグリッドも簡単に作成できます。
その他
テキストの描画
結構こだわる方が多いと思うテキストの描画は、サイトにも「like safari」と書かれている通り、OSの描画を使っているのできれいです。Exportすると、ちょっと残念な感じになるのは否めないんですが…
インスペクタ（パレット）が少ない。
少ないというと語弊がありますが、状況に応じて内容が変わるので、画面の大半がインスペクタで埋まることもありません。ここは賛否両論があると思いますが、小さい画面向けにインスペクタのレイアウトを変更しなくても十分にワークスペースを広く取れるので、マシンが変わっても大きく使い勝手が変わることはありません。
自動保存
不意に終了したり落ちたりしても、ドキュメント自体は自動保存になっているので、「俺の30分を返せ！」と叫ぶこともありません。
保存をあまり意識することなく使えますし、リビジョンはTime Machineで管理されているので、試行錯誤の結果 開いた時に戻したいとか、過去のバージョンに戻したいとかも可能です。
スクリプトによる拡張
これがあんまり話題になっていないのですが、スクリプトによる拡張ができます。
PreferencesからGeneralタブにある「enable scripting」をクリックすると、Plug-inメニューが表示されます。そこからJSTalkというCocoaアプリをJavascriptで動かせる言語を使ってスクリプトを記述できます（Javascriptの中にObjective-Cが出てきたりするちょっと特殊な感じですが）。どの程度拡張できるかは詳しく調べられてませんが、スクリプトによる拡張で自動化もできそうですね。
ちょっと…と思うところ
- スナップが効きすぎて、ベジェハンドルの調整がやりづらい。
- 和文関連（自動詰め・縦書き）は残念（要望を挙げないと対応してもらえない気がする）。
- Blendingを設定してもうまく行かない場合がある。
- ビットマップを切り取る場合、ビットマップサイズ以上の部分を選択範囲に含めると、本来透明な部分が画像化されてしまう。
- Exportの画像フォーマットが任意に決められない。
- 対応プラットフォームがOSXのみである。
など、まだ発展途上なのは否めません。
リソースとか
- Free UI Templates for Sketch.app
- 主にUI関連の素材へのリンクのまとめ。
- Sketch 2: A Worthy Photoshop Competitor? | MediaLoot
- UIのパーツなどのダウンロードリンクのまとめです。
- Sketch Sources
- Sketchで作られたワイヤーフレーム用のUIパーツやグラフィックのファイルがダウンロードできます。
- Photoshop Users: How To Switch To Sketch | Meng To – UI/UX Designer
- PhotoshopからSketchの乗り換えた方のブログ。下の方に、Sketchで作られたPinterestやDribbbleなどのコンセプトUIのファイルがあります。
Advent CalendarやFWUGLTでしゃべったりするぐらい、Fireworksを使っているわけですが、ここ数ヶ月 自宅ではSketchを使ってワイヤーフレームを作ったり、パーツを作ったりしています（Fireworksの記事用の素材を作ってるにもかかわらず！）。
互換性という大きな壁があったり、まだバグが所々にあったり、細かなところで機能がちょっと足りないなぁと思ったりしますが、バージョンアップごとにどんどん良くなっていて、今後が期待できるアプリです。
もちろん、Sketchだけですべてがカバーできるわけではありませんので、今まで使ってたアプリの代替、というわけには行かないと思います。ただ、便利な機能を使わない手はないと思うので、アプリの特性を活かしたフローを考えてみるいい機会ではないでしょうか？
気になっている方は公式サイトにトライアルのダウンロードがあるので、そちらをお試しください。
- サイトはこちら
- Sketch | The designer’s toolbox
Sketch.appのメニューを日本語約したものをPDFとSketchファイルにしてみましたので、こちらもご利用いただければ。
