# ショートカットキーの一覧をSketchを使って作成する方法とそのメリット

URL: https://webrandum.net/sketch-shortcut-list/
公開日: 2019-01-16
更新日: 2019-01-16
カテゴリー: 作業効率化
タグ: Sketch, ショートカットキー
出典: Webrandum（著者: サイトウ マサカズ）

自分はmacで色んなアプリを使ってショートカットキーの設定をしたり、ショートカットキーのカスタマイズを行っています。

今回は、そのショートカットキーの一覧をSketchで作成する方法について解説します。

かなりマニアックな内容 + あまりショートカットキーを設定しない人には必要のない内容となっています。

## 作成した一覧

実際に作成した一覧は以下になります。

この1枚は自分のmacの基本となるショートカットキーとFinder（自分の場合Path Finder）のショートカットキーをまとめています。

![ショートカットキー一覧](https://webrandum.net/mskz/wp-content/uploads/2019/01/Shortcut_Base-1024x825.png)

拡大するとこんな感じです。

![ショートカットキー一覧（拡大版）](https://webrandum.net/mskz/wp-content/uploads/2019/01/Shortcut_Base_up.png)

## 何故Sketchなのか？

そもそも何故Sketchでこんな面倒なデータを作るのか？についてですが、SketchはデザインツールなのでExcelやSpreadsheetで作るより綺麗に（尚且つ自分の思い通りに）作ることができるので、後で印刷して使う事も考えるとデザインツールで作ったほうがいいかもと思いました。

更にSketchは動作が非常に軽いので、今後情報が増えても全く気になりませんし、オーバーライド機能（テンプレートとなるシンボルを作成して、テキストやアイコン等はシンボルを上書きする事ができる機能）があるので、今回のような同じパーツの使い回しに向いています。

下の画像は実際にSketchのオーバーライド機能を使って、ショートカットキーを記録した例になります。

![オーバーライド機能の使用例](https://webrandum.net/mskz/wp-content/uploads/2019/01/Shortcut_template_1.jpg)

①設定しているアプリのアイコン → コピペですぐ貼り付けられるようにする

②修飾キー → アイコンを予め作成しておいてオン/オフの切り替えを切り替える

③ショートカットキー → 入力欄に入力（自動で大文字になる）

④機能内容 → 入力欄に入力

非常に便利ですよね。特に自分は「そのショートカットキーはどのアプリで設定しているのか？」が設定できる事にこだわりました。どこで設定しているか分からないと、後で変えたい時に面倒ですし、そこまで管理する事が、今回Sketchで一覧作りを始めたキッカケでもあります。

まとめると以下のようになります。

- 自分の思い通りのレイアウトにしたい（自分に合った情報の整理がしたい）

- 後で印刷して使っても綺麗

- 動作が軽い

- オーバーライド機能がある

## データ作りのコツ

ここから先は自分がデータを作る上で気をつけたコツをまとめます。

### アイコンは後から簡単に変更できるようにする

シンボル内で使用している画像は後から簡単に変更が出来ます。

- Finderでアプリケーションを右クリック → [情報を見る]で情報パネルを開き、アイコンをクリックしてコピー

- Sketchでシンボルをクリックして、Overridesの中の画像をクリックして、先程コピーした画像をペースト

![アイコン画像を後から変更](https://webrandum.net/mskz/wp-content/uploads/2019/01/image_2.png)

これでアプリのアイコンを設定していけば、ひと目でショートカットキーを設定しているアプリが分かるようになります。

### オン/オフパーツのアートボードサイズは同じに

Sketchではシンボルの中にシンボルを入れる事によって、同じアートボードサイズのシンボルは簡単に切り替えられます。

![シンボルの切り替え](https://webrandum.net/mskz/wp-content/uploads/2019/01/Shortcut_template_3.png)

ただ、ここで注意しないといけないのが、アートボードサイズが同じシンボルは全て選択肢に出てきてしまうという点です。

今回自分が作る修飾キーのシンボルは以下の5つ × 2パターンです。

- Commandキー（オン/オフ）

- Optionキー（オン/オフ）

- Shiftキー（オン/オフ）

- Controlキー（オン/オフ）

- fnキー（オン/オフ）

この10個のアートボードサイズが全て同じだと、Commandキーのオン/オフを切り替えたいのに、別の修飾キーのシンボルも選択肢に出てきて邪魔です。

本来であればシンボル名を「/（スラッシュ）」で区切っていき、シンボルを階層化する事で仕分けが出来ますが、選択肢が2つだからなのか、余計なシンボルまで表示されてしまいます。

そこで、各修飾キーごとに微妙にサイズを変えてみました。こうする事で目的のシンボルのみを選択肢に出す事が出来ました（もっとスマートな方法あれば是非教えて下さい）。

![シンボルのアートボードサイズを変えた例](https://webrandum.net/mskz/wp-content/uploads/2019/01/Shortcut_template_4.png)

### 基本全てシンボルにする

ショートカットキーを記録するブロックと、タイトルの2つだけですが、どちらもシンボルにしています。こうする事で後で何か変えたい時に、すぐ修正する事ができます。

実際に、途中まで一覧を作ってからfnキーが必要な事に気が付いて追加したのですが、修正がすぐに完了しました。シンボルは偉大ですね。

![基本全てシンボル化する](https://webrandum.net/mskz/wp-content/uploads/2019/01/Shortcut_template_5-1024x281.png)

## データのダウンロードリンク

せっかくなので、データの配布も行います。

とは言っても、自分が設定しまくったショートカットキーの一覧表なのでそのままでは使い物になりません。あくまでテンプレートとしてご使用下さい。

また、オーバーライド機能があるSketchでしか使えないのでご了承下さい（Adobe XDでも.sketchデータは開けますがオーバーライド機能が使えないので役にたたないと思います）。

ダウンロードは[こちらから](https://www.dropbox.com/s/oc91dw71uxsui04/Shortcutkey_template.sketch?dl=0)