sketch - leanpubsamples.leanpub.com/basicofsketch-ja-sample.pdfsketchの基礎...

Sketchの基本。新しいグラフィックツールとして注目されている、Sketch（Sketch 3）の基本的な使い方を解説しています。これを読めば Sketchを一通り理解できるでしょう。

KUBOKI Hiroshi

本書はこちらで販売中です http://leanpub.com/basicofsketch-ja

この版は 2020-08-31に発行されました。

本書は Leanpubの電子書籍です。Leanpubはリーンパブリッシングプロセスで著者や出版社を支援します。リーンパブリッシングは新しい出版スタイルです。軽量なツールを使って執筆中の電子書籍を出版し、読者のフィードバックをもらいながら魅力的な本に仕上がるまでピボットを繰り返すことができます。

© 2014 - 2020 KUBOKI Hiroshi

http://leanpub.com/basicofsketch-jahttp://leanpub.com/http://leanpub.com/manifesto

Contents

Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1この書籍について . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Sketchの基礎 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3Sketch を使う上での基礎知識 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3基本操作 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

Preferences . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12General タブ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12Canvas タブ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15Layers タブ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17Plugins タブ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19Data タブ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21Libraries タブ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22Presets タブ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23Cloud タブ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24ドキュメントウィンドウ（Documents Window） . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24キーボードショートカット . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

Application Window . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29ツールバー . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30Touch Bar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30レイヤーリスト（Sidebar） . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31コンポーネントパネル（Sidebar） . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31インスペクタ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32キャンバス . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

Update . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34Sketch 68 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34Sketch 67 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34Sketch 66 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35Sketch 65 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36Sketch 64 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3643より採用された新しいファイルフォーマットについて . . . . . . . . . . . . . . . . . . . . . 37ダウンングレードする . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

CONTENTS

履歴 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

Introductionこの書籍について

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

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

Sketchとは

Sketchは Sketch B.V.が開発するベクタードローイングツールです。

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

Sketchはリリース当初、ベクターグラフィックツールと名乗っていましたが、次第に UIデザイン分野にフォーカスし、その人気を不動のものにしてきました。最近では Figmaや Adobe XD などの競合とされるツールが続々と登場しており、Sketchが最も優位性のあるツールというわけではありませんが、長くアップデートを繰り返した完成度には高いものがあります。

Introduction 2

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

特に「このツールを使っておけば、今後も安心」といったことではなく、それぞれのツールの特性を理解し、ケースバイケースで使い分けが必要となってくるでしょう。

デザインツールそれぞれに特徴があります。その中でも Sketchでは、サードパーティが提供しているウェブサービスへの対応が多く、足りない機能は強力なプラグインシステムによって拡張することができます。

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

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

• macOSMojave 10.14.6 + Sketch 68で執筆・確認しています。公開されているVersion history¹を元にアップデート内容を確認しておりますが、完全に検証できていない場合もあります。また、最新版を元にしているため、古い Sketchでは書籍に掲載している内容と実際の機能に違いがでる場合もあります。

• 内容の修正については、アップデートで変更があった部分を優先的に差し替えているため、スクリーンショットが古いままになっている場合があります。

• ショートカットは US配列キーボードを前提に設定されているため、JIS配列キーボードでは正しく動作しない場合があります。

• Leanpub を利用して電子書籍を生成しているため、レイアウトなどはシステムに依存です。また画像が圧縮された結果、実際の表示とは異なる可能性もありますので、合わせてご了承ください。

この電子書籍以外の書籍をお探しの方

その他の書籍としては、2018年11月16日に発売されたUIデザイナーのための Sketch入門＆実践ガイド改訂第2版（BNN新社・著者吉竹遼氏）²があり、基本的な使い方からチュートリアルまで幅広く学べます。

¹https://sketchapp.com/support/updates/²https://amzn.to/2DCXiM7

https://sketchapp.com/support/updates/https://amzn.to/2DCXiM7https://amzn.to/2DCXiM7https://sketchapp.com/support/updates/https://amzn.to/2DCXiM7

Sketchの基礎Sketchを使う上での基礎知識

UIは日本語未対応

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

日本語訳が必要な場合は、筆者が意訳したものをブログで公開していますので、こちらをご参照ください：「Sketch（Sketch 3）のメニューと環境設定を日本語へ意訳をしましたよ。（http://creative-tweet.net/blog/2014/04/japanese-translation-for-sketch3.html）

http://creative-tweet.net/blog/2014/04/japanese-translation-for-sketch3.html

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

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

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

アートボードサイズに紙の規格サイズがプリセットされていますが、1inch を72px として算出された値になっています（つまり10mm � 28.3px）。

