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のAuto Layout入門|繰り返しのレイアウトやコンテンツに応じて横幅可変するボタンをラクに作る
Figmaで細かいアニメーションを作成できるプラグイン「Motion」
Figmaで企業やサービスのブランドロゴやカラーをすぐ参照できるプラグイン「Brandfetch」
Sketchの画像を図形でマスクしたり、グラデーションマスクをする方法
Figmaのレイヤー周りの基本操作|グループ化やマスク、オブジェクトのロックや表示切り替えなどのレイヤーでできること
コーダー目線で理解するIllustratorのアピアランス機能
Sketchのライブラリアップデートの方法
Illustratorの「モザイクオブジェクト」機能で、画像にモザイクをかける方法(「ラスタライズ」を使った方法も追記)
Figmaのスタイル入門|何度も使い回す色や文字設定を管理する方法
Figmaのテキスト編集周りの基本操作|テキストの追加方法からグラデーション設定や縦書き、アウトライン化
iTerm2で「Use System Window Restoration Setting」を設定しているとアラートが表示されて機能しない
Google Chromeのサイト内検索(カスタム検索)機能を別のプロファイルに移行する方法
iPadで入力モードを切り替えずに数字や記号をすばやく入力する方法
iPhoneやiPadでYouTubeの再生速度を3倍速や4倍速にする方法
Keynoteで有効にしているはずのフォントが表示されない現象
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
AirPodsで片耳を外しても再生が止まらないようにする方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
Keyboard Maestroの変数基礎
Neovimを使い始める最初の一歩として便利な「LazyVim」
ウェブサイトをmacOSアプリとしてラッピングする「Unite Pro」
Keyboard Maestroの「Macro Debugger」で複雑なマクロのデバッグを行う方法
無料版でも高機能なランチャーアプリ「Raycast」の基本機能と環境設定
OnyXでターミナルを使わずにmacOSの詳細設定を行う
軽量で高速なターミナルエミュレーター「Ghostty」の設定方法
Eagleで実現するクリエイティブ素材の簡単管理
かゆいところに手が届く「Supercharge」でMac環境を便利にカスタマイズする
超軽量なコードエディタ 「Zed」をサブエディタとして活用する