MD-Blog_Web Creative

Webデザインを生業にしているみなさん、こんにちはこんばんは！
MD-USHIDAです。

さてさて、今回のテーマは「フラットデザインの基礎知識」です！

前回の記事でもチラっと触れた、フラットデザイン！

Windows8、Android（Google）など大手が積極的に採用し、ついには、あのAppleもiOS7から採用するなど、注目が集まっているトレンドデザインですよねー！
最近では、アプリでもよく見かけるようになってきました。
うんうん。

フラットデザインとは？

で、そもそもフラットデザインの定義ってなんなんでしょう？
みなさん理解してデザインされています？
ただグラデやシャドウなどの装飾表現を施さないのがフラットデザインではないのですよ！
ざっと挙げると、フラットデザインとされるデザインはこんな感じ。

• グラデーション、シャドーなどを使わない。
• 余計な情報を排除し、シンプルな構成。
• 各要素がすっきり、はっきり。
• アイコンや、ミニマルデザインなどを用いて、直感でわかりやすい。
• ビビットな色使い

などなど。
上記を踏まえ、洗練されたタイポグラフィ、色使い、シンプルな構成などで、スマホなどの小さい画面でも分かりやすい"ユーザビリティーの良さ"がフラットデザインの大きな特徴なのです。

で、逆に言えば、ユーザビリティーを突き詰めないと、フラットデザインを採用する意味が無いってことですよ。
これって、簡単じゃないですよね？　

フラットデザインでは、
シンプルなデザインを作成するのが前提、
且つ、ユーザーのに刺さる構成だったり、
分かりやすい色使いだったり、
アイディアだったりが
今までのサイトより重要になってくるわけで、
「うーん...、なんか物足りないからグラデひこーっと」みたいなデザインではダメなのです。

ユーザーに伝えたい情報の要約、ミニマル、空間の表現、色使い、タイポグラフィなどなど、デザイン知識を総動員しないと、シンプルなデザインではなく、ただ手抜きしたショボいデザインに見えてしまうし、結構な確立で破綻しますので、気をつけて運用してくださいな！
ただ、ハマるとそのインパクトは絶大なのです！　

フラットデザインなWEBサイト

UNIQLO
http://www.uniqlo.com/jp/

UNITED PIXELWORKERS
http://www.unitedpixelworkers.com

Calorie mate
http://www.otsuka.co.jp/cmt/index.php

Lorenzo Verzini
http://lorenzoverzini.com

まとめ

フラットデザインはシンプルで分かりやすさを追求したデザインであるため、PC、スマホなど画面の大きさに左右されにくく、あらゆるメディアで、サイトのイメージを強調したい時にかなり有効な手段です。
ただ、シンプルなデザインが故に難しいことがてんこもり。
構成が大事なのでしっかり考えるのが重要ですね。

シンプル且つ洗練されたUIを心がければ、フラットデザインを攻略できるかと思います。
なんだか、デザイナーに求められるものが多くなってきた気がしますが、WEBデザイナーの皆さん、みんなで、乗るしかないでしょ、このビックウェーブに！

Cover image by Photo Giddy, on Flickr