ここ数年でWebデザインに定着してきた「フラットデザイン」。
Windows8やiOS7以降のデザインに採用されているため、言葉自体は知らなくても見たことのある方は多いと思います。
ただ、いざ自身のホームページに取り入れようと思った時、ルールや定義がよくわからなくて敬遠してしまうこともあるのではないでしょうか。

今回は、フラットデザインを採用する時に知っておきたい基本概念やルールについて解説します。
Webデザイナーの方だけでなく、ディレクションを担当する方もぜひ理解しておきましょう。

フラットデザインが普及したきっかけはAppleの「iOS7」

数年前のホームページやアプリは、バナーやボタンにグラデーションを入れたり、影を入れて立体感を出したりといわゆる「リッチデザイン」が主流でした。
Microsoftが2006年からフラットデザインを採用し（後のMetroデザイン）、2013年にAppleがiOS７でフラットデザインを取り入れて以降、多くのWebサービスが影響を受けて急速に広がりを見せました。

デザインの歴史から見ると、1940年代に起こったスイススタイルやミニマリズムなど、フラットデザインの概念自体は決して目新しいものではありませんが、AppleがiOSに採用したことによってWebの世界でも普及したと考えられます。

質感や立体感を排除し、シンプルな表現を追求したフラットデザインは、同じくここ数年で普及した「レスポンシブデザイン」との相性も良く、それも普及の1つの要因になっているでしょう。

1つのHTMLファイルであらゆるデバイスの表示サイズに対応するレスポンシブデザインは、リッチな表現を用いたデザインの場合うまく最適化されないケースがありましたが、フラットデザインであればそのような問題はほぼ起こりません。

レスポンシブデザインの基礎と制作時の注意点を解説

フラットデザインの特徴

shutterstock_157964102.jpg
フラットデザインの参考画像。立体感は極力排除され、カラートーンも統一されている。

フラットデザインとは、グラデーションなどの立体感がある加工をせず、カラートーンも統一されたデザインを指します。

フリーレイアウトで自由配列されたものよりも、四角く平面的で、グリッドで切られたようなレイアウトが採用されている場合が多く、多くはやはりAppleのフラットデザインに準じているようです。

グラデーションもほぼ取り入れないため、インパクトが出やすい彩度の高い色をメインカラーとして使用し、組み合わせる色は明度を落としたり調整をかけることで、ユーザーに何を一番重要だと感じてもらえるか、そして、サブ情報はどこなのかを色で表現します。

フラットデザインのメリット・デメリット

フラットデザインは画像を使用することなく、css3のみでデザインすることが可能です。
コードでの表現が可能なため、サイトスピードが従来のものより早く、ユーザーの利用を快適にできるという大きなメリットがあります。

閲覧環境の影響でホームページの読み込みに時間がかかり、耐えきれなくなったユーザーが離脱してしまうという事態も低くするためにも有効です。

一方で、シンプルすぎるがゆえに、初見のユーザーにとってはどこが操作できる部分なのか、どの操作がどのようなアクションを起こすのかわかりづらいというデメリットもあります。

フラットデザインの良さを活かしつつ、欠点をを極力排除するためにGoogleが開発したのが「マテリアルデザイン」です。

参考
Webデザインに関わる人は必読！初心者でもわかるマテリアルデザインの基礎