コンポーネントの充実したデザインフレームワーク8選
昨今、スピード重視の開発を実現する上で欠かせなくなったデザインフレームワーク。デザインフレームワークとは、ボタンやフォームのデザインなどが定義されたライブラリのことです。
デザインフレームワークと一言で言っても、シンプルなデザインセットから動的なコンポーネントを導入できるものまで様々あります。今回は自分で作るには骨の折れるコンポーネント（例えば、グリッドや、ドロップダウンなど）を画面に簡単に配置できるもの8個紹介します。
Bootstrap
Bootstrapもっともメジャーなデザインフレームワークです。開発はTwitter社で、日本語のでのリファレンスが多いことから初心者にもやさしいフレームワークであるといえます。
Twitterでも使われていることからどのようなデザインのフレームワークかは想像しやすいかと思われます。例えば、Bootstrapを使えば画像のようなデザインを当てることができます。
Bootstrapで使える主なコンポーネントは以下の通りです。
これ以外にも様々なコンポーネントが用意されています。
なお、コンポーネントをJavaScriptで簡単にカスタマイズすることもできます。機能は非常に充実していますが、機能が多い分、他のフレームワークに比べると少し重たいというデメリットがあります。スマートフォンなどで早く画面を表示したいといった場合は他のデザインフレームワークを検討しましょう。
Foundation
ZURB社の作っているBoostrapの次にメジャーと言っていいフレームワークがFoundationです。テンプレートが充実しており、それらにコンテンツを流し込むだけで簡単に作成できるのが特徴です。
例えば、下の画像のように様々なレイアウトでページをデザインすることができます。
Foundationで主に使えるコンポーネントは以下の通りです。
また、パニーニと呼ばれる機能で条件分岐するなど、他のフレームワークにはない機能も多数あります。
Bootstrapと同程度に高機能ですので、デザインや利用するコンポーネント次第ではFoundationを使うのも良いでしょう。
Pure
Yahooの開発したデザインフレームワークです。特徴は何と言ってもその軽さです。ファイルの重さはver0.6.0で369KBです（参考までにbootstrapはフルで1.2MB）。
デザインはフラットでシンプルです。
主に使えるコンポーネントとしては、
などがあります。
なお、Pure CSS Componentsを使えば、JavaScriptを使うことなく、CSSのみで、カルーセル、モーダルウィンドウなども実現できます。
BootstrapやFoundationほどの機能が必要ない場合はPureを活用してもいいでしょう。
Cutestrap
Pure同様、Bootstrapの重たさを問題視して作られた軽量（442 KB）のデザインフレームワークです。
デザインはCutestrapの公式ページそのものを見れば分かるように、とてもシンプルです。
主に使えるコンポーネントとして、
- フォーム装飾
- グリット
- タイポグラフィ
などがあります。非常にシンプルなため、JavaScriptでのカスタマイズはBootstrapと同じくらい簡単にできます。
最低限のフォームやグリッド機能を使ってページ作成をしたい場合、Cutestrapがオススメです。
Material UI
Google Material Designが提供しているUIパーツをReactのコンポーネントとして配布しているプロジェクトがMaterial UIです。Reactを使っているページであれば簡単に導入できるフレームワークです（なお、導入方法については公式ドキュメントを参考にしてください）。
こちらのページのように、Material UIを使えばGoogleの推奨するマテリアルデザインを踏襲したページが簡単に作成できます。
Material UIで主に使えるコンポーネントとして、
などがあります。
Reactを使う場合には、Material UIがオススメです。
Uikit
UIkitはjQuery、 normalize.cssをベースに作成されたデザインフレームワークです。画像のようなマテリアルデザインのページを作成できます。
Uikitで主に使えるコンポーネントは以下の通りです。
- ナビゲーション
- フォームに関する装飾
- 進捗バー
jQueryの知識があればカスタマイズは簡単にできます。ユーザインタフェース関連のコンポーネントが充実しているので、BootstrapよりもUIを重要視している方にオススメです。
Basis
Bootstrapで不満な箇所を改善する目的で作成したFlexboxベースの軽量レスポンシブCSSフレームワークです。他のフレームワークでもグリッドシステムというのは導入されていますが、他と異なりfloatではなくFlexboxになっています。そのためfloatで作られたグリッドシステムと異なり、カラム落ちしません。
Basisを使えば、上の画像のような一体感のあるページも簡単に作成することができます。
Basisで主に使えるコンポーネントは以下の通りです。
などです。
グリッドでページを作る際、カラム数が安定しなさそうなページを作りたい場合にはBasisが活用できそうです。
Cascade Framework
使用時の画面イメージは以下のようになります。
主に使えるコンポーネントは以下の通りです。
IE6から対応しているので、レガシーブラウザに対応しなければならない時にCascade Frameworkが良さそうです。
今回はコンポーネントが充実したデザインフレームワークを8つ紹介しました。Boostrapが主流になっていますが、作成したいページの用途や目的にあわせて、フレームワークを使い分けてみてはいかがでしょう。
hifive – HTML5企業Webシステムのための開発プラットフォーム
hifive開発者ブログ 
コメントは受け付けていません。