Windows 8のモダンUIに代表される「フラットデザイン」。
「フラットデザイン」とは、余分な装飾は排除し、グリッドを意識した構成になっており、カラフルな単色かグラデーション、タイポグラフィが特徴のデザインです。

Windows 8のモダンUIで採用され、大きな話題となりました。

ブームに乗ってたくさんのWebデザインが生まれましたね。
今回はそんな「フラットデザイン」のサイトをまとめてみました。

Google I/O 2013

Googleで毎年行われるデベロッパー向けイベント、「Google I/O」。今年のサイトデザインは下層ページも含め、フラットな感じでした。最近のGoogleは全体的にフラットなデザインですよね。（新しくリリースされたGoogle Keepとか。)

Lorenzo Verzini

イタリア人デザイナー、Lorenzo Verzini氏のポートフォリオサイトです。フラットデザインのサイトでは必ず紹介されていました。

Fitbit

ワイヤレス活動量計「Fitbit」のサイトです。カラーリングが可愛いです。

Future Insights Live 2013

タイルがくるりと一回転するときのアニメーションが面白いです。

Lowdi – Bluetooth speaker

Bluetoothスピーカのサイトです。これは可愛い。

Rock Werchter 2013

Simple version control for designers – LayerVault

パララックスでフラットでサークルをモチーフにしたサイト。「これでもか！」というくらい流行のデザイン要素を盛り込んだWebサイトです。あと、ソースを表示して「ニヤッ」っとしました。

カロリーメイト公式サイト | 大塚製薬

こちらもページによってパララックスになっています。インフォグラフィックスを用いてカロリーメイトについて解説した「コラム」ページもいいですね。

Bärnt & Ärnst

マウスーバー時の動きが心地良いです。

Coffitivity – Increase Your Creativity!

※音が出るかもです。ご注意ください。
カフェの雑音を再生するサイト。家でなくカフェくらいのうるささだと仕事が捗る人向けのWebサービスです。（家で試したら「うるさい」と言われました…。）
自分の好きな音楽と合わせて再生するもよし、カフェの雑音だけで作業するもよし。デザインとしてはフラットかつ、レトロモダン、といった雰囲気で可愛いですね。エウレカって、あのエウレカでしょうか。

We make apps | Etch

アプリ制作会社のサイト。「ザ・モダン！」といった感じのデザインです。全ての要素が正方形にカットされていて清々しいです。

feedly. feed your mind.

「Google Reader終了のお知らせ」騒動の時に見かけたサイトです。こちらの記事によれば、Google Reader終了後もインポート／エクスポートなしにそのまま付けるのだとか。使って見ようと思いつつ未だにGoogle Readerから脱出できていませんが、いずれこのfeedlyを使って見たいと思っています。

MetroTwit – the Windows Twitter client you’ll love to use

Windows用Twitterクライアント「MetroTwit」のサイトです。

The Smartphone Reinvented Around You | Windows Phone (United States)

Windows Phoneの米国版サイトです。

Friends of The Web, LLC

Webサイト＆モバイルアプリ制作会社のサイト。4人で構成されている会社という事もあってか、ミニマムなデザインです。にもかかわらず、ページ遷移時のダイナミックな動きには意表を突かれます。ロゴのアニメーションも可愛いです。

フラットデザインを実装してみたい人は

Metro UI CSS

Metro UIデザインを早速Webに取り込みたいという方向けに、無料のCSSが配布されていました。

Styled with <a href="http://metroui.org.ua">Metro UI CSS</a>