レイアウトグリッド・方眼グリットWebデザインやアプリデザインなどに必要なグリットを、AdobeXDではレイアウトグリットと方眼グリットで設定できます。設定方法について紹介します。ブックマークUIデザインUXデザインWebデザイン公開日:2019/11/25最終更新日:2019/11/25目次1.グリットとは2.レイアウトグリット設定方法3.方眼グリット設定方法4.その他の機能1.グリットとはグリッドとは、水平方向と垂直方向のラインを集めたものです。デザイン要素を並べて表示できます。ページ間を移動するときに要素幅が変わらないようにWebデザインを作成するのに効果的で、ウェブサイトやWebアプリの一貫性が向上します。グリッドには通常、列(column)、行(row)、それぞれの行と列の間はガター(gutter)と呼ばれます。2.レイアウトグリット設定方法アートボードを選択すると、右側プロパティインスペクターに「グリット」が表示されます。「グリットを表示/非表示」にチェックをすると設定項目が表示されます。各項目に、数値を調整すると、レイアウトグリットを作成することができます。アートボードのサイズは一定なので、各項目の数値は自動調整されます。グリッドに対する左右の余白の幅(px)段間隔の設定ガターの幅になります。レイアウトの際に見た目や操作に大きく影響するので、小さい幅で設定はせず余裕のあるpxに設定しましょう。列の幅の設定カラムの幅になります。カラムの幅は個別に設定できませんので注意しましょう。左右余白の設定と各辺に異なる余白の設定ができます。「リンクされた左右のマージン」アートボードの左右の恥からカラム全体までの距離を指定します。「各辺に異なるマージンの使用」天地左右のマージンを設定することができます。グリットのカラーは、「列のカラー」のアイコンを押下すると、カラーピッカーが表示されますので好みに応じて変更可能です。方眼グリットを使うには、「グリットの種類」のメニューから「方眼」を選択します。「方眼の大きさ」の数値を調整すると方眼サイズが調整することができます。アートボードのサイズが割り切れない場合、方眼が切られますので設定に気をつけましょう。初期設定は「8」になっています。「グリットを表示/非表示」にチェックを外すと設定項目が非表示になり解除されます。