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

Introduction

この書籍について

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

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

Sketchとは

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

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

デザインツールということで、PhotoshopやIllustratorと比較されることが多く、機能的な面でバージョンを重ねてきたこれらのアプリには及ばない部分は多岐に渡ります。しかし、UIにデザインに特化したツールならではの機能を備えながら、最低限必要な機能がコンパクトにまとまっており、これまでのツールとは異なるコンセプトで作られていることがわかるでしょう。

またAdobe Experience Design(XD)やAffinity Designer・Figmaなど、競合とされるツールが次々とリリースされています。

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

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

その中でもSketchは、サードパーティが提供しているウェブサービスへの対応が多く、足りない機能は強力なプラグインシステムによって拡張することができるため、旧来のワークフローでは考えられなかったことができるようになっています。

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

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

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

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

その他の書籍としては、2017年5月23日に発売されたUIデザイナーのための Sketch入門&実践ガイド(BNN新社・著者 吉竹遼氏)があり、基本的な使い方からチュートリアルまで幅広く学べます。

01_Sketchの基礎

Sketchを使う上での基礎知識

すべて英語

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

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

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

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

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

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

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

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

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

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

ドキュメントの検索

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

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

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

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

基本操作

コピー&ペーストと複製

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

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

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

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

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

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

レイヤーの描画

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

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

レイヤーの選択

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

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

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

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

レイヤーの移動

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

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

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

レイヤーのサイズ変更

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

スマートガイド

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

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

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

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

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

編集モード

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

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

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

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

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

カラーマネージメント

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

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

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

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

02_Preferences

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

Generalタブ

Auto-Save

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

Vector Import

Scale down images to fit Artboards」のチェックをオンにすると、読み込んだビットマップをアートボートと同じサイズになるように縮小します。

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
レイヤーリストの上から下に向けて書き出します。

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

Privacy

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

Sketch Mirror

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

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]

Nudging

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

Colors

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

Layersタブ

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が高解像度向けです。

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

Pluginsタブ

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

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

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

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

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

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

Librariesタブ

Sketchファイルを登録し、登録されたファイルにあるシンボルや共有スタイル・テキストスタイルをドキュメント間で共有する機能です。Sketch Cloudからダウンロードできるライブラリがある場合、[Download]ボタンが表示されます。

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

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

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

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

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

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

インスペクタ

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

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

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

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

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

キャンバス

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

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

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

Update

Sketch 51

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

  • ライブラリスタイル
    ライブラリにあるテキストスタイルおよびレイヤースタイルは、シンボル同様にすべてのドキュメントで利用できるようになりました。
  • ヘッダー&フッター
    Prototypeにおいて、ヘッダーやフッターなどの固定要素を含めることができるようになりました。この要素は、スクロールするときにコンテンツの上にとどまります。
  • 矢印
    矢印や他のマーカーの見た目を大幅に改善しました。
  • パフォーマンスの改善
    複雑なドキュメントの編集・キャンバスのレンダリングたくさんのOverridesを含むシンボルを選択するとき、Sketchのレスポンスを改善しました。