Sketch自体は pxに固定されているため、mmや cmなどの単位で指定するには pxへの換算が必要となる上に CMYK を扱えません。PDF として書き出しはできますが、商業印刷向けのデータを作成することは避けましょう。

それ以外、例えばクライアントへ提出するドキュメントなど、カラープリンターなど印刷の品質が問われないのであれば。ビットマップレイヤー以外はベクターデータとして PDF化されますので、解像度も気にする必要はありません。

ただし、PDF を圧縮することができないため、画像やシンボルインスタンスを大量に使っているとファイルサイズが肥大化します。PDFが編集できるツールでが別途必要です。

http://creative-tweet.net/blog/2014/04/japanese-translation-for-sketch3.htmlhttp://creative-tweet.net/blog/2014/04/japanese-translation-for-sketch3.html

Sketchの基礎 4

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

レイヤーやシンボルインスタンスが多かったり、Shadowや Backgound Blurがあったりすると、描画が遅くなる傾向があります。これはグループ化を適宜することで、ある程度は回避することができます。またページをうまく利用し、レイヤー数をコントロールしましょう。

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

ヘルプドキュメントの検索

「Help → Search」から、ウェブ上にあるヘルプドキュメントを検索することができます。また、メニュー項目もキーワードがヒットすればハイライト表示できますので、アップデートでいつも使っているメニューがなくなってしまった場合は、検索してみるとよいでしょう。

Sketchの基礎 5

シンプルな文字周りの扱い

文字周りは最低限の機能です。日本語（和文）自体の扱いに問題はありませんが、当然ながら細かい組版や縦書きのサポートなど、日本語（東アジア圏）特有の機能はサポートされていません。タイポグラフィは他のアプリに任せたほうがよいでしょう。

また行間を任意に設定すると、バウンディングボックスがずれるという挙動があります。

Sketchの基礎 6

基本操作

コピー＆ペーストと複製

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

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

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

Sketchの基礎 7

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

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

Sketchの基礎 8

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

クリップボードの内容が SVG コードだった場合、SVG をそのままペーストできます。

レイヤーの描画

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

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

レイヤーの選択

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

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

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

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

レイヤーの移動

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

移動距離を調整するには、Preferencesの Canvasにある「Nudging」の値を変更します。上側が矢印キーのみを押した場合の移動距離、下側が Shift キーを併用した場合の移動距離の設定です。

Sketchの基礎 9

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

レイヤーのサイズ変更

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

Sketchの基礎 10

スマートガイド

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

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

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

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

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

編集モード

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

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

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

Sketchの基礎 11

プラグインを無効化して Sketchを起動する

Sketch を起動する際に「Shift」キーを押しておくと、プラグインをすべて無効化した状態で立ち上がります。Sketchがうまく起動できないときは試してみるとよいでしょう。

カラーマネージメント

カラープロファイルは、「sRGB」と「P3」の2つを使うことができます。「File → Change ColorProfile」（ショートカット：Command + Shift + K）より、使用するカラープロファイルを選択してください。

「Unmanaged」は、これまでの Sketch同様で、カラーマネージメントをしない設定です。描画等のパフォーマンスは多少上がるようですが、表示されているものと書き出したものの色の精度が低下します。

「sRGB」はWindowsでも使われており、幅広い機器が対応しているプロファイルです。またウェブブラウザでは、カラープロファイルがない場合 sRGB として扱います。

「P3」は Appleが策定したカラープロファイルで、sRGB よりも25%広い色域をカバー、つまり表現できる色数が多いことが特徴です。今のところ iPhone 7以降・iPad Pro・MacBook Pro といった、Appleのデバイスを中心に対応しています。

ファイルサイズ圧縮をするツール（例：ImageOptim）等で、カラープロファイルが破棄されてしまう場合、P3でカラーマネージメントされたファイルは本来の色で表現できなくなります。そのため、主にウェブや Android向けであれば sRGB、iOSや Mac向けであれば P3ときちんと使い分けましょう。

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

Generalタブ

Appearance

Sketch全体の外観モードのカラーを次の中から設定できます。

System Defaultシステム環境設定の設定を使用します。

Light Modeシステム環境設定の設定かかわらずライトモードを使用します。

Preferences 13

Dark Modeシステム環境設定の設定かかわらずダークモードを使用します。

Canvas

キャンバス領域のカラーを次の中から設定できます。

Sketch Default上記 Appearanceの設定に準じます。

Light CanvasAppearanceの設定にかかわらず明るいキャンバスに設定されます。

Dark CanvasAppearanceの設定にかかわらず暗いキャンバスに設定されます。

