[み]今年のWebデザインのトレンド「フラットデザイン」のおさらい

みはら.comでもいくつかフラットデザインについて紹介していますが、そんな今年のWebデザインでのトレンド「フラットデザイン」についておさらいしてみます。

フラットデザインとは?

フラットデザインに明確な定義があるわけではありません。しかし、目安というか、目標というか、指標のようなものはあります。

それは、これまでのようにハイライトやシャドウを使って装飾した立体的なWebデザインとは対照的に、装飾をできるだけなくし、平面デザインにすることです。言ってみれば、Macのアイコンとは対照的なデザインということです。

Macのアイコンは、とても精巧につくりこまれています。例えば、このテキストエディットのアイコンは、よーく見ると「Think Different 」の原稿が書いてあります。もちろん、通常のアイコンのサイズでは見えませんが…textedit

では、このMacのアイコンと対照的なデザイン(=フラットデザイン)というと、Windows8のメトロUIが代表として挙げられます。windows8

さらに、AppleもiOS 7でアイコンやUIを一新して、フラットデザイン化するなんていう話も聞こえてきています。
Jony Ive paints a fresh, yet familiar, look for iOS 7 | 9to5Mac
そして、Bootstrap3.0もフラットデザインを採用するようです。

また、フラットデザインのアイコンも、どんどん出てきています。
iphone_1x
Flat+Icons+17
[み]フラットデザインにぴったりなフリーアイコン素材(AI・PSD・PNG)

実際にはどんな風に使われる?

では、フラットデザインは実際にどんな風に使われるのか、UIに注目してみます。

まず、基本となるのが、DesignmodoのFlat UIです。
flatpress01

さらに、海外のWebサイトDribbbleでは、フラットデザインのUIがいくつも紹介されています。
flat-ui-al_1x
flat_web_elements

そして、フラットデザインのWebサイトを集めたサイトもあります。
[み]フラットデザインって何?っていう方に。フラットデザインのギャラリーサイト「FlatDesign.」

WordPressのテーマにも、フラットデザインの波がやってきています。
[み]Designmodoの「Flat UI」をBootstrapと合体させたWordPressテーマ「FlatPress」
[み]フラットデザインを採用したWordPressテーマ7つ
このみはら.comも近いうちにフラットデザイン化しようかな…

また、海外のWebサイトですが、フラットデザイン用のフリーフォントも紹介されています。正直、フラットデザイン用っていう線引きがいまいち理解できていません。
25 New Free Fonts For Flat Design

ここまでザザっとながめていただけたら、フラットデザインってこういうのか、となんとなくわかったんじゃないでしょうか?

シェアありがとうございます

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

commentYour Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

checkboxみはら.comはエックスサーバーです

editNEW エントリー

PAGE TOP arrowup