• Facebook
  • Twitter
  • RSS

月別

コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

フラットデザインサイト15個まとめてみた

投稿者アイコン

2013/04/01

書いた人:
katoppa!
カテゴリ:
デザイン
47,474 views

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

フラットデザインサイト15個まとめてみた


フラットデザイン、集めてみました

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

Windows 8のモダンUIで採用され、大きな話題となりました。
windows8
ブームに乗ってたくさんのWebデザインが生まれましたね。
今回はそんな「フラットデザイン」のサイトをまとめてみました。

Google I/O 2013

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

https://developers.google.com/events/io/

Lorenzo Verzini

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

http://lorenzoverzini.com/

Fitbit

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

Future Insights Live 2013

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

Lowdi – Bluetooth speaker

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

Rock Werchter 2013

rockwerchter

Simple version control for designers – LayerVault

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

https://layervault.com/

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

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

Bärnt & Ärnst

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

Coffitivity – Increase Your Creativity!

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

http://www.coffitivity.com/

We make apps | Etch

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

feedly. feed your mind.

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

http://www.feedly.com/

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

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

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

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

Friends of The Web, LLC

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

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

Metro UI CSS

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

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

といった感じで、Metro UI CSSへのリンクを貼れば、自由に使えるそうです。
手っ取り早く導入してみたい人にはいいかもしれません。
metro_ui_css


この記事を読んだ人はこんな記事も読んでいます

<

>