機能強化

  • 複雑なドキュメントで、シャドウを操作するときのパフォーマンスが改善されました。
  • テキストレイヤーは、コンテンツを表示するのではなく、ベースラインをハイライトします。
  • Sketch CloudのPreferencesで、エラーの読みやすさを改善しました。
  • Sketch Cloudへアップロードが失敗した場合のポップオーバーの動作を改善しました。
  • Typefaceポップオーバーのフォントプレビューのベースライン位置を改善しました。
  • 複数のオブジェクトを選択していてもインスペクタで四則演算が適用できるようになりました。
  • 無効にしたスタイルのカラーをクリックすると、スタイルを有効化しカラーポップオーバー(カラーピッカー)が開きます。
  • レイヤーリスト上の大きなグループを展開・縮小するときのパフォーマンスを改善しました。
  • 共有ライブラリの更新頻度を上げました。
  • アプリが予期せず終了した場合、再起動するとSketchプラグインは一時的に無効化されます。
  • Prototypeのリンクが多くある大きなドキュメントで、パフォーマンスを改善しました。
  • Sketchライブラリを追加するプロトコルとして、RSSフィードが追加されました。
  • たくさんのOverridesされたシンボルを含むアートボードをドラッグしたときのスピードを改善しました。
  • Background blurを使ったレイヤーのパフォーマンスを改善しました。
  • 大きな画像の一部分を描画するときのパフォーマンスが向上しました。
  • 回転ツールの中心点を調整したときのスナップを改善しました。
  • 回転したテキストレイヤーがあるシンボルで、Overridesの処理を改善しました。
  • たくさんネストされたOverridesを含むドキュメントにおいてパフォーマンスを改善しました。
  • テキストの揃えがデフォルトテキストスタイルとして記憶されるようになりました。
  • Text transformationオプション(List typeオプションの間違い?)がTextメニュー内に表示されるようになりました。
  • Sketchは、テキストレイヤーの幅を固定から自動に変更したときや回転および反転したテキストレイヤーを編集するとき、垂直方向の揃えを適切に反映するようになりました。
  • アンカーポイントをドラッグしているときにシフトキーを押すと、隣接するポイントにスナップするようになりました(「隣接するポイント」=アンカーポイントやピクセルポイントではなく、自由な座標という意味でRound: Noneと同等に座標が丸められなくなります)。
  • インスペクタ上で特定のテキストスタイルのプレビューが正しく表示されないバグを修正しました。
  • 他のレイヤーと水平または垂直に分布するときに、線の太さが考慮されるようになりました。
  • インスペクタ上でシンボルと共有スタイルのパスの読みやすさを改善しました。
  • インスペクタのラベルをクリック&ドラッグして値を変更するとき、シフトまたはオプションキーを押すとそれぞれ10または0.1ずつ増減するようになりました。
  • マジックワンド選択ツールを削除しました。
  • アプリ内のすべてのカーソルの外観を改善しました。
  • 反転しているグループ内のシェイプを回転することで間違った方向に回転してしまうバグを修正するなど、レイヤーを回転させる時の動作を改善しました。
  • インスペクタ上で複数の書き出しプレビューの見た目を改善しました。

Sketch 50

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

新しい機能

  • より最適なベクターの読み込み・書き出し:SVG・EPSおよびPDFファイルの読み込みと書き出しに関するさまざまなバグを修正しました。
  • パフォーマンス:シンボルやOverridesを多く含む複雑なドキュメントの編集を、これまでより高速でレスポンスが向上しました。

