３分で分かるフラットデザイン

DETOXとは

DETOXとは言いたいことも言えないこんな世の中で、ネガティブな発言や失敗や愚痴を気心の知れた友人同士で共有できるニュータイプSNSです。
「SNS疲れ」などで溜まった現代のココロの闇を「ポイズン」として吐き出せます:)
DETOXでは、iOS 7の普及に伴いフラットデザインを搭載しました。

トレンドの「フラットデザイン」ってなに？

まずはどんなものか、百聞は一見にしかず、世の中のかっこいい実例を見てみましょう。


applove


Figure


Task app


clique


こんな感じです。
その他にもフラットデザインを見たい方は、fltdsgnやpinterestに素晴らしいものがまとまっていますので、よかったら参考にしてください。

今Web業界ではフラットデザインという言葉がキーワードのように溢れかえっていますが
そもそもフラットデザインの定義について私なりにまとめてみました。

・グラデーションや影などの立体感を排除する
・質感をほとんど無くし平面的な外観にする
・グリットレイアウトのような配置にする
・シンプルなタイポグラフィ
・コントラストの強いカラー使い
・機能や目的がひと目でわかる

派手な装飾を抑え、無駄なものを排除することで、文章や写真などのコンテンツを引き立たせる事が特徴だと分かります。
つまりデザイン云々の前に、コンテンツが最重要となるという事です。
Webにとって美しい外観や流れる操作性は重要ですが、最も大切なのはコンセプト、つまり中身です。
フラットデザインは、コンテンツをよく理解して、いかにそれを強調するかを考えないと失敗してしまいます。

（´-`）.｡oO（なにそれ？難しい…）

とお思いの貴方に、
何かに簡単に例えるならば、「ナチュラルメイク」が近いかなと私は思います。

ナチュラルメイクは自分の魅力を最大限に引き出しつつも、
わざとらしくなく美しく整えるものですよね。
その人（中身）の魅力を最大限に魅せてあげるための、一つの技術だと思います。

フラットデザインは新しいのか？

swissted

フラットデザインは言われているほど新しいわけではなく、
スイス系のグラフィックデザインのリバイバルという説が大きいです。
スイスデザインは平面的なグリッドが基礎となっているので、
どちらかというと静的なレイアウトで要素も文字と色のみでの構成が多く、
フラットデザインと近似している理由はここにあると思います。

Webデザインの移り変わりはとても早く、すでに世界中でフラットデザインをベースにした新しいスタイルトレンドがどんどん出てきています。
今風にアレンジされたものが、流行として時代でプラスされながら創られていくのですね:)

デトックスのフラットデザイン

DETOXでフラットデザインの実例を紹介します。

■ロング・シャドウエフェクト




特によく見かける、斜め45度で影を追加するロング・シャドウエフェクト
この技法はあえてシャドウを長く伸ばすことによってフラットデザインの良さをそこなわずに立体的に見せることを可能にしました。DETOXでは特に目立たせたい場所に使用しています。

↓ロング・シャドウエフェクトに便利なジェネレーターをご紹介します。
Long Shadow Generator（CSS）／Long Shadow Generator（PSD）

■グリッドを用いたピクトグラム




レイアウトや構成を極力シンプルにするので、キービジュアルとなるアイコンやイラストはあまりシンプルにしすぎると無味乾燥で退屈なイメージを与えてしまいます。
そのためはグリッドを使って緻密に設計するのはもちろんですが、少しユニークさをプラスしています。

■カラーの使い方


フラットデザインにとって色は重要な要素です。
DETOXでのキーカラーはこの「パープル」で、キーカラーは使う頻度や面積が多くなってくるのでサービスのブランドを象徴するものになります。
完了ボタンの「グリーン」はアクセントカラーで、ユーザーの行動を導く為に特に目立つ色を使用しています。

↓フラットデザインらしいカラーのサンプルがみれるサイトをご紹介します。
flatuicolors

フラットデザインの特徴としてシャドウやグラデーションを用いないので、
リッチデザインと比べてデータサイズを削減できます。
このためデータの受信・表示までの時間が短くなり、より早く表示されるようになるメリットがあります。

■半透明でレイヤー感を出す


DETOXアプリで、上下のナビゲーションバーはわずかに半透明にすることを採用しました。
これについてはAppleのiOS7を参考にしています。

"真のシンプルさは、単に不要なものや装飾を省くだけでは生まれません。それは複雑さに秩序をもたらす作業なのです。機能ごとに分かれたレイヤーは、階層や順序をつくり出しました。"
Apple/iOS7

このように全く単純なフラットデザインではないですが、
バーの下にも画面があることを示すことで
「スクロールすればその先も見ることができる」と直感的に訴えかけています。

■番外編/ポリゴンデザイン


2014年流行の兆しにある、ポリゴンデザイン。最近じわじわ目にします。
フラットデザインとはまた違う表現なのですが、
前衛的なイメージが強いので、ここぞという所で使用してみるのもいいかもしれません。

↓ポリゴン風画像のジェネレーターをご紹介します。
Flat Surface Shader

まとめ

フラットデザインはシンプルで余計なものが無いデザインですが、
ただ単に簡素にするのではなく

見た人が一瞬で「理解でき、目を奪い、心を掴む」ような仕掛けを創り、
インパクトを与えるものです。

メッセージ・製品・ブランドなどを強調したい時のデザイン手段として、知っておいて損はないと思います。

しかしまだまだ進化するフラットデザインに正解はありませんし、一つの手段に過ぎません。

私が思うにデザインは、使ってくれる人（ユーザー）へのメッセージを届ける
ラブレターみたいなものであり、
書き方も自由であるし、受け取ってくれるか、捨てられるか、その後付き合ってくれるかは受取人次第です。

制作チームの想いをしっかり色付けして届ける役目を背負うデザイナーは
大変重要な役目だと思いますので、
日々精進して、これからも試行錯誤していきたいと思います :)

長くなりましたが、最後までお読み頂きありがとうございました。

Follow me!!