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

Introduction

この書籍について

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

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

Sketchとは

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

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

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

またAdobe XDやFigmaなど、競合とされるツールが次々とリリースされています。

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

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

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

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

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

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

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

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

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」を選べば、コンテキストメニューを出すためにクリックした位置へペーストすることができます。

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

レイヤーの描画

矩形や楕円などのツールを選択し、任意の場所からドラッグすることでレイヤーを描画することができます。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ときちんと使い分けましょう。

Preferences

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

Generalタブ

Appearance

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

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

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

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

Canvas

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

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

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

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

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

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」はガイドラインやスマートガイドの表示色を設定します。「Meauring」は計測値を表示するときの色に使用されます。「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]ボタンで、アップデート可能なすべてのプラグインをアップデートします。

Dataタブ

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

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

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

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

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

Librariesタブ

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

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

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

Presetsタブ

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

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

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

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

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

Cloudタブ

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

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

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 55

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

  • Smart Distribute(スマート配列)
    複数のレイヤーを素早く簡単に操作するため、Smart Distributeという機能を追加しました。行または列を選択し、それらの間に表示されるハンドルを掴みドラッグですべてのスペーシングを調整できます。現状では、Smart Distributeは一度に一方向でしか機能しません。
    Smart Distribute
  • SVGコードからレイヤーを生成
    SVGコードをSketchへ直接ペーストして新しいレイヤーを作成できるようになりました。

機能強化

  • ライン・矢印レイヤーと新しいシンボルは、より確実にグリッドにスナップします。
  • ドキュメント間でのページとシンボルは、より確実に早くコピー & ペーストできます。
  • レイヤーは回転したテキストにスナップするようになりました。

Sketch 54

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

  • ダークモードの切り替え
    システム環境設定とは独立して、ダークモードとライトモードの切り替えおよびダークキャンバスまたはライトキャンバスを選択できるようになりました。
  • スナップを改善
    スナップを大幅に改善し、スマートガイドが新しい見た目になりガイドカラーのカスタマイズできるようになりました。

スナップ

  • テキストレイヤーの高さをリサイズするとき、そのテキストにスナップするようになりました。
  • レイヤーをリサイズ中、レイヤーの同士の高さまた幅が一致したときにスナップするようになりました。
  • 新しいシンボルインスタンスを挿入するとき、スマートガイドが表示されるようになりました。
  • クリック&ドラッグで新しい固定幅のテキストレイヤーを挿入するとき、既存のレイヤーにスナップするようになりました。
  • アートボードをキャンバス内で移動したとき、自身のグリッドまたはレイアウトにスナップするバグを修正しました。
  • ピクセルの中央から新しいシェイプを挿入するときの動作を改善しました。
  • キーボードでレイヤーを移動したときも、スナップライン(スマートガイド)が表示されます。
  • 計測値が読みやすい新しい見た目になりました。
  • スマートガイドは新しい外観となり、環境設定からカラーを設定できるようになりました。
  • アートボード外にドラッグしたときのスナップを改善しました。
  • レイヤーのリサイズと移動をしたとき、スマートガイドが表示されます。

機能強化

  • 塗りのポップオーバーのImageタブでDataからイメージを適用できるようになりました。
  • 環境設定でキャンバスカラーがライトまたはダークから選択できるようになりました。
  • macOS Mojaveを使用しているユーザーは、システム環境設定とは独立してダークまたはライトモードを選択できるようになりました。
  • グループが選択されているとき、グループ内に適用されたDataをリフレッシュされる機能を追加しました。
  • Optionキーを押しながらインスペクターのカラーをクリックしたとき、システムのカラーパネルが表示されるようになりました。
  • アートボードをコンテンツに合わせるときに使う、インスペクタ内のFitボタンをクリックしやすく改善しました。
  • インスペクタ内の線のDashとGapプロパティで、値をクリック&ドラッグのスクラブで変更できるようになりました。
  • レイヤーリスト内でSymbol OverridesをControlクリックしたとき、Replaceメニューにアクセスできるようになりました。
  • Sketchは簡体字のサポートとシステムの言語設定を反映します。
  • シンボルマスターにあるOverridesのすべての表示非表示を切り替える機能を追加しました。
  • ツールバーボタンにあるアイコンの揃えを改善しました。
  • アートボードプリセットにGalaxy S10を追加しiPadのモデルをアップデートしました。
  • パスが閉じたシェイプで矢印が間違って適用されてしまう動作を改善しました。

