Adobe XDでUI/UXデザイン作業をする際、ショートカットキーを使いこなすことで作業効率が劇的に向上します。マウス操作だけでは時間がかかる作業も、キーボード操作を組み合わせることで数秒で完了できます。
この記事では、Adobe XDでよく使うショートカットキーを、Windows・Mac両対応で分かりやすく表形式にまとめました。初心者の方からプロのUI/UXデザイナーまで、今日から使える実用的なショートカットを厳選してご紹介します。
よく使う基本操作のショートカットキー
デザイン作業で最も頻繁に使う基本的なショートカットキーです。
これらを覚えるだけで作業効率が大幅にアップします。
| 操作内容 | Windows | Mac |
|---|---|---|
| 新規ドキュメント作成 | Ctrl + N | Command + N |
| ファイルを開く | Ctrl + O | Command + O |
| 上書き保存 | Ctrl + S | Command + S |
| 閉じる | Ctrl + W | Command + W |
| 終了 | Ctrl + Q | Command + Q |
| コピー | Ctrl + C | Command + C |
| カット | Ctrl + X | Command + X |
| ペースト | Ctrl + V | Command + V |
| 元に戻す | Ctrl + Z | Command + Z |
| やり直し | Ctrl + Shift + Z | Command + Shift + Z |
| すべて選択 | Ctrl + A | Command + A |
| 選択を解除 | Esc | Esc |
| 複製(ドラッグ中) | Alt + ドラッグ | Option + ドラッグ |
| 選択内容を複製 | Ctrl + D | Command + D |
選択・移動ツールのショートカットキー
オブジェクトの選択や移動に関するショートカットです。
UI/UXデザイン作業の基礎となる重要な操作です。
| 操作内容 | Windows | Mac |
|---|---|---|
| 選択ツール | V | V |
| ダイレクト選択ツール(なし) | – | – |
| 背面のオブジェクトを選択 | Ctrl + クリック | Command + クリック |
| オブジェクトを1pxずつ移動 | 矢印キー | 矢印キー |
| オブジェクトを10pxずつ移動 | Shift + 矢印キー | Shift + 矢印キー |
| 水平・垂直に移動 | Shift + ドラッグ | Shift + ドラッグ |
| 中心から拡大縮小 | Alt + ドラッグ | Option + ドラッグ |
| 縦横比を保って拡大縮小 | Shift + ドラッグ | Shift + ドラッグ |
描画ツールのショートカットキー
図形やパスを描画する際に使用する頻度の高いツールのショートカットです。
| 操作内容 | Windows | Mac |
|---|---|---|
| 長方形ツール | R | R |
| 楕円形ツール | E | E |
| 線ツール | L | L |
| ペンツール | P | P |
| テキストツール | T | T |
| アートボードツール | A | A |
| 正方形を描画 | Shift + ドラッグ | Shift + ドラッグ |
| 正円を描画 | Shift + ドラッグ | Shift + ドラッグ |
| 中心から図形を描画 | Alt + ドラッグ | Option + ドラッグ |
| 正方形・正円を中心から描画 | Shift + Alt + ドラッグ | Shift + Option + ドラッグ |
オブジェクト操作のショートカットキー
選択したオブジェクトを編集・変形する際に使用するショートカットです。
| 操作内容 | Windows | Mac |
|---|---|---|
| グループ化 | Ctrl + G | Command + G |
| グループ解除 | Ctrl + Shift + G | Command + Shift + G |
| ロック | Ctrl + L | Command + L |
| すべてをロック解除 | Ctrl + Shift + L | Command + Shift + L |
| 非表示 | Ctrl + ; | Command + ; |
| マスクでグループ化 | Ctrl + Shift + M | Command + Shift + M |
| 最前面へ | Ctrl + Shift + ] | Command + Shift + ] |
| 前面へ | Ctrl + ] | Command + ] |
| 背面へ | Ctrl + [ | Command + [ |
| 最背面へ | Ctrl + Shift + [ | Command + Shift + [ |
| パスを結合 | Ctrl + Shift + U | Command + Shift + U |
| 交差 | Ctrl + Shift + I | Command + Shift + I |
| パスを型抜き | Ctrl + Shift + X | Command + Shift + X |
| 水平方向に反転 | Ctrl + Shift + F | Command + Shift + F |
| 垂直方向に反転 | Ctrl + Shift + V | Command + Shift + V |
表示・画面操作のショートカットキー
アートボードやキャンバスの表示を調整するショートカットです。
作業効率に直結する重要な操作です。
| 操作内容 | Windows | Mac |
|---|---|---|
| ズームツール | Z | Z |
| ズームイン | Ctrl + + | Command + + |
| ズームアウト | Ctrl + – | Command + – |
| 100%表示 | Ctrl + 1 | Command + 1 |
| すべてのアートボードに合わせる | Ctrl + 0 | Command + 0 |
| 選択範囲にズーム | Ctrl + 3 | Command + 3 |
| 手のひらツール | スペース | スペース |
| グリッドを表示 | Ctrl + ‘ | Command + ‘ |
| レイアウトグリッドを表示 | Ctrl + Shift + ‘ | Command + Shift + ‘ |
| 正方形グリッドを表示 | なし(メニューから) | なし(メニューから) |
| ガイドを表示/非表示 | Ctrl + ; | Command + ; |
| デザインモード | Ctrl + Shift + D | Command + Shift + D |
| プロトタイプモード | Ctrl + Shift + E | Command + Shift + E |
| 共有モード | Ctrl + Shift + S | Command + Shift + S |
文字・テキストのショートカットキー
テキスト編集時に頻繁に使用するショートカットです。
| 操作内容 | Windows | Mac |
|---|---|---|
| テキストツール | T | T |
| フォントサイズを大きく | Ctrl + Shift + > | Command + Shift + > |
| フォントサイズを小さく | Ctrl + Shift + < | Command + Shift + < |
| 太字 | Ctrl + B | Command + B |
| 斜体 | Ctrl + I | Command + I |
| 下線 | Ctrl + U | Command + U |
| テキストの左揃え | Ctrl + Shift + L | Command + Shift + L |
| テキストの中央揃え | Ctrl + Shift + C | Command + Shift + C |
| テキストの右揃え | Ctrl + Shift + R | Command + Shift + R |
| 行送りを増やす | Alt + ↓ | Option + ↓ |
| 行送りを減らす | Alt + ↑ | Option + ↑ |
| 文字間隔を広げる | Alt + → | Option + → |
| 文字間隔を狭める | Alt + ← | Option + ← |
レイヤー・アセット操作のショートカットキー
レイヤーやアセットを効率的に操作するためのショートカットです。
| 操作内容 | Windows | Mac |
|---|---|---|
| レイヤーパネルを表示 | Ctrl + Y | Command + Y |
| アセットパネルを表示 | Ctrl + Shift + Y | Command + Shift + Y |
| レイヤー名を変更 | Enter | Return |
| レイヤーを削除 | Delete | Delete |
| コンポーネントを作成 | Ctrl + K | Command + K |
| コンポーネントを編集 | Enter | Return |
| コンポーネント編集を終了 | Esc | Esc |
| リピートグリッドを作成 | Ctrl + R | Command + R |
アートボード操作のショートカットキー
アートボードを管理する際に使用するショートカットです。
| 操作内容 | Windows | Mac |
|---|---|---|
| アートボードツール | A | A |
| 新規アートボード作成 | Ctrl + N(アートボードツール時) | Command + N(アートボードツール時) |
| アートボードを複製 | Alt + ドラッグ | Option + ドラッグ |
| 前のアートボードへ | Page Up | Page Up |
| 次のアートボードへ | Page Down | Page Down |
| ホームアートボードへ | Home | Home |
プロトタイプ・プレビューのショートカットキー
プロトタイピングとプレビュー機能に関するショートカットです。
| 操作内容 | Windows | Mac |
|---|---|---|
| プレビュー | Ctrl + Enter | Command + Enter |
| デスクトッププレビュー | Ctrl + Shift + Enter | Command + Shift + Enter |
| 録画を開始/停止 | Ctrl + Alt + R | Command + Option + R |
| インタラクションを追加 | なし(ドラッグ) | なし(ドラッグ) |
| ホームアートボードに設定 | なし(パネルから) | なし(パネルから) |
プラグイン・連携のショートカットキー
プラグインや外部ツールとの連携に関するショートカットです。
| 操作内容 | Windows | Mac |
|---|---|---|
| プラグインメニュー | Ctrl + Shift + P | Command + Shift + P |
| 前回使用したプラグインを実行 | Ctrl + Alt + P | Command + Option + P |
| プラグインを参照 | なし(メニューから) | なし(メニューから) |
ショートカットキーを覚えるコツ
1. 頻度の高いものから覚える
すべてのショートカットを一度に覚える必要はありません。
まずは基本操作や選択ツールなど、毎日使う操作から覚えていきましょう。
特にXDでは、コンポーネント作成(Ctrl/Command + K)とリピートグリッド(Ctrl/Command + R)は必須です。
2. 実際の作業で使いながら覚える
頭で覚えるよりも、実際のUI/UXデザイン作業で繰り返し使うことで自然と身につきます。
最初は遅くても、意識的にショートカットを使うようにしましょう。
3. モード切り替えを活用する
XDにはデザインモード、プロトタイプモード、共有モードがあります。
それぞれのモード切り替えショートカット(Ctrl/Command + Shift + D/E/S)を覚えることで、スムーズなワークフローが実現できます。
4. よく使うショートカットをメモする
デスクの見える場所にショートカット一覧を貼っておくと、すぐに確認できて便利です。
特にXD特有のコンポーネントやリピートグリッド関連は最初に覚えたい機能です。
5. IllustratorやPhotoshopとの違いを意識する
Adobe製品間で共通のショートカットも多いですが、XD独自のものもあります。
特にコンポーネント機能やプロトタイプ機能は、XDならではの強力な機能なので、積極的に使いこなしましょう。
まとめ
Adobe XDのショートカットキーは、UI/UXデザインの作業効率を向上させる最も手軽な方法です。最初はすべてを覚える必要はなく、よく使う操作から少しずつマスターしていくことをおすすめします。
この記事で紹介したショートカットを活用することで、マウス操作の時間が大幅に削減され、より創造的なデザイン作業に集中できるようになります。特にコンポーネント、リピートグリッド、プロトタイプ機能のショートカットは、XDの真価を発揮するための必須スキルです。
ぜひ今日から実践して、快適なUI/UXデザイン環境を構築してください。
