A.C.O. Inc.

DESIGN CONSULTING FIRM 東京

A.C.O. ジャーナル

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

1 suki 5 suki

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

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

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

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

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のグリッドシステムです。

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

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

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

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

②12本のグリッド

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

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


<div class="line number1 index0 alt2">1</div>
<div class="line number2 index1 alt1">2</div>
<div class="line number3 index2 alt2">3</div>
<div class="line number4 index3 alt1">4</div>

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

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

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

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

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

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

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

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

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

今まで縁がなかった方も、この記事をきっかけに、フレームワークに興味を持ち、いろいろな場面で活用していただけたら幸いです。Bootstrap以外にも、CSSフレームワークは様々な種類があり、トレンドを知る上でも勉強になることが多いため、私たちも常にアンテナを張り続けたいと思います。

by Ayako Masuda

上智大学総合人間科学部社会学科卒業後、通信大手会社に勤めながら、京都造形芸術大学通信教育部情報デザインコース学士課程を修了。外資系ITコンサルティング会社でSEを経験後、現在に至る。UIデザイン担当。

View articles

  • Share this article:
  • Get the latest insights

    UXやデザインのトピックからグローバルレポートまで、最新の情報をお届けします

    月1–2回ぐらいで届けます。いつでもキャンセルできます。Privacy Policyをご覧ください

  • Connect

    • facebook
    • twitter