XDでレイアウトグリッドを設定する方法について解説します

  • PR
  • WEB制作
XDでレイアウトグリッドを設定する方法について解説します

今回は、美しいレイアウトを作るために役立つAdobe XDの『レイアウトグリッド機能』について解説してゆきます。

レイアウトグリッドの使い方を覚えれば、効率よく、美しいレイアウトのWEBサイトをデザインする事ができますよ!

Adobe XDについて「何ができるツールなの?」「どんな作業に適しているの?」という事が知りたい方は「Adobe XDとは?出来ることや使い方を解説する」をご覧ください。



このほか「Adobe XDの全体的な使い方を確認したい!」という方には次の記事がおススメです。

▼この記事を書いたひと

フリーランスみやしも(@miyashimo_blog)です。プログラミングやWebサイト制作に関するITの情報を幅広くお届けしていきます。

XDでレイアウトグリッドを設定する方法を解説します

XDでレイアウトグリッドを設定する方法を解説します

WEBサイトの制作では、整理した情報を並べて表示させる、多様なデバイス幅に対応させる(レスポンシブWEBデザイン)といったことを目的に、グリッドシステムというレイアウト手法が広く使われています。



デザインツールであるXDも同様に、『レイアウトグリッド』という機能を使えばグリッドシステムを前提としたデザイン・ワイヤーフレームなどの作業に対応させることが可能となります。



▼レイアウトグリッドを使うメリット

  • グリッドシステムによる作業精度があがる
  • 写真やテキストが等間隔に、きれいに整列できる
  • 全体に統一感を持たせた、美しいレイアウトが組める



そこで今回は、XDの標準機能である『レイアウトグリッド』について、有名なWEBフレームワークでもあるBootstrapへの対応を実例に、くわしく解説してゆきます。

レイアウトグリッドを有効にする

まずは、XDでレイアウトグリッドを有効にする方法から解説してゆきます。



レイアウトグリッドを有効にするには、アートボードを選択した状態で、右側のメニュー内の『グリッド』の項目にあるチェックボックスをONにします。

アートボードを選択する方法
左上の名前の部分をクリックする。何も置かれていない状態ならシングルクリックする。何か置かれていれば余白の部分をダブルクリックする。といった方法で、それぞれアートボードを選択できます。

レイアウトグリッドの設定方法

今回紹介する方法では、次の内容のもとにレイアウトグリッドの設定を行います。



▼レイアウトグリッドの設定内容

  1. 列数(カラム数)
  2. 段間幅
  3. リンクされた左右のマージン
この順番でレイアウトグリッドの設定を行ってゆきます
レイアウトグリッドは自動計算された値がそれぞれの項目を補う作りになっているため、今回紹介する方法では上記順番の通りに設定する必要があります。ちなみに今回は「列の幅」の項目は直接入力しないので、変更しない様に注意しましょう。

また今回は、WEBフレームワークの『Bootstrap』の仕様を凡例として、次のような条件でレイアウトグリッドの各設定を進めてゆきます。

アートボード幅:1920px
コンテンツ幅:1140px
左右の余白:15px

1.列数(カラム数)を指定する

まずは「列数(カラム数)」からですが、ここは初期値の12のままでOKです。

Bootstrapもそうですが、そのほか多くのWEBデザインでも、等分がしやすい12を基準にレイアウトに使用する列数(グリッド数)を決定しています。

2.段間幅を指定する

続けて段間幅を指定してゆきます。少し意味がわかりづらいかもですが、この項目は列(カラム)の間の距離を指しています。段間幅には、左右の余白を2倍した値を入力します。

段間幅 = 左右の余白 * 2

今回だと、「段間幅」には30pxが値として入ることになります。

3.リンクされた左右のマージン

最後に『リンクされた左右のマージン』の調整を行います。リンクされた左右のマージンとは、アートボード幅からコンテンツ幅を差し引いて余ったときに出来る左右の余白になります。


この値は、次の計算式から求める必要があります。

リンクされた左右のマージン = (アートボード幅 - (コンテンツ幅 - 段間幅)) / 2

今回の場合だと次のような計算結果になります。「リンクされた左右のマージン」には405pxを設定しましょう。

405 = (1920 - (1140 - 30)) / 2

また、このタイミングで「列の幅」に自動計算された結果の65が値として入ります。

レイアウトグリッドの各項目は整数値のみ指定できるため、計算結果が割り切れない場合は「リンクされた左右のマージン」が自動で補正され、結果としてコンテンツ幅が意図した通りにならならない事があります。

以上でレイアウトグリッドの設定は終わりです。設定が出来たらアートボード上では、次のような枠が確認できる様になっていると思います。

レイアウトグリッドの設定が完了した状態

レイアウトグリッド使用した作業例

レイアウトグリッドを使用したデザイン作業例

この様に、レイアウトグリッドを使用すれば、WEBページの要素をコンテンツ領域に適切に収める事ができる、画像のような横並びのレイアウトを等間隔で作成できるといった、デザイン作業における多くのメリットを生むことが出来ます。



レイアウトグリッドが無くても同等の事を実現する事はできますが、例えばガイドが無い状態で等間隔でならべるレイアウトを作るには、横幅の計算やサイズの手入力が必要となり、思わぬ作業に時間を取られる事にもなるため、おススメはできません。


レイアウトグリッドを利用すれば、WEBページの作成における成果物の精度や作業効率を格段に上昇させることができます。

XDの関連情報まとめ

このほか、人気のデザインツール「Adobe XD」の関連情報をまとめて紹介します。

XDの基本的な使い方

Adobe XDの基本的な使い方について、つぎの記事で確認する事ができます。

各機能のくわしい使い方

各機能のくわしい使い方について、つぎの記事が参考になります。

アートボード:デザインの作業領域

リピートグリッド:デザインのくり返しを行う

コンポーネント:デザインを部品化して管理する

レイアウトグリッド:グリッドシステムのデザインに役立つ

プロトタイプ:デザインを動かすことが出来る

プラグイン:おススメも紹介する

この記事のまとめ

今回は、デザインツールAdobe XDの『レイアウトグリッド機能』について、くわしく解説してゆきました。



▼レイアウトグリッドを使うメリット

  • グリッドシステムによる作業精度があがる
  • 写真やテキストが等間隔に、きれいに整列できる
  • 全体に統一感を持たせた、美しいレイアウトが組める
XDを使ったデザイン作業をするなら、ぜひとも覚えておきたい機能の1つですね!

Adobe XDを使ってみよう

Adobe XDは無料から使えて、かつ初心者にも扱いやすい人気のデザインツールです。多くのWEBデザイナー・UI/UXデザイナーから支持を集めており、今やWEBサイト・アプリ開発の現場では欠かせないツールになります。



▼公式サイト

Creative Cloud

デザインやUI/UXなどを学習するなら、ぜひ優先的に習得しておきたいツールですね!

基礎から学びたい方に向けて

Adobe XDの使い方を基礎から学びたい方に向けて、画像付きで分かりやすく解説する記事を書きました。

WEB初心者の方や、これからクリエイターになりたい方は必見の内容です!