Sketchにショートカットを設定して爆速デザイン

Sketchにショートカットを設定して爆速デザインのアイキャッチ画像

Sketchは直感的に操作できるのでWebサイトのデザインカンプなどは、Photoshopでデザインするよりも、かなり速く仕上げることができます。

Sketchには予め便利なショートカットがセッティングされていますが、Sketchを更に便利に使い倒してやろうではないか!ということでSketchのショートカットで足りないものを独自に設定します。

SketchのショートカットはMacのシステム環境設定から行う

Sketch本体にショートカットを設定する項目はないので、Macのシステム環境設定から行います。

システム環境設定>キーボード>ショートカット>アプリケーションで設定項目までアクセスします。

システム環境設定

システム環境設定>キーボード

ショートカット設定手順

sketchショートカット設定

  1. +ボタンで新しくショートカットを追加する
  2. アプリケーションはSketchを選択
  3. メニュータイトルにショートカットを設定したいメニュータイトルを正しく記述
  4. キーボードショートカットに設定するショートカットを入力

案外簡単です。

メニュータイトルが同名の場合

HorizontallyなどはDistribute Objectsにもありますし、Align Objectsにもあります。異階層で同名のメニュータイルの場合は->で階層を指します。

上に挙げたHorizontallyをDistributeとAlignに効かす場合にはそれぞれ以下の通り

Arrange->Distribute Objects->Horizontally
Arrange->Align Objects->Horizontally

ちなみにHorizontallyだけで設定すると、Align Objectsが優先されました。

Sketchに設定しておきたいショートカット

個人的におすすめするSketchに設定しておきたいショートカットです。Adobe系のアプリに合わせるために設定しなおしたものも含みます。左がメニュータイトルです。

整列系

左揃え

Left command + shift + f1

中央揃え(縦)

Horizontally command + shift + f2

右揃え

Right command + shift + f3

上揃え

Top command + shift + f4

中央揃え(横)

Vertically command + shift + f5

下揃え

Bottom command + shift + f6

均等揃え(横)

Arrange->Distribute Objects->Horizontally command + shift + f7

均等揃え(縦)

Arrange->Distribute Objects->Vertically command + shift + f9

アートボードに中央揃え(横)

Horizontally in Artboard command + shift + f8

文字系

文字サイズ拡大

Type->Bigger command + shift + .

文字サイズ縮小

Type->Smaller command + shift + ,

文字間広げる

Type->Kern->Loosen option + →

文字間詰める

Type->Kern->Tighten option + ←

カンバス系

ガイドを表示

Show Smart Guides command + :

カンバス中央(引く)

View->Center Canvas command + 0

カンバス等倍

View->Actual Size command + 1

スライスの表示・非表示

View->Layer List->Show Slices command + option + shift + 2

便利なショートカットは作業速度向上に欠かせない

ショートカットを使いこなすことは作業速度向上に欠かせません。これだけ設定しただけでもかなりSketchでのデザイン制作がかなり捗るようになりました。僕はその他のアプリとなるべく合わせる方向でショートカットを設定ましたが、整列系はファンクションじゃない方が効率いいかもしれませんね。