Auto Save

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

Bitmap Import

「Scale down images to fit Artboards」のチェックをオンにすると、読み込んだビットマップをアートボートに合わせて縮小します。

Vector Import

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

Artboard Export

「Share→ Export Artboards to PDF」で、ドキュメントのアートボードを一括で書き出す際の順番を設定します。

「From the Layer List」の項目は、レイヤーリストの並びを基準とし、次の設定が可能です。

Top to bottomレイヤーリストの上から下に向けて書き出します。

Preferences 14

Bottom to Topレイヤーリストの下から上に向けて書き出します。

「From the Canvas」はキャンバス上の並びを基準とし、次の設定が可能です。

Left to right左上のアートボードから右へ進み、右端まで行くと下段の左端のアートボードへ移動した上で、右に進みながら書き出します（いわゆる Z字）。デフォルトの設定です。

Right to left右上のアートボードから左へ進み、左端まで行くと下段の右端のアートボードへ移動した上で、左に進みながら書き出します。

Top to bottom左上のアートボードから下へ進み、下端まで行くと右側にある上端のアートボードへ移動した上で、再度下に進みながら書き出します。

Color Profile

ドキュメントで使用するカラープロファイルを選択します。選択した項目は、新規ドキュメントから適用されます。

既存ファイルのカラープロファイルを変更するには、「File → Change Color Profile」（ショートカット：Command + Shift + K）を選択してください。

Unmanagedカラーマネージメントをしない設定で、これまでの Sketch と同じ動作です。

sRGB IEC61966-2.1主にウェブで使われるプロファイルです。

Display P3Appleの比較的新しいデバイスで使われるプロファイルです。正しい色で表示するには、ディスプレイがこのプロファイルに対応している必要があります。比較的新しい iPhoneや iPad、MacBookなどが対応しています。

Privacy

Share analytics with SketchSketch改善のため、利用状況のデータを共有するかどうかを設定します。データは匿名で収集され、個人を特定するためには使われません。

Sketch Mirror

Sketch Mirrorの設定は、iOSアプリへ移動しました。

Preferences 15

Canvasタブ

Zoom

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

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

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

Preferences 16

［動画： Preferences - Zoom Back to Previous Canvas Position.mp4］

Nudging

矢印キーでの移動距離を設定します。上側が矢印キーのみを押した場合の移動距離、下側がShiftキーを併用した場合の移動距離です。

Colors

「Guide」はガイドラインやスマートガイドの表示色を設定します。「Meauring」は計測値を表示するときの色に使用されます。「Prototyping」はリンクやホットスポットレイヤーの色に使われます。

Preferences 17

Layersタブ

Preferences 18

Pixel Fitting

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

New Groups

「Select group’s content on click for new groups」のチェックをオンにすると、次回グループ化したレイヤーから、インスペクタの「Select group’s content on click」が自動的に有効化され、グループ内のレイヤーを直接選択できるようになります。

また「Select group’s content on click」オプションを無効にしている場合は、Command キーを押しながらクリックすることで、チェックした状態と同じ動作になります。

この設定が有効になる対象はそのグループのみで、グループ内のグループに内包されるレイヤーを選択するには、そのグループレイヤーの「Select group’s content on click」を有効にする必要があります。

Editing Shapes

チェックを入れると、オープンパスの編集時、始点となっているアンカーをクリックすると、クローズパスになります。チェックを外すと、編集対象のアンカーが切り替わるようになります。

Duplicating

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

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

Flatten bitmaps

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

Preferences 19

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

Pluginsタブ

プラグインの管理を行います。プラグインのアップデートがある場合、アップデートが可能です（アップデートの通知は、プラグイン側の対応が必要です）。

Preferences 20

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

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

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

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

［Update All］ボタンで、アップデート可能なすべてのプラグインをアップデートします。

Preferences 21

Dataタブ

テキストや画像をあらかじめ準備しておくことで、Symbol Overrides をはじめ、テキストレイヤーやPattern Fill・画像のデータとして使うことができます。

Data を登録するには、右下の［Add Data…］からテキストや画像を入れたフォルダを選択するか、この Preferencesパネルへドラッグ & ドロップします。

Preferences 22

Data を一時的に無効にする場合は、Data項目のチェックボックスをオフにします。

削除は右クリックまたは右下の歯車アイコンから「Remove “DATANAME”」を選択してください。

詳しい使い方はData をご覧ください。

Librariesタブ

Preferences 23

Sketch ファイルを登録し、登録されたファイルにあるシンボルやレイヤースタイル・テキストスタイルをドキュメント間で共有する機能です。Sketch Cloud で共有されているライブラリがある場合、［Install］ボタンが表示されます。

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