機能強化

  • Sketch Cloudでのドキュメント共有の体験を改良しました。
  • ツールを切り替えたときCanvas上でカーソルを正しく更新します。
  • Canvas上にカーソルを乗せたときのパフォーマンスを改善しました。
  • PDF・EPSファイルのグラデーションの塗りのSketchへ読み込みを改善しました。
  • 書き出し可能なレイヤーにおいて、インスペクター上で書き出しプレビューを表示するようになりました。
  • インスペクターにおいて、シェイププロパティコントロールの配置を改善しました。
  • インスペクターにおいて、テキストフィールドを選択するとき、選択の挙動を改善しました。
  • ライブラリからシンボルを更新するとき、Overridesが保持される方法を改善しました。
  • プロトタイプのプレビュー中のレンダリングを改善し、遷移中に空白の背景が点滅するケースを減らしました。
  • 複数ページのPDFを読み込むと、ページごとにアートボードとして挿入できるようになりました。
  • すべてのレイヤーにおいて、Sketch APIのStyleプロパティのサポートが追加されました。
  • ダイアログやアラート上にプラグインやスクリプトのアイコンを表示できるようになりました。
  • スライスまたはホットスポットレイヤーの挿入するときのスナップの動作を改善しました。
  • プレビューウィンドウ上のバックボタンは、戻れないときは非アクティブになります。
  • キャンバス上で見つからないシンボルの見た目を改善しました。
  • たくさんのシャドウがドキュメントに含まれている場合のパフォーマンスを改善しました。
  • 塗りと外側の線を適用したシェイプのレンダリングパフォーマンスを改善しました。
  • 線と塗りが適用され、内側と外側の線を持つシェイプは、1つのSVG要素に結合されるようになりました。
  • 透過したレイヤーを含むSVGを書き出したときの処理を改善しました。
  • SVGを「Insert › Image… menu」から読み込めるようになりました。
  • Shared Text Styleのプレビューがメニューの背景色と一致したときの見た目が改善されました。
  • ベクターエディターにおいて、ハンドルが他のハンドルにスナップするようになりました。
  • シェイプ挿入時、レイヤーの境界ではなくパスの境界にスナップするようになりました。
  • 挿入するシェイプ(シェイプの描画中)は結合されたサブパスへスナップするようになりました。
  • シンボルを入れ替えたときOverridesを保持する方法が改善されました。
  • ネストされたシンボルのOverridesは、読みやすさの改善のためインスペクターにおいてインデントされました。
  • ネストされたシンボルのOverridesパネルにおいて、読みやすさの改善のため親が1つだけ表示されるようになりました。
  • 新しく挿入したテキストレイヤーは、最後に使った上下揃えの設定を記憶するようになりました。
  • 誤って原点を動かしてしまわないように、ルーラーをロックできるようになりました。
  • オープンパスを結合するときのJoinの動作を改善しました。
  • 多数のレイヤーを操作しているときのパフォーマンスを改善しました。
  • ドラッグ&ドロップで大きな画像をSketchへ挿入する機能が改善されました。ドロップ先のアートボードに応じてスケールするか、Optionキーを押しておくことでオリジナルサイズで挿入することができます。
  • “Remind Me Later”機能は24時間以内に1度だけアップデートを確認するようになりました。
  • グリッドを作成するときのパフォーマンスを改善しました。
  • アートボード内の任意のレイヤーを選択しているとき、アートボードへズームできるようになりました。
  • 大きな画像をSketchへ読み込むときのパフォーマンスを改善しました。
  • キャンバス上でレイヤーの選択およびマウスを課されたときのパフォーマンスを改善しました。
  • キャンバス上に隠しているレイヤーの選択ハンドルが表示されるようになりました。
  • 見つからないフォントのダイアログを表示中に、そのフォントがインストールされるとそれを認識するようになりました。

Sketch 49

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

新しい機能

  • Prototyping:リンクやホットスポットレイヤーでアートボードを繋ぎ、あなたのデザインプロトタイプを作成し、Sketch PreviewやSketch Cloud、iOSのSketch Mirrorで表示できるようになりました。
  • Libraries on Sketch Cloud:Sketch Cloudへアップロードしたファイルからライブラリへダイレクトにインストールできるようになりました。
  • Apple UI Design Resources:AppleオフィシャルのiOS 11 UI KitをSketchライブラリにビルドインしました。

