• HOME
  • Adobe XD
  • Adobe XD 全ガイドを使いこなせ！！作成/ロック/方眼/レイアウトグリッドまで

Adobe XD 全ガイドを使いこなせ！！作成/ロック/方眼/レイアウトグリッドまで

Adobe XDを使用する際に非常に便利なガイド機能。今回は、XDでガイドを利用する際に非常に便利な活用方法を紹介していきます。

ガイドの作成方法

Adobe XDでガイドを作成する際は、PhotoshopやIllustratorなどの、他のアプリケーション同様です。

❶原稿の端にカーソルを合わせる

❷下記画像のようにカーソルの形が変わったのを確認する。

❸そのままドラッグすると、マージンガイドをどこまでとるのか、数値が表示されます。今回は200pxにしました。

XDでガイドをロックする

ガイドを作っても、そのガイドが動いてしまっては意味がありません。Adobe XDでは、他のアプリケーションと同様にガイドをロックが可能です。

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

ガイドがロックされました。

レイアウトグリッドを使用する

Adobe XDでレイアウトグリッド（段組設定）を使用する方法です。

❶原稿を選択した状態にする

❷　表示　→　レイアウトグリッドを表示を選択する

レイアウトグリッドが表示されました。

このままでは使えないので、自分用にカスタマイズしましょう。右下に表示されるレイアウトパネルの数値を変更します。元の設定では、

列　12

段間幅　16

となっていましたが、それを以下のように設定してみてください。

レイアウトグリッドの幅が変更されました。

方眼グリッドを使用する

XDで方眼グリッドをの使用方法を紹介します。

❶まず、原稿を選択された状態にする

❷表示　→　方眼グリッドを表示を選択します

無事、方眼グリッドが表示されました。

グリッドのサイズは、右下のグリッドパネルにある『方眼の大きさ』より変更可能です。