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

Post on:2013年6月3日

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

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

ページ内のテキスト、ボックス、画像、フォーム、ナビゲーションなどの全ての要素はエッジのきいたスタイルで、シャドウはありません。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種類のカラーを使うかもしれません。カラーを選ぶ時はカラーホイールから最もピュアなものが人気があり、淡い色やトーンを変えただけのものはあまり使用されない傾向があります。プライマリーとセカンダリカラーは人気が高いです。

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