［Add Library…］ボタンで Sketch ファイルを選択し、ライブラリへ登録します。ウィンドウへドラッグ& ドロップでも登録可能です。

Presetsタブ

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

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

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

Preferences 24

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

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

Cloudタブ

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

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

ドキュメントウィンドウ（Documents Window）

Sketch Cloudへ保存したドキュメントを一覧するウィンドウで、「Window → Documents」から表示できます。

Preferences 25

サイドバーにある「Recent Documents」では、最近開いたドキュメントが表示されます。内容は「File → Open Recent」と同じため、ローカルドキュメントも表示されます。

「Templates」には、「File → New From Templates」と同じ項目が表示されます。ただし、フォルダでグループ分けしている場合は、フォルダ内は表示されません。

Sketch Cloudへログイン済みの場合、個人スペースである「PERSONAL」と、チームに所属している場合はチームのドキュメントが表示されます。

ローカルにある Sketch ファイルをドラッグ & ドロップして、Sketch Cloudへ保存し直すこともできます。

キーボードショートカット

Sketchの Preferencesではありませんが、OSのシステム環境設定のキーボードから設定します。

Preferences 26

ショートカットタブを選び、左のリストから「アプリケーション」を選択します。

Preferences 27

［＋］ボタンをクリックしダイアログシートを表示したら、アプリケーションから「Sketch」を選択し、メニュータイトルにはメニュー項目を入力します（例えば「Create Symbol」）。大文字小文字は区別されますので、正確に入力しましょう。

また同じ名前のメニュー項目が複数ある場合、親になっているメニュー項目と「->」でつなげて入力します（例えば「Text->Kern->Use Default」）。

ショートカットにフォーカスを移し、ショートカットにしたいキーを押します。このとき、Commandキーか Controlキーのどちらかが含まれている必要があります。

Preferences 28

Sketchに戻って、設定が反映されているか確認します。

Application Window

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

Application Window 30

ツールバー

ウィンドウ上部にあるのがツールバーです。メニューのショートカットアイコンが並んでおり、メニューバーから選択する手間が省くことができます。

ツールバー上で表示するコンテキストメニューより、「ツールバーのカスタマイズ」や表示を切り替えることができます。

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

Touch Bar

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

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


レイヤーリスト（Sidebar）

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

レイヤーリストの上部には現在のページ名が表示されます。ページ名の右にあるをクリックすると、ページリストを表示できます。

また、下部にある「Filter」はレイヤー名でレイヤーリストの絞り込みができます。（ショートカット：Command + F）

「View → Show Sidebar」（ショートカット：Command + Option + 1）で表示・非表示を切り替えます。

コンポーネントパネル（Sidebar）

レイヤーリストと同じ位置に、シンボルやスタイルを管理するコンポーネントパネルがあります。

上部の「LAYERS」と「COMPONENTS」のラベルでレイヤーリストとコンポーネントを切り替えます。


レイヤーリストと同じく下部にある「Filter」で、コンポーネントの絞り込みができます。（ショートカット：Command + F）

インスペクタ

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

インスペクタで数値を入力するテキストボックスでは、四則演算が可能です。またテキストボック


ス下のラベル（下にラベルがない場合は、その項目のラベル）部分を左右にドラッグすることでも数値の変更ができます。

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

プラグインをインストールすると項目が追加される場合があります。

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

キャンバス

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

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

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

UpdateSketch 68

バージョン68のリリースノートをざっと翻訳しました → オリジナルのリリースノート：https://sketchapp.com/updates/#version-68³

Say Hello To Assistants今回のリリースでは、デザインをお手伝いするアシスタントを紹介します。アシスタントは自動的にドキュメントをチェックし問題点を見つけ出し、デザインシステムとの一貫性を保ち、コラボレーションのためにファイルを準備し、チームのルールに準拠できます。新しい Assistantsディレクトリで詳細を確認したり、Assistants を探してダウンロードしたり、ドキュメントを見てそれらの動作を確認したりできます。

機能改善

• 前回のリリースで、ドキュメントウィンドウからアップロードやリネーム、クラウドドキュメントの削除ができるようになりました。今回のリリースでは、ドキュメントウィンドウのサイドバーからクラウドプロジェクトの追加やリネーム・削除ができます！

Sketch 67

バージョン67のリリースノートをざっと翻訳しました → オリジナルのリリースノート：https://sketchapp.com/updates/#version-67⁴

