前回はSketchのインストールから起動、ライセンスの認証まで進めることができました。第2回ではSketchの基本的な機能と操作を解説します。

なお、SketchのUIは英語ですので、Photoshopなどでなじみのある日本語の名称も併記しています。ショートカットキーも併せて記載していますので、ぜひ覚えていきましょう。

各ウィンドウの名称と概要を押さえよう

各ウィンドウの名称と簡単な役割は以下になります。

Menu Bar（メニューバー）

メニューバーにはSketchで扱えるほぼすべての機能が格納されています。慣れないうちは、どのような機能が隠れているのか、端から1つずつ試してみるのもよいでしょう。

Tool Bar（ツールバー）

ツールバーにはデフォルトでよく使う機能が配置されています。ツールバー上で右クリックをすると配置をカスタマイズできますので、使っていく中で自分好みに調整するのもよいでしょう。

Layer List（レイヤーリスト）

画面左にあるウィンドウがレイヤーリストです。基本はPhotoshopやIllustratorと似ていますが、ページとレイヤーの2つの概念をこのウィンドウ1つで管理するのがSketchの特徴です。

Inspector（インスペクター）

右にあるウィンドウがインスペクターです。主にSketch上で選択したレイヤーやオブジェクトのパラメーターを設定できます。

Canvas（キャンバス）

レイヤーリストとインスペクターに挟まれているのが、キャンバスと呼ばれる作業エリアです。作成したデザインがここに表示されます。

Sketchのデータ構造とPhotoshop/Illustratorとの違い

Sketchの各機能を知る前に、Sketchにおけるデータ構造を理解すると、実際の作業がしやすくなります。Sketchで作成したデータがどのような構造でできているのかを見てみましょう。

ファイルを新規作成すると拡張子 .sketch の付いたファイルが作成されます。この中にすべてのデータが格納されます。

実際に作業する際には、「Pages（ページ）」と呼ばれる概念が最上位となります。Adobe系のツールで例えるならば、PhotoshopやIllustratorで作成した新規ファイル1つ1つがページに相当します。ページは目に見える実体ではなく、もう1階層下の概念である「Artboard（アートボード）」をまとめる役割として存在しています。

ページの1階層下にあるのが「Art Board（アートボード）」と呼ばれる概念です。アートボードはPhotoshopやIllustratorと同等の概念で、いわゆる作業スペースです。紙であればA4サイズのアートボードを作成したり、モバイルであればiPhone 7サイズのアートボードを作成したり、といったかたちで使用します。

アートボードの1階層下が、UIをかたちづくるための矩形や円形、テキスト（以下、まとめて「オブジェクト」と呼びます）や画像などです。

Sketchが独特なのは、アートボードをまとめる画面が1ファイルに相当するのではなく、さらにページという概念でまとめている点です。

ページの存在によって、たとえばアプリのUIをデザインするときなら、

• App.sketch

• 投稿機能のページ

• 投稿画面のアートボード

• 投稿画面を構成するレイヤー

• テキスト入力画面のアートボード

• テキスト入力画面を構成するレイヤー

• 写真選択画面のアートボード

• 写真選択画面を構成するレイヤー

• 検索機能のページ

• 検索画面のアートボード

• 検索画面を構成するレイヤー

• 検索結果画面のアートボード

• 検索結果画面を構成するレイヤー

といった具合に1つのファイルで階層を分けた画面管理ができます。

それでは、実際にSketchの各機能と基本的な操作について紹介していきます。

Pages（ページ）

レイヤーリストの「Pages」の右端にあるボタンをクリックするとページを一覧できます。ファイルを新規作成した状態ではPage 1がすでに存在していますので、以降はこのPage 1をベースに進行します。

一覧した状態で右に出てくる「+」ボタンで新規作成が、リスト上のページを右クリック→「Duplicate Page」で複製ができます（「Delete Page」で削除）。

ページ間の移動は［page up］キーと［page down］キー、または［fn］+［↓］キーと［fn］+［↑］キーでできます。

Artboard（アートボード）を作成する

主なショートカット：［A］

ファイルを新規作成した状態ではアートボードは存在していないため、ツールバーの「Insert」-「ArtBoard（A）」でアートボードの種類を選択するか、キャンバス上でドラッグして作成します。

Sketchにはデフォルトで数多くのプリセットが用意されていますが、右下の「+」ボタンから好みのサイズで登録することもできます。

Shape（シェイプ）を作成する

ショートカット：［R］／［O］／［U］／［L］

矩形や円形、線形のオブジェクトは「シェイプ」と呼称されています。シェイプはツールバーの「Insert」→「Shape」か、それぞれのシェイプに応じたショートカットから作成します。

PhotoshopやIllustratorと同様に、［Shift］キーを押しながらドラッグして正方形や正円にしたり、［alt］キーを押しながらドラッグしてカーソルを中心に作成したりもできます。

Text（テキスト）を作成する

ショートカット：［T］

