Sketchの基本。

Sketchの基本。
Sketchの基本。
Buy on Leanpub

Introduction

この書籍について

この書籍では、Sketchの基本的な使い方にフォーカスし、各機能を詳細に解説しています。

※本書に掲載した会社名や製品名などは、各社の商標・登録商標です。

Sketchとは

SketchはBohemian Coding社が開発するベクタードローイングツールです。2013年5月、Adobe Fireworksが事実上の開発中止を宣言された際に、代替ツール(当時はSketch 2)として一躍脚光を浴びました。

モバイル・デスクトップアプリのユーザインターフェイスデザインにフォーカスしたツールですが、ウェブサイトデザインをはじめ、プレゼンテーションスライドの作成などにも利用することができます。

PhotoshopやIllustratorと比較されることが多く、バージョンを重ねてきたこれらのアプリには及ばない部分は確かにあります。逆に、たくさんの機能はないものの、必要な機能がコンパクトにまとまった動作も軽快なアプリケーションに仕上がっています。

またAdobe Experience Design(XD)やAffinity Designerなどの競合とされるツールも増えており、Sketch特有の機能はあるものの、それらのツールを置き換えることができるのか?というとそれは「ノー」です。

ただ、こうしたツールはどうしても「つくること」にフォーカスしがちですが、プロジェクトメンバーやクライアントとどのようにコミュニケーションをとるか、「デザイン」をつくった後のオペレーションはどうするかなど、ただ単に「デザインをつくる」という基準で選ぶことができなくなっています。今後はツールの特性を理解し、ケースバイケースで使い分けを行うことが、必要となってくるでしょう。

例えば、サードパーティが提供しているウェブサービスが豊富だったり、「SketchTool」というコマンドラインからSketchファイルを開くことなく扱えるツールもあったりと、旧来のワークフローでは考えられなかったことができるようになっています。

Sketchを使うことで、そうしたワークフローを再考するきっかけとなり、そしてあなたの手になじむツールになるために、この電子書籍が一助となれば幸いです。

以下の項目についてご注意ください。

  • macOS Sierra 10.12.2 + Sketch 42で執筆・確認しています。公開されているVersion historyを元にアップデート内容を確認しておりますが、完全に検証できていない場合もあります。また、最新版を元にしているため、古いSketchでは書籍に掲載している内容と実際の機能に違いがでる場合もあります。
  • 内容の修正については、アップデートで変更があった部分を優先的に差し替えているため、スクリーンショットで使っているOSのバージョンが統一されていませんので、ご了承ください。
  • ショートカットはUS配列キーボードを前提に設定されているため、JIS配列キーボードでは正しく動作しない場合があります。
  • Leanpubを利用して電子書籍を生成しているため、レイアウトなどはシステムに依存です。また画像が圧縮された結果、実際の表示とは異なる可能性もありますので、合わせてご了承ください。

01_Sketchの基礎

Sketchを使う上での基礎知識

すべて英語

英語圏のアプリケーションであることから、メニューからツールバーの至る所まで基本的に英語です。ただ、そこまで難しいものではないため、使っていくうちに慣れるでしょう。

キャンバス/アートボードは透明

キャンバスやアートボードは白く見えますが、透明の扱いです。書き出しで白が必要な場合は、背景に白い矩形を配置しましょう。またアートボードの設定で背景色が指定でき、それを書き出しにも含めることができます。

プリントメディアには不向き

アートボードがプリセットされている紙の規格サイズを見る限り、1inchを72pxとして算出された値になっています。つまり、Sketch自体はpxに固定されているため、mmやcmなどの単位で指定するにはpxへの換算が必要となります。またRGB以外のカラースペースを扱えないため、Illustratorの代わりに印刷物の作成をすることはできません。

レイヤーが多くなると描画が遅くなる

Adobe Illustratorとのパフォーマンス比較の動画がアップされていましたが、確かにレイヤーが多くなると描画が遅くなる傾向があります。これはグループ化を適宜することで、ある程度は回避することができます。またページをうまく利用し、レイヤー数をコントロールしましょう。

また、アップデートでもパフォーマンスの改善が頻繁にされています。

日本語の扱いが苦手

日本語(和文)自体は扱えますが、細かい組版や縦書きのサポートなど、日本語(東アジア圏)特有の機能はサポートされていません。

特にOpenTypeフォントの行間を任意に設定するとバウンディングボックスがずれるバグがあり、対応待ちの状態です。

基本操作

コピー&ペーストと複製