パフォーマンスの改善アプリを高速化するために努力を続けており、今回のリリースには重要なアップデートが含まれています。シンボル周りのコードを整理したため、（特に複雑なドキュメントにおいて）レスポンスが非常に良くなっていると感じられるでしょう。また、Shadowやレイヤーの Background blur・Saturation周りのパフォーマンスのボトルネックになっていたさまざまな問題を修正しました。小さな変更をたくさん施しましたが、すべて Sketchがよりスムースで高速になるためです。

フォントのドキュメント埋め込みこのリリースでは、フォントファイルをそれぞれのドキュメントに埋め込むオプションを導入されています。任意のドキュメントで「Text > Document Fonts…」を選び、埋め込みたいフォントを選択してください。フォントの埋め込みは他の人とのドキュメント共有がしやすくなり、適切なフォントがインストールされていない場合でも、テキストレイヤーが正確にレンダリングされます。

³https://sketchapp.com/updates/#version-68⁴https://sketchapp.com/updates/#version-67

https://sketchapp.com/updates/#version-68https://sketchapp.com/updates/#version-67https://sketchapp.com/updates/#version-68https://sketchapp.com/updates/#version-67

Update 35

機能改善

• Select Allがスマートによりコンテキストを認識するようになりました。デフォルトでは、現在のグループ内のすべてのレイヤーを選択します。再度 Select All を使うと、次のグループにまで選択範囲が拡張されます。アートボードを選択して Select All を使うと、代わりにすべてのアートボードが選択されます。2つ以上のアートボードからレイヤーを選択している場合、SelectAllはすべてのアートボードの内容を選択します。

• グループ内外のレイヤーを選択して、Smart Distribute と Tidyが使えるようになりました。• スライスがたくさんあるドキュメントにおいて、特にコンテンツへズームインしたときのパフォーマンスを改善しました。

• ドキュメントウィンドウからクラウドドキュメントの名前を変更できるようになりました。ドキュメントのサムネールの下にある名前をダブルクリックするか、右クリックから Rename を選択してください。

• 開発者に向けて、Sketchtoolのレイヤー書き出しコマンドに新しい --suffixingオプションを追加しました。このオプションを使うと、ユニークではない名前のレイヤーが他を上書きせずに書き出しが可能です。

• ネットワーク状況が悪くクラウドドキュメントが読み込めないとき、ドキュメントウィンドウに表示されるエラーメッセージを改善しました。

• ドキュメントウィンドウ内のサムネールで右クリックして「Delete Document…」を選択するまたは Backspaceキーでドキュメントが削除できるようになりました。

• クラウドライブラリを作成したときのクリック数を節約しました。「File > Add as Library」を選択して、アプリから直接クラウドドキュメントをクラウドライブラリに変換できるようになりました。

• ローカルドキュメントをドキュメントウィンドウへドラッグ & ドロップし、クラウドへ保存できるようになりました。表示される保存ダイアログで、保存したいワークスペースやプロジェクトを確認します。ドキュメントをパーソナルまたはチームワークスペースのライブラリドラッグした場合、自動的にライブラリになります。

• テキストレイヤーで絵文字を使用しても、レイヤーの Line height と Vertical Rhythmが拡がらなくなりました。つまり、絵文字を好きなように使ってもすべてがパーフェクトに揃います。

Sketch 66

バージョン66のリリースノートをざっと翻訳しました → オリジナルのリリースノート：https://sketchapp.com/updates/#version-66⁵

バグ修正と改善私たちは非常にエキサイティングな次のリリースの仕上げにかかっているため、今回は一歩下がって重大なバグ修正と重要な改善点に焦点を絞り、よりよい体験につながるようにしました。

⁵https://sketchapp.com/updates/#version-66

https://sketchapp.com/updates/#version-66https://sketchapp.com/updates/#version-66

Update 36

機能強化

• 低速なネットワーク接続でも、より信頼性の高い方法で大きなクラウドドキュメントのアップロードを実行します。オンラインにも関わらず Sketchがインターネットに接続できないというエラーを表示していた場合、このリリースで解決します。

• メニューやコンポーネントパネルにおいて、白または黒のシンボルが見えづらいという問題は、このリリースで解消されます。シンボルのプレビューではマスターに設定した背景色または白・黒の背景色が適用され、見つけやすくなります。

• 一貫性を保つため Prototyping メニューの名前を“Prototype”に変更しました。• 裏側では、アプリのパフォーマンス改善を懸命に取り組んできました。非常に複雑なドキュメントで作業していれば、このアップデートで改善の恩恵を感じることができるではずです。またまだありますので、もうすぐもっとキビキビとスムースになることでしょう。

Sketch 65

