satake

2017.07.28

Bootstrapのグリッドシステムのガイドラインをデザインツールで表示する

こんにちは。
僕はデザインとフロントエンドを兼ねて仕事をしているのですが、デザイン段階でCSSフレームワークのガイドラインを意識してデザインすると、コーディングが格段にスピードアップするのを実感しています。
本記事は今までグリッドシステムを使ってデザインをしたことがないという方を対象に、Bootstrapのグリッドシステムを例にして、ガイドラインの考え方とデザインツールでのガイドラインの引き方をご説明します。

Bootstrapのグリッドシステムのガイドラインとは?

Bootstrap
CSSフレームワークの代表。作業を効率化できるCSSがあらかじめ組み込まれた枠組みです。
http://getbootstrap.com/
グリッドシステム
Bootstrapでは12本の縦のガイドラインが存在し、そのガイドラインの幅に沿ったコンテンツを実装することができます。
Bootstrapのグリッドを可視化したものがこちらです。
https://tam-inc.github.io/tipsnote_satake/1.html

デザインツールでガイドラインを引くとこのようになります。
本記事の成果物のイメージです。

Bootstrapのグリッドシステムについて

Bootstrapのグリッドシステムについて触れていきます。

検証時のバージョン
Bootstrap v3.3.7

Bootstrapのグリッドの説明ページでは下記のような図が表示されています。(http://getbootstrap.com/css/#grid-example-basic)

Bootstrapでは全体を12カラムに分割しています。
12カラムのうち、何カラム分の幅にするかをCSSのクラスで指定していく形です。

例 .col-md-8
col = column（カラム）
md = medium （ブレイクポイントの指定 : ブラウザ幅がミディアムサイズ(992px)以上のとき）
8 = 8カラム分の幅

.col-md-8というのはブラウザ幅がミディアムサイズ(992px)以上になったら、幅を12カラム中8カラム分にするということを指定します。

ここではBootstrapでは12カラム中何カラム分の幅にするかを指定できる、というだけを覚えていただければと思います。

カラムとガター

カラムについて

Bootstrapのカラムは内部の左右に余白を持っています。
デフォルトでは15pxの余白がついています。

カラム内部の余白部分を外してガイドラインを引くと、下記のピンクのエリアのようになります。

ガターについて

ガイドラインとガイドラインの間の余白をガターと呼びます。
下記の15pxというのはBootstrapのカラム内部の余白です。

Bootstrapのグリッドシステムはデフォルトで全体幅1170pxです。下記図のようになっています。
ガイドライン幅が計算上67.5pxという小数点を含む形になるのですが、CSSではカラム幅が%で指定されているのでそのようになります。

このピンクのガイドラインをSketchやPhotoshopでも再現して、デザインをしていきます。

SketchやPhotoshopでガイドラインをひく

BootstrapのグリッドシステムのガイドラインをSketchやPhotoshopでひいてみましょう。
本記事ではガイドライン幅を67.5ではなく、68pxに合わせています。

Sketch

検証時のバージョン
Sketch v45.2

メニューから
View > Canvas > Layout Setting
画面右上のアイコンから
View > Layout Setting

クリックすると下記のような設定画面が表示されるので、設定します。
※本記事ではアートボードサイズを1440pxにしています。

このようなガイドライン(カラム)がアートボードに表示されます。

【補足】
67.5pxのところを68pxにしたため、6px の差分が出ています。(0.5px*12 = 6px)
Sketchの上記設定ではガター幅が30pxのところもあれば29pxのところもあり、ガター幅をところどころ1px短くして1170pxに合わせてしまっているので、気になる方は全体幅1176pxで設定するとガター幅が全て30pxに統一されます。フロントエンドにデータを渡すときは、デザイン上では1176pxにしてあるけれども、フロントでは1170pxで組み込むなどの認識をすり合わせる必要があります。

Photoshop CC

検証時のバージョン
Photoshop CC 2017

表示 > 新規ガイドレイアウトを作成

以降Sketchの画面で説明していきます。

グリッドの合わせ方

デザインするときはこのようにガイドラインに合わせます。

下記のように破線部ではなく赤線のところに合わせてしまいますと、グリッドシステムの組み方から外れる形になります。
デザイン上メリハリをつけたいところなどは敢えてグリッドシステムから外すこともありますが、特に理由がなければグリッドシステムに沿うのが無難です。

グリッドシステムの入れ子

グリッドシステムは入れ子にすることができます。
例えば、9カラムの中でさらに12分割されたグリッドシステムを使うことができます。

「12」は3でも4でも割り切れる数なので便利な数字です。
入れ子にしたグリッドシステムは12分割されて利用できるので、様々なカラム幅のレイアウトが可能になります。

デザインするときに新たにグリッドをひいてみます。
グリッドシステムを入れ子にしたとき、親のグリッドシステムに比べて子のグリッドシステムのカラム幅は狭くなりますが、デフォルトではガター幅は変わりません。

上記のグリッドレイアウトはLayout Settingsを下記設定にしています。

コーディングで確認してみますと、このような形になります。
https://tam-inc.github.io/tipsnote_satake/2.html

【補足】
子のグリッドシステムのガター幅が30pxだと大きく感じるという意見もあると思いますが、
子のグリッドシステムだけガター幅を30pxから20pxにするということも、CSSを上書きすることで可能です。

スマホのとき

スマホのときもBootstrapでは12分割されています。
ガター幅はPCのときと変わらないのでカラム幅はペチャンコになっています。

上記はこのようなLayout Settingsでグリッドを引いてます。

このままだとやりづらいですね！全体幅375pxならガイドラインはギリギリ見えますが320pxにするとガイドラインが見えないところも出てきます。
下記のような設定をしてデザインを行う方法もあります。
カラム数を12本から4本に変更しています。
1本のガイドラインが3カラム分の幅になります。

以上でガイドラインの引き方は終了です。

幅の変更について

全体幅は変更できる

今回グリッドシステムの全体幅が1170pxになっていますが、1170pxにこだわる必要はありません。
全体幅はCSSで調整可能です。
一部分だけ全体幅を大きくしてメリハリをつける、ということも可能です。
https://tam-inc.github.io/tipsnote_satake/3.html

ガター幅は変更できる

Bootstrapはデフォルトでガター幅が30px空いていますが、20pxに変更するといったことも可能です。
https://tam-inc.github.io/tipsnote_satake/4.html

終わりに

いかがだったでしょうか。

今回、Bootstrapのグリッドシステムをデフォルト設定の幅に沿ってガイドラインを引く方法をご紹介しました。
デザインするときに覚えていて欲しいことは、グリッドシステムに必ず沿ってデザインしなくてはならないというものではないということです。
グリッドシステムからわざと外して目立たせる、というようなことをやっているデザインもたくさんあります。
トップの一部はビジュアル重視でグリッドシステムを使わずにゴリっとCSSを組んで、下層ページなどはグリッドシステムに沿って組み込みというような進め方もあるでしょう。
まだ試したことない方はぜひ触ってみて、状況に応じて使い分けしてみてはいかがでしょうか。

参考サイト