CSSフレームワークの使いドコロ

CSSフレームワークは以前からありましたが、レスポンシブデザインが流行するのに比例して、こちらの注目度も高まってきています。
レスポンシブ対応を0から自作しようと思うと時間と労力もかかりますし、メンテナンスにも欠けてしまうあたりが流行出した理由でしょうか。

CSSフレームワークとは

CSSのClassがはじめから用意されているため、CSSの知識やデザインセンスが乏しくても、フレームワークに沿った記述をするだけで、カンタンにカッコイイWebサイトが作成できるツールのことです。

CSSフレームワークと言いつつJavascriptも含まれているものが多いです。
実装されている人気の機能はレスポンシブに頼ったものが多いですが、WEB制作に必要と思われるもの（タブ・ドロップダウン・スライダ・ボタンデザイン・フォーム周り）が個々のコンセプトに合わせて作られています。

CSSフレームワークのメリット・デメリット

CSSフレームワークは一長一短あって、それはプロジェクトやチーム（個人）のスキル、選択したCSSフレームワークに寄って左右されます。
一般的には下記のようなメリット・デメリットがあります。

メリット

・Webサイトを構築するのが早くなる。

・レスポンシブデザインに対応している。

・レスポンシブデザインのモックアップが素早く作れるので、クライアントとのヒアリングに便利。

・とりあえずデザインを考えなくてもそれなりにかっこいいサイトになる。

・しっかりと設計されているため、メンテナンスがし易い。

・統一されたコーディングルールで制作できる（協力会社との連携もとりやすいなど）

・CSS苦手なプログラマとの連携が取りやすい（ググってフレームワークの情報が載ってるから言わなくても調べて実装してくれる）。

デメリット

・対応ブラウザが最新のものが多い（IE7,8に対応していないなど）

・CSSやJSの調整をする場合手間がかかる（場合がある）

・デザインをこだわりるサイトには向いていない。

・ソースの量が多いので、使わないコードもあり、不要なコードが多数存在するため重くなってしまう。

・LESSやSASSを使えないコーダーがいた場合連携が取りづらい

CSSフレームワークを使う場面

CSSフレームワークは制作現場を劇的に変える魔法のツールではありません。
上記であげたようなデメリットも抱えているので、どんなプロジェクトでも使えるというものではありません。

とはいえ、メリットがきちんとありますので、このハイクオリティなものを使わないのは損です。

よくCSSフレームワークは調整がしづらいから使えないという声を耳にするのですが、それは使うべきでない箇所でフレームワークの機能を使っていたり、無用なClassをあてて、自分の首を占めているような状況もあるかと思います。

初めからそのフレームワークのすべてを理解しろと言うのは無茶な話ですが、何がどこで影響しているかを知る事で差別化は可能です。

CSSフレームワークは何でもはできません。出来ることをするだけです。

欲しい機能・デザインは自分で自分の色を足せば良いだけだと思います。
ツールに振り回されるクリエーターは情けないですもんね。使ってこそのツールです。

利用しやすい場面

自社サービス・自作のWEBサービス

対応ブラウザが選べる場合はCSSフレームワークの導入の敷居が下げやすいです。
また自社での開発だとフレームワークを使っているためのメリットを説明できるので、仕様面での理解を得やすいです。

モックアップとしての利用

システムが入ったサイト制作の場合、表示されるベースになるものを作っておくとイメージの共有がし易いです。
余談ですが、デザインされたもので表示されるとプログラマのテンションが上がる場合があるので、捗る可能性があります。

レスポンシブ用のモックアップとしての利用

これまでの開発だと画像でクライアントに確認してコーディングのような流れでしたが、レスポンシブの場合だとPC用、タブレット用、スマホ用と複数のデザインカンプが必要になってしまい、修正範囲も広がってしまいます。
そこでCSSフレームワークを導入すると、プラウザベースで構成・デザインイメージを確認してもらえるので、イメージの共有がしやすく、最後のどんでん返しの可能性が減ります（※あくまで可能性が減るだけです。）。
余談ですが、世の中にはレスポンシブを理解せずに無茶なデザインカンプを上げてくるデザイナもいるので、クライアントに見せる前に困難な箇所を潰しておけるメリットがあります。

使う機能を制限する。

選択するフレームワークによりますが、一部機能だけを切り出して使うというのも手です。
この場合他のCSS、JSと競合しにくいので、デメリットを潰す事ができます。

とにかく安く・ハイクオリティでという案件

世の中には短納期・低価格という理解したくない案件が時々あったりします。
特に短納期の場合ではCSSフレームワークだと早期に全体の構成が作れますので向いています。
※どんでん返しがないように、予めクライアントとの事前の認識の擦り合わせがあったほうが良い。
余談ですがコーディングルールが整っておりフォローの人材も導入しやすいので、炎上してる場合でも力になってくれます。

オススメのフレームワーク

CSSフレームワークは年々新しいものが出てきています。
ちょくちょくチェックはしていますが、良く私が良く使うCSSフレームワークは下記のような感じです。

Bootstrap

CSSフレームワークの大御所。一番使われてる。LESSもSASSも対応しているあたりから人気の高さが伺える。

Foundation 5

SASSベースのフレームワーク、できる事が多い。

Gumby

2014年あたりからグイグイ来てるSASSベースのフレームワーク。できる事が多いけれど、癖のある書き方をするのがロック。

UIkit

LESSベースでBootstrapに似た設計をしているが、他のCSSとバッティングしないような優しい設計が特徴。痒いところに手が届く。今の私の正妻フレームワークです。

LAYERS CSS

LESSのベースの軽量シンプルなフレームワーク。CSSのみ。レスポンシブ対応のグリッドレイアウトをさくっと導入したいときに便利です。

pure

CSSのみの軽量フレームワーク。実装が一番楽。