フラットデザインの基礎・メリット・デメリットを学ぶ

　Windows8や新たなiPhoneのUIに関して「フラットデザイン」というデザインが適用されている。このフラットデザインはfacebook等人気のWebサービスでも用いられている。それではこのフラットデザインに関してどれだけの人が理解しているだろうか？もちろん使用するメリットもあるが、デメリットもある。それを知ったうえで今後役立つ知識を紹介する。

フラットデザインはリッチデザインの逆

　上の二つの画像を見比べてほしい。上はいわゆる「フラットデザイン」下は「リッチデザイン」呼ばれるものである。「フラットデザインとはなんぞや？」ということを理解するためには「フラットデザイン」の逆と思っているモノを説明することで事足りる。そうフラットデザインはリッチデザインの逆なのだ。下の画像は色彩や立体感など細部まで詳細に描かれているいわゆるリッチデザインだ。

フラットデザインの特徴

ヴィヴィッドもしくはパステルでコントラストの強いカラーパレット：
　フラットデザインを採用した多くのサイトやアプリでは、モダンな雰囲気を演出するためにかなりヴィヴィッドなカラースキームが採用されている。これはコントラストを強める事によって、マルチデバイスでのユーザビリティーを向上させるためにも一役買っている。

テキスチャーやエフェクトを極力廃している：
　“フラット” デザインと呼ばれる一番の理由は、三次元的要素が一切介在していないところである。上記の3つのアプリの例を見ても分かる通り、これまで多くのサイトやアプリのUIで使われていた立体的に見せる要素（グラデーション、シャドウ、ベベル、エンボス等）がほとんど使われていない。

卓越したタイポグラフィ：
　フラットデザインでは、UIを極力シンプルにする事を一つの目標としているので、それを構成する一つ一つの要素が非常に重要になる。その中でも、タイポグラフィの使い方がデザインのクオリティを左右する大きな要素になる。フォントの選択だけでなく、大きさ、ウェイト、文字づめ、行間、全体のバランスなど、それぞれの箇所に細心の注意を払ってデザインされている。

フラットデザインを採用するメリット

画像が少ないのでロードが速い：
　直線と面のみでUIが構成されるので、多くの場合は画像を利用する必要がない。これにより画面を構成する要素のファイルサイズが格段に軽くなり、ロードスピードの向上が可能になる。

マルチデバイス対応に有利：
　ページ全体に画像をあまり使わない事でレスポンシブなUIも設計しやすくなるため、スマートフォンなどの小さな画面を含め、複数のデバイスに対応しやすくなる。そしてクリーンなレイアウトとコントラストの強い要素、分かりやすい単色アイコン等を活用する事で、太陽光の下など比較的見にくい環境下でも使い易さの向上が見込める。加えて、eリーダーなどの解像度の低いデバイスにも対応しやすいインターフェイスの実現が可能になる。

コンテンツの魅力を伝えやすい：
　フラットデザインを採用する理由の一つに、UIはあくまでも脇役であり、コンテンツが主役である、という考え方がある。なるべくユーザーの意識をコンテンツにフォーカスしてもらう為に、フラットUIはシンプルで使いやすい存在になる。

フラットデザインを採用する際の注意点

クリーンと退屈は紙一重：
　シンプルでクリーンなデザインを達成するプロセスは必ずしもシンプルではない。むしろかなりの技術と労力を必要とする。単純にフラットデザインを採用して中途半端な気持ちで取りかかってしまうと、スタイリッシュではなく単純でつまらないデザインや、妙にこどもっぽい雰囲気のページが出来てしまう可能性がある。

コンテンツが無いとスカスカになる：
　インターフェイス自体だけではユーザーに対する情報表現がしにくくなるため、しっかりとしたコンテンツと機能が無い場合、なんだかスカスカな感じになってしまう危険性がある。裏方的なフラットUIだからこそ、充実したコンテンツの準備が重要になる。

ユーザビリティー低下の可能性：
　立体的要素が少ないため、視覚的ヒエラルキーを作りにくくなり、場合によっては情報が見つけにくいインターフェイスになり、ユーザビリティーに対して弊害が出てしまう可能性がある。またクリック出来るボタンがボタンに見えないケースも多発しており、ユーザーがどこを触って良いか迷ってしまう原因にもなりかねない。従って、フラットなUIにする場合は、情報のレイアウトやユーザーの導線に関しては最新の注意を払う必要がある。