Mac用のWeb/UIデザインアプリ「Sketch」で、個人的によく使う「使いこなしていけば業務スピードが絶対に上がるショートカット」を備忘録的に紹介しています。


【当記事で使用しているOSとSketchのバージョン環境】

  • macOS Catalina 10.15.4
  • Sketch version 65

同じ様にSketchのショートカットキーを紹介している日本語の記事は他にもたくさんありますが、最新バージョン(2020年5月時点)のSketchではショートカットキーが一部変更されています。

なので、ショートカットがうまく動作しない場合はSketch公式のドキュメントや、下記のようにアプリ内のヘルプも参照してみましょう。

ヘルプから検索してショートカットキー表示を確認

ただし、公式サイトやアプリのヘルプは「USキーボード」向けのショートカットキーで記載されています。

「USキーボード」を使われている方は問題ありませんが、もし日本語向けの「JISキーボード」を使っている場合、例えば+を使うためには、Shift;を一緒に押す必要があります。
この点で、公式サイトやヘルプとは押す必要のあるキーが異なる場合がありますので、ご注意ください

USキーボードとJISキーボード

※この記事では、「JISキーボード」のショートカットキー前提で説明しています。

Sketchの操作スピードを上げるための26のショートカットキー

  1. ツールを黒矢印にする
  2. スポイト(選択しているオブジェクトに吸い取った色を反映)
  3. テキストの文字サイズを拡大/縮小する
  4. オブジェクトの属性をコピー/ペースト
  5. コピーしたオブジェクトを選択しているオブジェクトの上にペースト
  6. 選択しているオブジェクトの塗りを削除/追加
  7. 選択しているオブジェクトのボーダー線を削除/追加
  8. 選択しているオブジェクトを拡大/縮小
  9. 選択しているレイヤー位置を上下に移動させる
  10. 同一アートボード内の上レイヤーにあるオブジェクトをマスクする
  11. オブジェクトをロックする
  12. オブジェクトを非表示にする
  13. 選択したオブジェクトをグループ化/グループ解除
  14. 選択中のレイヤー名を変更する
  15. 画面を拡大/縮小する
  16. ツールバー(上部のツールバー)の表示/非表示
  17. サイドバー(左側のバー)の表示/非表示
  18. インスペクタ(右側のインスペクター)の表示/非表示
  19. インターフェース(ツールバー・サイドバー・インスペクター)の表示/非表示
  20. 画面を実寸サイズで表示する
  21. キャンバス全体にフォーカス
  22. 選択しているオブジェクトにフォーカスする
  23. 画面拡大率は変えずに、選択しているオブジェクトにフォーカス
  24. 選択しているオブジェクトのアートボードにフォーカス
  25. 選択したオブジェクト同士をマスクする(Mask with Selected Shape)
  26. 選択したレイヤーの書き出し設定(Make Exportable)

オブジェクトを操作するショートカットキー

1. ツールを黒矢印にする

Enter

Enterで黒矢印

