デザインやワイヤーフレームを作成するときに欠かせない余白間や位置の調整は、Adobe XDのライン（ガイドライン）を活用しましょう！統一性のある制作物になるので、クオリティにも差がでます。
とはいえ、「XDでガイドを引く方法が分からない」という人も多いのではないでしょうか。
Adobe XDのガイド(ガイドライン)の引き方
XDを使っている時に、アートボードの左右の余白を均等にしたい時や上下左右の余白を統一したいというシーンはないでしょうか。
垂直ライン（ガイドライン）の引き方
ライン（ガイドライン）を引きたいアートボードの左端にカーソルを当てます。
左右の矢印アイコンがでてくるので、クリック&ドラックしながら右側に動かします。
あとは、左右に動かしながら自分の好きな場所でドロップすればガイドが配置できます！
ガイドの位置は、目分量で調整しても良いですが、1px単位で動くためきりの良い数字にしたい時はマウス操作に苦戦することがあります。
そんな時は、shiftキーを押しながらクリック&ドラックを動かすと10px単位でガイドが移動するので、試してみましょう！
ガイドを動かす時は「shift」を押しながらクリック&ドラックすると、10px単位でガイドの位置が調整できます！
水平ライン（ガイドライン）の引き方
水平ライン（ガイドライン）を引きたい場合は、対象のアートボードの上端にカーソルを合わせます。
上下の矢印が出てくるので、この状態でガイドを置きたい場所に移動させましょう。
垂直ラインの時と同様にきりの良い数字にラインを引きたい場合は、「shift」キーを押しながらクリック&ドラックすれば、10px単位で動きます。
Adobe XDのガイド(ガイドライン)の固定
XDのガイドを固定する方法①メニューから固定
メニューにある「表示」をクリックします。
メニュー項目の「ガイド」の中にある「すべてのガイドをロックする」をクリックしましょう。
表示 > ガイド > ガイドをすべてロック
設定はこれで完了です！
ガイドを見てみると左右の矢印がでてこなくなっています。
XDのガイドを固定する方法②ショートカットで固定
作業を効率化したい人は、ショートカットでもロックと解除ができるので覚えておきましょう。
- Winの場合）Ctrl + Shift + ;
- Macの場合）Command + Shift + ;
ショートカットを覚えれば、楽にロックと解除ができるので便利です！
Adobe XDのガイド(ガイドライン)を削除する方法
指定したガイドを削除する方法
引いたガイドを削除したい場合は、対象のガイドをクリック&ドラックしてアートボードの外側に移動させましょう。
ガイドを外側に移動させた時にゴミ箱マークが表示されていれば、削除ができているということになります。
一括でガイドを削除する方法
複数あるガイドをまとめて削除したい場合は、一括削除ができます！
アートボードが選択されている状態でメニューバーにある「表示」をクリックしましょう。
「ガイド」の中にある「ガイドを消去」をクリックすれば、すべてのガイドが消えます。
表示 > ガイド > ガイドを消去
「ガイドを消去」の場合、ガイドがロックされている状態でも削除することができます。
ガイドを一時的に非表示にしておく方法
ガイドを完全に削除せず、一時的に非表示にしておきたいシーンがあると思います。
そんな時は、メニューバーにある「表示」を開き、「ガイド」の中にある「ガイドをすべて隠す」をクリックすると、一時的に非表示にすることができます！
表示 > ガイド > ガイドをすべて隠す
「ライン（ガイドライン）を消した時のデザインを一瞬だけ見たい」という時は、ショートカットでも非表示/表示を簡単に切り替えられるので覚えておきましょう！
- Winの場合）Ctrl + ;
- Macの場合）Command + ;
Adobe XDのガイド(ガイドライン)を使いこなそう！
XDのガイドのやり方をマスターすれば、デザインやワイヤーフレームだけでなく、あらゆるシーンで応用ができます。
操作もシンプルで直感的にできるので、今日からXDの作業時に使ってみましょう！