機能強化

  • 大きなアートボードをコピー&ペーストしたときのパフォーマンスを改善しました。
  • スポットカラーを使用しているEPSの読み込みを改善しました。
  • カラーピッカー上のグラデーションポイントの挿入を、ダブルクリックではなくシングルクリックでできるようになりました。
  • レイヤーリストからレイヤーをキャンバスにドラッグすると、ビットマップレイヤーではなくレイヤーをコピーするようになりました。
  • ライブラリから読み込んだ使っていないシンボルは、ドキュメントを保存したときに削除されます。
  • インスペクタ上のレイヤースタイル・テキストスタイルの見た目をアップデートしました。
  • SketchToolプラグインの実行が完了するのを待ってから結果を出力します。
  • より洗礼され使いやすくなったスクリプトAPIの新バージョンを搭載しました。
  • プラグインAPIは、シンボルをサポートするように拡張されました。
  • Sketch Mirrorで選択したアートボードを表示する設定は、iOSアプリに移動しました。
  • Viewメニューでキャンバスのスライスを隠せるようになりました。
  • レイヤーの移動やリサイズしたときのパフォーマンスを改善しました。
  • 読み込んだSVGの反転や回転した要素の扱いを改善しました。
  • 新しく作成したシンボルが“Symbols”ページへ追加される方法が改善されました。
  • メニュー内のシンボルサムネールのパフォーマンスが改善されました。
  • 複雑なドキュメントでシンボルを操作するときのパフォーマンスを改善しました。
  • ネストされたシンボルでの「Replace With」メニューが改善され、そのシンボルを含む親シンボルで置き換えられないようになりました。
  • Control + Clickで“Symbols”ページへシンボルマスターを送ることができるようになりました。
  • 保存パネルにあるビットマップの書き出しオプションの説明とレイアウトを改善しました。
  • ベクター編集のとき、Commandキーを押しながらパスのセグメントをドラッグすると、曲線の作成または調整できるようになりました。
  • 元のパスのアウトラインが表示されるようにベクター編集中の角丸の外観を改善しました。
  • ベクターツールで、直線を描画するためにShiftキーを押しているときのスナップを改善しました。
  • Penツール(ベクターツール?)を使っているとき、新しい(アンカー)ポイントのプレビューが表示されるようになりました。
  • 新しい“Prototyping Tutorial”テンプレートを追加しました。
  • 選択範囲をレイヤーリストの最上位に送る“Move to Top”オプションをArrangeメニューに追加しました。
  • ドキュメント内の見つからないフォントを検知するときのパフォーマンスを改善しました。
  • グリッド内のオブジェクトの配置はレイヤーリストに基づいて並び変えるのではなく、キャンバス上の位置を優先するようになりました。
  • Sketchを改善するために、匿名の解析トラッキングをオプトインすることがきます。
  • コピーしたCSS属性にテキストの揃えを含めるようになりました。
  • Find and Replace Colorパネルの色の並び順を改善しました。
  • 色のプロパティが検索及びよく使う色のメニューに追加されました。
  • グラデーション上にグラデーションストップを挿入する制度が改善されました。
  • Scissorツールが選択している複数のシェイプで動作するようになりました。
  • Spotlightアイコンのアートボードがなかったため、iOS icon templateをアップデートしました。
  • 書き出し時に、インターレースPNGを選択できるようになりました。

Sketch 48

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

新しい機能

  • Color Management:Sketchでは、sRGBおよびP3の色空間での作業やドキュメントの書き出しをサポートしました。
  • Find and Replace:ドキュメント内で使っているカラーを検索できるようになり、ドキュメント全体で置換することもできます。
  • Sketch Cloud:Sketch CloudからSketchファイルをダウンロードできるようになりました。Sketch Cloudで共有すると、そのコンテンツそのものがアップロードされます。
  • Symbol Scaling:シンボルインスタンスは、シンボルマスターとは独立して、Scaleコマンドを使ってスケーリングできるようになりました。