現在のツールを解除し、オブジェクト選択する「黒矢印」に変更したい時。
(選択中のツールと同じショートカットキー押下でも可。例:ペンツール選択中はv

2. スポイト(選択しているオブジェクトに吸い取った色を反映)
control + c
3. テキストの文字サイズを拡大/縮小する
  • 拡大 command + option + shift +
  • 縮小 command + option +
4. オブジェクトの属性をコピー/ペースト
  • 属性コピー command + option + c
  • 属性ペースト command + option + v
5. コピーしたオブジェクトを選択しているオブジェクトの上にペースト
commnad + shift + v
6. 選択しているオブジェクトの塗りを削除/追加
f
7. 選択しているオブジェクトのボーダー線を削除/追加

b

選択しているオブジェクトの線と塗りのショートカット
(6.と7.の動作イメージです)

8. 選択しているオブジェクトを拡大/縮小

command + k

選択しているオブジェクトの拡大/縮小
(Scaleを押した時と同じ動作です)

サイズは%か縦横実寸で変更でき、拡大/縮小起点の設定もできます。
縦横比は保持され、線がついている場合は連動して拡大/縮小します。

レイヤー操作関連のショートカットキー

9. 選択しているレイヤー位置を上下に移動させる
  • レイヤーを上へ command + ]
  • レイヤーをアートボードの一番上へ command + option + ]
  • レイヤーを下へ command + [
  • レイヤーをアートボードの一番下へ command + option + [


※JISキーボードの場合、上記のとおり配置上、[が上にあるので、直感とは逆になるイメージです。

10. 同一アートボード内の上レイヤーにあるオブジェクトをマスクする

command + control + m

同一アートボードの上レイヤーをマスク

※ちなみに“選択したオブジェクト同士”のマスク(Mask with Selected Shape)はショートカットキーがないので独自のショートカットキー設定を後述しています。

11. オブジェクトをロックする
command + shift + l
12. オブジェクトを非表示にする

command + shift + h

レイヤーロックと非表示

(10.と11.の動作イメージです。ロックの解除時や表示時は一度選択を外すと、黒矢印で選択できなくなるためサイドバーから選択するか、アイコンクリックが必要)

13. 選択したオブジェクトをグループ化/グループ解除
  • グループ化 command + g
  • グループ解除 command + shift + g

これはたいていのアプリが同じショートカットキーで、グループの頭文字「G」と、憶えやすいです。

14. 選択中のレイヤー名を変更する

command + r

スライス作成時に重宝します。

画面表示関連のショートカットキー

15. 画面を拡大/縮小する
  • command + shift + ;
  • command +
16. ツールバー(上部のツールバー)の表示/非表示
command + option + t
17. サイドバー(左側のバー)の表示/非表示
command + option + 1
18. インスペクタ(右側のインスペクター)の表示/非表示
command + option + 2
19. インターフェース(ツールバー・サイドバー・インスペクター)の表示/非表示

command + .

ツールバー、サイドバー、インスペクターの表示・非表示
(16.〜19.のイメージ)

20. 画面を実寸サイズで表示する
coomand + 0
21. キャンバス全体にフォーカス
coomand + 1
22. 選択しているオブジェクトにフォーカスする
coomand + 2
23. 画面拡大率は変えずに、選択しているオブジェクトにフォーカス
coomand + 3
24. 選択しているオブジェクトのアートボードにフォーカス
coomand + 4

【番外編】登録しておくと便利な独自のショートカットキー

この段落で紹介する25.と26.は、デフォルトではショートカットキー設定がされていません。

ただ、それなりによく使う操作だと思いますので、独自のショートカットキー登録ではありますが、番外編として紹介します。

Macでアプリに独自のショートカットキーを設定する方法については、以下の記事が分かりやすく、参考になります。

Sketchでショートカットキーの操作と登録で制作スピードを大幅にアップさせる

Macでのショートカットキー設定

25. 選択したオブジェクト同士をマスクする(Mask with Selected Shape)

【独自】 command + shift + m

「10. 同一アートボード内の上レイヤーにあるオブジェクトをマスク」と同様、下側のレイヤーでマスクします。

26. 選択したレイヤーの書き出し設定(Make Exportable)

【独自】command + option + e

Make Exportableのショートカット
(25.のイメージ)

sキーでスライスを作っても良いのですが、無駄にレイヤーを増やしたくない場合は、このようにレイヤーそのものに書き出し設定するのもアリかと思います。

選択したレイヤーの書き出しはcommand + e、書き出し設定してあるすべてのレイヤーの一括書き出しはcommand + shift + eのため、それらに合わせるようoptionを足したこのキー設定にしました。

※同一のショートカットキーがmacOSや別の常駐アプリで設定されている場合、Sketch側のショートカットが動作しないことがあります。

その場合は、OSや別のアプリで設定しているショートカットキーを変更するか無効にしましょう。


以上、「業務スピードを上げたいディレクター向け 25のSketchショートカットキー」を紹介しました。

「そういえば、Sketchのあの操作のショートカットキーなんだっけ?」と思った時のために、ブックマークなどして参照してもらえれば幸いです。

参考にさせていただいた書籍と記事
UIデザイナーのためのSketch入門&実践ガイド 改訂第2版

UIデザイナーのためのSketch入門&実践ガイド 改訂第2版

吉竹 遼
2,772円(09/24 23:40時点)
発売日: 2018/11/16
Amazonの情報を掲載しています
関連する記事

【Sketch】マジックワンドツールを使った画像編集の方法