レスポンシブ対応のフラットなUIフレームワーク「Furatto」
FurattoはHTML5/JavaScript/CSS3製のオープンソース・ソフトウェア（Apache License 2.0）です。
最近流行のフラットデザインでサイトを作ってみたいと思いつつ、そのデザインフレームワークを使いこなすのが大変…と感じている方はFurattoを試してみましょう。BootstrapをベースにしたフラットUIデザインが実現できます。
[](http://images.moongift.jp/2013/07/Screenshot 2013-07-17 9.16.58.1374024968.png)
ボタンデザイン。四角い、立体感のないデザインです。
[](http://images.moongift.jp/2013/07/Screenshot 2013-07-17 9.17.05.1374024972.png)
カラーバリエーションも良くあるフラット系になっています。
[](http://images.moongift.jp/2013/07/Screenshot 2013-07-17 9.17.10.1374024977.png)
ボタンにアイコンを載せることもできます。
[](http://images.moongift.jp/2013/07/Screenshot 2013-07-17 9.17.16.1374024981.png)
画像。丸く表示もできます。
[](http://images.moongift.jp/2013/07/Screenshot 2013-07-17 9.17.20.1374024986.png)
囲みをつけることもできます。囲みの色も変更可能です。
[](http://images.moongift.jp/2013/07/Screenshot 2013-07-17 9.17.36.1374024993.png)
テーブル表示。こちらは通常のテーブルです。
[](http://images.moongift.jp/2013/07/Screenshot 2013-07-17 9.17.40.1374024996.png)
ちょっと詰まった感じのテーブル。
[](http://images.moongift.jp/2013/07/Screenshot 2013-07-17 9.17.46.1374025000.png)
行ごとの色変更も可能です。
[](http://images.moongift.jp/2013/07/Screenshot 2013-07-17 9.18.01.1374025004.png)
レスポンシブなテーブルもありますが、幅をスマートフォンサイズまで縮めるとうまく表示できませんでした。
[](http://images.moongift.jp/2013/07/Screenshot 2013-07-17 9.18.21.1374025009.png)
グリッド。この辺りはBootstrapと同じ使い方です。
[](http://images.moongift.jp/2013/07/Screenshot 2013-07-17 9.18.32.1374025013.png)
ログインフォーム。奇麗ですね。
[](http://images.moongift.jp/2013/07/Screenshot 2013-07-17 9.18.36.1374025017.png)
チェックボックスとラジオボタン。フラットUIらしいデザインです。
[](http://images.moongift.jp/2013/07/Screenshot 2013-07-17 9.18.55.1374025022.png)
ページネーション。数字の表示がマウスオーバーなので、スマートフォンなどでうまく表示できないのが残念かも？
[](http://images.moongift.jp/2013/07/Screenshot 2013-07-17 9.19.04.1374025026.png)
ラベルとバッジ。色合いが良いです。
[](http://images.moongift.jp/2013/07/Screenshot 2013-07-17 9.19.10.1374025031.png)
タグもあります。
[](http://images.moongift.jp/2013/07/Screenshot 2013-07-17 9.19.16.1374025035.png)
カレンダーを使った日付ピッカー。デフォルトでこういったウィジェットが用意されているのは良いですね。
[](http://images.moongift.jp/2013/07/Screenshot 2013-07-17 9.19.25.1374025039.png)
ツールバー。ツールチップを効果的に使っています。
[](http://images.moongift.jp/2013/07/Screenshot 2013-07-17 9.19.31.1374025044.png)
モーダルウィンドウ。
[](http://images.moongift.jp/2013/07/Screenshot 2013-07-17 9.19.36.1374025052.png)
カルーセル。自動で差し代わります。
FurattoはBootstrapやFont Awesomeなどを使って構築されています。またウィジェットも多数用意されており、大抵のWebサイト開発におけるニーズに対応できるのではないでしょうか。レスポンシブWebデザインも意識されていますので、スマートフォン/デスクトップに共通のデザインで提供するのにも向いています。
MOONGIFTはこう見る
Bootstrapは便利なのですが、一番問題なのはそれっぽさが強く感じられてしまうことです。見た目のインパクトが強いので、カラーリングを変えても何となくBootstrapっぽさが感じられてしまいます。また、サードパーティーのウィジェットを組み合わせると他のライブラリと合わずに浮いてしまうこともあります。
Furattoの良いところはあまり我が強くないので良くあるフラットUIフレームワークとして使えそうな点、そしてデフォルトで多彩なウィジェットが提供されていることが良いのではないでしょうか。さらにBootstrapをベースにしているので、これまでに覚えたやり方で構築できるのも利点です。