コピー&ペーストした場合、コピー元の同一の座標にペーストされます。同一座標へペーストした場合、オブジェクトが現在のキャンバスに表示されていない時は、現在表示しているキャンバスの中央にペーストされます。

レイヤーをドラッグ中にOptionキーを押す、または「Edit → Duplicate」(ショートカット:Command + D)で複製ができます。

PreferencesのLayersで、「Offset duplicated Layers」にチェックを入れると、XY座標とも+10ピクセルの位置にペースト(または複製)されます。

挿入されるレイヤー深度は、選択しているレイヤーがあればその上、なければ最上位にペーストされます。

異なる座標のものを同位置(左上が基準点)にペーストする場合は「Edit → Paste Over Selection」(ショートカット:Command + Shift + V)です。

またコンテキストメニューから「Paste Here」を選べば、コンテキストメニューを出すためにクリックした位置へペーストすることができます。

レイヤーの描画

矩形や楕円などのツールを選択し、任意の場所からドラッグすることでレイヤーを描画することができます。Shiftキーを併用すれば幅・高さの比率を固定、Optionキーを併用すれば中心から描画することができます。
Shiftキーを併用し描画した場合は、比率にロックがかかります。

また、描画中にSpaceキーを押したままにすると、描画する位置をドラッグで調整することができます。

レイヤーの選択

ツールを選択していない通常の黒いマウスポインターの状態が、いわゆる選択ツールです。そのままオブジェクトをクリックすれば、選択状態に移行します。

ドラッグによる選択も可能で、ドラッグの範囲にかかったレイヤーをすべて選択することができます。

ドラッグ中にOptionキーを押しておくと、ドラッグの範囲へ完全に入ったレイヤーのみを選択することも可能です。

また、レイヤーを選択している状態でTabキーを押すと、レイヤーリスト(ウィンドウ左側の部分 後述)を上から下に向かって順番に選択できます。Shiftキーを押しながらTabキーを押すと逆順になります。

レイヤーの移動

レイヤー選択中にカーソルキーを押すと1pxずつ、Shiftキーを併用すると10pxずつ移動することができます。

以下のコマンドをターミナル.appで実行すると、移動距離やテキストフィールドの数値の増減など、カーソルキーを押した場合の増減値を調整することができます。

ナッジをターミナル.appで設定
# 矢印を押したときの増減値を2pxにする場合
$ defaults write com.bohemiancoding.sketch3 nudgeDistanceSmall -float 2.0
# Shiftキーを併用したときの増減値を8pxにする場合
$ defaults write com.bohemiancoding.sketch3 nudgeDistanceBig -float 8.0

また、GUIをかぶせたアプリもリリースされていますので、ターミナル.appが苦手な方はこちらを使うと良いでしょう。

ナッジをGUIで設定できるアプリケーション:Nudg.ig(http://nudg.it/)

ドラッグで移動させる場合、CommandとOptionキーを押しておくと、クリックする場所に関係なく選択しているレイヤーをドラッグすることが可能です。選択中のレイヤーが画面外にあっても、他のレイヤーが上に被っていても問題ありません。

レイヤーのサイズ変更

Commandキーを押しながらカーソルキーを押すと、左上起点でサイズを1pxずつ変更できます。移動と同じくShiftキーを併用すると、10pxずつでサイズ変更をすることができます。

スマートガイド

レイヤーを選択している状態でOptionキーを押すと、選択したレイヤーとマウスポインターでハイライトしているレイヤーとの距離が表示されます。

レイヤーリスト上でマウスオーバーしたレイヤーとの計測も可能です。

マウスオーバーしているレイヤーとの距離が表示される
マウスオーバーしているレイヤーとの距離が表示される

さらにCommandキーを押すことで、グループ内のレイヤーとも計測できるようになります。

グループ内にあるTwitterアイコンとの距離を計測
グループ内にあるTwitterアイコンとの距離を計測

編集モード

パスのアンカーポイントやテキスト自体を編集する場合、次のいずれかでレイヤーを編集モードにします。

  • レイヤーをダブルクリック
  • レイヤーを選択し、Enterキーを押す
  • レイヤーを選択し、ツールバーの「Edit」をクリックする(ただしテキストレイヤー・グループレイヤーでは有効になりません)

編集モードを終了するには、ESCキーを押します。グループレイヤーの中を編集していた場合は、親のグループレイヤーが選択されます。

02_Preferences

Sketch → Preferences…」(ショートカット:Command + ,)で表示される「Preferences」を解説します。

Generalタブ

Auto-Save

Auto-Save file while Editing」にチェックを入れると、自動保存が有効になります。デフォルトでは有効になっていますが、一時ファイルがドライブ容量を圧迫することがあるため、無効化できるようになりました。

Pixel Fitting

Fit Layers and Points to Pixel Bounds」にチェックを入れると、レイヤーやアンカーなどがピクセルにスナップフィットします。通常はチェックを入れておきましょう。

Pixel-Fit when Resizing Layers」にチェックを入れると、レイヤーのリサイズ時にもピクセルスナップするようになります。ロゴやイラストなどをリサイズすると、微妙にずれることになりますので、通常はチェックを外しておく方が無難です。

Pixel-Fit when Alignment Layers」にチェックを入れると、レイヤーの整列時にピクセルスナップするようになります。偶数px・奇数pxのサイズが混じったレイヤーを整列すると、奇数ピクセルのレイヤー座標が0.5pxに設定されてしまうため、通常はチェックを入れておいたほうが良いでしょう。

Vector Import

Insert PDF and EPS files as Bitmap Layers」にチェックを入れると、PDFとEPSファイルをビットマップレイヤーとして挿入します。Optionキーを押したままにしておくと、設定している動作が反転します。

Sketch Mirror

Show Current Artboard」にチェックを入れると、Mac上で表示しているアートボードをSketch Mirror側でも表示します。

Canvasタブ

Zoom

Animate Zoom」にチェックを入れると、ズームイン/ズームアウトのエフェクトがかかります。

Zoom in on Selection」にチェックを入れると、選択しているレイヤーがキャンバスの中央に来るようにズームイン / ズームアウトします。

Zoom Back to Previous Canvas Position」にチェックを入れると、「View → Actual Size」(ショートカット:Command + 0)で、前回100%表示をしていた状態に戻ります。

動画: Preferences - Zoom Back to Previous Canvas Position.mp4]

