Windows 8-style UIをjQueryで実現「Metro JS」
Metro JSはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。
Windows 8-style UIは情報のダッシュボードとして使う分には良いインタフェースではないかと思います。そんなWindows 8-style UIを自分のサイトにも取り込みたいと考える方はMetro JSを使ってみると良いのではないでしょうか。
[](http://images.moongift.jp/2013/07/Screenshot 2013-07-22 9.32.10.1374494004.png)
基本サンプルです。ボックスがタイル状に並びます。
[](http://images.moongift.jp/2013/07/Screenshot 2013-07-22 9.32.34.1374494009.png)
タイルごとに横から別なボックスがスライド表示される機能があります。
[](http://images.moongift.jp/2013/07/Screenshot 2013-07-22 9.32.55.1374494014.png)
タブなどを使ってボックスの表示を切り替えるデモです。
[](http://images.moongift.jp/2013/07/Screenshot 2013-07-22 9.33.08.1374494018.png)
タイルをさらに1/4に区切って表示を行います。
[](http://images.moongift.jp/2013/07/Screenshot 2013-07-22 9.33.16.1374494022.png)
さらに1/2や1/9に区切る事もできます。
[](http://images.moongift.jp/2013/07/Screenshot 2013-07-22 9.33.32.1374494028.png)
ドラッグして移動できるタイルにもできます。
[](http://images.moongift.jp/2013/07/Screenshot 2013-07-22 9.33.45.1374494033.png)
タイルに編集機能を持たせるデモ。設定を保存したりできます。
[](http://images.moongift.jp/2013/07/Screenshot 2013-07-22 9.34.19.1374494038.png)
下のアプリバーだけを使う事もできます。
[](http://images.moongift.jp/2013/07/Screenshot 2013-07-22 9.34.34.1374494042.png)
組み合わせるとこんな感じ。
Metro JSの場合、タイルは1×1の固定サイズになるようで、より複雑なタイル表示は行えないようです。とは言え十分な表現力があるのではないでしょうか。管理者画面に使ったりするのも面白そうです。
MOONGIFTはこう見る
iPhoneが出た時、そのUIを真似たライブラリが登場しました。その結果、スマートフォンサイトにおける鉄板とも言えるデザインが確立しました。Windows 8-style UIについては流行ってはいないようですが、そのUIについては専門家が相当研究したエッセンスが盛り込まれているはずです。
だからこそUIを真似するライブラリを作る事は、その特徴やユーザビリティの利点を学ぶ上で効果があるはずです。他にも注目すべきUIを持ったサービス、アプリは数多くあります。それを真似る事でそこにある利点を学び取ってみてください。