この記事では非コーダー向けに、グリッドシステムを使ったレイアウトとレスポンシブWebデザインの考え方、AdobeXDでレイアウトグリッドを作る時の操作方法について書きます。

AdobeXDの内容は初見で触ってみて自分なりに模索した方法なので、他に良いやり方があればご教授ください。

グリッドシステムとは

Webデザインに於いて、横並びの要素を配置する時「要素の幅はどれくらいか？」「要素同士の隙間はどれくらいか？」を決定するときのガイドラインになる枠組みのことです。

スマートフォンの登場以来、様々なデバイスの画面サイズへの対応が求められる現在のWebデザインでは、この枠組みを基準にデザインされていることが多いです。

実例

例えば↓こんなデザインがあったとして、

これにグリッドシステムのガイドラインを重ねると...

要素がグリッドに沿って配置されているのが分かります。

グリッドシステムの考え方

グリッドシステムを作るために、最初に考えなければならないのは以下の項目です。

1. レイアウト枠の幅は 最大何pxか？
2. 何列に分割するか？
3. 列間の間隔は何pxか？

1.については、例えばスマートフォンやタブレットなど画面幅が狭い端末の場合は、画面幅がそのままレイアウト枠になることが多いです。

ところがパソコン上で表示するとなると、ディスプレイの画面幅は多種多様で、ディスプレイによってはレイアウト枠が無尽蔵に横に長くなってしまいます。

なので「これ以上は横に長くならない」というラインを設定しておきます。

2.については、12列にしておくのがスタンダードです。

なぜなら12という数字は非常に便利で、二等分、三等分、四等分、六等分して利用することができます。また、組み合わせも、7と5、3と4と5など、さまざまなバリエーションを作ることができるからです。

3.は、グリッド間の間隔サイズを決めることで、おのずと列（グリッド）の幅が決まります。
列の幅は、レイアウト枠の幅と連動して伸縮するので、計算によって決定するものだと思ってください。

// 列の幅の計算式
列の幅　= (コンテナ幅 / 列数) - 左余白 - 右余白

グリッドシステムの仕組を図にしてみました。

レスポンシブwebデザインの考え方

ガイドラインが出来たら、次は要素を配置していきます。

要素を配置する時は、各要素に「この要素は3グリッド分の幅を使う」「6グリッド使う」という考え方で幅を決めていきます。

グリッド数の合計が列数(12)を使い切ったところで、次の行に折り返されます。

例えば横に4列並んだレイアウトを作るなら3つのグリッドを使った要素を４つ配置する。
2等分にするなら6つのグリッド使った要素を2つ配置する。
メインカラムは9グリッド分の幅を使って、サイドバーは3グリッド分の幅を使うという感じです。

ここまでで、パソコンの画面でのレイアウトは上手くいきます。

次にスマホで表示したとします。

そうするとパソコンで表示した時よりも画面幅が小さくなったことで、要素の幅が極小になり、文字がはみ出すといった事態が起こります。

というわけで

「パソコンの時は4列に並べてた要素を、スマホの時は2列に並べて折り返す」という感じでグリッドの振る舞いを決めます。

スマホでの表示は次のようになります。

ざっくりですが、ここまでがグリッドシステムを使ったレスポンシブ WEBデザインの考え方でした。

Adobe XDでレイアウトグリッドを作る

今回はBootstrapという有名なWebサイトのフレームワークに使われているグリッドシステムの構成をモデルにして作ってみます。

Bootstrapの構成は以下の通り

最大幅1140px 、列数12、左余白15px、右余白15px

 Web 1920 (1920 x 1080px)の新規プロジェクトを作ります。

右側のインスペタクターから、グリッドのセクションにあるチェックボックスをONにします。

隣のセレクトボックスは「レイアウト」のままで良いです。

すると半透明のレイアウトグリッドの枠が表示されます。

※ グリッドの表示・非表示の切り替えは「Command + Shift + 7 」です。

グリッドセクションで設定する項目は、上から「列数」「段間隔」「列の幅」「リンクされた左右のマージン」とあります。

次のような構成になれば成功ですが、レイアウトコンテナの幅(サイトの横幅)を指定する項目は無いので、自分で計算しなければなりません。

入力する順番に注意

次の順で入力します。

1.列数
2.段間隔
（一つ飛ばして一番下）
3.リンクされた左右のマージン

※3の前に「列の幅」を変更すると、余白が自動的に計算されてしまい、意図しない数値に変更されてしまいます。面倒くさいです。

列

「列数」は12のままでOKです。

段間隔

「段間隔」はグリッド左右の余白を合計した30です。

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

次に「リンクされた左右のマージン」を手動で計算して入力します。

計算式は

リンクされた左右のマージン = (スクリーンサイズ - (レイアウトコンテナサイズ - 段間隔)) / 2

実値にすると

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

ここの入力が終わると、自動的に列の幅が計算されて「65」に切り替わります。

Webデザインをはじめる

あとはグリッドに沿ったレイアウトでデザインしてください。