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

Introduction

この書籍について

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

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

Sketchとは

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

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

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

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

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

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

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

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

  • macOS Mojave 10.14.6 + Sketch 59で執筆・確認しています。公開されている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 59

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

より優れたOpenType featuresのサポート OpenType featuresへ対するより優れたサポートの要望が寄せられたため、テキストメニューに追加されました。メニューバーのText > OpenType Featuresから、選択したフォントのすべてのOpenType featuresを見つけることができます。テキストを選択し、必要なfeaturesを使って、Sketchでより優れたタイポグラフィーを体験してください。

可変フォントのサポート
OpenType Featuresのサポートに加えて、サイズやウェイト・幅・斜体・オプティカルサイズなど可変フォントのオプションをサポートしています。可変オプション付きのOpenTypeフォントを使っている場合、インスペクタの可変フォントオプションのポップオーバーを使ってフォントを調整することができます。

機能強化

  • アートボード外へレイヤーをドラッグするときの動作を改善しました。レイヤーリストで以前のアートボード内へ配置されたままになりません。
  • Smart Distributeの間隔ハンドルの挙動を改善し、ハンドルをクリックしてもドラッグを開始するまで間隔が調整されないため、不意な変更を避けられます。
  • Sketch 58で追加された新しいスマートレイアウト機能の理解の手助けをするチュートリアルテンプレートを追加しました。ドキュメントウィンドウのテンプレートタブにそれはあります。
  • スマートレイアウトの並び替えハンドルを整理し、選択範囲が小さく周りのリサイズハンドルに影響する場合は表示されないようにしました。
  • スマートレイアウトの導入により、テキストレイヤーから20px未満の距離にある小さなレイヤーを配置し、Overridesでテキストレイヤーのサイズが変わったときにそのテキストレイヤーに沿って動く動作を削除しました。代わりにスマートレイアウトで、より多くの制御を使って同じ結果を得ることができます。
  • 開発者向けに、シンボルや共有スタイルを使っている任意のドキュメントから独立したSketchドキュメントを作成する新しいdetachコマンドをsketchtoolに追加しました。
  • プラグイン開発者へ向けてドキュメント変更の検知に関する強力な新しいAPIを導入しました。 新しいonDocumentChangeハンドラーを使うと、塗りや線のスタイルやシンボルOverridesの値などのレイヤー属性の変更はもちろん、新しいレイヤーの追加、レイヤーリストでの既存レイヤーの削除や再配置を検知できます。どのように動作するかはサンプルプラグインを確認してください。
  • 2つアンカーポイントをもつパスをSVGで書き出すとき、パスをline要素として書き出しします。
  • インスペクタ上のTypefaceピッカーの見た目がリフレッシュされ、プレビューがより見やすくなりました。さらに、テキストレイヤーを選択してTypefeceピッカーを開くと、リストの真ん中に選択しているTypefaceが表示されるようにスクロールします。

Sketch 58

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

Smart Layoutを導入
デザインにSmart Layoutを使うことで、シンボルをより強力にしあなたのワークフローをスーパーチャージします。 Smart Layoutは、シンボル内の異なるレイヤー間の間隔の保持しながら、オーバーライドの変更によるシンボルのリサイズ方向を設定できます。 さらに、ネストされたシンボルやシンボル内のグループに対して、異なるSmart Layoutを設定できます。 それは非常にパワフルで、あなたのワークフローがどのように改善されるか楽しみでなりません。

機能強化

  • ウェルカムウィンドウをよりよく、より大きく、よりわかりやすく、明確になりました。左の新しいサイドバーにはプロジェクトごとにクラウドドキュメントを閲覧できます。スクロールなしにより多くのドキュメントを表示できるよう、サムネイルスペースを十分にとりました。 -ウェルカムウィンドウでプロジェクトを閲覧でき、初めてクラウドドキュメントを保存するとき、プロジェクトを選択するオプションが追加されました。

Sketch 57

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

