Hatoblog（はとブログ）

Bootstrapはどんな時に使うと便利？逆に使わない方がいい時は？【CSS】

hatomugi_s

Bootstrapはサイト制作に使うべき？逆に、どんな時には使わない方がいいんだろう？

こんな疑問にお答えします。

Bootstrapは簡単にオシャレなデザインが作れて便利ですよね。
ただ、個人的には、CSSがうまく書けない初心者やバックエンドエンジニアなど以外は、あまり使わない方が良いと思っています。

実際に、僕もWeb始めたての頃は闇雲にBootstrapを導入し、自社サイトの更新などを行っていました。ですが、上から降りてくる要望のために大きくCSSを上書きする必要があったり、何気なく付けたCSSの名前が実は競合していたりと、結構面倒な思いをしたことがあります。

これらは、Bootstrapを使うのに向いていない状況で使ったことで起こった問題です。

この記事では、Bootstrapを使うと便利なとき、使わない方がいいときの判断基準とその理由についてや、スポットで便利に使う方法などをご紹介します。

記事を読み終える頃には、あなたもBootstrapと上手に付き合い、うまくサイト制作に活かせるようになると思います。

目次

Bootstrapを使うべきではないとき

Bootstrapをサイト制作時に使うべきではないときは、主に下記の状況のときです。基本的には、初心者を抜けたあたりから不要になることが多いです。

オリジナルのデザインがすでにあるとき

プロジェクトにデザイナーがすでにいて、その通りにマークアップを行う場合、ほとんどBootstrapを使う必要はありません。

グリッドシステムや後々紹介するアイコンフォントのみを利用するという手はありますが、そのためにBootstrapを入れるのは無駄が多いため、おすすめ出来ません。

CSSである程度最初からデザイン出来るとき

Webサイト制作に慣れてきてCSSを自分で設計出来るようになってくると、わざわざBootstrapを使う必要がなくなってきます。むしろクラス名の競合が起きやすくなるため、使わない方が推奨されます。

ボタンやテーブルのコンポーネント、フォームなど、一通りの実装が自分でデザイン出来るようになったら、個人制作であれば自分のルールで設計していくのが一番自由度が高く、メンテナンス性も高くなるためおすすめです。

中～大規模のサイトを制作するとき

中～大規模という括りが正確かは微妙なところですが、要はBootstrap以外のCSS指定が増えてくる場合は、上記と同じく競合が起きやすいため使わない方がいいと思います。

特に規模が大きいサイトはただでさえメンテナンスが大変になることが多いため、そこにCSSのメンテナンス性低下が加わると地獄になることもあります。

BootstrapのCSSで殆どまかなえる規模のサイト制作で使用するようにしましょう。

Bootstrapが不便な理由

上記のような状況でBootstrapが推奨されないのには、Bootstrapの設計思想や仕様が合わないから、という理由があります。それは主に以下の項目にまとめられます。

タグ名での指定や短いクラス名が多く競合しやすい

Bootstrapではh1やli等のHTMLタグそのものや、.btn、.container等の短いクラス名に対してCSSが指定されており、自作のCSSと共存させようとすると非常に競合しやすいです。

ま競合しやすいということは、デザインを増やす際にBootstrapのCSSを上書きするという場面が少なからず出てきます。こうなると一つのデザインを作るのにも多くの打ち消しが必要になり、開発速度が落ちてしまいます。

それを減らすために、Bootstrapでサイトを作成する場合はなるべく自作のCSSを増やさないようにするのが望ましいです。本当にビックリするくらいすぐ競合します。

classの指定が増え、HTMLの見通しが悪くなる

Bootstrapのクラス指定は、先程のように短いものもあれば、長いものもあります。そしてリストやテーブル、フォームなどのネスト構造のデザイン時は特にHTMLの見通しが悪くなります。例えばフォームは公式でこのような書き方になると紹介されています。

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

クラスの指定が多く、少し見通しが悪いですね。また、フォームは特にJavaScriptとの連携やPHPを記述することも多く、この例以上に記述が増えてしまいがちです。

Bootstrapは基本的にクラスでデザインを設定しているため、どうしてもこのような見通しの悪さに繋がってしまうのが辛いところです。。

どうしてもデザインにBootstrap感が出てしまう

これはBootstrapのある意味良い部分でもあるのですが、デザインに統一感とともに「Bootstrapっぽさ」が出てしまいます。

基本的に一般のユーザーはそこを気にすることは少ないですが、制作物がどれもこれもBootstrapだとどれも同じ見た目になってしまい、マンネリしてしまいがちですので気をつけましょう。

また、頼りすぎるとCSSの練習にもならないため、計画的に利用するようにしましょう。

Bootstrapを使うと便利なとき

逆に、こういう時に使うと便利だった、という例をご紹介します。基本的には使うべきではない時の逆なのですが、もう少し詳しく解説していきます。

Web初心者や、エンジニアの方がサイトを作る時

Bootstrapのコンセプトのメインターゲットは間違いなくこの方々でしょう。

先程も書いた通りBootstrapは統一感をもたらし、デザインが得意でない人でもそれなりの見た目を簡単に作ることが可能です。

また、レスポンシブに標準で対応しているのも初心者には嬉しいポイントです。

さらに、チームでの制作のときもデザインがブレにくく、統一感のあるサイトを作成することができるでしょう。

社内ツール等、デザインよりも内容を重視するとき

社内ツールにはデザインの美しさやオリジナリティよりも、直感的な分かりやすさと使いやすさが求められます。

そんな時、Bootstrapは丁度いい選択肢になることも多いです。なによりデザインに時間を取られなくてすむため、全体としての開発速度が上がるのもありがたいです。

このような場合はBootstrapが向いていると言え、真価を発揮できると思うのでどんどん使っていきましょう。

スポットでのBootstrapの便利な使い方

自分で１からサイトを作る際はあまり使わないのですが、Bootstrapには「Glyphicons」というアイコンフォントが標準搭載されており、ここだけを使うという方法もあります。

このサイトでも使用しており、メインナビゲーションのボタン横に付いているアイコンはBootstrapのものです。

ただ、アイコンフォントのサービスはIcoMoonやFontAwesomeなどもありますので、デザインや使いやすさなどを考慮して選ぶといいかと思います。その中でBootstrapが最適だと判断した場合は使うといいでしょう。

まとめ

Bootstrapを使うべき状況、使わないべき状況について解説してきました。まとめると、基本的には下記のようになります。

使うべきではないとき

Bootstrapを使うと便利なとき

簡単に言うと、CSSに慣れていない人や状況の時は非常に役に立ちますが、それ以外の時はデメリットが露見しやすいということですね。

この記事を読んでいるWeb初心者の方は、是非自分で設計できるようになりましょう。そのためにBootstrapの設計を見て勉強するというのは全然アリです。

適切に使って、効率のいいWeb開発を心がけましょう。