【2024年版】AdobeXDのガイドの引き方を紹介します!

【2024年版】AdobeXDのガイドの引き方を紹介します!

※当ブログでは商品・サービスのリンク先にプロモーションを含みます。ご了承ください。

takato(@n8takato)です!

XDでガイドの引き方を知りたい

この記事は上記の課題に向けて作成しております。

XDはイラレやフォトショと同様にガイドを引くことが出来ます。

webデザインを作成する場合はガイドを引くことをおすすめします。

この記事ではXDでガイドを引く方法について説明していきます。

この記事を読むメリット

  • XDのガイドの引き方がわかる

この記事を書いた人

この記事を書いた僕はこんな人です!

  • 都内制作会社でwebデザイナー・webディレクターとして勤務
  • webデザイナー3年、webディレクター1年目
  • web制作現場で学んだことを発信している人

〜個人的にオススメなwebデザインスクール3選〜

今なら無料オンライン説明会実施中です!
興味のあるスクールに申し込んでみてください!

目次

XDのガイドの引き方

早速XDのガイドの引き方を説明していきます。

XDでは「垂直方向」と「水平方向」の2つのガイドが作成出来ます。

垂直方向のガイドの引き方

垂直方向のガイドの引き方は下記の通りです。

垂直方向のガイドを引く手順

  1. アートボードの左側にカーソルを合わせる
  2. 右側へドラッグする

①アートボードの左側にカーソルを合わせる

アートボードの左側にカーソルを合わせます。

カーソルを合わせるとマークが変わります。

アートボードの左端にカーソルを合わせます。するとカーソルのマークが変わります。
アートボードの左端にカーソルを合わせる

②右側へドラッグする

続いて右側へドラッグします。するとガイドが表示されるようになります。

そのまま右側へドラッグします。するとガイドが表示されるようになります。
右側へドラッグ

水平方向のガイドの引き方

水平方向のガイドの引き方は下記の通りです。

水平方向のガイドを引く手順

  1. アートボードの上側にカーソルを合わせる
  2. 下側へドラッグする

①アートボードの上側にカーソルを合わせる

アートボードの上側にカーソルを合わせます。

アートボードの上にカーソルを合わせます。するとカーソルのマークが変わります。
アートボードの上にカーソルを合わせる

②下側へドラッグする

カーソルを下の方へドラッグします。

すると水平方向のガイドが表示されます。

下へドラッグします。するとガイドが表示されるようになります。
下へドラッグ

ガイドを配置する

作成したガイドはドラッグすれば移動出来ます。

お好みの場所にガイドを配置してみてください。

Macユーザーの場合Shiftキーを押しながらドラッグさせると10px単位ずつ移動するようになります。

ガイドを固定する方法

作成したガイドは固定することが出来ます。

表示」→「ガイド」→「ガイドをすべてロック」を選択します。

「ガイドをすべてロック」を選択します。するとガイドがロックされ、動かせられないようになります。
ガイドをすべてロック

すると表示されているガイドが固定されます。

ガイドの固定を解除するには「表示」→「ガイドをすべてロック解除」を選択します。

「ガイドをすべてロック解除」を選択するとガイドのロックが解除されます。
ガイドをすべてロック解除

ガイドを削除する方法

作成したガイドは削除することも出来ます。

垂直方向のガイドの削除方法

ガイドを選択してアートボードの左側までドラッグします。

するとカーソルにゴミ箱マークが表示され、ガイドが削除されます。

水平方向のガイドの削除方法

ガイドを選択してアートボードの上側までドラッグします。

先ほどと同様にゴミ箱マーク表示され、ガイドが削除されます。

一括でガイドを削除する方法

ガイドが表示されたアートボードを選択します。

表示」→「ガイド」→「ガイドを消去」でガイドを削除されます。

「ガイドを消去」を選択するとガイドが一括で削除されます。
ガイドを消去

一時的にガイドを非表示にする方法

制作中に少しの間だけガイドを非表示にしたい場合があります。

表示」→「ガイド」→「ガイドをすべて隠す」で非表示に出来ます。

制作中に少しの間だけガイドを非表示にしたい場合は、「表示」→「ガイド」→「ガイドをすべて隠す」で非表示に出来ます。Macユーザーは「コマンド」+「;」で非表示に出来ます。

Macユーザーは「コマンド」+「;」で非表示に出来ます。

ガイドを表示するメリット

アートボードにガイドを表示する利点は下記の通りです。

  • webサイトの両側の余白を揃えられる

ガイドがあると余白を揃えることが出来る

基本的にwebサイトの横幅は1,200pxくらいで作成します。

そのため、それ以上のデバイスで見ると両端に余白が作成されます。

基本的にwebサイトの横幅は1,200pxくらいで作成します。そのため、それ以上のデバイスで見ると両端に余白が作成されます。
TAKATOBLOG

僕のブログの場合はグレー色の余白が作成されています。

webデザインを作成する際この余白も込みで作成します。

ガイドを表示することでどこから余白なのか分かりやすくなります。

最後に

この記事ではXDのガイドの引き方について説明しました。

ガイドを引くことでデザインが制作しやすくなります。

これまで使ったことの無い方は是非活用してみてください。

独学でwebデザインを学んでいる方向けに記事を作成しました。

あわせて読みたい
webデザインの独学は何から始めれば良いか紹介! webデザインの独学は何から行えば良いの? この記事は上記の課題に向けて作成しています。 webデザインを独学で行う方は何から行動すれば良いか悩みますよね。 そんな方...

僕が未経験でwebデザイナーになるまでに行ったことはこちら↓

あわせて読みたい
未経験からwebデザイナーになるためにやったことを紹介! 未経験でwebデザイナーになるには何をすれば良いの? この記事は上記の課題に向けて作成しています。 未経験でwebデザイナーを目指している方が多いかと思います。 僕自...

〜個人的にオススメなwebデザインスクール3選〜

今なら無料オンライン説明会実施中です!
興味のあるスクールに申し込んでみてください!

  • URLをコピーしました!
目次