XDでレイアウトグリッドの値を計算する際、「どの値をどのようにいじれば良いのかが分からない！」という駆け出しWebデザイナーの人は、きっと多いのではないでしょうか？
当記事では、Bootstrapのグリッドシステムのサイズを元に、XD上でレイアウトグリッドの値を計算する方法を解説します。
ちなみに当記事で解説している内容は、下記リンク先動画の内容を参考に執筆させていただきました。
ユウマ動画で確認したい方は、ぜひ上記を合わせてご覧いただくと理解が深まりますよ。
【事前知識】レイアウトグリッドのそれぞれの値の意味
XDのレイアウトグリッドで調整できる値は、それぞれ下記の値になります。
| 【列】 | カラムの数 |
| 【段間隔】 | ガター（カラム間のpx幅） |
| 【列の幅】 | カラムのpx幅 |
| 【アイコン表示】 | 左右（上下左右）のpx幅 |
ユウマまずは、それぞれの値がどこを調整する役割を果たすのか？を把握しておきましょう。
Bootstrapを使ったXDレイアウトグリッドの計算方法
コンテナサイズとガターサイズを調べる
値を計算するにあたって、まずはBootstrapのコンテナサイズとガターサイズを知る必要があります。
Bootstrap公式サイトより「Grid system」ページの「Grid options」セクションから、それぞれの値を確認します。
ユウマちなみに、解説しやすいためBootstrap4の表を用いていますが、5でもしっかり値を計算することができます。
上記表の「Max container width」と「Gutter width」の行に記載してある値を見てみましょう。
今回はPC版を想定しているので、コンテナサイズは「Max container width」に記載してある最大値の、「1140px」を使っていきます。
ガターサイズに関しては「Gutter width」に記載してある通り、カラム間が30px、左右の余白が15pxと記載してあるので、この値をそのまま覚えておきます。
- コンテナサイズ：今回は最大値の1140px
- ガターサイズ：カラム間30px, コンテナ内の左右余白15px
- カラム数：12
アートボードサイズと調べた値を使ってレイアウトグリッドの値を計算する
先程調べたコンテナ&ガターサイズと、XDのアートボードサイズを使って、実際にレイアウトグリッドの値を計算していきましょう。
ユウマここでは「1920px」のアートボードを使って解説します。
今回計算に使う値を、再度下記にまとめます。
- アートボードサイズ：1920px
- コンテナサイズ：1140px
- カラム間：30px（合計330px）
- コンテナ内の左右余白：15px（合計30px）
- カラム数：12
レイアウトグリッドを作る時に必要な値は、
- カラムの数
- ガター（カラム間のpx幅）
- カラムのpx幅
- 左右のpx幅
でしたよね。
上記の中の「カラムの数」と「ガター幅（カラム間のpx幅）」に関しては、それぞれ「12」と「30px」というように、既に値が分かっています。
ということは、残っている値の「カラムのpx幅」と「左右のpx幅」について計算で求めていく必要があります。
これらの値は下記の計算式を使うことで、算出することが可能です。
- コンテナサイズ1140px – (カラム間合計330px＋コンテナ内の左右余白合計30px）= カラム幅合計値780px
- カラム幅合計値780px ÷ カラム数12 = カラム幅値65px
- アートボードサイズ1920px – カラム幅合計780px = ガター合計値1140px
- (ガター合計1140px – カラム間合計330px) ÷ 2 = アートボードサイズ含めた左右余白値405px
上記の計算式を利用することで、「カラムのpx幅 65px」と「左右のpx幅 405px」を算出することができ、レイアウトグリッドに使う全ての値を手に入れることができました。
- カラムの数：12
- ガター（カラム間のpx幅）：30px
- カラムのpx幅：65px
- 左右のpx幅：405px
あとは、ここまでの流れで集めた値を、レイアウトグリッドの値に当てはめていけば完了です。
最後に
XDのレイアウトグリッドはとても便利な反面、初心者には少々分かりづらいというのが難点です…
しかし今回解説した計算方法を覚えておけば、どのアートボードサイズでもレイアウトグリッドの値をしっかり算出することができるようになります。
ユウマぜひ、あなたのWebデザイン制作に役立てていただければ幸いです。
