1. まとめトップ
  2. IT・ガジェット

昨今のUIデザインのトレンド、「フラットデザイン」て何?

去年あたりからトレンドになってきた「フラットデザイン」って何?デザイナーならずとも、今年のWebやUIを語る上でキーワードになりそうなこの単語と意味を、しっかり抑えておきましょう。

更新日: 2015年03月18日

810 お気に入り 290778 view
お気に入り追加

最近、「フラットデザイン」という言葉をよく聞く。

リッチデザインに拘り続けてきたAppleも、次期iOSでフラットデザインに大幅刷新する。

Google Playストアもフラットデザインを採用し、よりシンプルな印象に。

今年のウェブデザイントレンドとしても、注目されており、今後デザイン制作する機会も増えるかもしれません

今Web業界ではこの「フラットデザイン」という語がキーワードのように溢れかえっています。

「フラットデザイン」とは、「リッチデザイン」の対義語。

Macのカレンダーはフラットデザインの逆、リッチデザインの好例。紙の質感を可能な限り再現しており、そのこだわりと美しさが賞賛される反面、「無駄な装飾」との批判も。

画面に表示するボタンやメニューなどのUI要素を非常に平坦な見た目にするという表現手法

ここ1、2年のUI(ユーザーインターフェース)のトレンドとなっています。

テクスチャ(表面の質感)や、マテリアル(物質の質感)、そしてディティール(細部)、奥行き(実寸感や重なり)にこだわったデザインの反対に当たるモノ、それがフラットデザインと呼ばれているモノの本質

iPhoneの画面デザインに代表されるように、Appleのデザインは質感にこだわったフラットデザインとは対照的なものです。

特にモバイルユーザー向けインターフェースデザインを中心に、数多く活用されています

Windows Phoneのホーム画面や、近年のGoogleのサービスのデザインなどは、フラットデザインの有名な例です。

Windows Phoneのホーム画面は、余計な装飾を排除したフラットデザインの好例。

フラットデザインの長所

みんなリッチデザインに飽きた

近年、立体的だったり写実的だったりする凝ったデザインが全盛となっていましたが、そんな風潮に対するアンチテーゼとしてフラットデザインが提唱され、リッチデザインに飽きた層に刺さっていると言えます。

フラットデザインは目新しい

純粋にファッションとして、フラットデザインはより新しく、より洗練されて見えるということが言えます。

作りやすい

デザイナーとしても手間が省けるデザインであり、非デザイナーでもある程度のセンスがあればアイコンやボタンを作れてしまいます。

全体的にカラフルになりやすく、階調が非連続的になるのでポップな雰囲気になります

シンプルでミニマルなデザインであり、また視覚的なあしらいの種類が減って色のみで要素の区別をつけようとするため。

機能主義的

過剰な装飾を無くしたフラットデザインは、より機能面での優位性を際立たせる側面も持っています。

フラットデザインのコツ

フラットデザインは、パーツを見るのではなく、サイト全体で統一されたデザインに仕上げることが重要になってきます

パーツ単体を見ると、ともすると手抜きデザインになりかねません。画面全体で色調を統一するなど、全体での見栄えを調整するのが重要です。

色を前面に押し出す時には、彩度を抑えパステル調を用いる

様々な色を使う場合、色相環で配色のバランスを確認し、彩度を抑えた色を採用することで調和のとれたデザインになります。

色相環を5等分した"ペンタード"と呼ばれる配色でデザインされた例。

フラットデザインの参考になるサイト

1 2





質を大事に、自分なりの視点でまとめを発信していきます。

【得意分野】
IT
スマートフォン
音楽
雑学
子育て
レッサーパンダ

よろしくお願いいたします!



  • 話題の動画をまとめよう