Sketchでショートカットキーの操作と登録で制作スピードを大幅にアップさせる
最終更新日: Update!!
WebデザインやUIデザインに欠かせない、デザインツールのSketchは、その軽さや操作性からこれまでのデザインツールと比べてもより早くデザイン制作ができるアプリです。そのままでもある程度素早くデザインを作成することができますが、ショートカットキーを使うことでより制作スピードを上げることが可能です。
【オブジェクトの操作】
【オブジェクトの編集】
【レイヤーの操作】
【ディスプレイの操作】
【ユーティリティ】
システム環境設定アプリが立ち上がり、ショートカットの項目が選択された状態になっていますので、そのままメニュー内の「アプリケーション」を選択します。続けて画面中央にある「+」ボタンをクリックしショートカットの新規登録を行います。
ダイアログが表示され、アプリケーションの選択で「Sketch」を指定し、メニュータイトルにはコマンドの名前を正確に入れます。そして設定するショートカットキーを実際に入力し「追加」ボタンをクリックして登録します。
そうするとSketchに先ほど登録したコマンドでのショートカットキーが表示されているのが確認できます。これでショートカットキーの登録が完了しました。
実際にメニューで見ても登録したショートカットキーが表示反映されているのが確認できます。
以下は実際に私が追加で登録しているショートカットキーです。昔に使っていたFireworksというアプリに合わせている感じですね。手元での操作性を重視して、shiftキーとcmdキーを中心に設定しています。メニュータイトルには正確に入力する必要があり、メニューの親子関係を示すには「->」という記号でつなげて表記します。
これ以外にもデザインの制作フローによっては、他にも色々と登録しておいたほうがいいものもあるのではないでしょうか。整列系は特にショートカットキーを充てておくと捗りますね。
いかがでしょうか、これ以外にも様々なショートカットキーが用意されていますが、まずはよく使うものから覚えていくことをお勧めします。ショートカットキーを使いこなして生産性の向上や作業時間の短縮につなげて、質の高い仕事を目指していきたいですね!
作業スピードアップには欠かせないショートカットキー
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」を選択します。




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 |
いかがでしょうか、これ以外にも様々なショートカットキーが用意されていますが、まずはよく使うものから覚えていくことをお勧めします。ショートカットキーを使いこなして生産性の向上や作業時間の短縮につなげて、質の高い仕事を目指していきたいですね!
sponserd
keyword search
recent posts
- 【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
- 安さやチープな印象を強調させるデザインを考えてみる
安さやチープな印象を強調させるデザインを考えてみる
- メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
- 【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
- 【実践テクニック#4】ドロップシャドウをグラデーション状に重ねて自然な影を表現する
【実践テクニック#4】ドロップシャドウをグラデーション状に重ねて自然な影を表現する
- デザイン制作で扱う文字詰めの種類と使い分け(カーニング、トラッキング、メトリクス、オプティカル)
デザイン制作で扱う文字詰めの種類と使い分け(カーニング、トラッキング、メトリクス、オプティカル)
- 【実践テクニック#3】1pxのハイライトとシャドウで要素の明瞭度を上げてシャープに見せる
【実践テクニック#3】1pxのハイライトとシャドウで要素の明瞭度を上げてシャープに見せる
- Illustratorでスクリプトを使って関数曲線のバラ曲線を描いてみる
Illustratorでスクリプトを使って関数曲線のバラ曲線を描いてみる
categories