Adobe XDをもっと使いこなすヒント! 第36回 アートボードにガイドを配置

by akihiro kamijo

Posted on 08-08-2019

連載

Adobe XDをもっと使いこなすヒント!

この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、アートボードにガイドを配置する際の使い方に関する4つのツイートを紹介します。

Tip 1. アートボード上にガイドを引く

#adobexd #protip You can now add artboard guides! With the artboard selected, hover over the top or side of the artboard. Once the cursor changes, drag a guide onto the artboard. @AdobeXD pic.twitter.com/qYxYFk9eQf

— Elaine Chao (@elainecchao) July 10, 2019

アートボードにガイドを引くには、アートボードの左または上の端にカーソルを移動します。カーソルがアートボードの端、あるいは、端の少しだけ外側にあるとき、カーソルの形状が変化して、薄いグレーの領域がアートボードの外側に表示されます。

この状態でマウスをクリックして、そのままアートボードの内側にドラッグすると、アートボードにガイドを配置できます。左端からは縦のガイド、上端からは横のガイドを引くことができます。

配置したガイドは、ドラッグし直せば位置を変更できます。

Tip 2. ガイドを他のアートボードにコピーする

#adobexd #protip Applying guides to a different artboards is a cinch – select your artboard, then select View > Guides > Copy Guides (Mac) or right click > Guides > Copy Guides (Win), then select Paste Guides on your target artboard. @AdobeXD pic.twitter.com/c1NBwjCMpV

— Elaine Chao (@elainecchao) July 11, 2019

アートボードに配置したガイドを、まとめて他のアートボードにコピーすることができます。同じ位置に揃えたいときに使うと便利な機能です。

Macの場合は、「表示」メニューから、「ガイド」>「ガイドをコピー」と選択します。Windowsの場合は、右クリックして、コンテキストメニューから「ガイド」>「ガイドをコピー」と選択します。

そのままターゲットのアートボードを選択してペーストすると、アートボード間でガイドをコピーすることができます。

Tip 3. ガイドをロックする

#adobexd #protip If your guides are getting in the way of your selection, you can lock your all guides so that you can snap to them, but they’re not selectable. @AdobeXD pic.twitter.com/V5ryShmlAB

— Elaine Chao (@elainecchao) July 15, 2019

オブジェクトを選択するときに、近くにガイドがあると邪魔になる場合があります。ガイドの位置調整をするとき以外は、ガイドをロックしておくとよいでしょう。

ガイドをロックするには、Macの場合は Shift + Command + ; キーを、Windowsの場合は Shift + Ctrl + ; キーを押下します(もう一度押下するとロックが解除されます)。この指示は、カンバス上のすべてのガイドをロックします。「ガイド」>「ガイドをすべてロック」のメニューからでもロックできます。

ロックされた状態でも、オブジェクトはガイドにスナップされます。スナップを無効にするには、Macの場合はCommandキー、Windowsの場合はCtrlキーを押しながらドラッグします。スナップに関する振る舞いは、他のガイド(グリッド等)と共通の仕様です。

Tip 4. ガイドを非表示にする

#adobexd #protip Quickly hide all of your guides using a keyboard shortcut (Cmd+; on Mac, Ctrl+; on Win), or using View > Guides > Hide All Guides. @AdobeXD pic.twitter.com/6LTSr0XCsg

— Elaine Chao (@elainecchao) July 12, 2019

ガイドを一時的に非表示にしたいときは、Macの場合は Command + ; キーを、Windowsの場合は Ctrl + ; キーを押下します。もう一度同じ組み合わせを押下すると、再びガイド表示されるようになります。「ガイド」サブメニューからも同様の操作が行えます。

不要なガイドを消去してしまいたいときは、アートボードの外までドラッグして、そこでドロップすれば削除できます。メニューから「ガイド」>「ガイドを削除」を選択すると、アートボード上のガイドをまとめて削除することができます。

いかがでしたか?
これは便利そうだ!という使い方はあったでしょうか?

次回をお楽しみに!

Topics: クリエイティブ, UI/UX & Web, UI / Web デザイン

Products: