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

Metro JSはjQuery/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

Windows 8-style UIは情報のダッシュボードとして使う分には良いインタフェースではないかと思います。そんなWindows 8-style UIを自分のサイトにも取り込みたいと考える方はMetro JSを使ってみると良いのではないでしょうか。


基本サンプルです。ボックスがタイル状に並びます。


タイルごとに横から別なボックスがスライド表示される機能があります。


タブなどを使ってボックスの表示を切り替えるデモです。


タイルをさらに1/4に区切って表示を行います。


さらに1/2や1/9に区切る事もできます。


ドラッグして移動できるタイルにもできます。


タイルに編集機能を持たせるデモ。設定を保存したりできます。


下のアプリバーだけを使う事もできます。


組み合わせるとこんな感じ。

Metro JSの場合、タイルは1×1の固定サイズになるようで、より複雑なタイル表示は行えないようです。とは言え十分な表現力があるのではないでしょうか。管理者画面に使ったりするのも面白そうです。


MOONGIFTはこう見る

iPhoneが出た時、そのUIを真似たライブラリが登場しました。その結果、スマートフォンサイトにおける鉄板とも言えるデザインが確立しました。Windows 8-style UIについては流行ってはいないようですが、そのUIについては専門家が相当研究したエッセンスが盛り込まれているはずです。

だからこそUIを真似するライブラリを作る事は、その特徴やユーザビリティの利点を学ぶ上で効果があるはずです。他にも注目すべきUIを持ったサービス、アプリは数多くあります。それを真似る事でそこにある利点を学び取ってみてください。

Metro JS - Metro Live Tiles and more Modern UI tools for jQuery - Drew Greenwell - Professional Developer

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2