機能強化

  • インポートされたシンボルはドキュメント間でコピー&ペーストされたとき、ライブラリにリンクされたままになりました。
  • ライブラリのプレビューは、ライブラリのドキュメント内で“Library Preview”というアートボードを作成すると追加されるようになりました。
  • たくさんのSymbol Overridesの機能を使用したドキュメントのパフォーマンスが向上しました。
  • ビルドインされている「iOS UI Design」ライブラリをiOS 11にアップデートしました。
  • PDFで、矩形ではないアウトラインマスクのインポートを改善しました。
  • 起動時にShiftキーを押しておくと、すべてのSketchプラグインを無効にします。
  • シャドウのspreadを負の値に設定して、オブジェクトの影の投影サイズを小さくすることができます。
  • たくさんの他のアートボードを含むページから、アートボードを書き出すときのSVGの書き出しのパフォーマンスを改善しました。
  • Sketch CloudのUIの改良と、リクエストのあったプライベートなドキュメント共有機能を追加しました。
  • Sketch Cloudへアップロード中に、アップロードをキャンセルできるようになりました。
  • 値がオーバーライドされた場合、ネストされたシンボルオーバーライドの表示方法が改善されました。
  • 異なるウェイトを使っているテキストの部分選択におけるフォントの置換を改善しました。
  • ツールバーに現在使っているツールを表示します(ハイライトされるようになりました)。
  • 塗りと線を素早く切り替えるショートカット(FとB)が、ベクター編集でも機能するようになりました。
  • アウトライン化したテキストレイヤーなど、複雑な形状に適用したシャドウのアピアランスを改善しました。
  • 複数のブーリアン演算(結合)、特に重なり合った形状を型抜きしたときの結果を改善しました。
  • 塗りがなく細い線のシャイプの選択を改善しました。
  • スムースコーナーとシンボルスケーリングを含めて、“iOS App Icon”テンプレートをアップデートしました。
  • シンボルでレイヤーを置き換えたとき、シンボルは以前のレイヤーと同じサイズを継承するようになりました。
  • Androidのアートボードプリセットの名前が正しく設定されるようになりました。
  • ビルドインされているiOS UI Design Library内のiPhone X ステータスバーのシンボルの余白を改善しました。
  • 拡大ツール(スポイトツール)で、選択または重なったピクセルの色を決定するとき、ドキュメントの色空間を使用するようになりました。

Sketch 47

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

新しい機能

  • ライブラリを内蔵:ドキュメントや他のデザイナー間でシンボルを共有することができます。→Libraries
  • Smooth Corners:矩形の角丸のカーブを調整し、iOSで使われている効果を実現できるようになりました。→Smooth Corners

機能強化

  • 複雑なドキュメントでシャドウのパフォーマンスを改善しました。
  • ネストされたシンボルを編集するときのパフォーマンを改善しました。
  • シンボル・共有スタイル・テキストスタイルのアピアランスが改善され、余分なサブメニューを表示しなくなりました。(スラッシュで区切ったアイテムが1つの場合、サブメニューが表示されません)
  • パスの編集でアンカーポイント間の真ん中に新しいポイントを挿入するショートカットを、Command + クリックからShift + クリックへ変更しました。→アンカーポイントの追加と削除
  • “iOS UI Design”ドキュメントをライブラリとして内蔵し、iOS11とiPhone X向けにアップデート、アイコン及びUI要素にスムームコーナーを使うように更新しました。
  • Command + Eのショートカットで選択している個別のレイヤーを書き出せるようになりました。→書き出し
  • iPhone 8およびiPhone Xのアートボードプリセットを追加しました。

Sketch 46

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

新しい機能

  • プライベートシェアリング:Sketch Cloudからあなたのドキュメントを共有したい人を招待できます。→Sketch Cloundのドキュメントの設定
  • テキストの揃え:テキストレイヤーのバウンディングボックスに対する垂直方向の揃えを調整できるようになりました(要Fixed設定)。→Alignment
  • ヘルプトピックの検索:Sketchのヘルプメニューから関連するオンラインドキュメントを検索できるようになりました。→ドキュメントの検索

