本文へジャンプ

フラットデザインの基礎知識

Posted by Yuji Ushida

Flat iOS 7 Interface Design by Photo Giddy, on Flickr

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

FRESHERS WANTED!
Recent Entries
MD EVENT REPORT
What's Hot?
日本各地の酒蔵との直取引により厳選して仕入れた日本酒を世界に販売
2018年度 新卒採用 Webデザイナー/エンジニア、プロデューサー/ディレクター募集
Movable Type AWS 移管&アップグレード サービス
SNS・ブログ・メールからの流入数が一目でわかる
こんな僕たちの仲間に入りませんか?
50,000円からのシネマグラフ(Cinemagraph)制作
TAKUYAが教えるギター・レッスン
KenKenが教えるベースギター教則アプリ
SNS連動型クチコミ拡散システム「レビュー ジェネレーター サービス」
1時間1万円の撮影スタジオ
Share this on
Facebook Twitter Google+ Tumblr