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

Metro UI CSSはWindows 8のMetro UIをHTML5/CSS3で再現したソフトウェアです。

次期WindowsのWindows 8ではMetro UIと呼ばれる新しいインタフェースが利用されています。そんなMetro UIをCSSで再現したのがMetro UI CSSになります。


デスクトップで見たイメージです。アイコンが並んでいます。


選択できる画像リストです。


選択できるリストです。画像も埋め込めます。


チャットなどで使えそうなリストです。吹き出しもついています。


アプリケーションリストです。


時計などのウィジェットです。


iPadでの表示です。タブレットの方が最適化されています。


左右の移動もできます。


デモ動画です。動きはスムーズです。

動きはかなりスムーズで格好いいです。パネルを押すとちょっとへこんだり、ボタンも多数用意されています。リストをタップして選択したりするのも分かりやすいです。

Metro UI CSSはHTML5/CSS3製のオープンソース・ソフトウェア(MIT License)です。


MOONGIFTはこう見る

Metro UIはOSの最初の表示になるのにふさわしく、様々な情報を詰め込んで表示しても快適な操作性を維持しています。それだけにポータル的なサイトや情報が多いサイトでこの手のUIから学べることは多いのではないでしょうか。

日々情報は増えるばかりで減ることは滅多にありません。しかも年々その量は増加しています。そうしたともすると埋もれてしまいそうなくらいの情報をいかに見やすく分かりやすく表示するか、その解答は常に求められていると言えるでしょう。

olton/Metro-UI-CSS

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2