ITエンジニア/デザイナ向けにオープンソースを毎日紹介

マテリアルデザインが人気です。単なるフラットなデザインだとどこがボタンなのか、さらにクリックした時の反応がないためアクションを起こしたのかどうかも分かりづらいと言った問題があります。マテリアルによって反応が得られるようになればユーザビリティが高くなるでしょう。

そこでBootstrapに対してマテリアルデザインを適用できるのがMaterial Kitです。雰囲気もがらっと変わるでしょう。

Material Kitの使い方

ボタンのデザイン。

マテリアルなのでマウスオーバー、クリック時にアニメーションが行われます。

リンク。

インプット。

チェックボックスやラジオボタン。

メニュー。

こういったナビゲーションメニューが作れます。

アイコン付きのタブ。

プログレスバー。

通知。

タイポグラフィ。

イメージの表示方法も多数用意されています。

モーダル。

ポップオーバー。

カレンダーを使った日付ピッカー。

カルーセルもマウスオーバーでカーソルが変わる細かいテクニック付き。

Material KitはBootstrapをベースとしているのですでに使い慣れている人も多いでしょう。スマートフォンやタブレット向けにマテリアルデザイン化したいといった時にテーマを差し替えてみると一気に雰囲気が変わるかも知れません。

Material KitはBootstrapベースのソフトウェア(ライセンスは独自)です。

Material Kit

Material Kit by Creative Tim

timcreative/material-kit: A Badass Bootstrap UI Kit based on Material Design

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2