Sketch 53

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

  • パフォーマンス
    多くのPrototyping flowを含む複雑なドキュメントを扱うときのパフォーマンスが大幅に向上しました。
  • Override管理
    Override可能なプロパティをシンボルマスターから直接管理できるようになりました。
  • Overrides
    レイヤーリストやキャンバス上で選択しているSymbolインスタンスから、Symbol内のOverridesを選択できるようになりました。 - スナップの改善
    リサイズまたは移動しているレイヤーにおけるスナップ処理を全体的に大幅な改善をしました。

機能強化

  • Prototypingの再生において、前のスクリーンに戻ったときのスクロール位置を記憶するように改善しました。
  • 選択した複数レイヤーのインスペクタプロパティを調整するときのパフォーマンスが向上しました。
  • 非Retinaディスプレイにおけるレイヤーリストのアイコンの見た目をよりよく改善しました。
  • ドキュメントカラーへ追加されたカラープリセットはLibrariesに含まれるようになりました。
  • キャンバスにたくさんのアートボードを含むドキュメントのパフォーマンスがさらに向上しました。
  • レイヤーをリサイズしているとき、ほかのリサイズハンドルを非表示にします。
  • 選択しているすべてのアートボードにおいて、GridとLayoutの表示を切り替えることができます。
  • インスペクターからSymbol oversireのマスターへ移動する機能を追加しました。
  • Sketch内でリモートLibrariesで利用可能なアップデートを通知する方法を改善しました。
  • Convert Outlines機能が改善され、小さい範囲で色の異なるテキストと下線などの装飾の両方が保持されるようになりました。
  • アートボードをリサイズするときのスナップが改善され、コンテンツにスナップするようになりました。
  • 複数のレイヤーをリサイズするときのスナップが改善され、選択範囲や近い他のレイヤー間と等しい距離を表示するようになりました。
  • 軸を反転したときのシェイプをリサイズする方法を改善しました。
  • 回転したレイヤーのスナップを改善しました。
  • ネストされたグループ内で移動したレイヤーは、その親のアートボードのエッジへスナップします。
  • シンボルを分離すると、Symbolマスターの背景色と同じ背景レイヤーを新しく作成します。
  • 読み込み済みのネストされたシンボルは、その親シンボルをオブションキーを押して分離すると、分離することができます。
  • キャンバス上でレイヤーを移動している間、選択ハンドルを非表示するようになりました。
  • オープンパスを曲線と連結するとき、曲線をより尊重するようになりました。
  • 曲線パスを閉じると、両端が曲線セグメントで結合されます。
  • A0からA3までの用紙をアートボードプリセットを追加しました。
  • Sketch URLスキーマからドキュメントを開いてレイヤーを直接選択できるようになりました。

Sketch 52

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

  • UIリデザイン
    インターフェイスを再設計し、アプリ全体の使いやすさや読みさすさを改善しました。
  • パフォーマンスを改善
    複雑なドキュメントの編集、キャンバスのレンダリングやたくさんのoverridesがあるシンボルの選択をするとき、Sketchのレスポンスが向上しました。
  • ダークモード
    macOS Mojave向けのダークモードをSketchへ追加しました。
  • 入れ子のブーリアン演算
    ブーリアン演算にて、テキストレイヤー・アウトライン化したシェイプやシンボルへ適用できるようになりました。
    結合方法とその種類
  • データ(Data)
    レイヤーをあなたのMac内にあるデータリソースへリンクしたり、カスタムプラグインを使ってドキュメント内にテキスト・画像や他のデータを作成・生成したりすることができます。
    Data
  • スタイルオーバーライド(Style override)
    Symbol内のText StylesとLayer Stylesは、ネストされたSymbol・テキストや画像のようにoverridesできるようになりました。
    シンボル内で適用されているLayer StyleやText Styleを切り替える

