AI
Business
こんにちは。クラウドットデザイナーの野田沢です。
CSSフレームワークといえばBootstrapが有名ですよね。
Bootstrapはとても便利ですが、人気のフレームワークなため、依存しすぎるとどれも似たようなデザインのサイトになってしまいがち。
また膨大な機能を有するがゆえ（jQueryに依存）少々重いです。
ただとっても便利なのでこれまで部分部分で使用してきたのですが、調べてみると部分使用であればBootstrap以外にもすぐれたフレームワークがたくさんありました。
今回は私が個人的にこれから試したいCSSフレームワークをまとめてみました。
あくまで“試したい”ですので、使用したレビュー的なものではないのであしからず。
試したいCSSフレームワーク紹介
Semantic UI
セマンティックの名の通りわかりやすい設計になっています。Bootstrapに負けないくらいのUIコンポーネントがあるようです。
デザインもシンプルでとてもキレイです。Bootstrapに飽きた人にはピッタリかも。
機能はとてもじゃないけど書き切れませんが、おそらくできないことはないと思われます。
Skeleton
こちらはレスポンシブ対応でありながらグリッド、文字サイズ調整、フォーム、ボタンなどの最小限の構成に絞ったシンプルかつ超軽量なフレームワークです。
レイアウトやボタン等の基礎部分のみ使用し他はオリジナルで構成したい時にピッタリです。
Bulma
Flexboxに対応したフレキシブルなグリッドレイアウトが可能なフレームワークです。
古いブラウザのサポートが必要なくモダンCSSでサイトで構築したいこれからのサイト制作にはもってこいな感じです。
もちろんレスポンシブ対応で、フォームやボタン周りのパーツも用意されておりデザインもグッド！
Javascriptが不要なところもメリットのようです。
SkyBlue CSS
https://stanko.github.io/skyblue/
Bootstrapを軽量化しライトに使えることを目的としたミニマルなフレームワークです。
こちらも汎用性の低いものは排除し最低限必要なもののみに絞ってあるようです。Bulmaとは違いfloatレイアウト。Bootstrapに慣れている人ならすんなりと使いこなせるでしょう。
個人的はボタンやアイコン等のデザインがすごく好みです。
Basis
http://2inc.org/blog/2016/02/29/5181/
日本のフリーランスの方が開発したFlexboxベースの軽量CSSフレームワークです。
開発したかたはワードプレスのフォームプラグインMW WP Formでも有名です。
主要なパーツなども用意されており、同じ日本人の方と言うことで安心感もあります。レスポンシブ対応。
Responsive Boilerplate Framework
http://responsiveboilerplate.com/
最後はレスポンシブデザインのWebサイトを作るためにだけに使うフレームワークです。
ボタンやフォーム等の汎用性のあるパーツもありません。そのため驚くほど軽量です。
こちらの優れている点としてIE対応が完璧の様です。
まとめ
どれもすばらしいですが、最終的には個々によるデザインの好みやコードの使いやすさなどが選ぶポイントになってくるでしょう。
また案件によって使い分けるというのもいいかもしれません。フレームワークごとルールが異なるので、使い分けとなると少なからず煩わしさも出てきますが、蓄えている機能（目的としている機能）が違うためこれがベターなのかもしれません。
今回はbootstrapと並ぶ有名なFoundationはピックアップしませんでしたが、こちらも人気で評判がいいようです。
CSSフレームワークをうまく使いこなせば作業効率もアップし、まとまったクオリティの高いサイトができます。気になったフレームワークがあれば是非お試しください！
それではまた。
