フラットデザインについて

先週の記事であるが、
フラットデザインについてメモも兼ねて投稿。

「Yahoo! JAPAN」トップページ、平面的なデザインへ変更、週明け6月17日から

ロゴからは陰影がなくなり、各アイコンもグラデーションや角丸の枠を取り払った、さっぱりとした平面的なデザインとなっている。
スマートデバイスやPCでの見やすさ、使いやすさの向上が目的だという。

確かに、かなりクリーンな印象になった。

Yahooのフラットデザイン

 

で、フラットデザインについて色々と調べてみると
下記、@ITの記事に詳しく記載がされていたのでメモ。

5分で分かるフラットデザイン

フラットデザインとは、簡単にいうと、グラデーションを利用しない非常にのっぺりとしたデザインのことだ。

(中略)

では、Webでフラットデザインを実現するにはどうすればいいか。実際にやってみよう。いくつかのポイントを押えて取り組めば、難しいことではない。

1.vividな色を利用する
2.アイコンを使わない
3.グラデーションは使わない
4.影を付けない
5.背景画像を使う

まぁ簡単に書いてありますが、
「シンプル」と「しょぼい」は紙一重だと思うので、
本質的なデザイン力が問われる事となりそうです。

で、フラットデザインのCSSフレームワークとか素材が
増えていくだろうな~と思ったら、すでに結構存在していた。

今年流行りのフラットなデザイン制作に役立つCSSフレームワークやPSD素材

 

いま会社でちょっとしたWebアプリを作成しており、
せっかくなのでフラットデザインのCSSフレームワークを色々と試してみたいと思う。