Colors

ガイドラインやスマートガイドの表示色を設定します。

Layersタブ

New Groups

Enable Click-through for New Groups」にチェックを入れると、次回グループ化したレイヤーから「Click through」を有効にします。「Click through」を有効にすると、グループを展開することなく内包するレイヤーを直接選択することができます。「Click through」が無効になっている場合、Commandキーを押しながらクリックすることで、チェックした状態と同じ動作になります。

グループレイヤーのインスペクタに、「Click through」チェックボックスがあるため、個別に設定ができます。

Duplicating

Offset Duplicated Layers」にチェックを入れると、ペーストおよび複製した際に位置をオフセット(X/Y座標とも+10px)します。

Rename Duplicated Layers」にチェックを入れると、複製時にレイヤーをリネームします。Make Gridを実行しレイヤーが複製される場合も、この設定が適用されます。

Flatten bitmaps

Layer → Flatten Selection to Bitmap」を実行した場合の解像度を設定します。@1xが一般的な解像度、@2xが高解像度向けです。

@2xの場合、解像度の足りないビットマップ画像が含まれていると、その部分はぼやけてしまうため注意が必要です。

Pluginsタブ

プラグインの管理を行います。ただ、現状でできることは少なく、このパネルへリストアップされるにはプラグインが新しい形式に対応している必要があります。古いプラグイン形式の場合、上のスクリーンショットのようにLegacy Pluginsとして1つにまとめられてしまいます。

プラグイン名の左にあるチェックボックスで、プラグインの有効化/無効化を切り替えます。

左下の歯車マークまたはコンテキストメニューから、有効化/無効化の切り替え・アンインストールなどを行うことができます。

左下のFilterでインストールされているプラグインリストからインクリメントサーチをすることができます。

[Get Plugins…]ボタンで、BohemiaCodingのサイトへジャンプします。

Presetsタブ

スライスやレイヤーの書き出し設定で使うプリセットの設定ができます。パネルの左が設定済みのプリセットの一覧、パネルの右が現在選択しているプリセットを編集します。

プリセット一覧のラジオボタンで、スライスや書き出し設定した際のデフォルト設定を選択します(一覧にDefaultとありますが、これはSketchのDefaultです)。

プリセットを追加するには、リスト下の「+(プラス)」を、選択した設定を削除するには「−(マイナス)」をクリックします。

プリセット内の書き出し設定を追加するには、プリセット名の右にある「+(プラス)」をクリックします。

Sizeは書き出すサイズで、倍数や幅・高さを入力できます。Prefix/Suffixは、ファイル名に付ける接頭辞および接尾辞です。プルダウンメニューから接頭辞か接尾辞を選択し、文字を入力します。Formatは書き出すフォーマットを選択してください。

