今更現場では聞けないWebデザインのトレンド「フラットデザイン」とは？
2013年05月07日 公開
Webデザインの分野では、2012年半ばより、フラットデザイン化の流れが止まらない。
Webデザインにおける2013年のトレンドは？と聞かれれば、間違いなく多くのデザイナーが「フラットデザイン」と答えるでしょう。
Windows8におけるメトロUIが、代表的なフラットデザインとなっていますが、
iOS 7ではUIとアイコンデザインを一新? "フラット化"が進む - 海外報道でもふれられている通り、Appleまでもがフラット化の道をたどっているのではないかという噂まであります。
そんなわけで今回はトレンド「フラットデザイン」についておさらいして行きましょう。
フラットデザインとは？
一応定義があるわけではないのですが、指標のようなものはあります。
従来のように影や装飾などで、立体的なWebデザインを行うものと対照的に、装飾や影などを極限まで省き、平面デザインにすることです。
ポイントはいくつかありますが、立体的ではなく、装飾も省くということは、ぶっちゃけるとデザイン性が一気に低下するのは間違いありません。
しかし、これらは一つ一つのパーツを考えるのではなく、全体的なデザインが美しく整えられている事が大切です。また、表現するものとして色選びが非常に重要となってきます。
例えば以下のようなデザインがフラットデザインのアイコンです。
ちなみにフリーアイコンなので、興味のある方はダウンロードしてみるといいかもしれません。
さらにお探しの方はこちら
これらを見て分かる通り、現在のWebサイトで使われているアイコンが、かなりフラット化されているのがわかるかと思います。
シンプルなUI要素に使われる
とりあえず全ての装飾をなんでもかんでも省く事はフラットデザインではありません。
というのも、フラットデザインが加速した背景には、ある重要なトレンドが絡んでいるからです。
これらに先駆けて登場させたのがMicrosoftのWindowsPhoneでした。
メトロUIの先駆者として、このUIはさらに、Windows8になっても続いています。
そうです。
重要なトレンドとは、タッチパネル操作と、タブレットの普及です。
よりわかりやすく、シンプルなUIを作成する必要があったというのもありますが、例えばAndroidやAndroidタブレット、iPhoneと言った解像度の違うデバイスにおいて、制作側はスケーラビリティを考慮する必要があり、その結果、こうした状況の変化にも簡単に適応しやすいスタイルが求められたのです。
このことから、フラットデザインは、フラットUIデザインとも言えます。
要するに一つ一つのパーツにデザインが求められるわけではなく、ユーザーインターフェイスから設計する必要があるということです。
今後もこの流れは止まらず、グイグイ進行していくのではないかと予測されます。
また、デバイスを選ばず、多岐にわたり普及し続ける事でしょう。
イマイチわかんないです・・・
そんな時はどんどん目をこやしましょう。
2013年のトレンド、フラットデザインを使うメリット+参考にしたいデザインまとめで紹介されている以下の2ページが個人的にもっともお勧めです。
フラットユーザーインターフェイスデザイン
フラットユーザーインターフェイス
また、サイト設計にはこちらの記事もかなり参考になるかと思います。
20 Great Examples of the Flat Trend in Web Design
33 Examples of the Flat Web Design Trend | Vandelay Design Blog
また、以下はフラットデザインの為のフリーフォントまとめです。
25 New Free Fonts For Flat Design
いかがでしたでしょうか。
もしまだ、えーー！？トレンドはレスポンシブ・ウェブデザインじゃないの！？とか思っている人がいたらこちらも一読願えればと思います。
レスポンシブWebデザインはブームではない
それでは、また。