皆さん、ショートカットキーは使ってますでしょうか？

デザイン用アプリケーションをよく使う御方なら息を吐くように使って作業効率をアップさせているかと思います。

普段使っているSketchにも様々なショートカットキーが用意されていますが、そんな中でも便利すぎていつの間にか数種類しか使わなくなっていたオーソドックスながら即戦力クラスの便利なショートカットキーを紹介します。

■レイヤー編集・操作

⌘ + R ＝ レイヤー名変更

オブジェクト名、グループ名の変更をデフォルトから変更するためにレイヤー名変更の操作は必ず行う作業だと思います。

SketchはSymbolのOverrideを考慮してグループ名に「/（スラッシュ）」をつける習慣があったりとレイヤー名の重要度がとても高く、なくてはならないショートカットキーです。

ちなみにレイヤー名を入力中の状態で「tab」を押すとひとつ下のレイヤーのリネームがすぐ行えるのでこれも合わせて覚えておくと便利です。

⌘ + [ ＝レイヤー・グループの重なり下移動
⌘ + ] ＝レイヤー・グループの重なり上移動

選択したレイヤー・グループの重なり順を上下移動できます。
UIデザインの作業中というのは矩形やテキストレイヤーをひたすら選択する時間が圧倒的に多いので、ちょっとした上下の重なり順の並び替えなどにレイヤーをドラッグアンドドロップで操作しなくても済むので非常に楽です。

ただしグループにそれぞれ入っているものを選択して上下したときに、グループから外れてレイヤーが整理されていない状態によくなりがちなのでそこだけ気をつけましょう。

⌘ + G ＝ 選択したレイヤーのグループ化

Photoshopでもよく使うショートカットですね。
レイヤーのペインから選択してもアートボード上から選択した状態どちらでもグループ化できます。

**********************************************************************************

■スタイル

control  +  C ＝ カラースポイト

選択中のオブジェクトに色が即反映されるのでPhotoshopのスポイトより直感的で使いやすいです。

主にスクリーンショットの画像から色を参考にするとき一番使っています。
簡易的にカラーパレットを作って色の組み合わせなどを雑多に試したいときなどにも便利です。

⌘ + option + C ＝スタイルのコピー
⌘ + option + V＝スタイルのペースト

多くのデザインアプリケーションに用意されている機能ですが、Sketchはしっかりデフォルトで設定されています。

線とグラデーションと影などが同時に設定した一から作り直すとめんどくさいレイヤーを別レイヤーに一瞬で適用できるので非常に助かります。
もちろんテキストスタイルにもレイヤースタイルにも使えます。

ただしアピアランスやStyleGuideを丁寧に作ったあとに、このショートカットキーでパーツを作ってしまうとスタイルがブレて差分が発生してしまう原因にもなるので運用が始まってからはあまり使わないようにしましょう。

そもそもSketchのテキストスタイルやレイヤースタイル、アピアランスについてわからないという方は下記の記事が詳しく解説されていましたので是非参考にしてください。

引用：Sketchのテキストスタイルとレイヤースタイルを使いこなす
https://designsupply-web.com/suplog/5735/

**********************************************************************************

■ツールのショートカットキー

R = 四角（Rectangle）
O = 丸（Oval）
L = 線（Line）

矩形ツールのショートカットキーです。
このへんはしょっちゅう使うのでまとめて覚えておきたいです。

F = 矩形の塗り（Fill）
B = 矩形の線（Border）

小さいチェックボックスから選択して矩形の塗りや線を設定するのは地味にストレス溜まるので、楽にショートカットキーを使っています。

T = テキスト入力

様々なアプリケーションでTを押すとテキストが打てるようになっているので身体に染み付いてる方も多いと思います。

矩形作成（R,O,L）→テキスト入力（T）のショートカットキーの流れでひとつのパーツを作ったりする機会が多いです。

**********************************************************************************

■おわり

以上、普段使用頻度が高いショートカットキーをいくつか挙げてみました。

他アプリケーションでも流用できそうなシンプルなショートカットキー中心の紹介となりましたので、『あれ？こんなものか』と物足りなさを感じる方がいらっしゃいましたらごめんなさい。

余談ですが、過去に『よく使うかも？』と思いデフォルトにはないシンボル化のショートカットキーも設定していましたが、シンボル化すること自体が最後の最後にちょこっとだけやる使い方が多かったので使う機会があまりありませんでした。

やはりシンプルなものこそわかりやすく実業務では一番使いやすくて即戦力になるのではないかと思います。

余力があればFigmaのよく使うショートカットキーも書き綴っていこうと思います。