私たちが生活の中で触れる様々なものは様々な意図のもとデザインされています。スマートフォンのホーム画面やホームページにおいても時代とともにユーザーへの想いを込めたデザインが進化し続けているのです。

何種類もあるデザインの中に、「フラットデザイン」というものがあります。名称を聞く機会はあっても、具体的にどのようなものなのか、他のデザインとの違いなどは意外と知られていません。

そこで、今回はフラットデザインについて紹介します。

目次

  1. フラットデザインとは
    1. フラットデザインが採用される背景
    2. フラットデザインは時代とともに変化している
  2. フラットデザインの定義
  3. ミニマルデザインへのつながり
  4. マテリアルデザインとの違い
  5. フラットデザインで注意しなければならないこと
    1. クリックできるのかイメージしにくい
    2. 他のデザインと似た印象になりやすい
    3. オシャレさを出すにはハイレベルなセンスが必要
  6. まとめ

フラットデザインとは

IMG_0086.jpeg

フラットデザインは、立体感がなく平面でシンプルなデザインです。身近なもだと、iPhoneのホーム画面がわかりやすいでしょう。iOS7からフラットデザインが採用され話題になったことを覚えている方も多いのではないでしょうか？

マイクロソフトはWindows8からフラットデザインが採用されています。いかに立体的で存在感を出すかという流れから逆転したこのデザインスタイルの変化はユーザーにとって衝撃的なものでした。多くの人が日常的に触れるスマートフォンやパソコンにフラットデザインが適応されたことで、スタンダードなものとしてスムーズに浸透しました。

フラットデザインが採用される背景

そもそも立体的なデザインは、画面が小さいほど見づらさも生じてしまいます。今でこそスマートフォンの画面サイズは大きいものが揃っていますが、フラットデザインが導入された頃は、まだまだ画面サイズが小さい端末が多くありました。小さなアイコンでは立体よりフラットデザインの方が識別しやすいので、デザイントレンドの変化は当然の流れとも言えます。何より、マルチデバイスが必須化している状況においては、シンプルでデータ量の少ないフラットデザインが適しているのです。

フラットデザインは時代とともに変化している

このように勢いよく私たちにとって身近な存在になったフラットデザインですが、時が経つと変化が生じきました。平面すぎるデザインは周囲のデザインに埋もれてしまうなど、ユーザービリティから考えるとわかりにくい場合があり、課題を指摘する声も多くなったのです。この結果、完全な平面デザインではなく、多少フラットさを抑えたデザインに進化しました。進化したデザインはフラットデザイン2.0と呼ばれています。

フラットデザインの定義

フラットデザインについて、具体的な定義が存在しているわけではありません。一般的にどのようなデザインがフラットデザインと呼ばれているのか整理してみましょう。

フラットデザインとされるデザインは、できるだけ平面であることが特徴です。できるだけと書いたのは、フラットデザイン2.0と呼ばれる進化型の場合、過度な主張はしないながら、ユーザーにとって識別しやすい程度の立体感を取り入れているからです。ただし、フラットデザインのコンセプトとしては、あくまでも平面的なシンプルさがあるのです。

技術的な視点で言うと、フラットデザイン2.0以前のフラットデザインを明確に定義するなら、ドロップシャドウやグラデーションを使っていないものと言えるでしょう。ただし、フラットデザインには、明確な定義はないので、グラデーションの使い方にしても基準はありません。平面かつシンプルと言いながらも、それだけ自由なデザインであるとも考えられます。

ミニマルデザインへのつながり

ミニマルデザインは、極力余計なものを排除したデザインです。ユーザビリティよりもシンプルさを最大限追求します。そのシンプルさから美しさや伝わりやすさを生み出しているのです。

しかし、シンプル過ぎるゆえに、多くの人に同じように伝わるとは限りません。シンプルなデザインほど、人によって印象は異なるというのは容易に想像できるのではないでしょうか。フラットデザインはミニマルデザインの要素を含んでおり、立体的な加工などを排除したシンプルさを大切にするものです。

*ただし、フラットデザインは、ホームページのユーザービリティという重要な要素のもと、ユーザーのナビゲーションを明確にする役割を果たさなければいけません。*ミニマルが生み出すメリットを保ちながらも、ユーザー目線でのデザインを追求する必要があります。

マテリアルデザインとの違い

マテリアルデザインは、現実世界に基づいた表現をするものです。2014年にGoogleが発表したデザインの概念です。物体の影や重なりなど、私たちが実生活で目にするイメージを再現することで、ユーザーが直感的に操作できます。

フラットデザインが平面のデザインであり、あくまで2次元という非現実的なものに対し、マテリアルデザインは現実世界に忠実です。3次元としての奥行きもリアルに表現し、実際に存在している物質というイメージを与える必要があります。メリハリがつかないフラットデザインに対し、デザインの強弱を巧みに使えるので印象に残りやすいと言えるでしょう。

また、フラットデザインに定義が存在しないことに対し、マテリアルデザインには、Googleが定めたガイドラインが存在します。Googleが定めたガイドラインに基づき、AndroidやGoogleプロダクトに採用されているのです。

フラットデザインで注意しなければならないこと

明確な定義のないフラットデザインはまさに自由にあふれているものの、作成にあたって注意しなければいけないことがいくつかあります。

ユーザーからの印象がよく、ナビゲーションが明確なホームページにするためには、以下に配慮して取り組む必要があるでしょう。

1.クリックできるのかイメージしにくい

立体感を排除することで、ボタンが目立ちにくくなってしまいます。クリックできるボタンであるとことをユーザーが認識しづらくなり可能性も生じやすいでしょう。フラットデザインにすることでユーザービリティが悪化してしまわないように、デザイナーにかかる技術的なウエイトは大きくなります。

2.他のデザインと似た印象になりやすい

シンプルであるがゆえに表現の幅が狭くなってしまいがちです。そのため、他のデザインと同じような表現になってしまう恐れもあります。エフェクト好きなデザイナーは、発想の幅を広げなければいけません。

3.オシャレさを出すにはハイレベルなセンスが必要

フラットデザインの場合、ベタ塗りに文字だけ、シンプルなアイコンだけといったすっきりしたデザインをするケースが多いでしょう。装飾を重ねていくタイプのデザイン手法ではなく、無駄をそぎ落とすことが重要です。空間の使い方はシンプルなデザインほど奥深く、洗練されたオシャレ感を出すためにはセンスが要求されます。

まとめ

フラットデザインは明確なガイドラインがないこともあり、様々なシーンで自由に改善され進化しているデザインと言えます。ミニマルな要素の中でユーザービリティが足りない場合は、自由に最適化が進みます。フラットデザインで平面すぎてしまった部分は、フラットデザイン2.0としてシンプルさとユーザービリティの両方を考慮した適切なデザインになれるのです。ドロップシャドウやグラデーションをさりげなく使ってもよいでしょう。

また、モバイル利用のユーザーが定番化し、レスポンシブデザインがスタンダードになった現在、データの軽さの面からもフラットデザインは時代の流れにフィットします。

デザインする側にとっては、決まりのないフラットデザインより、ガイドラインのあるマテリアルデザインの方が、作りやすさを感じるかもしれません。それだけ、フラットデザインは、作り手のセンスによりバッファーが広いデザインと言えると思います。

フラットデザインとマテリアルデザインのどちらにしても、このデザインに触れるのはユーザーなのです。ユーザーが何を感じて、どのような行動を行うのかをしっかり把握することが、活きたマーケティングとなるでしょう。