XDの便利機能④-グリッドの表示

Webデザインをする際に、等間隔のグリッドを利用するととても便利です。とくにグリッドシステムを採用したデザインを行う場合は、グリッドを引いてから作業することがほとんどでしょう。

Illustratorで設定する場合は「グリッドに分割」機能を使って作成することが多いかと思いますが、XDの場合は簡単な設定で引くことが可能です。

まず、グリッドを引きたいアートボードを用意して、右側のプロパティインスペクターの下の方の「グリッド」にチェックを入れます。
この時に、オブジェクトやテキストなどは選択せず、アートボードを選択しておいてくださいね。

チェックを入れると、アートボードにグリッドが引かれます。

もちろん、いくつのグリッドを作成するか、余白はいくつにするかなど、細かく設定することができます。

グリッドの設定は、プロパティインスペクターの先ほどチェックを入れた下部（グリッドセクション）に用意されています。

例えば、「縦列」と書いている横の数値を変更してみましょう。
この数値は段数の設定です。
今回は「５」に設定してみます。

すると、グリッドの段数が５つになります。

Webデザインでは12つや16つのグリッドを使うことが多いと思います。
ここの値は必要に応じて任意に変えましょう。

さらに「段間隔」はグリッドとグリッドの間隔の指定です。

列の幅はグリッドの幅の指定です。

列の幅の下にある項目は、グリッドの左右上下の余白の指定です。

余白の指定は、まず「左右を同じ大きさにするか」「上下左右に別の値にするか」を設定することができます。
左のアイコンですね。

左側が「左右を同じ値に設定する」、右側が「上下左右に別の値を設定する」となります。
例えば、以下の例でいえば「左右同じ大きさで35ピクセルにする」設定となります。

なお、列の幅については、他の値が変化すると、それに伴って調整されます。
なので、列の幅は変更せず、そのほかの値を設定すると効率よく設定することが可能です！