かつて（Web黎明期、初期〜2010年代中期）はWebデザインのデザイン制作フェーズといえば、
Photoshopの、もっさりとした容量の重いデータ上でデザインカンプをつくって、
それを画像として書き出し、クライアント側に確認をとり、コーディングに進む、という流れが一般的でした。

UIデザインという概念が登場して普及した昨今、
Webサイトを構成する要素ひとつひとつも「UIパーツ」である、
と認識される事が一般的になってきました。

それにともないWebサイトやUIデザインのワークフローも進化して、
デザインカンプをXDで制作、[共有]機能を使って確認用URLを発行、実機と同じような環境でクライアント側に確認してもらい、
プレビューURL画面上にて直接フィードバックコメントを受け、反映を繰り返して完成につなげていく…。

そんな流れで制作を行う機会も徐々に増えてきました。

もちろん、細かな素材制作の分野では、
画像加工は Photoshop で、ベクター系の素材制作は Illustrator で、
といった部分は従来どおりですが、
デザインカンプ制作 → 共有 → フィードバック のフェーズにXDが登場した事で、
随分ワークフローがスムーズになったなぁと感じている今日この頃です。

（このXDが担う部分に、FigmaやSketchが入る制作現場のケースもあったりしますね。）

そんな現在のWeb制作において大活躍してくれる Adobe XD を使用している際に、
個人的によく使う、覚えておくと便利なショートカットについて、書いていきたいと思います。

文字の即時アウトライン化

⌘+8

↑Macの場合

Ctrl+8

↑Windowsの場合

こんな場合に使えます

たとえば、あるWebサイトデザインの際に、価格部分の数字だけ強調したい場合などで、
文字にグラデーションをかけたい。そんな場合があるとします。

もちろん Photoshop なり Illustrator なりで素材を作って持ってくればよいのですが、
いちいちアプリを切り替えずとも、XD上で完結させたいとします。

そんなときは、対象のテキストを選択して、 ⌘+8 。
通常のテキストではグラデーションをかけることはできませんが、
アウトライン化をすれば当然のことながら、可能になります。

地味ですが覚えておくと楽です。

対象の書き出し

⌘+E

↑Macの場合

Ctrl+E

↑Windowsの場合

こんな場合に使えます

XDから画像を書き出したい場合、いちいち画面の上部に並ぶメニューにカーソルを持って行く必要はありません。
書き出したい要素を選択したら、 ⌘+E 。

これで、書き出しダイアログが開きます。
書き出し形式は png, jpg といった通常のラスター画像に加え、svg が選べます。

XDは、svg形式での書き出しがとても強力で、個人的にはよく使うショートカットです。

対象をロック、またはロック解除する

⌘+L

↑Macの場合

Ctrl+L

↑Windowsの場合

こんな場合に使えます

Illustrator であれば、⌘+2 に相当する概念です。

デザイン制作時、複数のレイヤーが上下に折り重なる事が多々あります。茶飯事ですね。
その下の要素は動かしたくない、上の要素は止めておきたい。様々なケースがあります。

レイヤーをロックしたいと思ったら、
⌘+L 。
もうこれで、レイヤーが勝手に動いてしまうことはありません。

もう一度 ⌘+L を押さない限りは。

対象の画像にマスクをかける

⌘+Shift+M

↑Macの場合

Ctrl+Shift+M

↑Windowsの場合

こんな場合に使えます

デザイン制作時、効果的に画像をつかうことは、ユーザーにとって
そのコンテンツの内容を伝えやすくする良い手段になります。

ただ、やたらサイズの大きい画像、この画像のこの部分だけ使いたいのに、
そんな時があります。

これも、Photoshop で用途に応じた素材を加工して持ってくれば良い話ですが、
角版の画像（長方形で切り抜けるような画像）が複数あるのに、いちいちアプリを切り替えるのも手間ですよね。

XD上で軽くマスクしたい時は、
⌘+Shift+M 。

マスクしたい形のシェイプを、かならず「対象画像より上に置き」、⌘+Shift+M です。

レイアウトグリッドの表示

Shift+⌘+'

↑Macの場合

