📏

【デザイナー向け】Bootstrapの基礎

2022/03/19に公開

Bootstrap

CSS

HTML

idea

はじめに

デザイナーの方に向けて、Bootstrapの基礎と活用方法をざっくり紹介します。

Bootstrapとは？

cssのフレームワーク。
HTMLに特定のclassを当てると”それっぽい”感じに勝手にデザインしてくれる。

例えば...

カードのデザインであれば、

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

このhtmlコードだけでcssは特に書かずに下図のカードが完成します。

どのようなパーツがあるかは、UIキットを見ていただいた方が早いかもしれません！

メリット

デザインシステムの一つとしてデザイナー、エンジニアが共通認識を持って制作に取り込むことができれば...

制作の効率化
デザインの統一性UP

デメリット

ただし...

デザインの均一化
アップデートへの対応コスト

等々デメリットもあります💦

どんな案件に向いているのか？

フレームワークである以上、ある程度の制限が伴います。
したがって、

スピード最優先
フォームページなどデザインの独自性が不要

のものには向いているかもしれません。

逆に、
複雑なデザインだったり、PCとスマホでデザインが大きく異なるような案件では逆に非効率になるかもしれません😓

Bootstrapの活用

以上のような背景を考慮して、ここでは個別のパーツについてではなく、根幹を成すレイアウトシステムについて紹介します。（各パーツについては特に説明はなくUIキット使って共有すれば終わりなので）
まずはレイアウト部分のみを社内の基本デザインシステムとして導入するのが良いかもしれません。

レイアウト

グリッドシステム

Bootstrapでは12本のグリッドでサイトの横幅を分けています。
このグリッドに従ってデザインしておくことで、画面幅の変化に応じてレイアウトが変化してくれます。

↓こんな感じ！

https://websae.net/twitter-bootstrap-grid-system-21060224/

ちなみにAdobe XDではBootstrapのグリッドを使うためのテンプレもあったりします👍

設定した各カラムがどのように動くか確認してみてください！

様々なclassがありますが、デザイナーの方はグリッドを使ったデザインを意識していれば個別のコードについてを理解しておく必要はないかなぁと思います😅

公式ドキュメント｜Grid system (グリッドシステム)

container

コンテナはデフォルトのグリッドシステムを使用するのに必須です。
ブレークポイントに応じて余白を作ってくれます。
先述のグリッドはコンテナ内で機能します。

<div class="container">
  <!-- Content here -->
</div>

画面幅	コンテナ幅
Extra small <576px	100%
Small ≥576px	540px
Medium ≥768px	720px
Large ≥992px	960px
X-Large ≥1200px	1140px
XX-Large ≥1400px	1320px

例えば、Largeの場合はこのようになります。

https://websae.net/twitter-bootstrap-grid-system-21060224/

各画面幅でコンテナがどのような動きをするかはこちらで確認できます。

デザインで活用する場合は、ブレイクポイントに応じたデフォルトのコンテナをガイドラインとして使用すると良いです。

パーツ

キリがないので、UIキットとか公式サイト見てください（雑）

余力があれば

アイコンとかテーマもあるっぽいです。
アイコンなんかは意外に苦労する部分でもあるので統一すると良いかもしれませんね。

参考サイト

https://getbootstrap.jp/

サイト見た方が早い！という人へ

Bootstrapが使われているサイトのリンク集です。実際のサイトを見るとイメージが膨らむかもしれません。

https://cwt.jp/category/6
わかりにくいサイトも多いですが、検証ツールでclass確認するとbootstrapのグリッドになってたりします！