無料体験可能なプログラミングスクールはコチラ

デザイン

Bootstrapを使ったXDレイアウトグリッドの計算方法

XDのレイアウトグリッドを極める

XDでレイアウトグリッドの値を計算する際、「どの値をどのようにいじれば良いのかが分からない!」という駆け出しWebデザイナーの人は、きっと多いのではないでしょうか...?

ユウマ
少なくとも、僕も初めはそうでした...w

当記事では、Bootstrapのグリッドシステムのサイズを元に、XD上でレイアウトグリッドの値を計算する方法を解説します。

ちなみに当記事で解説している内容は、下記リンク先動画の内容を参考に執筆させていただきました。

動画で確認したい方は、ぜひ上記を合わせてご覧いただくと理解が深まりますよ!

それでは早速、見ていきましょう。

【事前知識】レイアウトグリッドのそれぞれの値の意味

XDのレイアウトグリッドで調整できる値は、それぞれ下記の値になります。

レイアウトグリッドの値レイアウトグリッドの値

【列】 カラムの数
【段間隔】 ガター(カラム間のpx幅)
【列の幅】 カラムのpx幅
【アイコン表示】 左右(上下左右)のpx幅
ユウマ
まずは、それぞれの値がどこを調整する役割を果たすのか?を把握しておきましょう。

Bootstrapを使ったXDレイアウトグリッドの計算方法

コンテナサイズとガターサイズを調べる

値を計算するにあたって、まずはBootstrapのコンテナサイズとガターサイズを知る必要があります。

Bootstrap公式サイトより「Grid system」ページの「Grid options」セクションから、それぞれの値を確認します。

Bootstrapのコンテナサイズ
Bootstrapのコンテナサイズ

ユウマ
ちなみに、解説しやすいため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幅」について計算で求めていく必要があります。

これらの値は下記の計算式を使うことで、算出することが可能です。

レイアウトグリッドを求める計算式

  1. コンテナサイズ1140px - (カラム間合計330px+コンテナ内の左右余白合計30px)= カラム幅合計値780px
  2. カラム幅合計値780px ÷ カラム数12 = カラム幅値65px
  3. アートボードサイズ1920px - カラム幅合計780px = ガター合計値1140px
  4. (ガター合計1140px - カラム間合計330px) ÷ 2 = アートボードサイズ含めた左右余白値405px

上記の計算式を利用することで、「カラムのpx幅 65px」と「左右のpx幅 405px」を算出することができ、レイアウトグリッドに使う全ての値を手に入れることができました。

計算したレイアウトグリッドの値

  • カラムの数・・・12
  • ガター(カラム間のpx幅)・・・30px
  • カラムのpx幅・・・65px
  • 左右のpx幅・・・405px

あとは、ここまでの流れで集めた値を、レイアウトグリッドの値に当てはめていけば完了です。

計算したレイアウトグリッドの値を当てはめる
計算したレイアウトグリッドの値を当てはめる

最後に

XDのレイアウトグリッドはとても便利な反面、初心者には少々分かりづらいというのが難点です...

しかし今回解説した計算方法を覚えておけば、どのアートボードサイズでもレイアウトグリッドの値をしっかり算出することができるようになります。

ユウマ
ぜひ、あなたのWebデザイン制作に役立てていただければ幸いです...!

-デザイン

© 2021 ユウマのブログ