Cloudタブ

Sketch Cloudのアカウントを設定するパネルです。詳しくは「19_Tools - Sketch Cloud」で解説します。

アカウントを作成済みであれば[Sign In]ボタンを、まだアカウントを作成していないのであれば[Create Account]ボタンを押せば、それぞれのウェブページへジャンプします。

03_Application Window

Sketchのウィンドウについての解説です。大まかに4つのエリアがあります。

ツールバー

ウィンドウ上部にあるのがツールバーです。メニューのショートカットアイコンが並んでおり、メニューバーから選択する手間が省けます。コンテキストメニューより「ツールバーのカスタマイズ」をすることができます。

View → Show/Hide Toolbar」(ショートカット:Command + Option + T)で表示・非表示を切り替えることができます。

Touch Bar

Touch Barが搭載されたMacBookであれば、対応した項目が表示されます。挿入するレイヤーの選択や色など、状況に応じて切り替わります。

上:特に何も選択していない状態では挿入するレイヤーの選択や表示の拡大縮小のボタンが表示される。 下:Rectangleレイヤーを選択した状態で、塗り・線色の設定やパス編集モードなどのボタンが表示される。
上:特に何も選択していない状態では挿入するレイヤーの選択や表示の拡大縮小のボタンが表示される。 下:Rectangleレイヤーを選択した状態で、塗り・線色の設定やパス編集モードなどのボタンが表示される。

レイヤーリスト

Sketchでは矩形や楕円のパスはもちろん、テキスト・グループ化したものもレイヤーとして扱います。キャンバスに存在するレイヤーは、ウィンドウ左側にあるレイヤーリストへ表示されます。

レイヤーリストの上部に現在のページ名が表示され、下部にあるフィルターはレイヤー名でレイヤーリストの絞り込みができます。(ショートカット:Command + F)

ページ名右にある をクリックすると、ページリストを表示できます。

View → Show Layers List」(ショートカット:Command + Option + 1)で表示・非表示を切り替えます。

インスペクタ

ウィンドウ右側がレイヤーのサイズや位置・エフェクトを編集するためのインスペクタです。インスペクタには、選択しているレイヤーに応じたプロパティや、使えるエフェクトなどが表示されます。

インスペクタで数値を入力するテキストボックスでは、四則演算が可能です。またテキストボックス下のラベル(下にラベルがない場合は、その項目のラベル)部分を左右にドラッグすることでも数値の変更ができます。

インスペクタの上部にはレイヤーの整列ツールがあり、下部にはレイヤーに書き出し設定を行う「Make Exportable」ボタンがあります。

View → Show Inspector」(ショートカット:Command + Option + 2)で表示・非表示を切り替えます。

キャンバス

ウィンドウ中央部分がキャンバスで、この中で編集を行います。キャンバスのサイズは無限で、どこまでもスクロールし複数のアートボードを配置できます。

キャンバスには複数のアートボードを持つことができるため、ワイヤーフレームをデバイスごとの幅で作成する場合や、複数サイズあるアイコンを1つにまとめる場合などに役立ちます。

ウェブ向けのボタンやロゴなどのいわゆるパーツであれば、アートボードを使わず作成することも可能です。

17_Update

リリースノートをざっと翻訳しました。

Sketch 42

新機能

  • 複数の大きさや接頭辞/接尾辞およびファイルフォーマット設定を含む、書き出しのプリセットを定義できるようになりました。これは、ワンクリックでスライスや書き出し設定をレイヤーへ適用できます。
  • Sketchは新しいMackBook ProのTouch Barをサポートし、キーボードから直接 ツールや機能に素早くアクセスできるようになりました。
  • スライスの書き出しプリセットを自動的に適用されるようになりました。
  • セミコロンを角丸の値の区切りとして使えるようになりました。
  • Touch Bar関連のさまざまな修正と機能強化を行いました。

