0%

Designデザインワークショップ

Posted:2018.11.14

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

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でショートカットキーの操作と登録で制作スピードを大幅にアップさせる

 

ダイアログが表示され、アプリケーションの選択で「Sketch」を指定し、メニュータイトルにはコマンドの名前を正確に入れます。そして設定するショートカットキーを実際に入力し「追加」ボタンをクリックして登録します。

 

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

 

そうするとSketchに先ほど登録したコマンドでのショートカットキーが表示されているのが確認できます。これでショートカットキーの登録が完了しました。

 

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

 

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

 


 

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

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】