Table of Contents
はじめに
Webの閲覧環境の多様化にともない、Web制作の現場もそのワークフローや制作手法が変わろうとしている中、2013年に米Adobe社が発表した Fireworksの新規開発中止のニュースによって、突如として注目を集めることとなったソフトウェアが「Sketch」です。Sketchは以前より一部の制作者の間では使われていたベクタードローイングツールですが、2014年の4月に新バージョン「Sketch 3」がリリースされました。
発売されて間もないこの時期にあえて本書をリリースしたのは、「買ってみたは良いけど使ってない」「いまいちどう使っていいかわからない」という方のために、まずはSketchの基本的な使い方から紹介するのが良いのではないか？と考えたためです。それにともない、内容はより詳細なTipsや作例が満載の技術解説ではなく、Sketchの基本操作が中心の解説になっています。
執筆開始から約2日間で仕上げたもので、全体の確認はしたものの内容に不備がある可能性は捨てきれません。しかし、そこは電子書籍の強みを活かし、大幅な修正などがあった場合には、アップデート版を提供する方向で考えております。今回は電子書籍のデータだけでなく、実際に本書を執筆する際に使用したSketchのソースファイルも提供します。
本書がこれからSketchを使おうとお考えの皆さんの一助になれば幸いです。
こもりまさあき
変更履歴 （詳細は巻末に記載）
- Ver. 0.4.1: Chapter 1への本文追加、Chapter 7の最新情報への更新（3.0.2対応）
- Ver. 0.4: Sketch 3.0.2による変更の反映（初期設定）、ズーム操作解説、Sketchtoolの解説など新規追加多数
※本書に掲載した会社名、プログラム名、システム名、サービス名などは一般に各社の商標または登録商標です。本文中において™、®は必ずしも明記していません。
Chapter 1 Sketchについて
初めて使う方のためにも、簡単にSketchの紹介をしておきましょう。
Sketchについて
「Sketch」は、オランダのアムステルダムをベースにしているBohemian Coding社が開発・販売するベクタードローイングツールです。2013年、Adobe社のFireworksの新規開発中止のニュースをうけて注目を集めたようですが、以前から他のドローイングツールに比べて比較的安価なこと、書き出しのオプションが豊富なこともあって、世界のWeb制作者・アプリ制作者の間で愛用されています。Sketchがどのような現場で活用されているかは、公式サイトに名だたる企業が並んでいることからもおわかりいただけるでしょう。
SketchにはPhotoshopのような高度なビットマップ画像編集機能こそありませんが、Webサイトやアプリケーションのインターフェイス制作においては、他のツールに負けないぐらいの機能を搭載しています。Sketchは動作も軽快で、複雑な操作を必要としません。ベクターベースの再利用可能な状態でテンプレートやアセットを管理し、またそれを簡単に使い回せるというのもSketchが選ばれる理由のひとつでしょう。
Sketchの公式サイトより
特に最近のWeb制作の現場では、多様なデバイス環境を想定したWebデザインが求められつつあり、これまで以上に制作時の負荷が増えているのではないでしょうか。これまではワイヤーフレームを作成し、PhotoshopやFireworksでデザインカンプを作成したあと、デザインされた画面をスライスしたり配置された個々のパーツとして書き出してコーディングするという作業の流れが一般的なものでした。しかし、デバイスが多様化している中、より最適化された画像をサイトに適用しようと考えれば、書き出す画像サイズが最大の1種類ではパフォーマンスの観点からもあまり理想的とはいえません。とはいえ、書き出す画像フォーマットやサイズが多岐にわたるようになると、デザイナーやコーディングをするエンジニアの負荷も増えてしまいます。
そんな中、CSSHatなどPhotoshopの拡張機能を開発・販売するsource社が、「Avocode」というPhotoshopを起動することなくパーツを取り出せるツールを開発中です。開発にあたってβテストの登録ユーザー向けにアンケートをおこなっています。Photoshopの利用者が多いのは言うまでもありませんが、実はSketchの利用者がIllustratorやFireworksよりも多いという結果が出ています。
https://medium.com/avocode-stories/e84699fd0321
Sketchには既にChapter 3で紹介している「Sketchtool」というツールがありますが、Avocodeは書き出し元のファイルの対象にSketchも入れているようですのでリリース後が楽しみです。そしてAvocodeだけではありません。静止画像を使って動くプロトタイプを作る「Framer」というツールも2014年5月に最新版がリリースされていますが、こちらもパーツを抜き出すジェレネータがSketchにも対応されるようです。Framerの実体はJSフレームワークですので、今でもパーツさえ書き出せば問題はありません（※Sketchには以前から「Sketch Framer」というプラグインがあり、現在最新版に対応した「Sketch Framer 3」も並行して開発中）。
それほどSketchは世界のWeb制作者、ツールの開発者の中でも見過ごせない存在となっているのです。
Avocode
Framer
Sketchの主な機能
Webサイトやアプリケーションのデザイン・UI制作時に必要な機能はひととおり搭載されています。
- ベクターベースの描画
- 複数ページの管理
- 無限のキャンバスとアートボード
- テキストスタイルの管理
- 共用スタイルの管理
- スクリプトによる拡張（プラグイン）
- オブジェクトのCSS書き出し
- 画面全体やパーツ毎の書き出し（複数サイズ・ファイル形式）
- Sketch Mirrorを使ったプレビュー
たとえば、複数のデバイス向けにWebサイトを作るとしましょう。
Sketchでは、Illustratorのようにサイズが異なる複数のアートボードを一枚のキャンバス上で扱えます。これは、複数のデバイスへの展開を想定したWebサイトの構成を考えたり、アプリケーションのワイヤーフレームやデザインカンプを作成するときに役立ちます。デザインカンプをもとにしてコーディングする時はパーツの書き出し作業が必要ですが、Sketchでは等倍サイズのPNGやJPGだけでなく、0.5倍、2倍、3倍の画像を同時に、かつさまざまなファイル形式で書き出せるので便利です。
Sketch 3の新機能
Sketch 3では、前バージョンからある機能をリファインするだけでなく、制作時に役立つ多くの新機能も追加されました。
- シンボル機能の追加
- 書き出し機能の強化
- 共通カラーの抽出
- 無限の塗り機能
- ノイズ処理の改善
- ビットマップ編集機能
- ベクターモードの改善
- テキストリストの追加
- グリッド機能の強化
- Sketch Mirrorとの連携強化
- プレゼンテーションモードの追加
- SVG/PDFサポートの改善
- デバイステンプレートの追加
ここにあげた以外にも随所に改善点がみられ、前バージョンよりは使いやすいものになっています。
Sketchにおける日本語の扱い
Sketchは、複数行の日本語の行間処理に若干問題があります（欧文書体では問題ないため、日本語書体限定）。これは、デザインカンプなどの作成時にあらかじめテキストスタイルを作ることで回避できる問題で、Web制作に限っていえば段落テキストとして処理する部分である以上、それはデメリットというほどのものではないでしょう。
Sketchのリソース
公式のブログをはじめとして、既にいくつかのリソースサイトが公開されています。
Dribbbleに投稿されているSketchの作例
Chapter 2 Sketchの全体像
まずはインターフェイスや初期設定、メニュー項目を確認しておきましょう。
Sketchのインターフェイス
Sketchのインターフェイスはシンプルそのものです。
Sketchのインターフェイス
ウィンドウ上部にはOS X専用のアプリケーションではおなじみのツールバー。ウィンドウ左側には、レイヤーリストが配置されており、ページやレイヤー（アートボード）を管理します。中央には無限のキャンバス、そしてウィンドウ右側に各種インスペクタ群が並ぶ構成になっています。インスペクタパネルの表示内容は、選択したツールや描画したオブジェクトの種類によって切り替わります。
ツールバー
ウィンドウ上部にはツールバーが配置されています。
ツールバーのボタン
ツールバーからオブジェクトやシンボルの作成、オブジェクトの変形、書き出しといった操作をおこなうことが可能です。他のアプリケーション同様、ツールバーを右クリックして「Customize Toolbar…」を選べば、自分がよく使うボタンに並べかえられます。
レイヤーリスト
ウィンドウ左側のペインは、レイヤーリストです。
レイヤーリスト
新規書類作成時のレイヤーリストは空の状態ですが、アートボードやオブジェクトを追加すればここに表示されます。各種レイヤーやオブジェクトは他のアプリケーション同様に、上下の重なり順を入れ替えたりといった操作が可能です。このレイヤーリストは、レイヤーの名称や書き出し指定の有無などでフィルタをかけて絞り込みができるようになっています（ペイン最下部のフィルタ欄）。Sketchには「ページ」という概念もあるので、ひとつのファイル中に複数のページを保持できます。これは最上部の「Page」のボタンから操作します。
メインウィンドウ（キャンバス）
メインウィンドウは、無限のキャンバスです。
キャンバスにアートボードを作成
Sketchでは、Illustratorと同じようにひとつのキャンバスに複数のアートボードを持つことができます。アートボードについてはChapter 4で詳しく解説しますが、ひとつのキャンバス上で同一サイズで遷移する複数ページのデザインをしたり、サイズの異なるアートボードを複数用意してマルチデバイス向けのWebサイトのワイヤーフレームやデザインカンプを作ることが可能です。ボタンなどのパーツをひとつ作るといった用途であれば、特にページやアートボードを意識せずにそのまま描画しはじめても構いません。描画したオブジェクトはそのままレイヤーとなって、左のレイヤーリストに表示されます。
インスペクタ
ウィンドウ右側に各種インスペクタパネルが並びます。
インスペクタパネル
インスペクタパネルは、選択中のレイヤーやオブジェクトによって表示内容が切り替わります。アートボードの場合はアートボード用のパネル、描画したオブジェクトの場合はそれ用の塗りや線、サイズの指定のパネル、それに加えて適用できるフィルタ類のパネルになるといった仕組みです。パネルの最上部には整列パネル、パネルの一番下には書き出しオプションを指定するためのパネル「Make Exportable」が常に表示されます。
Sketchの初期設定
初期設定では、環境に合わせたアプリケーションの挙動の微調整ができます。
Generalタブ
Generalタブは、アプリケーション全体の動作設定です。
- Pixel Fitting: キャンバス上のレイヤーなどをピクセルにあわせるか
- Font Rendering: フォントのサブピクセルアンチエイリアスを有効にするか
- Vector Import: PDFやSVGをインポートするときにビットマップとして扱うか
- Sketch Mirror: Sketch Mirrorを使ってミラーリングする時の挙動
Generalタブ
「Pixel Fitting」はキャンバス上のレイヤーをピクセルにフィットさせるかどうかの指定です（Sketch 3.0.2からピクセルやガイドへの吸着が強く設定されています）。「Font Rendering」のチェックボックスは、iOS向けの開発をしている場合はサブピクセルアンチエイリアスをサポートしていないのでオフにしておきます。「Sketch Mirror」は、Sketchで作業中のファイルをiOSデバイスにミラーリングするiOSアプリケーションでiTunes Storeから入手可能です。
Canvasタブ
Canvasタブでは、キャンバスの描画に関する項目が並びます。
- Retina: キャンバスをRetina対応するか
- Zoom: ズーム時の挙動の設定
- Layout Grid: グリッド表示の設定
- Colors: グリッドの色指定
Canvasタブ
キャンバスの項目は特に難しい設定はありません。Sketchではズームの機能をうまく使うことで作業効率が変わってきます。「Zoom」の動作は自身の好みで調整しましょう。グリッドは「Show Grid」メニューを実行して表示されます。
Layersタブ
Layersタブは、レイヤー操作に関する設定です。
- New Groups: 新規グループ作成時の挙動（グループ化されたオブジェクトの変形・選択方法）
- Duplicating: オブジェクトやレイヤー複製時の挙動
- Text Layers: ペースト時のテキストのスタイルの扱い
Layersタブ
Layersタブは、グループ化したオブジェクトの操作、複製時の動作などを設定します。複製時の標準の挙動は、アートボードの場合は一番右側に、描画したオブジェクトの場合はその真上に複製されます。オブジェクトの位置をずらしたい場合は「Offset pasterd & duplicated objects」にチェックを入れます。
以上これらの3つのタブがSketchの初期設定です。
Sketchのメニュー
Sketchは、アプリケーションの操作はさほど複雑ではありません。
- File: ファイルメニュー。書き出しやテンプレートへ保存するといったメニュー
- Edit: 編集メニュー。一般的なアプリケーションとほぼ同じ項目
- Insert: オブジェクトなどの挿入メニュー（描画ツールの選択）
- Layer: シンボルの作成、オブジェクトの結合・変形、マスクといったレイヤー操作に関するメニュー
- Type: テキストまわりのメニュー。パネルから操作できるものがほとんど
- Arrange: 同一レイヤー上のオブジェクトの重なり順、レイヤーのグループ化などのメニュー
- Plugins: サードパーティ製のプラグインをインストールした場合にはここに表示される
- View: ウィンドウ全体（パネルやグリッド含）の表示に関するメニュー
メニューには、Sketchの操作で必要最低限の項目が並んでます。その大半の操作は、ツールバーやパネル、右クリック後のコンテクストメニューなどで実行することが可能です。
メニューの対訳が必要な場合は、@littlebusters氏の「Sketch 3のメニューと環境設定の意訳をしましたよ。」にあるSketchファイル（もしくはPDF）を参考にしてください。
Fileメニュー
一般的なアプリケーションと同じようなメニューが並びます。 一般的なグラフィックアプリケーションではあまり見かけない「Move To」は、iCloudなどへファイルを移動します。「Revert To」では自動保存された過去のバージョンをブラウズすることが可能です。開いているSketchファイルをSketchテンプレートとして保存する場合は「Save as template…」、保存したテンプレートをもとに新規書類を作成する場合は「New From Template」からテンプレートを選択しましょう。
Editメニュー
こちらも一般的なアプリケーションと同じようなメニュー構成です。「Set Style as Default」は新規作成するオブジェクトのスタイルを任意のものにしたい場合に、選択したオブジェクトのスタイルを登録します（オブジェクトの新規作成時のデフォルトスタイルはグレーの塗りと線が指定されています）。「Pick Color」を選択するとカラーピッカーが表示され、任意の場所の色を抽出することができます。
Insertメニュー
オブジェクトを描画するツールの選択、シンボルや設定済みのテキストスタイルを挿入するメニューです。アートボードやスライスを追加したい場合もこちらから。こちらのメニューは、ツールバーにある「Insert」ボタンと同じものです。
Layerメニュー
このLayerメニューに並ぶ項目は、オブジェクトの変形、マスク処理、ベクターのビットマップ化といったレイヤー上のオブジェクトを処理するためのメニューです。パスの結合やパスを閉じるといった操作は、「Paths」メニューの中にいくつかのメニューが用意されています。「Convert to 9-Slice Image」は、アプリケーションのUIなど9分割したイメージを用意する場合に使います。ベクターオブジェクトでは実行できないので、一度「Flatten Selection to Bitmap」でビットマップ化した後にオブジェクトを選択すると実行可能です。
Typeメニュー
文字まわりの操作に関するメニューです。項目の多くは、右側のインスペクタパネルからボタンやスライダなどを使って調整できます。
Arrangeメニュー
レイヤーオブジェクトや同一レイヤーに含まれるオブジェクトの重なり順を変更したり、整列などをおこなうメニューです。「Make Grid」は、選択したオブジェクトからグリッドを指定して繰り返しのオブジェクトを生成します。オブジェクトをグループ化［Cmd＋G］したり、ロックするメニュー（Cmd＋Shift＋L）もこちらにあります。グループ化などのショートカットは、大半が他のアプリケーションと同じですが、ロックなどのようにShiftキーが必要なものもあったりするので一度確認しておきましょう。
Pluginsメニュー
オープンソースなどで公開されているSketch用のプラグインをインストールするとこのメニューにリストされます。プラグインのインストールは、Sketch 3用のプラグインフォルダにコピーします。プラグインフォルダを開くには「Reveal Plugins Folder…」を実行しましょう。
Sketchのプラグインは、Ver. 2の頃から多くのものが公開されていますが、既存のプラグインがそのままSketch 3で動作するわけではありません。SketchプラグインはChapter 1で紹介したリソースサイトの他、「Sketch Plugin Directory」にまとめられています（旧URLより移転）。
新たに「Sketch App Plugin Registry - Sketchpack.in」というプラグインレジストリが公開され、プラグイン作者による登録が始まっています。今後はこちらのサイトが有力な情報源となるでしょう。
Viewメニュー
ウィンドウの表示全般に関わるメニューです。拡大縮小、パネルの表示／非表示などはここで操作します。メニュー上部のズーム関係のショートカットは、他のアプリケーションには存在しないものもあります。無限キャンバスのSketchでは、この5〜6個のショートカットを覚えるとスムーズに作業ができます。また、新しく追加された「Presentation Mode」への切り替えもここでおこないます。
ガイドの表示／非表示は「Show（Hide）Layer Guides」でおこないますが、Sketchでは他のグラフィックエディタのようにルーラーからガイドをひく機能がありません（基本はオートガイド）。任意のガイドを指定する場合は、Chapter 7で紹介している「Sketch-Commands」プラグインを追加すると良いでしょう。
Changelog
- 2014.05.20: Chapter 1への本文追加、Chapter 7の「プラグインをフル活用する（更新）」、Chapter 7の「sketch-dynamic-button（3.0.2対応版への情報更新）」、など（Ver. 0.4.1）
- 2014.05.18: Sketch 3.0.2による変更の反映（初期設定）。Chapter 2「Pluginsメニュー（画像変更・追記）」、Chapter 3「オブジェクトの移動（追記）」「Sketchtoolによる書き出し（新規追加）」、Chapter 4「拡大縮小操作をマスターしよう（新規追加）」、Chapter 7「Sketch-Commands（ガイド指定を追加）」「sketch-dynamic-buttonの3.0.2対応（追記）」「RenameItプラグイン（新規追加）」「プラグインへのショートカット指定（新規追加）」など（Ver. 0.4）
- 2014.05.08: Chapter 7の構成を変更し、プラグインの活用、Webフォントの作り方を追加。ソースファイルに「c07-02.sketch」を追加（Ver. 0.3）
- 2014.04.27: Chapter 2、3、4、5、6に本文の加筆修正（Ver. 0.2）
- 2014.04.23: 初版発行（Ver. 0.1）