10月18日（土）に開催されたこもりまさあきさんの「Sketch 3 勉強会 in NAGOYA」に参加しました。
その後、業務と自主制作で1週間ほど使ってみたので、感想もまじえてまとめます。
もくじ
Sketch3はイマドキの制作者向けのグラフィックツール
Sketch3はオランダ・アムステルダムのBohemian Coding社が開発するベクタードローイングツールです。現在WebデザインにはAdobe Fireworksを中心に使っていますが、もともと情報収集をしているくらいには興味津々でした。とはいえなかなかチャレンジできなかったので、勉強会をきっかけにここ1週間はSketch3中心で制作をしてみました。
Sketch3の特徴とインターフェース
結論から言えば、1週間使ってみて大きなストレスは感じませんでした。ただし、ビットマップ中心のグラフィカルなデザインはPhotoshopが適役かなーと思います。また、Sketch3の弱点としてよく挙げられる日本語フォントの処理の不具合は設定で回避できるのでクリティカルな問題ではなさそうです。テキストの設定についてはまた後日エントリーにまとめます。
Sketch3 基本の考え方
Sketchのファイルは無限のキャンバス（ページといいます）の中に必要なだけアートボードを作っていきます。ページも複数作れますが、ファイルの管理を考えると1ページの上にアートボードを作っていった方が個人的には便利でした。
Sketch3のインターフェース
Sketch3のインターフェース
左ウインドウ
左側のウインドウは他ツールでいうレイヤーウインドウです。作ったオブジェクトの一覧を見ることができ、ドラッグアンドドロップで重ね順を変更することができます。
他ツールとの一番の違いは、オブジェクトの検索フィルターです。左下の検索バーでオブジェクトを名前から絞り込めるので、特定のパーツに一括で効果をつけたいときに便利です。
「sample」だけを選択しています
右ウインドウ
オブジェクトのサイズとカラー、効果を設定するウインドウです。他ツールでは分散していることが多いので、ひとつにまとまっているのはとってもスマート。ここでできるのは以下の設定。
- Position（オブジェクトの位置座標）
- Size（サイズ）
- Transform（回転角度と反転）
- Style（設定したスタイルを適用）
- Opacity（不透明度）
- Blending（Photoshopでいうレイヤーの描画モード）
- Fills（塗りつぶしの設定）
- Borders（線の設定）
- Shadows（ドロップシャドウ）
- Inner Shadows（内側シャドウ）
- Blur（ぼかしを最大4パターンから選択）
- Reflection（鏡面反射風の効果）
- Make Exportable（書き出し設定）
Illustratorだと一手間かかる内側シャドウがワンクリックでできるのは楽でした。塗りつぶし（Fills）の考え方が独特で、複数の塗りと描画モードも設定できるので、ベースは単色でパターンを乗算、一番上にグラデーションでつやつやした効果を加えることもできます。
ここで一番ご紹介したいのは書き出し設定なんですが、これは後述の実践編で取り上げます。
強みは軽快さと自動保存機能
他ツールとくらべて感じるのは、なにせ動作が軽快だということ。これは作業環境にもよるので人それぞれですが、Fireworksではちらほら見かけた虹色のパラソルをほとんど見かけませんでした。（あえて言うなら日本語の処理をしているときにはあったかも？）
1週間使っていて、一度だけアプリが落ちたときがありましたが、Dockのアイコンをクリックすれば最新の状態に戻ってくれるのは助かりました。Sketchなら、2時間の作業が保存に失敗してパァになることはなさそうです。
実際にSketch3でブログのデザインをしてみた
実際にSketch3を使ってブログのデザインをしてみました。その中で特徴的な機能や気に入った機能をいくつかピックアップします。
Sketchでブログの画面デザインをしてみた
アートボードの作成
アートボードの新規作成は「A」がデフォルトショートカットとして割り当てられています。プラグインやテンプレートを入れなくても、初期状態でiPhoneやデスクトップHDの解像度が揃っているので便利。今回は幅1440pxの「Desktop HD」でブログのインデックス（一覧ページ）とエントリー（詳細ページ）を作りました。
PC、スマートフォンの端末サイズに合ったアートボードが作れる
「Layout Setting」でガイドを引く
Fireworksを使うときには、あらかじめガイドを引いたファイルをテンプレートに登録していました。Sketchは数字入力で設定できるので、制作物のピクセル幅が違うパターンにも簡単に対応できます。
Layout Setting 設定画面
プラグイン「Content-generator-sketch-plugin」を使ってみた
SketchのプラグインやテンプレートがWeb上でたくさん配布されています。英語アレルギーだと少しつらいかもしれませんが、気になるものはどんどん入れてみましょう。
今回はこもりさんに教えていただいた「Content-generator-sketch-plugin」のインストールから使い方までをひと通りまとめます。
プラグインをインストールする
Githubから日本語対応版Content-generator-sketch-pluginをダウンロードし、zipファイルを解凍しておきます。
プラグインを追加する
次に、SketchのメニューバーからPlugins＞Reveal Plugins Folderを選択し、Sketchのプラグインを入れるためのフォルダを表示させます。そのまま、ダウンロードしてきたプラグインをフォルダごと持ってくればプラグインの導入は終了。再起動がいらないのは地味に便利ですね。
プラグインを使ってみる
今回は適当に入力したサンプルテキストに、ダミーテキストを流し込みます。「この文章はサンプルです。」などよりも、よりリアルなデザインカンプを作ることができます。
メニューバーのPluginsから先ほどインストールしたプラグイン名を選択し、Text＞Dummy text_ja＞Kumonoito＞Replace で選択したテキストが同じ文字数のダミーに差し替えられます。内容が気に入らなければ同じ動作をもう一度すれば別のテキストに変わります。ReplaceではなくGenerateを選択すれば、現在の文字数は無視した長めのテキストが作られます。
テキストだけでなく、ダミーのユーザー情報（名前、メールアドレス、写真など）やダミー画像も作れます。
Retina対応に便利な書き出し設定
紹介したい機能はまだまだありますが、Sketch3で一番感動した機能は書き出し設定（Make Exportable）でした。
Make Exportable 画面
右下の「Make Exportable」をクリックすると、書き出し設定を作ることができます。これは複数作ることができるんですが、ベクターならSizeで「2x」を選ぶことで自動で2倍サイズの画像を書き出してくれます。PNGの場合はオブジェクトやグループを選択するだけで自動で透過もしてくれます。
カンプ上で文字を含むボタンをデザインして、実際は文字を含まず後ろのボタンだけを書き出したいというケースは多々あると思います。そんなときは、ボタン画像だけのグループを作って書き出せば文字は画像に含まれなくなります。Fireworksでちまちまスライスをしていた身としては、これには感動しました。
Fireworks使いとしては今後とても頼もしいツール
同じベクタードローイングツールですし機能はかなり絞りこまれているようなので、正直に言えばFireworksやIllustratorではできないけどSketchならできる！という機能は特にありません。しかし、同じ画像書き出しをやるにもスピーディーに楽ができるというのはイマドキらしい考え方のツールだと感じました。
まだまだ表面的なところしか触っていないので、もっと使い込んで随時ブログでご紹介していきます。
