WebDesigner's Memorandumウェブデザイナーの備忘録

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

デザインするとき、意外と多い操作が「整列」です。

要素を揃えるたびにマウスで手をプルプルさせながら調整するのはデメリットが多いです。

  • 「揃える」という余計な部分に神経を持っていかれて疲れる
  • スマートガイドがあるものの、マウス操作だとズレる可能性がある
  • 時間がかかる(1日に何度も行う操作なので、積み重ねると差が出る)

「じゃあマウスではなく整列機能を使おう」という話になるのですが、今度はSketchの右サイドバー上部にわざわざマウスを移動させる必要が出てきます。

Sketchの整列アイコンの場所

整列したあとはすぐマウスを真ん中に戻すことが多いので行って帰っての距離がムダになります。

というわけで、Illustratorと同様にショートカットキーを設定してすぐ発火できるようにしておくのがオススメです。

ショートカットキーの設定

メニューの[Arrange]内にある[Align]や[Distribute]が整列系のメニューです。

[Arrange]→[Align]

ちなみに[Distribute]にはデフォルトでショートカットキーが割り振られていて、[Horizontally(水平方向に分布)]がcontrol + command + Hで、[Vertically(垂直方向に分布)]がcontrol + command + Vです。

[Arrange]→[Distribute]

このルールに合わせて、control + command + 矢印キーで上下左右に整列、control + command + Cで中央揃えになるようにしておくのがオススメです。

Keyboard Maestroで設定

ショートカットキーの設定はKeyboard Maestroで行います。

Keyboard Maestroがなにか分からない人は、過去に記事にしているので、そちらをご覧ください。

ショートカットキーを押したときに、「Select or Show a Menu Item」アクションでメニューを指定しているだけの簡単なマクロです。

Keyboard MaestroでSketchの整列マクロ

これを設定したいメニュー分作成すれば完了です。

マウスから手を離さないで発火できるようにする

このままだと、矢印キーを押すために結局マウスから手が離れてしまいます。

片手で押せるキーを考えて設定するのも1つの手ですが、自分の場合はSteerMouseというアプリを使い、マウスだけで矢印キーの入力ができるようにカスタマイズしています。

これで要素選択後に、左手でcontrol + commandを押し、マウスで矢印キーを押して整列ができます。

著者について

プロフィール画像

@31mskz10

1997年生まれ。2016年から専門学校でデザインを学び、卒業後は神戸の制作会社でWeb制作に従事しています。Webrandumは2016年から運営し、ウェブデザイン、フロントエンド開発、WordPress、CSS、JavaScript、制作環境の効率化を中心に、実際に試した内容を執筆しています。

Twitterをフォロー Facebookでいいね