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

FurattoはHTML5/JavaScript/CSS3製のオープンソース・ソフトウェア(Apache License 2.0)です。

最近流行のフラットデザインでサイトを作ってみたいと思いつつ、そのデザインフレームワークを使いこなすのが大変…と感じている方はFurattoを試してみましょう。BootstrapをベースにしたフラットUIデザインが実現できます。


ボタンデザイン。四角い、立体感のないデザインです。


カラーバリエーションも良くあるフラット系になっています。


ボタンにアイコンを載せることもできます。


画像。丸く表示もできます。


囲みをつけることもできます。囲みの色も変更可能です。


テーブル表示。こちらは通常のテーブルです。


ちょっと詰まった感じのテーブル。


行ごとの色変更も可能です。


レスポンシブなテーブルもありますが、幅をスマートフォンサイズまで縮めるとうまく表示できませんでした。


グリッド。この辺りはBootstrapと同じ使い方です。


ログインフォーム。奇麗ですね。


チェックボックスとラジオボタン。フラットUIらしいデザインです。


ページネーション。数字の表示がマウスオーバーなので、スマートフォンなどでうまく表示できないのが残念かも?


ラベルとバッジ。色合いが良いです。


タグもあります。


カレンダーを使った日付ピッカー。デフォルトでこういったウィジェットが用意されているのは良いですね。


ツールバー。ツールチップを効果的に使っています。


モーダルウィンドウ。


カルーセル。自動で差し代わります。

FurattoはBootstrapやFont Awesomeなどを使って構築されています。またウィジェットも多数用意されており、大抵のWebサイト開発におけるニーズに対応できるのではないでしょうか。レスポンシブWebデザインも意識されていますので、スマートフォン/デスクトップに共通のデザインで提供するのにも向いています。


MOONGIFTはこう見る

Bootstrapは便利なのですが、一番問題なのはそれっぽさが強く感じられてしまうことです。見た目のインパクトが強いので、カラーリングを変えても何となくBootstrapっぽさが感じられてしまいます。また、サードパーティーのウィジェットを組み合わせると他のライブラリと合わずに浮いてしまうこともあります。

Furattoの良いところはあまり我が強くないので良くあるフラットUIフレームワークとして使えそうな点、そしてデフォルトで多彩なウィジェットが提供されていることが良いのではないでしょうか。さらにBootstrapをベースにしているので、これまでに覚えたやり方で構築できるのも利点です。

Furatto

IcaliaLabs/furatto

 

MOONGIFTの関連記事

  • DevRel
  • Com2