今更現場では聞けないWebデザインのトレンド「フラットデザイン」とは?

  • 2013/05/07
  • このエントリーをはてなブックマークに追加

スポンサーリンク

Windows8
Webデザインの分野では、2012年半ばより、フラットデザイン化の流れが止まらない。
Webデザインにおける2013年のトレンドは?と聞かれれば、間違いなく多くのデザイナーが「フラットデザイン」と答えるでしょう。

Windows8におけるメトロUIが、代表的なフラットデザインとなっていますが、
iOS 7ではUIとアイコンデザインを一新? "フラット化"が進む - 海外報道でもふれられている通り、Appleまでもがフラット化の道をたどっているのではないかという噂まであります。

そんなわけで今回はトレンド「フラットデザイン」についておさらいして行きましょう。
IT/Web業界に強い転職サイトGreen

フラットデザインとは?


一応定義があるわけではないのですが、指標のようなものはあります。
従来のように影や装飾などで、立体的なWebデザインを行うものと対照的に、装飾や影などを極限まで省き、平面デザインにすることです。

ポイントはいくつかありますが、立体的ではなく、装飾も省くということは、ぶっちゃけるとデザイン性が一気に低下するのは間違いありません。

しかし、これらは一つ一つのパーツを考えるのではなく、全体的なデザインが美しく整えられている事が大切です。また、表現するものとして色選びが非常に重要となってきます。

例えば以下のようなデザインがフラットデザインのアイコンです。
ちなみにフリーアイコンなので、興味のある方はダウンロードしてみるといいかもしれません。
フラットアイコン

フラットアイコン

フラットデザイン

フラットデザインアイコン

フラットデザインアイコン

フラットデザインアイコン
さらにお探しの方はこちら

これらを見て分かる通り、現在のWebサイトで使われているアイコンが、かなりフラット化されているのがわかるかと思います。

シンプルなUI要素に使われる


とりあえず全ての装飾をなんでもかんでも省く事はフラットデザインではありません。

というのも、フラットデザインが加速した背景には、ある重要なトレンドが絡んでいるからです。

これらに先駆けて登場させたのがMicrosoftのWindowsPhoneでした。
WindowsPhone
メトロUIの先駆者として、このUIはさらに、Windows8になっても続いています。
Windows8
そうです。
重要なトレンドとは、タッチパネル操作と、タブレットの普及です。

よりわかりやすく、シンプルなUIを作成する必要があったというのもありますが、例えばAndroidやAndroidタブレット、iPhoneと言った解像度の違うデバイスにおいて、制作側はスケーラビリティを考慮する必要があり、その結果、こうした状況の変化にも簡単に適応しやすいスタイルが求められたのです。

このことから、フラットデザインは、フラットUIデザインとも言えます。
要するに一つ一つのパーツにデザインが求められるわけではなく、ユーザーインターフェイスから設計する必要があるということです。

今後もこの流れは止まらず、グイグイ進行していくのではないかと予測されます。

また、デバイスを選ばず、多岐にわたり普及し続ける事でしょう。

イマイチわかんないです・・・


そんな時はどんどん目をこやしましょう。
2013年のトレンド、フラットデザインを使うメリット+参考にしたいデザインまとめで紹介されている以下の2ページが個人的にもっともお勧めです。

フラットユーザーインターフェイスデザイン
フラットデザインUI

フラットユーザーインターフェイス
フラットUI

また、サイト設計にはこちらの記事もかなり参考になるかと思います。

20 Great Examples of the Flat Trend in Web Design
フラットUIウェブサイト

33 Examples of the Flat Web Design Trend | Vandelay Design Blog
フラットUIデザイン
また、以下はフラットデザインの為のフリーフォントまとめです。
25 New Free Fonts For Flat Design

いかがでしたでしょうか。

もしまだ、えーー!?トレンドはレスポンシブ・ウェブデザインじゃないの!?とか思っている人がいたらこちらも一読願えればと思います。
レスポンシブWebデザインはブームではない

それでは、また。

スポンサーリンク

トップへ戻る

Twitter版のネタ帳では毎週月曜~金曜までWeb屋さんに役立つ色んな情報や単なるネタまでをつぶやいています。

関連するエントリー

コメント

