フラットデザインなスマートフォンWeb UIフレームワーク「Onsen UI」
Onsen UIはHTML5/JavaScript製のオープンソース・ソフトウェア（Apache Licnese 2.0）です。
スマートフォン向けのHTMLテンプレートを使うことで最適化された表示のWebサイトが素早く構築できるようになります。今回は日本製のOnsen UIを紹介します。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-15 15.54.40.1379377817.png)
右側がOnsen UIの表示です。デモとして作られています。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-15 15.54.47.1379377821.png)
ボタンを押すとFlickrから画像を取得します。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-15 15.56.29.1379377825.png)
こちらは基本的な表示。ボタンを押すと別なページを表示します。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-15 15.56.38.1379377829.png)
pushStatusにも対応していますのでスムーズなナビゲーションが可能です。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-15 15.56.43.1379377832.png)
タブバー風に下に表示させることもできます。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-15 15.56.51.1379377836.png)
左スライドメニュー。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-15 15.57.12.1379377840.png)
リスト。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-15 15.57.23.1379377844.png)
各サイズのボタン。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-15 15.57.31.1379377849.png)
ドロップダウン。ちょっと大きめですね。
[](http://images.moongift.jp/2013/09/Screenshot 2013-09-15 15.57.41.1379377853.png)
テキスト入力。
Onsen UIはHTML/JavaScript/CSSで構築されていますので任意のWebサイトに適用できます。しかしPhoneGapを拡張したMonacaと組み合わせることでさらに便利に使えるようです。
MOONGIFTはこう見る
元々スマートフォン用HTMLテンプレートというのはネイティブアプリ風のものが多かったように感じます。しかしiOS7やAndroidがフラットデザインを採用するのに合わせて徐々にWebとネイティブのデザインが混ざってきているように感じます。
Onsen UIも最適化はされていますが、ネイティブ風ではありません。無理にネイティブに寄せないことで、よりWebの良さを活かした作りになっているのではないかと思います。