テキストはツールバーの「Insert」→「Text」から作成します。キャンバス上でクリックすればポイントテキストが、ドラッグして範囲を作成することでエリアテキストが作成されます。

キャンバス上をクリックするか、［⌘］+［Enter］で入力が完了します。

なお、Sketchではオブジェクトを作成するたびにカーソルが初期状態（IllustratorやPhotoshopの「選択ツール」）に戻ります。PhotoshopやIllustratorのようにオブジェクトを連続で作成するには、ショートカットや後述のコピーを利用しましょう。

レイヤーを整理・編集する

主なショートカット：［⌥］+［⌘］+［↑］／［⌥］+［⌘］+［↓］／［⌘］+［R］／［⌘］+［G］／［⇧］+［⌘］+［G］

オブジェクトを作成すると、レイヤーリストにレイヤーが表示されます。レイヤーはリスト内でのドラッグや、ツールバーの「Forward（［⌥］+［⌘］+［↑］）」、「Backward（［⌥］+［⌘］+［↓］）」で前後の順番を変えられます。

レイヤー名は、レイヤー名をリスト上でダブルクリック、もしくはショートカット（［⌘］+［R］）で変更できます。

複数のレイヤーを選択した状態でツールバーの「Group（［⌘］ +［G］）」でグループ化が、「Ungroup（［⇧］+［⌘］ +［G］）」で解除ができます。

また、アートボード名の左にある「▼」をクリックすると格納されているレイヤーの展開、折りたたみができます。一度にすべてを折りたたみたい場合はメニューの「View」→「Layer List」→「Collapse Artboards and Groups」をクリックしましょう。

選択・移動・コピー

主なショートカット：［⌘］+［C］／［⌘］+［V］／［⌘］+［D］

ここまででオブジェクトが作れるようになりましたので、次はアートボード・オブジェクトの選択や移動といった基本操作をしてみましょう。

選択

アートボードの場合はレイヤーリスト上でクリックするか、キャンバス上でアートボード名をクリックすると選択状態になります。この状態でアートボードの位置とサイズの変更、背景色の追加、書き出し設定の追加ができます。

オブジェクトの場合はレイヤーリスト上でクリックするか、キャンバス上のオブジェクトをクリックするか、カーソルをドラッグして作成する範囲内に触れれば選択状態になります。

［alt］キーを押しながら選択範囲を作成すると、範囲内に収まるオブジェクトのみを選択できます。

グループレイヤー内にあるオブジェクトは、⌘キーを押しながらカーソルをグループレイヤーに重ねるか、グループレイヤーをダブルクリックすることで個々のオブジェクトを選択できるようになります。

ページ内のオブジェクトをすべて選択する場合は［⌘］+［A］、すべてのアートボードをすべて選択する場合は［shift］［⌘］+［A］で選択状態にできます。

移動

選択したアートボード・オブジェクトはドラッグで移動ができます。移動中に［alt］キーで複製、［shift］キーで水平垂直移動ができるのはPhotoshopやIllustratorと共通です。

コピー

選択したアートボード・オブジェクトを［⌘C］でコピー、［⌘V］でペーストできるのも同様です。［⌘D］で直前の動作を繰り返すこともできます。

マージンを測る

アートボード・オブジェクトを選択した状態で［alt］キーを押すと、他のアートボード・オブジェクトとのマージンが表示されます。Sketchの特徴的な機能の1つです。

オブジェクトを選択した状態であればアートボード内の上下左右のマージンが、他のオブジェクトにカーソルを重ねるとオブジェクト間のマージンが表示されます。

ズームの使い分け

主なショートカット：［⌘］+［+］／［⌘］+［-］／［⌘］+［0］／［⌘］+［1］／［⌘］+［2］／［⌘］+［3］

Sketchのズームには次の6種類があります。

• 一定の倍率でズームイン、ズームアウトする（［⌘］+［+］／［⌘］+［-］）

• 自由にズームイン、ズームアウトする（トラックパッドのピンチイン、ピンチアウト）

• 等倍表示する（［⌘］+［0］）

• キャンバス内のすべてのアートボード・オブジェクトが見える倍率にする（［⌘］+［1］）

• 選択したアートボード・オブジェクトをキャンバスいっぱいに表示する（［⌘］+［2］）

• 選択したアートボード・オブジェクトを倍率を変えずにキャンバス中心に表示する（［⌘］+［3］）

特に、選択したアートボード・オブジェクトだけにフォーカスする［⌘］+［2］のズームは、PhotoshopやIllustratorにはないSketchの独自機能です。

作る画面量が増えてくると全体を俯瞰して確認したり、かと思えば特定のUIの細かな調整をしたりと、倍率の違うズームを行き来するシチュエーションが増えてきます。これらのズームを使いこなせば効率よくアートボード・オブジェクト間を移動して編集できるので、たいへん便利です。ぜひ覚えておきましょう。

次回は、インスペクター内の機能について紹介します。