Windows8アプリを開発する際に使える？BootstrapをWindows8 Style UIに「metro-bootstrap」
metro-bootstrapはBoostrapをWindows8 Style UIに変更するデザインテーマです。
正直言ってWindows8はインストール以来全然使っていない筆者ですが、Windows8 Style UI（旧Metro UI）は好きです。あのすっきりとしたデザインはタブレットやWebでこそ活きるのではないかと思っています。そこで紹介したいのがmetro-bootstrapです。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-12 11.02.37.1363149874.png)
タイポグラフィ。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-12 11.02.48.1363149878.png)
引用やリストの表示。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-12 11.02.54.1363149882.png)
コード表示もできます。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-12 11.03.02.1363149885.png)
全体的に白く、塗りつぶしたようなデザインです。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-12 11.03.07.1363149888.png)
各種テーブルの表示。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-12 11.03.16.1363149893.png)
ボタンがWindows 8 Style UIです。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-12 11.03.26.1363149896.png)
こちらはコンポーネント。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-12 11.03.44.1363149900.png)
ドロップダウン系が薄いデザインになっています。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-12 11.03.49.1363149903.png)
タブも何となくのっぺりした感じに。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-12 11.04.13.1363149906.png)
ナビゲーションバー。すっきりとしたデザインで個人的には好きです。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-12 11.04.21.1363149910.png)
パン屑リスト。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-12 11.04.28.1363149913.png)
ラベル。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-12 11.04.37.1363149917.png)
アラート系。
metro-bootstrapはその名の通り、Bootstrapをベースにしています。それだけにレスポンシブや様々なウィジェットなど多数の機能が利用できます。その上でUIがすっきりとしたWindows8 Styleであれば使い勝手が良いのではないでしょうか。
metro-bootstrapはスタイルシート製、Apache License 2.0のオープンソース・ソフトウェアです。
MOONGIFTはこう見る
Windows8アプリはHTMLで開発できます。それだけにmetro-bootstrapをベースにすると開発がスムーズに開始できるかも知れません（デフォルトでスタイルも用意されていますが）。Webエンジニアのこれまでの技術スタイルでアプリケーションを開発できるのは魅力的なはずなのですが、今ひとつ流行っていない感があります。
それはWindows8自体の普及率にもよるのでしょうが、そろそろビジネス向けを中心にシェアが拡大していくと予想されます。コンシューマ向けよりもビジネス向けアプリを開発してみる方が面白いかも知れません。