フラットなデザインを理解する上で知っておきたい5つのポイント -Principles of Flat Design

フラットなデザインは、決して単純なデザインと同じ意味ではありません。もちろんシンプルにデザインして答えがでるのであれば、それにこしたことはありません。
フラットなデザインのUI素材を数多くリリースしているdesignmodoから、フラットなデザインとは何かを理解する上で重要となる5つの特徴を紹介します。

フラットにあまり心を動かされなかったのですが、ぐらっときました。

サイトのキャプチャ

Principles of Flat Design

下記は各ポイントを意訳したものです。

1. エフェクトは加えない

サイトのキャプチャ

TriplAgent

サイトのキャプチャ

Into the Arctic

フラットなデザインはその名の通り、二次元のフラットなスタイルを使用します。このコンセプトは既存のエフェクトなしで機能します。ドロップシャドウ、ベベル、エンボス、グラデーションなど奥行きを与えるエフェクトは使わないようにします。

ページ内のテキスト、ボックス、画像、フォーム、ナビゲーションなどの全ての要素はエッジのきいたスタイルで、シャドウはありません。Appleによく見るSkeuomorphic Designのような質感をリアルする3Dのエフェクトは使用されません。画像は背景と前景をはっきりさせ、テキスト、ナビゲーション、ボタンも面が交わらないようデザインされています。

フラットなデザインで機能するポイントは、余分なものを必要としないで、はっきりとした見た目を与えます。これはユーザーが操作することを容易にするため、デザインで階層と要素の配列を明確にしています。
また、小さいスクリーンではこういったフラットなスタイルが使いやすいというオプションもあります。

2. エレメントはシンプルに

サイトのキャプチャ

Simone Marcarino

サイトのキャプチャ

Square UI

フラットなデザインでは、ボタンやアイコンのような多くのシンプルなUI要素を使用します。形は円、長方形、正方形などの単純なもので、エッジはシャープにデザインされています。

UI要素というものはそれぞれ、クリックorタップが簡単にできるべきです。説明など必要とせず、ユーザーが直感的に操作できるようにあるべきです。

シンプルなスタイルの他に、カラーなどでクリック可能なボタンを伝える時は大胆にデザインしてください。
「シンプルな要素が単純なデザインである」とは混同しないでください。フラットなデザインのコンセプトは、他のデザインと比べて同じくらい複雑です。

フラットなデザインを始める一つの方法は、無料のリソースをダウンロードして勉強してみるのも手でしょう。

3. タイポグラフィにフォーカスを合わせる

サイトのキャプチャ

Countney & Andrew

サイトのキャプチャ

Plover

フラットなデザインでの要素はシンプルなため、タイポグラフィは非常に重要です。

タイプフェイスのトーンは全体的なデザインスキームと一致させます。タイプははっきりとさせ、最終のプロダクトがビジュアル的に一貫したトーンを与えるようにし、言葉も効果的なものを選んで表現してください。

フラットなデザインを採用しているサイトでは、タイポグラフィのために数多くのバリエーションとウェイトをもったフォントファミリーを使用していると思ってください。一つだけ新しいフォントを加え、アクセントを加えるのも面白いでしょう。

タイプがユーザーにどのようにデザインを使うべきか言うべきです。また、ユーザーの使いやすさを考慮し、ボタンや他の要素にラベルをつけるのも効果的です。

4. カラーにフォーカスを合わせる

サイトのキャプチャ

Close Landing Page

サイトのキャプチャ

Squirrel Setting

カラーはフラットなデザインの大部分といってもよいでしょう。フラットなデザインのカラーパレットは他のサイトより明るく、カラフルなものが多いです。

カラーパレットには多くの色相を含みます。通常は2, 3種類のカラーをベースにすると思いますが、フラットなデザインでは6, 8種類のカラーを使うかもしれません。カラーを選ぶ時はカラーホイールから最もピュアなものが人気があり、淡い色やトーンを変えただけのものはあまり使用されない傾向があります。プライマリーとセカンダリカラーは人気が高いです。

最近のフラットなデザインのトレンドとしては、サーモン、パープル、グリーン、ブルーなど少しレトロ風なカラーが人気が高いです。

5. ミニマリストのアプローチ

サイトのキャプチャ

Dropbox - DBX

サイトのキャプチャ

Our name is MUD

フラットなデザインの本質はシンプルであり、ミニマルのデザインアプローチでよく機能します。

全体的なサイトデザインで多くの飾りをつけることは避けてください。シンプルなカラーとテキストで充分かもしれません。もしビジュアルを加えるのであれば、シンプルな写真画像を選択してください。

フラットなデザインでの商品などの写真の扱いは、シンプルな背景にアイテムを置くと良い仕事をします。

終わりに -フラットなデザインの大切なポイント

多くのデザイナーがフラットなデザインをトレンドして合意するでしょう。ほとんどのフラットなデザインで、フラットなスタイルの基本的なテーマが使用されます。しかし、いくつかのエフェクトがデザインスキームに加えられます。例えば、ボタンに繊細なグラデーションやドロップシャドウを加えたりするかもしれません。

デザイナーはエフェクトを一つだけ選び、フラットなプロジェクトで使います。このスタイルはフラットなデザインが厳格さを主張するものではなく、柔軟性があるということです。

デザイナーは奥行きやテクスチャを加えることを好みます。ユーザーは適切なインタラクションを方向付けるのに役立つのあればエッジのきいたスタイルを好みます。デザイナーはその一方、本来のスタイルの定義ではないこともでき、2つを結合させるので、好みではありません。

top of page

©2017 coliss