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

Bootstrapは良いのだけれど、Bootstrapっぽさが如実に感じられるのが嫌だなぁと思っているプログラマーの方は多いはず。そこで使ってみて欲しいのがFree PixelKit Bootstrap UI Kitsです。フラットなUIでがらっと雰囲気を変えてくれること請け合いです!

見てもらうのが一番だと思うので、まずはデモサイトから。

どうです、これがBootstrapだと思いますか?いいえ思いませんよね(反語)。
どうです、これがBootstrapだと思いますか?いいえ思いませんよね(反語)。

ということで実際に細かな部品を紹介していきたいと思います。

まずはタイポグラフィ。
まずはタイポグラフィ。

ボタンの色。Bootstrapとは全然違いますね。
ボタンの色。Bootstrapとは全然違いますね。

ボタン+アイコン。ここら辺の使い勝手の良さはBootstrapならでは。
ボタン+アイコン。ここら辺の使い勝手の良さはBootstrapならでは。

チェックボックス。トグル風にカスタマイズされています。
チェックボックス。トグル風にカスタマイズされています。

ラジオボタン。ちょっと雰囲気が違いますよね。
ラジオボタン。ちょっと雰囲気が違いますよね。

テキストボックス。フラットな感じになっています。
テキストボックス。フラットな感じになっています。

テキストエリア。こちらもいい感じ。
テキストエリア。こちらもいい感じ。

セレクトタグ。デフォルトとは全然違います。
セレクトタグ。デフォルトとは全然違います。

ページネーション。幾つかのパターンで用意されています。
ページネーション。幾つかのパターンで用意されています。

スクロールバー。ドラッグで動かせます。
スクロールバー。ドラッグで動かせます。

プログレスバー。時間の経過とともに動きます。
プログレスバー。時間の経過とともに動きます。

レンジスライダー。フラットで見やすいですね。
レンジスライダー。フラットで見やすいですね。

メニュー。階層に対応しています。
メニュー。階層に対応しています。

アイコンメニュー。これも使い勝手良さそうです。
アイコンメニュー。これも使い勝手良さそうです。

メニューは縦にもできます。
メニューは縦にもできます。

ドロップダウンメニュー。
ドロップダウンメニュー。

グリッドメニュー。Windows 8風ですね。
グリッドメニュー。Windows 8風ですね。

動画プレーヤ。細かな部分にこだわりが見えます。
動画プレーヤ。細かな部分にこだわりが見えます。

スライダー。サイトのトップに飾りたいですね。
スライダー。サイトのトップに飾りたいですね。

カルーセル。似た商品を〜とかで使えそう。
カルーセル。似た商品を〜とかで使えそう。

カレンダー。この見やすさは良いと思います!
カレンダー。この見やすさは良いと思います!

プロフィールボード。今風のカードですね。
プロフィールボード。今風のカードですね。

ソーシャルアイコン。Dribbbleもあるのはデザイナーならでは?
ソーシャルアイコン。Dribbbleもあるのはデザイナーならでは?

天気ボード。使える場所が限られますが…
天気ボード。使える場所が限られますが…

価格表。こういうのは良いですね。
価格表。こういうのは良いですね。

ベースはBootstrapながら、雰囲気が一変しているのでどこにもらしさを感じさせません。この辺りのカスタマイズ性の高さがBootstrapの良さなのかも知れませんが、全体を統一してデザインするのは相当大変な労力であろうと思われます。なお一部の部品はjQueryやjQueryプラグインを利用しています。

しかしBootstrapで制作しておけば後々流行が変わったとしてもそのテーマを取り入れてサイトを変えていけるのはメリットだと思います。今はフラットUIが流行なので、Free PixelKit Bootstrap UI Kitsを使って構築しておくと後々のカスタマイズで大変な苦労が…といった心配もなさそうです。

ちなみにPixelKitはフリーと付いていることからも分かる通り、無料配布版であってプレミアムは39ドル/年で提供されています。そちらは18種類のアイコンやテーマ(Bootstrapだけでないようです)がダウンロードできるようになるようです。

Free PixelKit Bootstrap UI KitsはBootstrap用、Creative Commonsのオープンソース・ソフトウェアです。

デモ:Modern Touch | Index

ドキュメント:Modern Touch | Documentation

Pixelkit/PixelKit-Bootstrap-UI-Kits

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2