【実践向け】明日から使える!AdobeXD(Mac版)のショートカット活用方法を徹底解説

【実践向け】明日から使える!AdobeXD(Mac版)のショートカット活用方法を徹底解説

2020.4.13
102views

みなさんこんにちは!
デザインをする時に使うツールは色々ありますが、その中でも動作の軽さが売りのツールといえばXD。
せっかくなので、サクサク作業したいところです。
効率よい作業のためには、便利なショートカットの使用が不可欠!
とはいえ、全部のショートカットを一気に覚えるのも大変です。
ショートカットを一覧にしてくれているサイトやブログはたくさんありますが、
できれば使用頻度と便利度が高いものだけサクっと覚えたいというのが本音……。

というわけで、この記事では、私が実際に作業をした上で厳選した、使用頻度が高いと感じたMacの基本ショートカットと、
絶対役に立つプラグインにショートカットをふりわけることで、
最小限の時間で快適な作業スペース作りを提案
したいと思います!

【使用頻度高!】絶対使う基本のショートカット15選

基本中の基本をおさえることで作業時間削減の底上げが可能に!
この段落では、15個に厳選した基本のショートカットをご紹介いたします。

整列

  1. 中央(水平) ⌃⌘C
  2. 中央(水平)

  3. 中央(垂直) ⌃⌘M
  4. 中央(垂直)

  5. 上下左右揃え ⌃⌘矢印キー
  6. 上下左右揃え

    テキスト

  7. 太字 ⌘B
  8. 太字

  9. フォントサイズを上げる ⇧⌘>
  10. フォントサイズを上げる

  11. フォントサイズを下げる ⇧⌘<
  12. フォントサイズを下げる

    ズーム

  13. ズームイン Option +スワイプ(Magic Mouse)/ピンチアウト(トラックパッド)
  14. ズームアウト Option +スワイプ(Magic Mouse)/ピンチイン(トラックパッド)
  15. ズームイン

  16. 選択範囲に合わせてズーム ⌘ 3
  17. 選択範囲に合わせてズーム

    パネル・画面の切り替え

  18. レイヤーパネル ⌘ Y
  19. レイヤーパネル

  20. アセットパネル ⇧⌘ Y
  21. アセットパネル

  22. デザイン⇄プロトタイプの切り替え ⌃Tab
  23. デザインプロトタイプの切り替え

    その他

  24. シェイプでマスク ⇧⌘ M
  25. シェイプでマスク

  26. 1px単位で要素のサイズ変更 ⌘ 矢印キー
  27. 1px単位で要素のサイズ変更

  28. 10px単位で要素のサイズ変更 ⌘⇧ 矢印キー
  29. 10px単位で要素のサイズ変更

【時短テク!】導入必須プラグインにもショートカットを設定

今回は厳選した6個のプラグインにしぼり、ショートカットの設定をしたいと思います!
まずは設定の仕方から説明していきます。

Macのショートカット設定方法とは?

デフォルトでショートカットが設定されていない場合でも
Macのシステム環境設定から自分でカスタムすることができます。
Macのショートカット設定方法
設定方法は以上になります。
意外と簡単にできますね!

【導入必須!】おすすめプラグインとショートカット設定まとめ

続いて導入必須のおすすめプラグインの紹介と
ショートカットキーの提案をさせていただきます。
(プラグインの細かい説明は他の記事でも紹介されているので割愛いたします…。)

Rearrange Artboards into Grid ⌃G

どんなプラグイン?:アートボードの整列
Artboard Plusというプラグインに含まれる機能の一つで、アートボードを整列させることができます。
今回は⌃G(GはGridからとりました)のショートカットを設定しました。

Split Preserve Appearance ⌃S

どんなプラグイン?:改行区切りのテキストを1行ずつに分解
Split Rowsというプラグインに含まれる機能の一つで、コピペでもってきたテキストを1行ずつテキストレイヤーにわけることができます。こちらはテキストのスタイル(太字など)を保ったままわけられます。
今回は⌃S(SはSplitからとりました)のショートカットを設定しました。

Sort Artboards by Name A-Z ⌃N

どんなプラグイン?:アートボード名で昇順に並べ替え
こちらもArtboard Plusというプラグインに含まれる機能の一つで、アートボード名を昇順に並べかえることができます。今回は⌃N(NはNameからとりました)のショートカットを設定しました。

Remove Decimal Numbers ⌃.

どんなプラグイン?:オブジェクトのサイズに少数点が含まれてしまった時に整数に直す
オブジェクトのサイズを調整している時などに、いつのまにか現れてしまう小数点を切り捨てて整数になおしてくれます。
今回は⌃.(.は小数点からとりました)のショートカットを設定しました。

これらを反映すると…
これらを反映すると
これだけですぐにショートカットとして使用できるようになりました!
また、デフォルトでショートカットが設定されている便利なプラグインもあります。

Resize Artboard to Fit Content ⌃F

どんなプラグイン?:コンテンツに合わせてアートボードをリサイズ
コンテンツに応じてアートボードのサイズを調整してくれます。複数のアートボードも一括で行えます!
こちらは⌃Fのショートカットが設定されています。

TrimIt ⌃⌘T

 
どんなプラグイン?:文章量に応じてテキストエリアのサイズを自動調整
流し込んだテキストの文章量に合わせてテキストエリアのサイズを自動調整してくれます。
こちらは⌃⌘Tのショートカットが設定されています。

プラグイン機能のショートカットを使いこなすことで一段階上の効率化が可能になると思います。
ぜひみなさんも試してみてください!

さいごに

今回は最小限これがあれば作業がはかどる!という基準で選定しましたが、
他にもショートカットはたくさんありますし、新しいプラグインもどんどん出てきます。
各々の作業内容に適したショートカットを活用してさらなる効率化を目指していきましょう!

参考サイト

アドビオフィシャル
Adobe XD で使用できるすべてのショートカットキーを紹介します。

Web Design Trends
2019年最新:Adobe XDのおすすめプラグイン10選

Web design facts
【2020年完全保存版】AdobeXDを使いやすくするプラグイン厳選12選【UI/UXデザイナー必見!】

■バシャログ
【Adobe XD】便利なプラグイン紹介

■NIJIBLOG 関連ページ
【現役UIデザイナーおすすめ!】Adobe XDの無料プラグイン9選

無料ダウンロードはこちらから