こんにちわ。アートディレクター兼2児のパパ、長岡です。
毎回子どもネタですが、最近アンパンマンを指さして「パンパーンパン」とそれっぽい発音をしている息子を見て「こいつ可愛いな」と癒されています（笑）
屈託のない笑顔と持ち前のあどけない仕草で、保育園のマダムたちをイチコロ（表現が古い？）にしているそうです。将来がちょっと心配です・・・。
さて今回は、HTML5・CSS3・jQueryを使用したフロントエンドツールの王道「Twitter Bootstrap（※ver2.3.1）」のお話。
※この記事を書いている最中にver3.0がリリースされました！（汗）後でゆっくり触ってみたいと思います。
▲Twitter BootStrap ver2.3.1
Web制作者なら、一度は触れたことがあることと思います。
そのまま使ってみたり、カスタマイズして使ってみたり・・・。
使い方を間違えなければ、とても便利なフロントエンドツールだと私は思いますが、作業後に本当にTwitter Bootstrapである必要があったのか考えてしまうケースも多々あります。
今、Twitter Bootstrapを導入するかどうか悩んでいる方に一度は読んでもらいたい。
今回はそんな記事を書きたいと思います。
Twitter Bootstrapとは？
「Twitter Bootstrap」はフロントエンドツール
Twitter Bootstrapとは、HTML5・CSS3・jQueryを使用したフロントエンドツールです。名前の通りTwitterが開発しています。オープンソースとして公開されており、エンジニアやマークアップエンジニアでも、デザイナーに頼らずにカンタンに見た目を変更できるパッケージとなっています
Twitter Bootstrapの特徴
レスポンシブデザインにも対応！※IE8以下には未対応
「Twitter Bootstrap」は、12カラムのグリッドシステムを採用していて、レスポンシブデザイン、可変グリッドデザインにも対応しています。
ブレイクポイントは、以下の４つ。更に細かくブレイクポイントを置きたい場合はカスタマイズが必要です。
- 1200px
- 980px
- 768px
- 480px
多彩な機能を備えたパッケージ
CSS3での表現だけではなく、jQueryを使用したカルーセルやモーダル、タブやツールチップなど、様々な機能が盛り込まれています。イメージとしては、便利な道具の入った工具箱のような感じ。
- ボタンデザイン
- テーブルデザイン
- アイコンデザイン
- フォームデザイン（input,selectboxなど）
- エラー表示のデザイン などなど
足りない機能があっても大丈夫！
足りない機能があったとしても、多彩な機能を備えたUIパーツを配布しているサイトがたくさんあります。以下に一部をご紹介します
Bootstrap Form Helpers
フォームにあると便利な機能がたくさん追加されているサイトです。
Bootsnipp
こちらは様々なUIパーツを集めたサイトです。
Bootstrap Date/Time Picker
日付や日時をカレンダーから選択できる便利なツールです。
Twitter Bootstrap Button Generator
Twitter Bootstrapのボタンに変換してくれる便利なサイトです。
Twitter Bootstrap Button Generator
WordPress Bootstrap
もちろんWordPressようにもBootstrapはあります。
多彩なテンプレートデザイン
すでに、「Twitter Bootstrap」をカスタマイズし、無料でダウンロード出来るサイトも数多くあります。それなりにデザインに凝っているものや多機能のものは、かなりカスタマイズされているので有料がほとんどですが、一から作るのもそれなりに時間とコストが掛かるので、バランスをみて購入する価値はあると思います。
下記に代表的なテンプレートサイトの一部をご紹介します。
FLATSTRAP
今流行のフラットデザインのTwitter Bootstrapのテンプレートです。
Flat UI
Twitter Bootstrapをベースに作られているフラットなUIデザインのダウンロードサイトです。
Bootswatch
無料のテンプレートがダウンロード出来ます。少し見た目などカスタマイズされています。
WrapBootstrap
有料ですが、レベルの高いデザインのテンプレートがダウンロード出来ます。
Bootstrap Templates by ThemeForest
こちらも有料ですが、レベルの高いデザインのテンプレートがダウンロード出来ます。
Bootstrap Templates by ThemeForests
導入する前に確認すべきこと
ご紹介の通り「Twitter Bootstrap」には、豊富な機能が備わっています。しかし、そのツールを生かすも殺すもあなたの使い方次第です。本当に使うべきかどうか、よく考えないと、宝の持ち腐れになることになります。導入する前に、下記のポイントを確認してみましょう！
ポイント1：デザインは、12カラムのグリッドシステム
上記でも触れていますが、デザインがもし12カラムのグリッドシステムではない場合は、使わない方がよいでしょう。
ポイント2：フォームなどたくさんの機能を搭載
機能が豊富です。あまり使わない機能が多すぎてももったいないですし、場合によってはスクラッチでコーディングした方が、早いケースもあります。エンジニアのために作られたツールなだけに、管理画面などの制作には適していると思います。使える機能が豊富に備わっています。
ポイント3：マルチデバイス対応
スマホやタブレットなど、PC以外のデバイスの対応が必要かどうか？必要な場合は、デザインを見て問題ないか確認すると良いでしょう。
ポイント4：プログレッシブ エンハンスメント
「Twitter Bootstrap」は、プログレッシブ エンハンスメントの考え方なので、IE8で一部表示が異なる場合があります。レイアウトで大きな崩れなどはありませんが、IE8にも対応が必須な場合、特にレスポンシブデザインの対応が必要なケースはやめた方が良いでしょう。カスタマイズに多くの時間を割かれるケースも考えられ、近道を通ろうと思ったら、「あれ？？遠回り？」なんてケースもあるので、十分に考えて決断する必要があります。
ポイント5：運用やメンテナンスにも有用！拡張性も高い！
ありあまる機能は、運用やメンテナンスでも活きてきます！制作後に、運用やメンテナンスが必要な場合や、作業自体をノンデザイナーの方が行う場合にもとても有用な機能が搭載されています。だだし、元のBootstrapから生半可にカスタマイズすると、それが逆に運用時にメンテナンスしにくいものになってしまうこともあります。
中途半端にカスタマイズするよりも、時間をかけてでもフルカスタマイズした方が後々良いですし、もしそうじゃなくとも、メンテナンスのことをよく考え、元のCSSは変更せずに、別のファイルで制作するなど工夫することにより、メンテナンス性はアップすると思います。実際に制作する時には、事前にその当たりの事もよく考えておくと良いでしょう。また、拡張性も高く、元にない機能も柔軟に追加できます。
最新版はフラットデザインに対応！
そんなこんなで、「Twitter Bootstrap」について書いて来ましたが、最新版は目に飛び込んでくるキャッチコピーにも書いてあるとおり
mobile-first front-end framework
やはり時代はモバイルファーストですね。
フラットデザインに対応したみたいですし、画像アイコンがなくなっているなど若干の変更点があるようです。今度ゆっくりと触ってみて、また記事にしようと思います。
ますます今後の進展が楽しみです。
それでは、また。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
