今更じゃない、Bootstrap！デザイナーの視点で、美味しい活用方法を紹介します

今更じゃない、Bootstrap！デザイナーの美味しい活用方法

こんにちは。デザイナーの益田です。早いもので、2019年になってからそろそろ1ヶ月。今年の冬は、例年より暖かいですね。

皆さんは普段デザインするとき、CSSフレームワークを活用していますか。CSSフレームワークとは、Web制作におけるレイアウトやパーツのCSS・Javascriptがまとめられたライブラリのことで、制作の手間を省くことができます。HTMLを人参やじゃがいもなど”カレーの具”とするなら、CSSフレームワークはいわば”カレーのルー”のようなものです。どちらかというとエンジニアの方が馴染みがあるかもしれませんが、実はデザイナーにとっても便利なツールです。

今回は、数あるCSSフレームワークの中でも代表的なBootstrapについて、デザイナー視点での活用方法を、実際の例を交えながら紹介したいと思います。

CHAPTER #1

Bootstrapを使うと洗練されたデザインを簡単に作ることができます

上述の通り、CSSフレームワークであるBootstrapは、”カレーのルー”のようなものです。味付けが苦手な人でも、ルーを入れるだけで簡単に美味しいカレーライスができるように、Bootstrapも同様、デザインをしない人でも簡単に洗練されたデザインができるようになります。使い方も簡単です。

①Bootstrapの公式サイトからソースファイル（CSSやJavascript）をダウンロードする
②制作しているサイトのHTMLファイルに読み込む　*CDNを使って導入することもできます

これで準備OK。あとは、HTMLの各要素にBootstrapの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>

classを指定するだけで、用途に合ったデザインのボタンを作ることができます。他にも、カード、バッジ、ナビゲーション、パンくずリストなど、様々なコンポーネントやユーティリティがあり、これらを組み合わせると、以下のようなデザインが出来上がります。シンプルですが、バランスのとれたデザインになっています。

ここまで読むと、料理人がルーを使わないように、Bootstrapもデザイナーが使うべきものではないのでは、と思う方がいるかもしれません。確かに、パーツの装飾を全てBootstrapに委ねてしまうとデザイナー形無しですが、Bootstrapは装飾だけではありません。デザイナーは、Webサイトをデザインする際、あらゆるデバイスに対応できるよう、ブレイクポイントの個数や各数値を考えなくてはいけません。どうすればレイアウトが崩れないか、開発とのやりとりがスムーズに行くのか、1から検証しながらデザインするのはかなりの負担です。そこで、オススメなのが、Bootstrapのグリッドシステムです。

CHAPTER #2

Bootstrapのグリッドシステムはデザインの効率化を期待できます

Boostrapのグリッドシステムを使うことで、レスポンシブ検証などにかかる時間を短縮することができます。Bootstrapのグリッドシステムは、以下のような特徴を持っています。今回は最新バージョンのBootstrap4のグリッドシステムを対象とします。

①4つのブレイクポイント

Bootstrapのグリッドシステムは、576px/768px/992px/1200pxのブレイクポイントを持っており、各段階にコンテナ幅と、classの接頭辞が設けられています。

②12本のグリッド

Bootstrapのグリッドシステムは、各コンテナを縦に12分割して出来たグリッドで構成されており、下図のように2カラムや4カラムのレイアウトができるようになっています。その際のclassはブラウザ幅に応じた「接頭辞」+「グリッド数」（eg .col-sm-12）」というルールで命名されています。

これらの特徴を用いると、以下のようなレスポンシブ対応のデザインを簡単に作ることができます。

<div class="col-lg-3 col-md-6 col-sm-12">...</div>
<div class="col-lg-3 col-md-6 col-sm-12">...</div>
<div class="col-lg-3 col-md-6 col-sm-12">...</div>
<div class="col-lg-3 col-md-6 col-sm-12">...</div>

他にも、グリッドシステムを使うことで以下のような効果を期待することができます。

一覧性が高まり、多くの情報を適切に提供することができる
各カラムの左右のmarginが等しい、コンテンツの先頭が揃いやすい等の理由により、Webサイト全体の統一感を保つことができる
コンテナ幅を指定することで、あらゆる環境におけるデザインを担保することができる*.container-fluidを指定しない場合

このようにグリッドシステムは確かに便利ですが、少々注意が必要です。デバイスに応じたブレイクポイントが用意されているとはいえ、いくつ設けるべきか、デザインは何パターン用意するべきかは、クライアントの希望をヒアリングしながらデザイナー側で判断が必要となり、開発と認識も合わせておかなければなりません。場合によっては教育コストがかかるため、前提が整っていないと効率化が望めないこともあります。

また、デザイン表現の幅があるとはいえ、やはり制約的ではあります。したがって、制作物がグリッドシステムに適しているか、どのページで使用するべきか、早い段階で見極めることが大切です。

CHAPTER #3

A.C.O.ではCSSフレームワークを活用し作業を効率化しています

A.C.O.では、コーポレートサイトをブランディングの段階から関わって製作することが多いです。コーポレートサイトはページ数も多く、更新頻度も高いので、効率的にページを量産できるようにすることが求められます。あらゆる利用シーンでのアクセスが考えられ、開放的・躍動的であるよりも、信頼感があり、ユーザーに適切な情報が伝わるようなデザインにする必要があるため、グリッドシステムとは非常に相性が良いです。

特に、第3階層以下の量産ページを効率よく作成するのに適しています。もちろん、TOPページや第2階層でもグリッドシステムをベースに作ることはありますが、これらのページは下層ページよりは躍動的であることが求められ、ユニークなビジュアルが多く、独自のCSSやJavaScriptが必要となるので、必ずしもグリッドシステムに沿う必要はないと考えています。

デザイン制作後は、開発会社へ開発を依頼します。その際は、あえてBootstrapを使うよう指定しません。その開発担当にとって最もやりやすい方法で進めてもらうことが一番スムーズに行く為、「Bootstrapのグリッドシステムをベースにしているが、コーディング方法はお任せします」と伝えるようにしています。

デザインする際はBootstrap gridのようなプラグインをSketchに入れて、グリッドを引き、デザインすると便利なのでオススメです。