他の機能強化

  • Mirrorを使用しているときのメモリーを減少しました。
  • テキストを編集したときのUndoの信頼性が向上しました。
  • 重なり合っていない多くのシェイプを結合するときのパフォーマンスが向上しました。
  • 多重ネストされたシンボルがあるドキュメントで、シンボルインスタンスを編集するときのパフォーマンスを改善しました。
  • even-odd および non-zeroの塗りルールをサポートし、SVGの書き出しを改善しました。
  • 複数のページを同時に選択し、並び替えや削除・複製ができるようになりました。
  • より正確なピクセルで作業するため、最大ズームレベルを4倍の25,600%まで拡大しました。
  • スライスも他のレイヤーと同様に隠すことができるようになりました。
  • 2つのポイントのみを含むパスの始点アンカーを選択するとき、そのアンカーから次のアンカーを追加できるようになりました。
  • 3つ以上のポイントがあるオープンパスで、始点アンカーを選択することで閉じることができるようになりました。
  • パス編集時にOptionキーを押すと、すべてのアンカーが隠されなくなりました。
  • コントロールポイントのハンドルをドラッグしたとき、Shiftキーを押すと反対のコントロールポイントの方向をロックすることができます。
  • Aboutウィンドウをアップデートし、新しい見た目になりました。
  • File > New From Templateメニューを元に戻しました。
  • Save as Templateのダイアログへ、ドキュメント名をあらかじめ入力されるようになりました。
  • シンボルインスタンスを入れ替えるメニューは、Insert > Symbolで表示されるものと同じようにグループとサブメニューを使うようになりました。
  • レイヤーが水平または垂直に反転されたとき、インスペクタのFlipボタンの押された状態を表示するようになりました。
  • サブパスを隠すことができるようになり、ブーリアン演算の対象から外せるようになりました。
  • SVGの書き出しと読み込みの両方に関する多数の修正を改善しました。

App Store版からのアップデート

かねてより直販版を利用されているかたには無関係ですが、Sketch 3.4.3より、Mac App Storeでの配信を停止しました。Mac App Storeではアップデートを素早く配信できない、アップデート価格を適用できないなどの問題により、直接販売のみに切り替えたようです。

Leaving the Mac App Store

アップデート方法

長い間Sketchを起動していない場合は、念のため一度起動しておきましょう。

Mac App Store版をお使いの方は、先ほどの「Leaving the Mac App Store」より、最新版をダウンロードしZIPファイルを解凍します。

解凍してできた「Sketch.app」を「アプリケーション」フォルダへ移動させ、すでにインストールされているMac App Store版を上書きします。

その後にSketchを起動させると、メールアドレスを入力するダイアログが表示されますので、ライセンス番号を受信したいメールアドレスを入力し、「Unlock Sketch」ボタンをクリックします。この時点でライセンス認証が行われますので、初回のライセンス入力は不要です。認証されているメールアドレスを確認するには、[Sketch]メニューから「Registered to 〜」という項目を確認してください。

プラグインやアートボードプリセットの移行方法

起動時に移行される場合がほとんどですが、プラグインやアートボードなどの移行がうまくいっていない場合、Mac App Store版のフォルダから、直販版のフォルダへ必要なファイルやフォルダを移動させればOKです。

Mac App Store版の設定保存先
~/Library/Containers/com.bohemiancoding.sketch3.beta/Data/Library/Application Su\
pport/com.bohemiancoding.sketch3
直販版の設定保存先
~/Library/Application Support/com.bohemiancoding.sketch

これらのフォルダへ移動するには、Optionキーを押しながらFinderの[移動]メニューを開いて、「ライブラリ」からたどるか、[移動]→[フォルダへ移動…]で上記のパスをコピペしてください(改行マークがある場合は、一旦テキストエディタなどで1行に整形してください)。

対象のファイルやフォルダ
  • Pluginsフォルダ
  • artboards.plist:アートボードのカスタムプリセット
  • assets-v62.sketchpreset:カラーやグラデーションのプリセット
  • textStyle-v62.sketchdefault:ちょっと用途が不明ですが、デフォルトのテキストスタイル?
  • Templatesフォルダ:カスタムテンプレートを保存している場合
  • plugins.plist:Preferencesのプラグインマネージャで設定した内容を移行したい場合

「v62」とある部分は、これより小さい数字の場合があります。また移動したのにきちんと反映されない場合は、「v63」とある(場合によってはこの数値より大きな)ファイルを一旦デスクトップなどに移動させた上で、Sketchを再起動させてみましょう。ただし、新しく作成してしまっている場合は、消えてしまいますので、ご注意を(どちらかしか残せません)。

アップデート後の処理

Sketch ToolboxがMac App Store版のフォルダへインストールしてしまうため、先述のMac App Store版の設定保存フォルダを削除しておきます。

ダウンングレードする

Updatesページより、過去のバージョンをダウンロードできます。

https://sketchapp.com/updates/

ただし新バージョンで開いて保存してしまったファイルは、古いバージョンで開くことができない可能性があります(Auto Saveを無効にしてる場合、開くだけなら問題ありません)。特にバージョンアップ後は不具合が多く、仕事で使っているファイルはコピーして開くなどロールバックできるようにしておくとよいでしょう。