この記事にコメントする人はクリック

コメントポリシーをお読みください
管理者にだけ表示を許可する

(>_<) 新しい古い

フラットデザインがダサいと思ってしまう自分は…
古い人間なのだろうか?

2013/05/07 Tue 16:33| |

FC2Ad

広告


IT・Web業界の求人なら転職サイトgreen(グリーン) ホームページテンプレート、WordPressテーマ、Facebookページテンプレートならクラウドテンプレート ネットマーケティングとは│ネットマーケティング検定 SEOコンサルティング&SEO対策 無料レスポンシブWebデザインテンプレート 広告主募集

あわせて読みたい
フィードメーター - ホームページを作る人のネタ帳

人気の記事一覧

あなたのブログの再訪問者を増やす50の方法

私の経験から感じた事を書き記します。全てが全てその時々で、正しいとは限りませんが、一つの指針としてお使いください。因みに全部リスト化すると230くらいありましたが、それはきっとセミナーとかでやるかなぁと。

http://e0166.blog89.fc2.com/blog-entry-824.html

あなたの生活を確実に拘束し時間を浪費させる動画50

今回は生産性を向上させる事ばかり考えて記事を書いてきたので、逆に年末にかけて忙しい皆さんの時間を出来るだけ拘束し、忙しさを倍増させるものが無いかを考えました。その結果、動画で行こうと言う事になったのが1ヶ月以上前。動画閲覧本数はおそらく600本以上。その中から、おもしろそうなものを50個ベストチョイスいたしました。

http://e0166.blog89.fc2.com/blog-entry-820.html

webデザインのセンスを磨く○○系のwebデザインまとめ

webデザインを学ぶならwebデザインから。と言うわけで、今回は海外のエントリを中心に、○○系のまとめをまとめます。

http://e0166.blog89.fc2.com/blog-entry-817.html

jQueryプラグインのベストトレンド総まとめ2010

もはやこの業界ではかなり浸透しつつあるjQuery。今回はそんなjQueryにスポットを当て、本年度紹介された中でも、ホットなトレンドプラグインをご紹介します。

http://e0166.blog89.fc2.com/blog-entry-816.html

ツイッターの日常における35の行動パターン

私が良く見かける35の行動パターンに名前をつけてみようと思う。年末の誰も見てない時に公開しようと思っていた、ただのネタだったのですが、結構時間がかかりこの時期に・・・。

http://e0166.blog89.fc2.com/blog-entry-823.html

ウェブデザイナーのためのウェブアプリ15

OSがWindowsであろうと、ubuntuであろうと、共通のサービスを受けることができるのがウェブアプリケーションです。ウェブデザイナーの中には、自宅ですでにubuntuを利用している人も多い。また、Mac、Windowsと、各自それぞれの使いやすい物を利用していると思います。

http://e0166.blog89.fc2.com/blog-entry-784.html

愛用するGoogleChromeエクステンション12個

この2年でノートPC2台購入。自他のPCはクラッシュしてリカバリー。会社のPCは新しいのがあたり、再セットアップ。そんなこんなで、会社はまぁともかくとして、とりあえず全PCが比較的3ヶ月に一度リカバリーしてもいいように、自分用にメモとして残しておきます。

http://e0166.blog89.fc2.com/blog-entry-784.html

文章や会話のプレゼンテーションを向上させる方法

文章力がないためにプレゼンに失敗した、会話がうまくできずにプレゼンに失敗した。こういう経験はなかなか無い。なぜなら多くの場合、失敗したことに気がつかないからです。

http://e0166.blog89.fc2.com/blog-entry-802.html

サイトの裏側の意識を変え売り上げをアップする方法

ネットショップ運営者が、あることをちょっとだけ始めてみただけでわずか5ヶ月で売り上げが3倍になりました。はたして、webサイト運営がどのように変わったのでしょうか。。

http://e0166.blog89.fc2.com/blog-entry-749.html

webサイトのリピーターを増やすさりげない5つのコツ

多くのビジネスサイトのアクセス数を支えている大手検索サイト、Yahoo、Googleのアルゴリズムが変わる事で、突然商売がひっくり返る事態を回避する方法。

http://e0166.blog89.fc2.com/blog-entry-746.html