Sketchの整列をショートカットキーを使ってすばやく行えるようにする方法

デザインするとき、意外と多い操作が「整列」です。
要素を揃えるたびにマウスで手をプルプルさせながら調整するのはデメリットが多いです。
- 「揃える」という余計な部分に神経を持っていかれて疲れる
- スマートガイドがあるものの、マウス操作だとズレる可能性がある
- 時間がかかる(1日に何度も行う操作なので、積み重ねると差が出る)
「じゃあマウスではなく整列機能を使おう」という話になるのですが、今度はSketchの右サイドバー上部にわざわざマウスを移動させる必要が出てきます。

整列したあとはすぐマウスを真ん中に戻すことが多いので行って帰っての距離がムダになります。
というわけで、Illustratorと同様にショートカットキーを設定してすぐ発火できるようにしておくのがオススメです。
ショートカットキーの設定
メニューの[Arrange]内にある[Align]や[Distribute]が整列系のメニューです。
![[Arrange]→[Align]](https://webrandum.net/mskz/wp-content/uploads/2021/04/image_2-8.png)
ちなみに[Distribute]にはデフォルトでショートカットキーが割り振られていて、[Horizontally(水平方向に分布)]がcontrol + command + Hで、[Vertically(垂直方向に分布)]がcontrol + command + Vです。
![[Arrange]→[Distribute]](https://webrandum.net/mskz/wp-content/uploads/2021/04/image_3-3.png)
このルールに合わせて、control + command + 矢印キーで上下左右に整列、control + command + Cで中央揃えになるようにしておくのがオススメです。
Keyboard Maestroで設定
ショートカットキーの設定はKeyboard Maestroで行います。
Keyboard Maestroがなにか分からない人は、過去に記事にしているので、そちらをご覧ください。
ショートカットキーを押したときに、「Select or Show a Menu Item」アクションでメニューを指定しているだけの簡単なマクロです。

これを設定したいメニュー分作成すれば完了です。
マウスから手を離さないで発火できるようにする
このままだと、矢印キーを押すために結局マウスから手が離れてしまいます。
片手で押せるキーを考えて設定するのも1つの手ですが、自分の場合はSteerMouseというアプリを使い、マウスだけで矢印キーの入力ができるようにカスタマイズしています。
これで要素選択後に、左手でcontrol + commandを押し、マウスで矢印キーを押して整列ができます。



Figmaでプラグインを使わずに複数のレイヤー名を一括変更する方法
Figmaのプロトタイプ機能の基本|作成したデザインに実際に画面遷移を設定する
Figmaのコンポーネント入門|コンポーネントの作成方法から特徴まで
Figmaの図形周りの基本操作|図形の作成方法から細かい設定項目まで
Figmaのテキストやオブジェクトを斜めに変形・旋回させるプラグイン「SkewDat」
今から始めるUIデザインツールSketch入門 Sketchの特徴と使う理由
選択オブジェクトに合わせてアートボードを変更するillustratorのスクリプト
Figmaでサクッとワイヤーフレームが作れる素材検索プラグイン「Wireframe」
Figmaでオブジェクトの整列をショートカットキーを使って効率的に行う方法
Photoshopでファイルを開いたとき「予期せずにファイルの末尾に達しました。」と表示される場合の対処法
iTerm2で「Use System Window Restoration Setting」を設定しているとアラートが表示されて機能しない
Google Chromeのサイト内検索(カスタム検索)機能を別のプロファイルに移行する方法
iPadで入力モードを切り替えずに数字や記号をすばやく入力する方法
iPhoneやiPadでYouTubeの再生速度を3倍速や4倍速にする方法
Keynoteで有効にしているはずのフォントが表示されない現象
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
AirPodsで片耳を外しても再生が止まらないようにする方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
マウス操作の完成度が高いウインドウリサイズアプリ「Magnet」
Macで複数ディスプレイを使っている場合に便利な設定集
AppCleanerでMacアプリを関連ファイルごと完全に削除する
操作に没頭できる!Firefox版 Arcのようなブラウザ「Zen Browser」
chezmoi(シェモア)で始めるdotfiles管理
GitHubの通知を見逃さない!通知に特化したアプリ「Gitify」
Keyboard Maestroの変数基礎
Neovimを使い始める最初の一歩として便利な「LazyVim」
ウェブサイトをmacOSアプリとしてラッピングする「Unite Pro」
Keyboard Maestroの「Macro Debugger」で複雑なマクロのデバッグを行う方法