バージョン65のリリースノートをざっと翻訳しました → オリジナルのリリースノート：https://sketchapp.com/updates/#version-65⁶

新しいプロトタイピングのスクロール効果このリリースで、プロトタイプのリンクをクリックしたとき、アートボードのスクロール位置を維持する、“Maintain scroll position after click”オプションを導入しました。これにより、より自然に流れを中断させることなく、オーバーレイの要素やステート変更を作成できます。

機能強化

• iOS アプリ Mirror もアップデートされ、新しいプロトタピングのスクロール効果も動作サポートとともに iOS 13との互換性が向上とバグ修正を行いました。アップデートは AppStoreから入手できます。

• 以前は、ドキュメントウィンドウのサイドバーにあるクラウドプロジェクトの数を20に制限していましたが、これからは制限なくすべてのプロジェクトを閲覧できます。

• グループの書き出し設定のオプションに透明ピクセルをトリムするオプションを追加しました。これを有効にしたとき、グループ内のレイヤーの周りにある透明ピクセルは書き出したアセットでは表示されなくなります。

• コードの大掃除と整理を実施し、シンボル作成や作業が少し早くなったと感じられるはずです。

Sketch 64

バージョン64のリリースノートをざっと翻訳しました → オリジナルのリリースノート：https://sketchapp.com/updates/#version-64⁷

⁶https://sketchapp.com/updates/#version-65⁷https://sketchapp.com/updates/#version-64

https://sketchapp.com/updates/#version-65https://sketchapp.com/updates/#version-64https://sketchapp.com/updates/#version-65https://sketchapp.com/updates/#version-64

Update 37

• より良い検索シンボルやスタイルを簡単に直感的に検索できるようになりました。あいまい検索が実装され、コンポーネントを見つけるために正確な名前を入力する必要がなくなりました。検索結果をすっきりとさせ見やすくし、検索バーを「コンポーネントパネル」「レイヤーリスト」「コンポーネントパネル」の上部へ移動させました。

• Tintの導入 Tint を使うことで、複雑な解決策や複数のレイヤースタイルを必要とすることなく、シンボルまたはレイヤー全体の色を変更できます。また簡単にオーバーライドできるため、複数の状態を持ったアイコンを簡単に作成できます。Tintは、メニュー内のアイコンやタブのような、複数の不透明度を使う単色のシンボルとグループでの利用に適しています。シンボルまたはグループを選択したとき、インスペクタの Styleの見出しの下に Tintオプションが表示されます。

• コンポーネントメニューの改善フィードバックに基づいて、コンポーネントメニューを完全に設計し直し、お気に入りのコンポーネントメニューをもう一度使えるようになりました。同じグループのコンポーネントを切り替えたりドキュメントにあるすべてのライブラリからコンポーネントを簡単に検索できますが、そうした古いメニューがよかった方に、それらを元に戻したと喜んでもらいたいです。

機能強化

• Pixel Slate（1333 x 888）と Pixelbook（1200 x 800）をカバーするため、Chromebookのアートボードプリセットをアップデートしました。

• シンボルは好きですか？　ショートカットは？　そんなあなたのために！　シンボル周りの新しいショートカットを導入しました。「Command + Y」は Crate Symbol、「Command + Shift+ Y」は Detach form Symbol、「Command + Option + Shift + Y」は Detach all contents fromSymbolです。

• Unsplashデータプラグインを使って挿入した画像は、ドキュメントを小さく保ち、帯域幅を節約するため小さくなりました（@4xの代わりに @2x に）。検索フィールドの特殊文字の入力もサポートしました。

• もしたくさんのシンボルやスマートレイアウトを使っているドキュメントの作業に、少し速くより応答性が向上しました。

43より採用された新しいファイルフォーマットについて

Sketch 43より新しいファイルフォーマットが採用され、ドキュメント情報やレイヤー情報を記載したJSON ファイルとビットマップファイルを内包する ZIPアーカイブ形式になりました。

オープンなファイルフォーマットを採用したため、Git をはじめとしたバージョンコントロールシステムでの管理がしやすくなり、プラットフォームに関わらずさまざまなツールがリリースされることも期待されています（例えばWindows向けやブラウザを使った Sketch Viewerなど）。

JSON ファイルやビットマップファイルを取り出すには、Sketch ファイルの拡張子を zip に変更し展開するだけです。

Update 38

さらに、ZIP ファイルを展開してできたフォルダ内にあるファイルやフォルダを再び ZIP として圧縮したのち、拡張子を sketchに変更するだけで、Sketchファイルへ戻すことも可能です（ZIPファイルを展開して生成されたルートフォルダを圧縮した場合、エラーで開けませんのでご注意ください）。

