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」プラグインを追加すると良いでしょう。