デザインをしていくと途中でオブジェクトの配置場所がずれたりして管理するのが大変！
統一感をだしてきれいにオブジェクトを配置するにはどうしたらいいの？
グリッドレイアウトという機能を使ってみよう！
配置する場所のめじるしを表示することができるので統一感のあるレイアウトになるよ！
今回はレイアウトグリッドについて基本的な内容の説明と、Figmaでレイアウトグリッドを表示させる方法、また各端末でのおすすめ設定を丁寧に解説してゆきます。
▼この記事のポイント
▼記事を書いたひと
都内でシステムエンジニアをしているkentos(@kento_jpn)と申します。Web制作やプログラミングの情報発信を幅広く行っております。
グリッドシステムとは
グリッドシステムとは、網目状のマス目にそってコンテンツを配置していくデザインガイドラインのことです。
基本的には全体を何分割するか、余白をどのくらいの大きさにするかを決めていくことになるのですが、最初はどのように分けるのが適切かどうかがわからないかと思います。
今回はBootstrapと呼ばれる代表的なCSSフレームワークのガイドラインに沿っておすすめの設定値をご紹介します。
グリッドシステムの構成要素
グリッドシステムを構成する要素を学んでいきましょう。
まずはカラムです。
カラム
カラムはコンテンツ配置する領域（ピンク色）のことです。
カラムは左右に余白（黄色）を持っています。
下記の例ではカラムは80pxで余白が15pxということになります。
ガター
ガターとはカラム間のの間隔（水色）の部分のことをいいます。
つまりここはカラムの余白×２の値になります。
マージン
マージンとはフレーム全体の余白（みどり色）です。
例えば図のようにカラムと余白を合わせて110pxとするとき、
12分割でデザインするとなると合計の幅は110×12で1320pxとなります。
一方で全体のフレームサイズが1440pxだとすると1440-1320で120pxがあまります。
その120pxがフレーム全体の左右の余白となるのでそれぞれ60pxづつのマージンとなる計算です。
コンテナ
これまでの基本要素を１枚のフレームにまとめるとこのようになります。
ここで、コンテナとは全体のフレームサイズからマージンを除いた領域で、Webサイトのコンテンツとして認識される領域です。
たくさんの要素が出てきたけどとりあえずカラムとガターを押さえておけばOKです！
グリッドシステムのルール
グリッドシステムでは初めに分割数やカラムサイズ等を決める必要がありますが、
その値は明確に定められているわけではありません。
デザインするテーマや所属するチームの文化などによって異なるかもしれません。
おすすめの分割数やサイズは本記事の後半で解説するよ！
そんなグリッドシステムですが、デザイン時に守るべき１つのルールがあります。
ガターにコンテンツを配置しない
それはガターにコンテンツを配置しないことです。
つまり下記の真ん中のようなコンテンツは配置しないということです。
ガターを跨ぐときは次のカラム領域も含むようにしてください。
目立たせるためにわざとカラムからずらした形でデザインするというやり方もありますが、
初めはとりあえずはこのルールさえ守っていれば問題ありません。
グリッドシステムを活用するメリット
ここまで基本的な要素とルールをご説明していきましたが、
ここで、グリッドシステムを活用するメリットを見ていきたいと思います。
- 統一感のあるレイアウトになる
コンテンツが整列していることで各要素にまとまりが生まれ、シンプルかつ統一感のあるWebサイトになります。 - レスポンシブデザインとの相性がいい
昨今のWebサイトはモバイルサイトへの対応は必須と言っていいほど普及しています。そのためWeb制作する際はレスポンシブなデザインとするのがほとんどかと思います。
グリッドシステムを採用すると区切りがわかりやすいためカラムの切り替えやデザインの調整がしやすく、実装も楽になります。 - 情報が整理されて見える
それぞれの要素がわかりやすくグループ化され、多くの要素をさらべてもレイアウトが崩れないため、情報が整理されて見えます。
Figmaでグリッドを表示する
フレームにグリッド線を表示する
ではいよいよfigmaでグリッド線を表示しましょう。
順を追って説明します。
まず、フレームを配置してください。今回は例として横幅1280pxのフレームを配置しています。
エディタ上でキーボードのFを押して右側の「Design」タブからDesktop＞iMacを選択すると
1280pxのフレームが挿入できます。
①フレームを配置
今回は例として横幅1280pxのフレームを配置しています。
エディタ上でキーボードのFを押して右側の「Design」タブからDesktop＞iMacを選択すると
1280pxのフレームが挿入できます。
②グリッド線を表示
Layout gridの＋ボタンをおしてグリッド線が表示されることを確認してください。
このとき網目状のグリッドになりますが、グリッドの設定で縦線のみにしていきます。
③グリッド設定を開く
④Columnに変更
グリッド設定画面でColumnに変更し、縦線のカラムが表示されることを確認しよう。
⑤設定値を変更する
設定値を下記のように変更します。そうすると12分割された
それぞれの設定値は下記のように反映されます
- Count
カラム数（分割数）になります。１２を指定するとカラムが１２本表示されます。 - Width
カラムの横幅です。px単位で指定します。 - Gutter
ガターの横幅です。px単位で指定します。
一番はじのカラムにはガターの半分の余白が設定されます。
フレームサイズごとのおすすめ設定を紹介
Bootstrapでは12分割が基本
初めにご紹介したBootstrapではグリッドレイアウトを下記のように定義しています。
カラム数は12、ガターサイズは1.5rem(24px)で固定されており、
各フレームサイズに応じて最大のコンテナ数が定められています。
各フレームサイズに応じたおすすめ設定
今回はBootstrapの規格でいうとデスクトップはxxl、xl、
タブレッドはmd、スマートフォンはxsのサイズでご紹介します。
それが下記です。この値を設定するとBootstrapの基準に準拠したレイアウトになります。
タブレットとモバイルの分割数
気が付いた方もいらっしゃるかもしれませんが、全章の設定を適用するとタブレットとモバイルのからむがとても細くなってしまいます。
この設定が少しやりにくいという方は分割数を変えてみましょう。
おすすめはタブレットは６分割、モバイルは２分割です。
そうすると下記のようにデザインしやすいグリッドになるかと思います。
カラムサイズの計算式
最後に、紹介したフレームサイズ以外の時にカラムサイズを決めるための計算式をご紹介します。
下記の順に設定値を決めていき
① コンテナサイズを決める
② ガターサイズを決める
③ カラム数（分割数）を決める
下記の式に当てはめれば１カラムのサイズが割り出せます。
カラムサイズ ＝ コンテナサイズ ー （ガターサイズ × カラム数） / カラム数
まとめ
いかがでしたでしょうか。
今回はWebデザインにおける、レイアウトフレームワークであるグリッドデザインについて解説しました。
figmaで使う際のおすすめ設定値は是非保存してご活用ください！
