Adobe XDのガイド線の引き方・ロック・削除方法

Adobe XD

Adobe XDを使っていて、日々学んだことを備忘録もかねてメモしていくコーナー。

今回は「ガイド線の引き方」として、アートボードにあらかじめガイド線を引くことよって、左右の余白をわかりやすくしておいたり、実際のモニターの画面サイズに対して決めたWEBサイトの画面幅を見やすくするようにできればと思います。

ガイド線の引き方

では早速ガイド線の引き方です。

やり方自体は簡単で、

1. アートボードを選択
2. カーソルを左辺(または上辺)付近に移動させる
3. 薄い灰色のバーが出て、カーソルが左右(または上下)に動かせるようになる
4. カーソルを左右(または上下)に移動させれば、ガイド線を引くことができる

ガイド線を複数引きたい場合には上記の1~4を複数回行うことで2本、3本とガイド線をいくつも引くことができます。

一度引いたガイド線の位置を変えたい場合は、そのガイド線を再度クリックすることで動かすことができます。

ガイド線のロックの仕方

ガイド線を引くことができたら、ガイド線をロックすることで、作業中に誤ってガイド線を動かすことがないようにします。

すでに引いてあるガイド線を右クリックし、メニューから「ガイド」→「ガイドをすべてロック」をクリックすることでガイドをロックすることができます。

ガイド線のロックを解除したい場合には、同じようにガイド線を右クリックし「ガイド」→「ガイドをすべてロック解除」で解除することができます。

そのほか、ガイドの表示/非表示も設定することができます。

ガイド線の削除

ガイド線を削除するには、すでにあるガイド線を画面外に移動させることでガイド線を消すことができます。

その際にはカーソルの右下にゴミ箱のマークが出てきますので、ゴミ箱のマークが出たらガイド線が消えると思えばよいでしょう。

一本ずつ消すのがめんどくさい場合には、ガイド線を右クリックし「ガイド」→「ガイドを消去」ですべてのガイド線を一括で消すこともできます。

おわりに

ガイド線を引くことによって、WFやプロトタイプの作成に役立てていきたいと思います。

ここまで読んでいただきありがとうございました。

The following two tabs change content below.

ihiro

WEB会社に勤める25歳WEBディレクター。 2018年新卒で入社後、約2年間アクセス解析とSEOを主にアナリスト/コンサルタントとして活動。 2020年よりWEBディレクターへ。