Material Kit - マテリアルデザインが実践できるBootstrapベースの無料UIキット

Materialkit

Twitterが開発する超有名なHTML/CSSフレームワーク「Bootstrap」。高機能で使いやすいフレークワークですが、有名すぎて同じような雰囲気のサイトが量産されてしまう事が難点かもしれません。

そのような時に試してみたいのが本日紹介する「Material Kit」です。Creative Timによる無料のUIキットでBootstrapをベースとし、Googleが提唱するマテリアルデザインの要素を取り込んでいることが特徴です。

公式サイトにはMaterial Kitを使用するとどのようなサイトが作成できるのかライブデモが掲載されています。以下その中からいくつかの要素をご紹介します。

ボタン

S 2016 07 14 23 54 39

▲ボタンはBootstrapより少しポップな雰囲気です。囲みのスタイルが選択可能で、押した時エフェクトが表示されるのも特徴です。

インプット系

S 2016 07 14 23 54 53

▲インプットや、チェックボックス、ラジオボタン、トグルボタン、スライダー等、フォームに欠かすことができない要素も揃っています。インプットは要素を選択したときのアニメーションが凝っていて入力が捗りそうです。

メニュー・ナビゲーション

S 2016 07 14 23 55 06

▲メニューやナビゲーションもオリジナルのBootstrapとは少し違った雰囲気です。ドロップダウン付きのメニューや右寄せメニューも実現可能です。

タブ

S 2016 07 14 23 55 26

▲タブを使って表示を切り替えるデモも掲載されています。

まとめ

公式サイトにはさらに多数のデモが掲載されています。詳細はそちらでご確認ください。

なおMaterial Kitの無料ライセンスはPersonal Licenseとして位置づけられていて、1顧客に対し1Webサイト/1アプリまで無料で利用できるという制限があるようです。19ドルでDeveloper Licenseを購入すれば制限は解除されます。詳細はライセンスページでご確認ください。

スポンサーリンク