機能強化

  • ResizingオプションのFix WidthとFix Heightは、それらのラベルをクリックしても切り替えられるようになりました(これまではアイコンのみがヒットエリア)。
  • プラグインアップデートのインストールが早くなりました。(Updateボタンを押せばすぐにアップデートできるため、あらかじめダウンロードしているものと思われます)
  • インストールしているプラグインに互換性がない場合、Sketchは通知するようになりました。→Sketchのアップデートによる無効化
  • テキストレイヤーとの距離を計測するとき、Controlキーを押したままにすると、バウンディングボックスではなくBeselineまたはCap Heightとの距離を計測できるようになりました。→テキストレイヤー内の文字との距離計測
  • Insert > Styled Textメニューで、大きな段落スペース(Paragraphの値)を持つText Stylesのアピアランスを改善しました(Paragraph分のスペースがなくなりました)。
  • “Resize to Fit”をArtboardインスペクターへ表示されるように戻しました。→Artboard
  • Shareメニューから選択しているレイヤーを書き出せるオプションを追加しました。→書き出し
  • Shared Styleの同期(Control + S)とShared Styleのリセット(Option + Control + S)のキーボードショートカットを追加しました。→共有スタイルの変更・同期
  • フォントがない古いファイルを開くときの動作を改善しました。(フォントが見つからない場合、ウィンドウ右上に表示が出ます →インストールされていないフォントを置換する
  • Pixel Fittingの環境設定を単純化し、1つのオプションに減らしました。→Pixel Fitting

Sketch 45

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

新しい機能

  • プレゼンテーションモードは、UIを隠すだけでフルスクリーンにならないように再設計されました(タブ付きウィンドウでも機能します)。
  • プラグインはSketch内で自動的にアップデートを取得するようになりました。互換性のないプラグインは無効化されるため、Sketchをクラッシュさせることはありません。
  • アンカーポイントを挿入するときスマートガイドが表示され、新しいアンカーポイントが既存のアンカーポイントの軸にスナップするようになりました。
  • カラーポップオーバー(スウォッチ)がスクロールできるようになりました。さらにカラーピッカーを折りたたむことで、プリセットを表示するスペースを増やすことができます。

機能強化

  • プラグインを無効にした直後にプラグインメニューから削除されるようになりました。
  • 現在のアートボードを削除した場合、Mirrorの表示がドキュメントの一覧に戻るようになりました。
  • 矢印キーおよびShift+矢印キーでの移動距離をCanvas Preferencesで設定できるようになりました。
  • メニューにより一貫性を持たせ、使いやすく改善しました。
  • ベクター編集で最初のポイントをクリックしたとき、パスを閉じるかパスを選択するかのどちらかを選べる設定を追加しました。
  • 回転しているシェイプを選択するときの精度が向上しました。
  • アートボードを“Resize to Fit”でリサイズしたとき、外側の線や影のオフセットを含めるようになりました。
  • Layer › ConstraintsメニューにLayer Resizingのショートカットが設定されました。

プラグイン周りは必ずアップデートを確認しましょう。

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

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

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

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

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

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


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

移行期間はすでに過ぎてしまいましたので、あらためてライセンスを購入しましょう。過去に作成したスウォッチ等は移行することができます。

移行方法

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

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

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

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

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

Mac App Store版の設定保存先
~/Library/Containers/com.bohemiancoding.sketch3.beta/Data/Library/Application Suppor\
t/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を無効にしてる場合、開くだけなら問題ありません)。特にバージョンアップ後の不具合から、すぐにバグフィックス版がリリースされることが多く、プロジェクトで使っている場合は少なくともこのバグフィックス版が出るまで待った方がよいでしょう。

履歴

2019/5/11

2019/3/5

  • Sketch 49に合わせてアップデート
  • Toolsを「Prototyping」「Sketch Mirro」「Sketch Cloud」「SketchTool」に分割しました。

2017/12/7

2017/10/11

2017/8/2

2017/7/1

2017/5/20

2017/4/11

2017/1/25

2017/1/3

  • 誤植や記述誤りを修正

2016/11/12

2016/9/21

2016/7/23

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での配信中止をうけてセクションを追加

2015/11/9

2015/10/28

2015/4/29

2014/12/6

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

2014/11/5

  • Toolsを追加
  • Path - 「回転コピー(Rotate Copies)」を追記
  • Path - Joinの記述が間違っていたため修正
  • Export - 「SVGの書き出しオプション」を追記
  • スクリーンキャストを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

2014/10/2

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

2014/9/27

2014/9/16

2014/8/5

2014/7/21

2014/7/19

2014/7/14

2014/7/13

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

2014/7/11

  • リリース