「WEB制作について勉強していたらBootstrapって言葉が出てきた…。
Bootstrapって何？
実際の現場でも使うの？」
こんな疑問が頭をよぎる方もいるはず。
BootstrapはWeb制作において、「CSSフレームワーク」と呼ばれるものです。
フレームワークとは、プログラムを作成する際に、汎用的に使える部品を集めたものです。
例えば、 Bootstrapのフレームワークには、「ボタン」「ナビゲーションバー」「モーダルウィンドウ」など、Web制作においてよく使うパーツが含まれています。
使い方は簡単で、HTML上でBootstrapがあらかじめ用意しているクラス名を指定するだけです。
これにより、Webサイトの制作が効率化され、かつ、統一されたデザインになります。
Bootstrapの特徴
BootstrapはTwitterが開発したCSSフレームワークです。
Bootstrap · 世界で最も人気のあるフロントエンドフレームワーク
Bootstrapでは、ボタンなどすでにスタイルが作成されたパーツを利用することができます。
Bootstrapは世界で最も人気のあるCSSフレームワークです。
公式サイトでのキャッチコピーの通り、GitHubのスター数はCSSフレームワークの中でダントツです。
Bootstrapは需要がない！？その理由は？
さて、そんなBootstrapですが、実際の現場では使わないなんて声もあります。
それには大きく2つの理由があります。
- デザインに特徴が出てしまう(Bootstrapっぽい)
- 実際のWEB制作の現場ではデザイナーがいることが多い
(1)デザインに特徴が出てしまう(Bootstrapっぽい)
Bootstrapは、かなり幅広く使われているフレームワークです。
そのため、Bootstrapを使用したWebサイトは、どこかで見たことのあるようなデザインになりがちです。
これを「Bootstrapっぽい」と言います。
これは、Bootstrapにかぎらず、フレームワークを使用したWebサイト同士で似たようなデザインになってしまう欠点として挙げられています。
ただ、BootstrapはSassが分かればカスタマイズすることも可能です。
Bootstrapをカスタマイズしたい人はSassの基本を学んでおきましょう。
(2) 実際のWEB制作の現場ではデザイナーがいることが多い
実際のWEB制作の現場では、デザイナーがいることが多いです。
そのため、デザイナーが作成したデザインに合わせてコーディングしていくことになります。
この場合もCSSやHTMLを1から組むことになるため、Bootstrapは使用しません。
※もちろん、デザインパーツにBootstrapのコンポーネントを使っている場合は別です。
Bootstrapが活用できる場面
では、Bootstrapは全く使えないフレームワークなのでしょうか？
そんなことはありません。
Bootstrapが活用できるのは、主に次の3つの場面です。
- 作成にかけられる時間が極端に短い場合
- 管理画面などオリジナリティがあまり求められない画面
- デザイナーがいない現場
(1) 作成にかけられる時間が極端に短い場合
ページ作成にかけられる時間が極端に短い場合は、Bootstrapを使うことで作業時間を短縮できます。
CSSフレームワークの、すでにデザインが定義されているというメリットを最大限に活かす形ですね。
(2) 管理画面などオリジナリティがあまり求められない画面
デザインにオリジナリティがあまり求められない画面ではBootstrapが活躍します。
管理画面はその最たる例です。
他にはBtoBのアプリの画面などもそこまでデザインのオリジナリティが求められないのでBootstrapが活用できますね。
(3) デザイナーがいない現場
アプリ開発者がそのままデザインまで担当するなど、デザイナーがいない現場も存在します。
※WEB制作よりもWEB開発に多い印象です。
この場合、Bootstrapなどのフレームワークを使用することで、デザインについても対応できます。
選択肢の1つとしてBootstrapを活用する
HTML・CSSでのデザインの仕方を理解した上で、選択肢の1つとしてBootstrapを活用する。
これがBootstrapをうまく使いこなすコツです。
「Bootstrapは完全に使わない」も「Bootstrapしか使わない」も危険です。
Bootstrapについては１度試してみて、使い方の概要を理解しておきましょう。
実際の現場で使う際の取っ掛かりを作っておく程度で今は大丈夫です。