ただ、JSONファイルを編集することもできますが、実は目に見えているレイヤー構造より複雑になっているため、直接 JSON ファイルを編集することは避けたほうが良いでしょう。

ダウンングレードする

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

https://sketchapp.com/updates/

ただし新バージョンで開いて保存してしまったファイルは、古いバージョンで開くことができない可能性があります（Auto Save を無効にしてる場合、開くだけなら問題ありません）。特にバージョンアップ後の不具合から、すぐにバグフィックス版がリリースされることが多く、場合によってはプラグインが動作しなくなる可能性もあります。

進行中のプロジェクトで使っている場合は、少し様子をみてからアップデートすると良いでしょう。⁸https://sketchapp.com/updates/

https://sketchapp.com/updates/https://sketchapp.com/updates/

履歴2020/8/31

• Sketch 68に合わせてアップデート– Assistantsの章を追加しました。

2020/7/4

• Sketch 67に合わせてアップデート– Preferencesにドキュメントウィンドウを追記しました。– Editにすべてを選択を追記しました。

2020/5/26

• Sketch 66に合わせてアップデート

2020/5/1

• Sketch 65に合わせてアップデート– Prototypingに画面遷移後のスクロールを維持するを追記しました。– Exportにグループ内の透明ピクセルをトリムするを追記しました。– Sketch CloudにInspector とアセットのダウンロードを追記しました。

2020/3/28

• Sketch 64に合わせてアップデート– Tint をインスペクタとSymbol Overridesへ追記しました。– コンポーネントの検索をアップデートしました。

2020/2/15


2020/1/25

履歴 40


2019/12/10


2019/11/22

• Sketch 60に合わせてアップデート– コンポーネントパネルを追記– シンボル・スタイル周りの記述をアップデート

2019/11/7


2019/9/18

• Smart Layoutの記述を修正

2019/9/17


2019/8/27


2019/8/5


2019/5/22


2019/4/24


履歴 41

2019/3/10

• HiDPI化できていなかった画像を HiDPI化しました。• Pathの Joinの記述が間違っていたため、修正しました。• 紹介しているプラグインマネージャのアップデートがされていないため、簡単な紹介に変更しました。

2019/2/8

• Sketch 53に合わせてアップデート– Sketch 53のリリースノートの一部を翻訳しました。– 画像の一部を HiDPI化しました。その影響で画像が小さくなっているものがありますが、順次対応します。

2018/10/8

• Sketch 52に合わせてアップデート– Sketch 52のリリースノートの一部を翻訳しました。

2018/7/12


2018/5/11


2018/3/5

• Sketch 49に合わせてアップデート– Sketch 49のリリースノートの一部を翻訳しました。こちらから変更箇所へリンクしています。

• Tools を「Prototyping」「Sketch Mirro」「Sketch Cloud」「SketchTool」に分割しました。

2017/12/7


履歴 42

– Sketch 48のリリースノートの一部を翻訳しました。こちらから変更箇所へリンクしています。

• おすすめプラグインへ SketchCleaner を追加

2017/10/11


2017/8/2


2017/7/1

• Sketch 45に合わせてアップデート• メニュー構成が変わったため、メニューの記述とスクリーンショットを大幅に差し替えています。

2017/5/20

• Sketch 44に合わせてアップデート• Resizingの設定方法が変わったため修正しました。• プラグインマネージャー Sketch Packs と skpm を追加しました。

2017/4/11

• Sketch 43に合わせてアップデート– 新しいファイルフォーマットについて追記しました。

• おすすめプラグインへ Bitmap Compressor・ImageOptim Sketch Plugin・Symbol Organizer・Auto Layout for Sketch を追加、Legacy Pluginで使えなくなったため、Plugin Request を削除

2017/1/25

• Sketch 42に合わせてアップデート– 書き出し設定のプリセットを定義できるようになりました。

2017/1/3

• 誤植や記述誤りを修正

履歴 43

2016/11/12

• Sketch 41に合わせてアップデート– Sketch 41のリリースノートの一部を翻訳しました。– Symbols/Styles -シンボルインスタンスにおいて、ネストしたシンボルを他のシンボルに切り替えが可能に

– Tools - Sketch Cloudでパスワードプロテクトが可能に

2016/9/21

• Sketch 40に合わせてアップデート– Sketch 40のリリースノートの一部を翻訳しました。– 複数レイヤー同時にパスの編集が可能になりました。

2016/7/23

• Sketch 39に合わせてアップデート– シンボル（グループ）のリサイズ設定

2016/5/23

