• LIGの広告成功事例
WEB

ノンデザイナーも必見!Twitter BootStrapの特徴と導入前に確認すべき事

ノンデザイナーも必見!Twitter BootStrapの特徴と導入前に確認すべき事

こんにちわ。アートディレクター兼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カラムのグリッドシステムを採用していて、レスポンシブデザイン、可変グリッドデザインにも対応しています。
ブレイクポイントは、以下の4つ。更に細かくブレイクポイントを置きたい場合はカスタマイズが必要です。

  • 1200px
  • 980px
  • 768px
  • 480px

多彩な機能を備えたパッケージ

CSS3での表現だけではなく、jQueryを使用したカルーセルやモーダル、タブやツールチップなど、様々な機能が盛り込まれています。イメージとしては、便利な道具の入った工具箱のような感じ。

  • ボタンデザイン
  • テーブルデザイン
  • アイコンデザイン
  • フォームデザイン(input,selectboxなど)
  • エラー表示のデザイン などなど

足りない機能があっても大丈夫!

足りない機能があったとしても、多彩な機能を備えたUIパーツを配布しているサイトがたくさんあります。以下に一部をご紹介します

Bootstrap Form Helpers

フォームにあると便利な機能がたくさん追加されているサイトです。

Bootstrap Form Helpers

Bootsnipp

こちらは様々なUIパーツを集めたサイトです。

Bootsnipp

Bootstrap Date/Time Picker

日付や日時をカレンダーから選択できる便利なツールです。

Bootstrap Date/Time Picker

Twitter Bootstrap Button Generator

Twitter Bootstrapのボタンに変換してくれる便利なサイトです。

Twitter Bootstrap Button Generator

WordPress Bootstrap

もちろんWordPressようにもBootstrapはあります。

WordPress Bootstrap

多彩なテンプレートデザイン

すでに、「Twitter Bootstrap」をカスタマイズし、無料でダウンロード出来るサイトも数多くあります。それなりにデザインに凝っているものや多機能のものは、かなりカスタマイズされているので有料がほとんどですが、一から作るのもそれなりに時間とコストが掛かるので、バランスをみて購入する価値はあると思います。

下記に代表的なテンプレートサイトの一部をご紹介します。

FLATSTRAP

今流行のフラットデザインのTwitter Bootstrapのテンプレートです。

FLATSTRAP

Flat UI

Twitter Bootstrapをベースに作られているフラットなUIデザインのダウンロードサイトです。

Flat UI

Bootswatch

無料のテンプレートがダウンロード出来ます。少し見た目などカスタマイズされています。

Bootswatch

WrapBootstrap

有料ですが、レベルの高いデザインのテンプレートがダウンロード出来ます。

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

やはり時代はモバイルファーストですね。

フラットデザインに対応したみたいですし、画像アイコンがなくなっているなど若干の変更点があるようです。今度ゆっくりと触ってみて、また記事にしようと思います。

ますます今後の進展が楽しみです。

それでは、また。

この記事を書いた人

ヒロさん
ヒロさん アートディレクター 2013年入社
マネージャー/グロースハッカー/アートディレクター/デザイナーのヒロさんと申します。茨城県鹿嶋市に鎮座する日本三大神宮の一つである鹿島神宮の近くで育ちました。2児のパパであり、子育てとワイン、旅行を愛するアラフォーです。

こちらもおすすめ

Bootstrapファーストガイド―CSS設計の手間を大幅に削減!

Bootstrapファーストガイド―CSS設計の手間を大幅に削減!

  • 著者相澤 裕介
  • 価格¥ 3,024(2015/12/18 11:34時点)
  • 出版日2014/11/26
  • 商品ランキング20,835位
  • 単行本308ページ
  • ISBN-104877833609
  • ISBN-139784877833602
  • 出版社カットシステム