WebデザインやUIデザインに欠かせない、デザインツールのSketchは、その軽さや操作性からこれまでのデザインツールと比べてもより早くデザイン制作ができるアプリです。そのままでもある程度素早くデザインを作成することができますが、ショートカットキーを使うことでより制作スピードを上げることが可能です。  

作業スピードアップには欠かせないショートカットキー

Sketchに限らず、いろんなアプリでもショートカットキーは用意されており、これらを使いこなすことがプロとして最低限求められるスキルなのではないでしょうか。例えばMacの場合ですと、「cmd + S」でファイルを保存するなどのショートカットキーはいろんなアプリで採用されており、有名なコマンドなのではないでしょうか。   もちろんSketchではそのようなメジャーなショートカットキーもあれば、独自機能である様々なショートカットキーも用意されています。全て覚える必要はありませんが、最低限よく使う操作はショートカットキーで対応したいところですね。  

Sketchでよく使うショートカットキー

Sketchで行うデザイン制作において、デフォルトで設定されており、中でもよく使う操作のショートカットキーをまとめてみました。まずはこの辺りから覚えて慣れていくといいのではないでしょうか。   【オブジェクトの挿入】

R	矩形の挿入
O	円形の挿入
L	線の挿入
T	テキストの挿入
V	ベクターの挿入
A	アートボードの挿入

  【オブジェクトの操作】

選択 + cmd + C	コピー
選択 + cmd + V	ペースト
選択 + cmd + X	カット
選択 + cmd + D	複製
選択 + cmd + alt + V	スタイルをペースト
shift + 変形	同比率での拡大縮小

  【オブジェクトの編集】

shift + cmd + O	オブジェクトのアウトライン化
shift + cmd + T	オブジェクトの自由変形
shift + cmd + R	オブジェクトの回転

  【レイヤーの操作】

shift + cmd + L	レイヤーのロック
shift + cmd + H	レイヤーの非表示
cmd + 選択	レイヤーを直接選択
cmd + A	全てのレイヤーを選択する
選択 + cmd + R	レイヤーのリネーム
複数選択 + cmd + G	レイヤーのグループ化
選択 + shift + cmd + G	レイヤーのグループ解除

  【ディスプレイの操作】

ctrl + R	ガイドとルーラーの表示
ctrl + G	グリッドガイドの表示
ctrl + L	レイアウトガイドの表示
cmd + −	ズームアウト
shift + cmd + ＋	ズームイン
cmd + 0	アートボードを原寸縮尺
cmd + 1	ウィンドウサイズに合わせて縮尺
cmd + 2	選択しているアートボードをウィンドウサイズに合わせて縮尺

  【ユーティリティ】

ctrl + C	カラーピッカー呼び出し
alt + 要素にマウスオーバー	選択要素間とのマージン数値の表示

   

オリジナルのショートカットキーを登録する

Sketchでは上記のデフォルトで設定されているショートカットキー以外にも、オリジナルのショートカットキーを各種コマンドに充てることができます。まずはメニューの「Service」から「Services Preferences」を選択します。       システム環境設定アプリが立ち上がり、ショートカットの項目が選択された状態になっていますので、そのままメニュー内の「アプリケーション」を選択します。続けて画面中央にある「＋」ボタンをクリックしショートカットの新規登録を行います。     ダイアログが表示され、アプリケーションの選択で「Sketch」を指定し、メニュータイトルにはコマンドの名前を正確に入れます。そして設定するショートカットキーを実際に入力し「追加」ボタンをクリックして登録します。     そうするとSketchに先ほど登録したコマンドでのショートカットキーが表示されているのが確認できます。これでショートカットキーの登録が完了しました。     実際にメニューで見ても登録したショートカットキーが表示反映されているのが確認できます。     以下は実際に私が追加で登録しているショートカットキーです。昔に使っていたFireworksというアプリに合わせている感じですね。手元での操作性を重視して、shiftキーとcmdキーを中心に設定しています。メニュータイトルには正確に入力する必要があり、メニューの親子関係を示すには「->」という記号でつなげて表記します。  

shift + cmd + M	【マスクしてグループ化】：Mask with Selected Shape
shift + ctrl + 1	【選択オブジェクトの左寄せ】：Arrange->Align->Left
shift + ctrl + 2	【選択オブジェクトの中央寄せ】：Arrange->Align->Horizontally
shift + ctrl + 3	【選択オブジェクトの右寄せ】：Arrange->Align->Right
shift + ctrl + 4	【選択オブジェクトの上揃え】：Arrange->Align->Top
shift + ctrl + 5	【選択オブジェクトの中央揃え】：Arrange->Align->Vertically
shift + ctrl + 6	【選択オブジェクトの下揃え】：Arrange->Align->Bottom
shift + ctrl + 7	【選択オブジェクトの水平均等配置】：Arrange->Distribute->Horizontally
shift + ctrl + 8	【選択オブジェクトの垂直均等配置】：Arrange->Distribute->Vertically
shift + ctrl + alt + 1	【アートボードへの左寄せ】：Arrange->Align->Left in Artboard
shift + ctrl + alt + 2	【アートボードへの中央寄せ】：Arrange->Align->Horizontally in Artboard
shift + ctrl + alt + 3	【アートボードへの右寄せ】：Arrange->Align->Right in Artboard
shift + ctrl + alt + 4	【アートボードへの上揃え】：Arrange->Align->Top in Artboard
shift + ctrl + alt + 5	【アートボードへの中央揃え】：Arrange->Align->Vertically in Artboard
shift + ctrl + alt + 6	【アートボードへの上揃え】：Arrange->Align->Bottom in Artboard
cmd + [	【レイヤーを前面に移動】：Bring Forward
cmd + ]	【レイヤーを背面に移動】：Send Backward
shift + cmd + [	【レイヤーを最前面に移動】：Bring to Front
shift + cmd + ]	【レイヤーを最背面に移動】：Send to Back
shift + cmd + alt + S	【書き出し用のスライス作成】：Make Exportable

  これ以外にもデザインの制作フローによっては、他にも色々と登録しておいたほうがいいものもあるのではないでしょうか。整列系は特にショートカットキーを充てておくと捗りますね。  

---

  いかがでしょうか、これ以外にも様々なショートカットキーが用意されていますが、まずはよく使うものから覚えていくことをお勧めします。ショートカットキーを使いこなして生産性の向上や作業時間の短縮につなげて、質の高い仕事を目指していきたいですね！