Expanding Overlay EffectはWindows8 Style UIを模した天気表示ソフトウェアです。

ここ最近Metro UI（現Windows8 Style UI）を模したWebサービスを目にすることが増えてきました。Windows8のシェアが増えればさらに多くなるかもしれません。今回はWindows8 Style UIに似た天気表示ソフトウェア、 Expanding Overlay Effectを紹介します。

[](http://images.moongift.jp/2013/01/Screenshot 2013-01-22 9.39.21.1358861246.png)
各都市と気温が出ています。

[](http://images.moongift.jp/2013/01/Screenshot 2013-01-22 9.39.23.1358861250.png)
クリックすると広がって一週間の天気に切り替わります。

こんな感じでぐわっと広がります。

別なデモ。こちらは下に揺れます。

Expanding Overlay EffectはとてもシンプルなUIですが、パステルカラーのパネルが並んでおり、文字も大きめでとても分かりやすくなっています。タップした時には遷移する訳ではなく、その場で拡大表示されて週間天気に切り替わる表示も格好いいです。

Expanding Overlay EffectはHTML/CSS製のソフトウェア（ライセンスは独自で、個人/商用利用が可能）です。

MOONGIFTはこう見る

Microsoftには才能ある技術者が多数います。そうした人たちが人間工学などに基づいて構築しているデザインであるが故に、Windows8 Style UIについても使いやすさが凝縮した画面構成になっているはずです。見た目のインパクトが強いですが、使っている内に一覧性の高さや操作性の良さを感じられるようになるはずです。

それだけにそこからのエッセンスを抽出し、自分のプロダクトに反映してみるのはとても良い考えであると言えます。まだWindows8自体のシェアがあまり高くないので、現状ではユーザを混乱させる可能性がありますが、今年中には一定のシェアを獲得できるでしょう。そうなればこのスタイルに合わせたコンテンツ提供も考えられるはずです。

Expanding Overlay Effect

Putting CSS Clip to Work: Expanding Overlay Effect | Codrops