Smart Distributeの選択範囲内でレイヤーを再配列
等間隔の複数レイヤーを選択した場合、レイヤーの中央を掴んでドラッグすると選択範囲内で位置を変更できます。周囲のレイヤーは自信を再配列して適切な位置にスナップし、動かしたレイヤーに道をつくります。さらにアートボードでも同様に動作し、あなたのドキュメントを綺麗に整頓できます。

適切なブーリアン演算 ブーリアン演算のハンドリングを改善するために多くの作業を費やしました。もし以前にブーリアン演算のバグや奇妙な挙動に装具していた場合、ここで修正されている可能性があります。

機能強化

  • 回転ツールでキーボードの矢印キーを使ってレイヤーを調整する場合、選択範囲のハンドルが非表示になりインスペクタへ正しい値が表示されます。
  • カラーポップオーバーで塗りとグラデーションのプリセットの区別がつきにくいことがあるため、簡単に見分けがつくようそれぞれに見出しをつけました。
  • Editメニューの「Paste as Rice Text」で、クリップボードから直接リッチテキストをペーストできるようになりました。以前はテキストの編集モードでのみ有効でしたが、これからは常にできます。
  • ショートカットを少し変更しました。「Send Backward」は「Command + [」に「Bring Forward」は「Command + ]」になりました。「Send to Back」は「Command + Option+ [」に「Bring to Front」は「Command + Option + ]」になりました。古いショートカットまたはまったく異なるショートカットを使いたい場合、システム環境設定からキーボードショートカットを作成できます。
  • とても大きなグリッドでの作業が簡単になりました。周りをスクロールしたり動かしたり色を変えたりしても、すべてより早くよりスムースに感じるでしょう。
  • シングルパスまたはシェイプグループを選択した場合、編集モード中でもLayerメニューからデフォルトのレイヤースタイルを設定(Layer → Set as Default Style)できるようになりました。

Sketch 56

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

テキストオーバライドをキャンバス上で編集
キャンバス上からテキストオーバライドを直接編集できるオプションを追加し、作業を簡単にしました。任意のシンボルインスタンスにあるテキスト上でダブルクリックして入力するだけです。キャンバスから離れることなく、ワークフローをスピードアップできます。 Smart Distributeをアップデート
Smart Distributeは、グリッド状に間隔をコントロールできるようになりました。垂直方向および水平方向のレイヤーの間隔を簡単に調整できます。また、インスペクタに「Tidy」ボタンを導入しました。選択した複数レイヤーを素早く適切なグリッド状に整列させ、複雑なレイアウトの作成・管理がさらに簡単になります。 ドキュメントをSketch Cloudへ保存
Preferencesに、デフォルトでドキュメントをSketch Cloudに保存する新しいオプションができました。Sketch Cloudへ保存してもショートカットやオプションからローカルに保存できます。Cloudにあるドキュメントは「Welcome」ウィンドウを表示して開くこともできます。

機能強化

  • データプラグインに新しい顔が追加されました。102人が新しくなり、あなたのデザインに使えます。
  • テキストレイヤーのコンテンツ内容に合わせて幅または高さのどちらを自動リサイズするか、インスペクタから選べるようになりました。→Alignment
  • PreferencesのGeneralタブの内容を整理し、項目を移動させました。なくなった項目はありませんが、いずれかのタブへ移動しています。
  • 選択したアートボード上のすべてのレイヤーを素早く選択できるよう、Editメニューに新しく「Select All in Artboard」コマンドを追加しました。
  • ズームアウトしているときのレイヤー間の計測を少し整理しました。読みやすさを維持するため、関連性が低く重なっている場合は削除されます。
  • インスペクタ内のメニューが少し広くなり、長い名前のシンボルでも必要なシンボルを簡単に選択できます。
  • 大きなアップデートに合わせて、Smart Distributeに3つの機能改善を加えました。垂直方向でも機能し、負の値のサポート(レイヤーのオーバーラップが可能に)、グループ自体を選択してグループ内のレイヤーを選択したように使うことができます。→Smart Distribute

Sketch 55

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

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

機能強化

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

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/11/7

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

2019/9/18

  • Smart Layoutの記述を修正

2019/9/17

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

2019/8/27

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

2019/8/5

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

2019/5/22

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

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

  • リリース