eyemovic inc.

Culture blog会社の活動・働き方

2013.06.03

最近話題のフラットデザインについて僕なりにまとめてみる

アイムービックブログファンの皆さんこんにちは。
はい。
社員なのにブログの登場回数が極端に少ない佐藤です。
理由はお恥ずかしながら忙しさという名の暴君に苛まれているから、というのが表向きです。
皆忙しいのにね。
ダメです。

という訳で、しっかりブログも書きます。
はい。

内容はタイトル通り、「フラットデザイン」なるものについてです。
最近よくこの単語出てきますね。
皆さんもなんとなーく知っているのでは?
でも、「じゃあなんなの?何が”フラット”なん?」って全く知らない人に説明しようと思ったら、
何となくの知識だと、「結局なんなのフラットデザインって」ってなっちゃうかも。。。
という訳で、僕なりにまとめてみたいと思います。
自分の備忘録的なまとめになってしまい恐縮ですが、皆さんの知識の片隅で活用してもらえれば幸いです。

■フラットデザインを一言で言うと?
はい。
いきなり結論です。

「平面的で極力シンプルにしたデザイン」
これだと思います。
作り込んでないデザインとも言えるかもしれません。

例としてはWindows8のホーム画面を挙げておきます。

 

flatdesign Windows8

flatdesign Windows8

※画像はこちらから拝借

 

いや、結局なんだよ、と思ったあなた。

逆に「作り込んでいるデザイン」を考えると理解しやすいです。

作り込んでいるデザインの一例としてはiPhoneなどのスマートフォンのアプリアイコンをイメージすると良いでしょう。

光沢があって、浮き出しているように見えて、影や質感まで細かく計算・再現されてます。

 

flatdesign app_icon

flatdesign app_icon

※画像はこちらから拝借

 

ね、すごいリッチに作ってますよね。

このリッチさの逆が”フラット”です。

 

ざっくりまとめちゃうとこんな感じです。

 

・グラデーションを使わない!

・質感は無視して、とにかく塗りつぶし!

・形に迷ったら正方形!

・カラフル大事!ビタミンカラーよりもちょっとくすませて!

・整列して並べて、気持ちよく配置!

※まとめはここを参考にしました。「だいたい40秒くらいでわかる「フラットデザイン」について」  まんまです。
 
 
ただ、誤解されがちですが、フラットデザインはただ単に簡素にするのではなく、
一瞬で「理解できる」「心を掴む」「目を奪う」仕掛けを創り出すインパクトを与える
デザインです。
 
つまり、効率よく意図やサイト、システムの使い方を、ユーザーの環境に左右されず伝える。
これが肝なわけです。
だからWindows8というOSのデザインにも採用されているわですね。
 

■なんで最近話題なの?

なぜ最近話題になってるんでしょうか。

そんなに目新しいデザインなの?

いいえ、実はDTP(紙のデザイン)などであったのです(だそうです。)
WEBはディスプレイの性能、ツール、ソフトウェアの進歩から立体的に見せたり、動画のように見せたり、そんな事が可能であったし、

そういう可能性がWEBの特報といいところでした。

 

しかし、上で挙げた進歩。

フラットデザインもまた、この進歩から発生したのです(たぶん)。

最近進歩したものってなんでしょう?

スマートフォンですよ!奥さん!
PCではなく、スマホでネットを初めて触った、という人もいるらしいですよ。

 

スマートフォン(タブレット)にデバイスが進化したことによって何が起こったか。
表現できない(Flashなど)ことがデバイス間で起こって来たし、何よりめちゃくちゃデバイスの種類がある!進化が早い!!
しかも何かみんなリッチなデザイン(リッチに作れるからなんだけど)だから、そういうのが集まってるとパッと見ごちゃついててよく分からん!!

目が疲れる!もうそういうの飽きた!!

 

iPhone、Android、PC、タブレット、それぞれの環境で閲覧して汎用性があり、分かりやすいもの=フラット化。
つまり必要性から生まれた(見直された)デザインなのです。

何でそのデザインが出て来たのか、これを考えておくとそのデザインの意図、定義、使い方がよく分かると思います。

 

■最後にまとめ

あまり長くなってもあれなので、この辺でまとめに。

フラットデザインってなんぞやって話をしましたが(すごい乱暴に)、結局はフラットデザインも他のデザインと同じように、

「人にどう伝えるか」という手段の1つなわけです。

流行っているからと言ってそれが全能的なデザインでもないし、場合によっては向かない場合もあるでしょう。

Flashがまだ活躍の場があるように(教材や商品説明、エデュケーションソフトなどで使われたりしてる)、リッチデザインだってこれからも進化していきます。

 

前述しましたが、フラットデザインはDTPのようにグリッド状に組む事が多く、

一瞬で「理解できる」「心を掴む」「目を奪う」仕掛けを創り出すインパクトを与える

ためのものです。

いつ、どこで、誰に、どうやって、何を伝えるか。

そんな事を考えながらフラットデザインを使っているサービス、サイトを見ると面白いと思います。

また、そこを忘れず画面設計していきたいものです(するんだけどね)。タイポグラフィとかも気を遣ってね。

 

では。

最後に参考サイトをいくつか挙げてバイバイ。

 

What is flat design?

 

[和訳] フラットピクセルズ ~ フラットデザインとスキュアモーフィズムの戦い ~

 

だいたい40秒くらいでわかる「フラットデザイン」について

 
20 Great Examples of the Flat Trend in Web Design
 
 
 
 
 
 
 
 
※参考サイトが予想外に多くなったので、気になったタイトルのサイトだけ見るのでも十分です。
 
※2013.6.4追記。
 もしかしてこのブログで誤解を与えてたら、と思って補足。
 フラットデザインは手間掛かってないわけではなく、細かいシャドウもつけるし、色の切り返しもある。
 シンプルなデザインって作りの人間から言うと誤摩化しきかないのでむしろ難しいですのよ 。
 って社内のアートディレクターの人に言われた。
 混乱するかな、と思って省いたけど、「フラットデザイン?簡単なんでしょ」ってなるのは違うから追記。

愛媛県松山市でWeb開発一筋15年、700サイト以上の構築実績!

Webサイト制作・システム開発・スマホアプリ開発・組込ソフトウェア開発ならアイムービックにお任せ下さい。