今更じゃない、Bootstrap！デザイナーの視点で、美味しい活用方法を紹介します
こんにちは。最近トレース記事をupできていませんが、近いうちまとめ的なものを出したいと思っています。
今回は、以前会社のオウンドメディアで書いたBootstrapの記事に、編集を加えて載せてみました。Bootstrapって聞いたことあるけどよくわからない、Bootstrapってなんだ、どこにレスポンシブを打ったらいいのかわからない！という方に読んでいただきたいです。
Bootstrapってなに？
BootstrapはCSSフレームワークの1つです。CSSフレームワークは、Web制作におけるレイアウトやパーツのCSS・Javascriptがまとめられたライブラリのことで、制作の手間を省くことができる、言わばカレーのルーみたいなものです。デザインをしない人でも、シンプルでバランスのとれたwebサイトを作ることができます。
↑Bootstrapで公開されているテンプレートの例。
使い方も簡単です。
①Bootstrapの公式サイトからソースファイル（CSSやJavascript）をダウンロードする
②制作しているサイトのHTMLファイルに読み込む
あとは、HTMLの各要素にBootstrapのclassを指定するだけです。例えばボタン。classを指定するだけで、用途に合ったデザインのボタンを作ることができます。
<button type="button" class="btn btn-primary>Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning<button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
他にも、カード、ナビゲーション、パンくずリストなど、色々なテンプレートがあります。これらを組み合わせると最初にお見せした例のようなサイトがサクッと出来上がります。
ここまで読むと、料理人がルーを使わないように、Bootstrapもデザイナーが使うべきものではないのでは、と思う方がいるかもしれません。確かに、装飾を全てBootstrapに委ねてしまうとデザイナー形無しですが、Bootstrapは装飾だけではありません。
デザイナーは、Webサイトをデザインする際、あらゆるデバイスに対応できるよう、ブレイクポイントの個数や数値を考えなくてはいけません。1から検証しデザインするのはかなりの負担ですが、Bootstrapのグリッドシステムを使うと解決します。
Bootstrapのグリッドシステム
グリッドシステムの特徴を2つ紹介します。これだけ抑えれば、デザインを作る上で十分だと思います。
特徴① 4つのブレイクポイント
・Bootstrapのグリッドシステムは、1200px/992px/768px/576pxのブレイクポイントを持っている
・各段階にclassの接頭辞とコンテナ幅が指定されている
各段階における接頭辞とコンテナ幅は以下の通りです。
接頭辞/コンテナ幅
1200px以上：xl / 1140px
1199px-992px：lg / 960px
991px-768px：md /720px
767px-576px：sm / 540px
575px-：xs / auto
最近はタブレットの幅も大きくなってきたので一概にはいえませんが、xl/lgはPC向け、md/smはタブレット向け、xsはSP向けというイメージですかね。
コンテナ幅というのは、コンテンツを入れる箱の横幅のことで、例えばxlは、コンテナ幅が1140pxと定義されているので、1140px以内に収めるイメージです。（左右15pxの余白があるので、実際は1110px以内）
↑xl：1200px以上の場合のイメージ。
特徴②12本のグリッド
・Bootstrapのグリッドシステムは、各コンテナを縦に12分割して出来たグリッドで構成されている
・classは「col」+ブラウザ幅に応じた「接頭辞」+「グリッド数」（eg .col-sm-12）」というルールで命名される
なんのこっちゃ、と思うかもしれませんが、図で表すとこんな感じになります。
12分割されたグリッドにより、各要素に対し「col-（接頭辞)-(グリッド数）」というclassを指定してあげれば、2カラムや4カラムなどのレイアウトが簡単にきるようになっています。
ちなみに、各グリッドの左右にはmargin15pxがかかっています。つまり、ブラウザ幅1200px以上の場合、グリッド1本あたりの幅は、（コンテナ幅:1140px-(15px*2*12))/12=65pxになります。
デザイナー目線でのBootstrapの美味しいポイント
さて、Bootstrapグリッドシステムの特徴をお伝えしたところで、デザイナーにとっての美味しいポイントってなんでしょうか。
😋抑えるべきブレイクポイントがわかる
もちろんBootstrapが絶対的に正しいわけではありませんが、ジェネラルなものであることは確かです。つまり、根拠のあるブレイクポイントなわけで、その部分でデザイン担保されていれば、レスポンシブにおいては大抵クリアできるはず。
😋グリッドに沿っていれば、均一性を保ち美しいデザインができる
Bootstrapのグリッドシステムを使っていれば、左右のmarginや、コンテンツの先頭が揃うので、全体を通して均一で美しいデザインができます。
こんな感じで、デザインの安全、美しさを効率的にキープすることができます。
ここは注意
今のところ仕事で使っていて、不便を感じたことは殆どありませんが、強いて言えば以下のことが挙げられます。
😥活用するべきデザインと、そうでないデザイン
グリッド部分だけとは言え、やはり制約的ではあります。したがって、制作物がグリッドシステムに適しているか、どのページで使用するべきか、早い段階で見極めることが大切です。
例えばコーポレートサイトはページ数も多く、更新頻度も高いので、効率的にページを量産できるようにするべきです。開放的・躍動的であるよりも、信頼感があり、ユーザーに適切な情報が伝わるようなデザインにする必要があるため、グリッドシステムとは非常に相性が良いです。
特に、第3階層以下の量産ページを効率よく作成するのに適しています。TOPページや第2階層は下層ページよりは躍動的であることが求められ、独自のCSSやJavaScriptが必要となることが多いので、必ずしもグリッドシステムに沿う必要はないと考えています。
😥開発と認識のずれ
「今回はBootstrapで開発してね」と言い切ってしまうと、ガチガチのBootstrapで固められ、デザインとずれてしまう恐れがあります。「Bootstrapのグリッドシステムをベースにしているけど、デザインデータを確認した上で、良い方法でコーディングしてください。」としっかり伝えるべきです。
だいたいこんな感じです！そんなわけで、とっても便利なBootstrap。是非みなさんも使ってみてください。