Sketchは直感的に操作できるのでWebサイトのデザインカンプなどは、Photoshopでデザインするよりも、かなり速く仕上げることができます。
Sketchには予め便利なショートカットがセッティングされていますが、Sketchを更に便利に使い倒してやろうではないか！ということでSketchのショートカットで足りないものを独自に設定します。
SketchのショートカットはMacのシステム環境設定から行う
Sketch本体にショートカットを設定する項目はないので、Macのシステム環境設定から行います。
システム環境設定＞キーボード＞ショートカット＞アプリケーションで設定項目までアクセスします。
ショートカット設定手順
- +ボタンで新しくショートカットを追加する
- アプリケーションはSketchを選択
- メニュータイトルにショートカットを設定したいメニュータイトルを正しく記述
- キーボードショートカットに設定するショートカットを入力
案外簡単です。
メニュータイトルが同名の場合
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 |
上揃え
中央揃え（横）
| 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でのデザイン制作がかなり捗るようになりました。僕はその他のアプリとなるべく合わせる方向でショートカットを設定ましたが、整列系はファンクションじゃない方が効率いいかもしれませんね。
