こんにちは。
この間完全に趣味関係の記事(下記)をアップするためにnoteを始めたんですが、せっかくなので仕事周りのことも書いていきます。

一応都内の会社でUI/UXデザイナーという肩書きで働いているんですが、デザインとかUXのノウハウみたいなのよりも、UI寄りで効率化とかみたいなのが得意っぽいのでそっち系の方が内容多くなるかなと思います。

さて初っ端の記事ですが、以前会社ブログに書いたものがちょっと古くなっているので抜粋とアップデートしてこちらにも書きます！(手抜き)

マウス触るのめんどくさくない？

突然ですけど、みなさんデザインするときに何かしらのショートカットキーって使っていますか？結構いろんなタイプがいると思うんですけど、僕は慣れるとすぐに「めんどくせぇ！この動作ショートカットキーないの！？」とすぐに探してしまうタイプです。

デザインツールだとよくサイドのインスペクタで色とかサイズ指定とか整列の設定とかできると思いますけど、ぶっちゃけそこにマウス持っていくのもめんどい。

エンジニアの三大美徳の一つに怠惰という言葉がありますが、デザイナーだって怠惰でいいじゃない。

というわけで今回は弊社もメインで使っており、シェアも多いSketchのショートカットキーの中から、個人的にこれがないとストレスやばい、、、というものを6つピックアップしました！

知りたいけどショートカットキーとかあんまり使わないわ、、、って人は前述の社内ブログを見た方がいいかもしれません。

ありがたいショートカットキー1 (⌘+opt+Drag)

⌘ + opt + ドラッグ　
=>　選択済みレイヤーをカーソル合わせなくてもドラッグできる

ショートカットキー集とかググってもそんなに出てこなくて、あれ？あんまり知られてない？最も便利なのに、、、。って思うのがこれです。いきなりわかりにくいショートカットなんですけど。

レイヤーをコピペしたあと、ドラッグして移動しようとしているのに、クリックのエイムが外れて「チガウ！ソレジャナイ！」とか

選択済みのレイヤーをドラッグして動かそうとしていたら上層のレイヤーをクリックしてしまって「アアっ！選択が外れた！」ってなりませんか。

ペーストしたレイヤーなり、選択中のレイヤーがあるなら⌘+optを押しながらドラッグすればいちいちクリックしなくてもレイヤー移動できます。

これAdobe系のツールにもほしいんですけどねぇ、、、

ありがたいショートカットキー2 (esc)

esc
=> 一個上層のレイヤーを選択する

Sketchだとアートボード自体を選択したいタイミングって結構ありますよね。コンテンツ量が変わったからアートボードサイズ変えたいとか、アートボード動かしたいとか。

まあ縮小してアートボード名をクリックすれば選択できるんですけど例によって「めんどくさい」ので。

テキトーにアートボード内のレイヤークリックしてescでアートボード選択できます。「Resize to Fit」と合わせればアートボードを一瞬でコンテンツに合わせることができます。

ありがたいショートカットキー3 (⌘+K)

⌘ + K
=> スケールツール

結構デザインしてるときに「この画像レイヤーちょ〜〜っとだけ拡大したい」みたいなのあるんですけど、これでダイアログ出てきて101%とかにしたりして調整します。あとsketchはロゴとかのベクターデータ(.ai、.svg)は普通の拡大だとずれてしまうので、このスケールツールを使うのでそういう意味でもよく使います。

ありがたいショートカットキー4 (F・B)

F , B
=> F : 塗りのon/off、B : 線のon/off 

これがなくてストレスを感じるのはもしかしたら僕だけなのでは、、、？

何かというとRとかOで長方形・円を作るときに用途に応じて、要らないほうをoffしたいんですね。具体的にはボタンを作るときに線って要らないんで、長方形作ってBでデフォルトの灰色線を消す。インスペクタでチェックボックスをクリックするのがめんどくさいんです。

ありがたいショートカットキー5 (⌘+shift+2,5)

⌘ + Shift + 2,  ⌘ + Shift + 5
=> 中央揃え(横)、中央揃え(縦)

なかったので作りました。

中央揃えって無限にする作業じゃないですか。なのにショートカットキーがない。無かったら作りましょう。以下作り方です。

①システム環境設定> キーボードを開く
②左のメニューから「アプリケーション」を選択
③「+」ボタンを押し、アプリケーションに「Sketch.app」を選択
④「メニュータイトル」に行いたいメニューコマンドを正確に記入
(例：Arrange->Align->Horizontally ; sketchのメニューの上にあるやつですね)
⑤「キーボードショートカット」で設定したいキーを実際に押す

僕はテンキー付きのMagic Keyboardを使っているので、(↓)

横長の矩形を作って(R)、線無くして(B)、文字を入れて(T)、複数選択して⌘+shift+2、5でボタンの出来上がりです。

ありがたいショートカットキー6 (ctrl+shift+C,V)

ctrl + shift + C、ctrl + shift + V
=> レイヤーサイズをコピペ(ketch Copy Paste Position & Size)

シンボルなり繰り返しのリストなどで「サイズを変えたい！」って思ったとき、一個のサイズ決めてからバウンディングボックスで全部合わせてますか？それとも一旦消してからまた繰り返しコピペしてますか？でもそのレイヤーシンボルで中の要素overrideしてたりしませんか、、、(吐血)。

プラグイン Sketch Copy Paste Position & Size

をインストールして上記のショートカットでwidthとheightのサイズをコピペできます。シンボルにでもコピペできるから便利です。

さいごに

今回個人的に手放せないショートカットキーをご紹介しましたが、他にも使うショートカットキーはあります。別にショートカットキー使えるからデザインできるようになるわけじゃないんですけど、仕事のストレスは軽減されるので覚えられる人はぜひ覚えてみましょう。