• Sketch 3.8.1に合わせてアップデート（主に Sketch Mirror・Local Sharing を変更）

2016/4/15

• Sketch 3.7.0に合わせてアップデート（主に Symbols・Shared Style を変更）

2016/3/5

• Sketch 3.6.1に合わせてアップデート

2016/1/30

• Sketch 3.5.1に合わせてアップデート

2015/12/16

• Sketch 3.4.2-3.4.4のアップデート内容を確認• Bitmap - Fill replaces image を追記• Update - Mac App Storeでの配信中止をうけてセクションを追加

履歴 44

2015/11/9

• Sketch 3.4.1に合わせてアップデート• Plugins -おすすめプラグインプラグインを追記

2015/10/28

• Sketch 3.3.1〜3.4に合わせてアップデート• Knowledge of Sketch -ナッジの設定を追記• Knowledge of Sketch -スマートガイドに追記• Preferences - Auto-save を追記• Preferences - Plugins を追記• Canvas / Artboard -すべてのアートボード全体でグリッド・レイアウトの設定を追記• Layer List -アイコンでの表示/非表示・ロック/アンロックの方法を追記• Symbol / Styles - Symbol レイヤーのハイライトが紫になったことを追記• Type - Typeの Inspectorで四則演算が可能に• Mask -ビットマップレイヤーのマスク方法を追記• Plugins -おすすめプラグインプラグインを追記• Tools - Local Sharing を追記

2015/4/29

• Sketch 3.3に合わせてアップデート（ただし、スクリーンショットは旧バージョンと混在しています）

• Knowledge of Sketch -選択範囲に入ったレイヤーのみを選択する方法を追記• Knowledge of Sketch -選択しているレイヤーを、確実に移動させる方法を追記• Knowledge of Sketch -矢印キーのみで0.1px単位の数値を入力する方法を追記• Path -アンカーポイントの追加と削除を追記• Plugin - Sketch Style Inventry をSketch Mateに変更

2014/12/6

• Sketch 3.2に合わせてアップデート（ただし、スクリーンショットは旧バージョンと混在しています）

2014/11/5

• Tools を追加• Path - 「回転コピー（Rotate Copies）」を追記• Path - Joinの記述が間違っていたため修正• Export - 「SVGの書き出しオプション」を追記

履歴 45

• スクリーンキャストを15件追加（Alignment - Make Grid・Canvas-Artboard - Artboard・Canvas-Artboard - Canvas・Canvas-Artboard - Grid・Canvas-Artboard - Ruler, Guideline・Inspector -Layer Size・Inspector - Opacity・Layer - Find Layer・Layer - Layer Rename・Path - Join・Path- Rotate Copies・Path - Siccers・Preferences - Zoom Back to Previous Canvas Position・Tools -Install the sketchtool・Tools - sketchtool）

• 誤植や細かな言い回しの修正

2014/10/15

• Edit・Bitmap・Plugins を追加• Sketchの基礎 - レイヤー描画時に Shiftキーを併用した場合の動作を追記• Layers List - 「重ね順」「ロック」「表示非表示」を追記• Path - 「Round to Pixel」を追記• Types - 「プロポーショナルメトリックス」を追記• スクリーンキャストを4つ追加（パスの描画・Transform Layer・Text on Path・プロポーショナルメトリクス・）

2014/10/2

• Sketch 3.1に合わせてアップデート• Alignment を追加

2014/9/27

• Export・Mask を追加

2014/9/16

• パスを追加

2014/8/5

• シンボル・共有スタイルを追加• タイプ（文字）を追加

2014/7/21

• Borders（線）とEffects を追加• Inspector - レイヤー特有のプロパティに、Path / Slice / Bitmap / Artboard を追記• 誤植や細かな言い回しの修正

履歴 46

2014/7/19

• Fills（塗り）を追加• 誤植や細かな言い回しの修正

2014/7/14

• inspector を追加

2014/7/13

• Sketch3.0.4リリースに伴う変更（コピー＆ペーストの挙動、レイアウトグリッド）

2014/7/11

• リリース

目次Introductionこの書籍について

Sketchの基礎Sketchを使う上での基礎知識基本操作

PreferencesGeneralタブCanvasタブLayersタブPluginsタブDataタブLibrariesタブPresetsタブCloudタブドキュメントウィンドウ（Documents Window）キーボードショートカット

Application WindowツールバーTouch Barレイヤーリスト（Sidebar）コンポーネントパネル（Sidebar）インスペクタキャンバス

UpdateSketch 68Sketch 67Sketch 66Sketch 65Sketch 6443より採用された新しいファイルフォーマットについてダウンングレードする

履歴