Shift+Ctrl+'

↑Windowsの場合

こんな場合に使えます

グリッドシステム。
これは、デザイナーの方なら、解説不要でしょう。古くは紙媒体のデザインの分野の頃から存在する、
画面に秩序を与える概念ですね。

Webデザインの場合、慣例としてよく用いられてきたのが
もはや古典と言ってもいい 960px Grid System であったり、

モニタサイズがもう少し大きくなってきた昨今では、
1000px ~ 1200pxくらいの横幅を基準に、12個のユニットで割ったグリッド、などですね。

※いずれも、8または4の倍数で割り切れる数を基準にグリッドを設定するのが一般的ですね。
なぜ8pxまたは4pxが基準なの？という部分については、
「モニタサイズの公約数」、「モニタサイズ グリッド Webデザイン」のような言葉を手がかりに調べると、
いろんな解説をされてる方のサイトがヒットすると思います。

長い話になるので、この記事では説明を割愛します。

デザインを開始する前段階において、
当然XDでも、グリッドをガイドとして設定する事ができます。

それを表示/非表示する際に使えるのがこのショートカットです。

方眼グリッドの表示

⌘+'

↑Macの場合

Ctrl+'

↑Windowsの場合

こんな場合に使えます

上に書いた、
「〜12個前後のユニットと、その周りにガターを持ったレイアウトグリッド」とは別に、
「方眼グリッド」という概念がWebデザインには存在します。

これは、より細かく一定の基準値を取りやすくするための定規のようなもので、
一般的には、8pxの方眼グリッドを敷いたりするケースが多いです。

それを表示/非表示する際に使えるのがこのショートカットになります。

きっちり正確に
8pxまたは4pxの倍数の margin や padding を取る事で、
画面に秩序が生まれることはもちろん、

コーディングを担当する方に正確な margin や padding の数値を共有する意味でも、
あらかじめ的確にデザインカンプを作っておけば、良い仕事に繋がるわけでして、
その際にも一助になるグリッドだったりします。

各編集モードへの切り替え

デザインモード

⌥+1

↑Macの場合

Alt+1

↑Windowsの場合

プロトタイプモード

⌥+2

↑Macの場合

Alt+2

↑Windowsの場合

共有モード

⌥+3

↑Macの場合

Alt+3

↑Windowsの場合

こんな場合に使えます

デザイン制作がひと通り進んだら、いよいよ共有フェーズです。

冒頭でも書いたように、XDはこの共有の機能がとても強力で、
もはや従来のデザイン確認フェーズにおけるワークフローすら、
変えようとしています（実際にいくつかの案件において、ワークフローが変わってきているのを実感してます）。

このショートカットでは、
XDの持つ3つのモードを切り替える事ができます。

これを使う時には、もう頭の中では、
「さてどんな文言で、このデザインについて説明するのがベストか」
「Slackでの展開の際は、どんな言葉を選べば、最もスムーズに伝わるだろうか」
だとか、

または

次にアサイン予定のタスクの
スケジュール感を考えている、

そんなデザイナーの方も多いのではないでしょうか。

ショートカット一覧

さて、Web制作の際に自分がXDを使っていて、
よく使うショートカットについて
いろいろご紹介してきましたが、Adobe公式の XD User Guide のページでは、
ショートカット一覧が網羅されています。
Adobe XD User Guide

↑ご自身がよく使うショートカット以外にも、こんなショートカットがあるんだな、
というのを見てみるのも良いかもしれません。

この記事のまとめ

今回は、Adobe XD での
Webデザイン、UIデザイン制作の効率をアップしてくれる
便利なショートカットについて、
自分がよく使うものをピックアップして幾つかご紹介しました。

このところ、Vue.js と Vuetify 関連の記事など、
フロントエンド方面寄りの記事が多かったですが
ちゃんと日頃、WebデザインやUIデザインのお仕事もしているんですよ、
という事をお伝えしたかったのもありまして。

XDに関する記事も、今後おもしろそうな話題をみつけ次第、また書いていきたいと思います。

※この記事は、品質向上を目的として随時、内容の修正や更新を行う場合があります。