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

40秒に根拠はないけど。

まあ、そんくらいじゃね？ってことで、今何となく流行っている「フラットデザイン」についてさくっと思うたけを述べます。

個人的には何かが流行るとそれに乗っかるだけでトレンディー気分を味わえるので、賛成も否定もしたくありません。トレンディー最高です。そういうミーハーな男なんです、ぼかぁ。

つーわけで、トレンディーじゃない人に対してあれこれしたアレではないという感じで、始めます。はい。

フラットデザインってなんや？

ってことを最初にいわなければいけない気がしてますが、フラットデザインに関しては、「フラットデザイン」の逆と僕が思っているモノを説明することで事足りる気がしてます。

簡単にいうと、リッチデザインだわね。安直な名前で申し訳ないけど。

iPhoneのカメラ部分をまるっきり完コピしたレンズのイラスト、写真の背景の白い部分には壁の質感。床面のガラスの質感そして映り込み。簡単に数えるだけでも恐ろしいほどのディティールの作り込み！

このアイコン一個見るだけで、クラクラしちゃうほどの作り込み。これぞ簡単に言うとリッチデザイン。リッチすぎてむしろ参考にすらならないけど、簡単に言うと、これがリッチデザイン。ユーコピー？？？

iPhone使うだけで嫌と言うほど体感できる作り込みまくったデザイン。

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

うわーすげー！って思うデザイン、それが簡単に言ってリッチデザインです。

リッチデザインじゃないデザイン。それがフラットデザインで大体OKです。

僕を始め「フラットデザイン」が流行っている！と言っている人は大抵この「リッチデザイン」に飽きた人達です。絵画のカテゴリーにおける写実とか、スーパーリアリスティックとか、超現実とか、そういう解釈でOK。ただ、スーパーリアリスティックの逆が、フラットデザインではないあたり、絵画はもう少し複雑です。

フラットデザイン＝ミニマル、シンプルと言い切れれば楽なんですが、実際はミニマル、シンプルで語り尽くせないから、もう少し説明します。

はっきり言って、誰でも出来る！

これにはもう突っ込みどころしかないでしょうけど、まあ、事実です。

まずはこういうベタを用意して。

なにか上にのっけます。

はい、完成。異論は認めます。

下記に説明するフラットデザインの要件を兼ね備えているので、僕の中では完全にフラットデザインです。

間違ってもこんな感じのフィニッシングにしちゃダメです。

質感奥行きグラデーションドロップシャドウ！。だめだ！絶対にダメだ！

どうしてフラットデザインが流行るのか

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

ってので答えは出てるけど、さらに突っ込んで言うと、フレームワーク世代、フレームワーク時代にはまるから。こういう側面もあると思う。

たとえばデザイナーじゃなくともサクッといろいろ出来ちゃうフレームワークの代名詞といえば

HTML5　Twitter Bootstrap はじめに見るべき１０サイトまとめ | エンジニア転職求人情報×IT人材紹介@SAK

初心者の頃分からなかったWeb用語：フレームワーク … CSSからHTML5、WordPressまで

だろうけど、これって誰が好んで使うかというと、手間を省きたいデザイナーも使うけど、デザイナ未満というか、非デザイナが使う事例が多いと推測されまして。

テンプレ文化というか、デザイナに頼るまでもない事例、もしくはデザインを省きたい層にリーチしているんだと思う。

型として成立しちゃえば、型を利用すれば誰でも出来るわけだから。

デベロッパさんとか、コーダーさんとかは「フラットデザイン」＝モダン（流行り）！という流れはたまらないはず。

デザイナだって、作り込みを要求されないから、時間短縮！最高最高ぅ！

• グラデーションを使わない！
• 質感は無視して、とにかく塗りつぶし！
• 形に迷ったら正方形！
• カラフル大事！ビタミンカラーよりもちょっとくすませて！
• 整列して並べて、気持ちよく配置！

これだけ知っておけば、もうフラットデザイン使いこなしまくり！フラットデザイン博士！

という背景を踏まえて、コチラをご覧下さい。

Flat UI Design – A showcase of the best examples of the flat UI design aesthetic on the web.

いかがでしょうか？

実はさっきの5箇条でいれようと思ってあえてやめた項目があるんですが、それが何か、わかりますかね？？

それがわかればまさに、本物のフラットデザイン博士でございますよ。

追記。
後日種明かしを書きました。

「フラットデザイン」を使いこなすために必要な要素について*frasm

追記。
WWDCで発表されたiOS7のデザインについて書きました。
iOS7がどういうデザインか、フラットってなにか？についてちょっと知りたい方はこちらもどうぞ。

だいたい40秒くらいでわかる「Almost flat design」について | frasm_

文：シンタロヲフレッシュ

はてブ

pocket

twitter