機能強化

  • Sketch Cloudへのアップロード時の信頼性が向上しました。
  • すべてのぼかしで小数点の値をサポートしました。
  • SketchにUnsplashプラグインが追加され、アプリを離れることなく幅広い画像ライブラリから画像を追加できます。
  • Prototypingプレビューを起動したとき、はじめに表示するアートボードを選択するプロセスを改善しました。
  • GPUを活用するようレンダリングパイプラインをアップデートし、特に小さなレイヤーを操作するときのレンダリングパフォーマンスが向上しました。
  • リサイズ中、見えている範囲内にレイヤーが表示されているときのみ、近くのレイヤーの同じ計測値にスナップするようになりました。
  • コピーしたCSSやSVGのコードへ不要なdefsグループとコメントが含まれなくなりました。
  • 指定されたviewportサイズを尊重するようにSVGの読み込みを改善しました。
  • 新しいレイヤーを挿入するとき、表示されている既存のレイヤーにのみスナップするようになりました。
  • 新しいレイヤーを挿入するとき、テキストのベースラインとキャップハイトにスナップするようになりました。
  • レイヤーの編集や挿入のときのスナップの動作を改善しました。
  • 複数のオブジェクトを回転させるとき、互いに独立して回転するのではなく、選択したレイヤーはRotateツールの中心点を軸に回転するようになりました。
  • SymbolマスターだけでなくインスタンスのサイズとマッチするSymbolで、ネストされたSymbolをoverrideできるようになりました。
    ネストしたシンボルをOverridesで切り替える
  • シャドウや外側の罫線はSymbol overridesで適用しても切り取られなくなりました。
  • Symbolインスタンスで編集したすべてのoverridesをリセットする機能を追加しました。
  • インスペクタ上でoverrideにマウスカーソルを重ねると、キャンバス上でハイライトするようになりました。
  • ArtboardのプリセットへiPhone XR・XS Max、Apple Watch 40mm・44mmを新しく追加しました。
  • 「Layer > Path」へ新しく「Offset Path」オプションを追加し、選択したシェイプのアウトラインを膨張・収縮できるようになりました。
    パスのオフセット
  • インスペクターへ「remove all export Options」オプションを追加しました。
    サイズとフォーマットの設定
  • ドットの罫線が作成できる機能を追加しました。
    歯車アイコン(Border options)
  • Optionを押しながらドラッグしてレイヤーを複製したとき、「Offset duplicated layers」の環境設定を無視します。
  • Background BlurにSaturation(彩度)調整を追加しました。
  • “Plus Darker”と“Plus Lighter”のブレンドモードをサポートしました。
  • デフォルトのレイアウトとグリッドカラーが赤になりました。

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ずつ増減するようになりました。
  • マジックワンド選択ツールを削除しました。
  • アプリ内のすべてのカーソルの外観を改善しました。
  • 反転しているグループ内のシェイプを回転することで間違った方向に回転してしまうバグを修正するなど、レイヤーを回転させる時の動作を改善しました。
  • インスペクタ上で複数の書き出しプレビューの見た目を改善しました。

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

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

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

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

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

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

ダウンングレードする

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

https://sketchapp.com/updates/

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

履歴

2019/4/24

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

2019/3/10

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

2019/2/8

2018/10/8

2018/7/12

2018/5/11

2018/3/5

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

2017/12/7

2017/10/11

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

2017/8/2

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

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

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

  • リリース