フラットデザインはここ数年間で驚異的な速度で注目を集め、その人気は未だ衰えを見せず、今でも進化しています。
現在のフラットデザインは、発展の末に、ユーザーの注意を引くことに主題が置かれるようになりました。今回はフラットデザインの発展に注目していきます。
ミニマリズムを効果的に適用する
ミニマリズムのポイントは、伝えるべきことを伝えるのに必要なものだけを残すことです。フラットデザインとミニマリズムは密接に関連していて、シンプルさの追及やコンテンツを重視したデザインなど数多くの同じ原則を共有しています。
ミニマリズムはフォームと機能が完璧に結びついたもの
フラットデザインのシンプルな構造は、機能的であるだけでなく、魅力的な見た目にもなります。この特徴から、ランディングページに使われることが多いです。またこのようなコンテンツが少ないデザインは、さまざまな画面サイズにも対応しやすいです。
スクリーン上の要素が少ないほど、残った要素が強調される。クレジット：jonaslindvall
ミニマリズムは単純に見えるかもしれませんが、実際には上手く活用するのは言うほど簡単ではありません。要素が少なくなるほど、より注意深く使用する要素を選ぶ必要があります。ですから、何が機能していて、何が機能していないのかを決める際には神経を使わなくてはなりません。
ヒント：
- コンテンツ（特にビジュアル要素）を強調します。「１つの画面につき強調するものは１つだけ」という原則に従いましょう。それぞれの画面の注意をそらす要素をなくし、中心に１つだけ画像を配置してください。
画面上の要素が少ないほど、残った要素も強調されて伝わります。
- 空白部分を効果的に使いましょう。ミニマリズムでメインになる要素は空白の部分です。視覚的にわかりやすいデザインを生み出します。
アクセントカラー
色は、効果的なフラットデザインのための重要な要素です。鮮やかな色を用いると、フラットデザインの欠点である見た目の物足りなさがカバーされます。鮮やかな色合いにしたからといって、フラットデザインの形式を大きく損なうことはありません。ですが現在のトレンドは、明るい色はアクセントとしてのみ使い、メインは無彩色でデザインするスタイルに移行しているようです。
コンテンツが君主ならば、色は君主を称えるもの
明るい配色と簡素な背景を対照的に組み合わせることで、デザイナーは目立たせたい部分をよりコントロールできるようになります。
アクセントカラーによって目立たせるべきものを目立たせています。
真っ暗な背景に明るい色の画像を配置することで、印象的なデザインとなっています。クレジット：takeitapp
ヒント：
- 重要なコールトゥアクション（CTA）と文字を強調しましょう。ボタンの境界線や背景に鮮やかな色を用いることで目立たせることができます。このやり方は、ほかのボタンがゴーストボタンである場合さらに有効です。
「Stay. Play. Discover」の文字と「Search」ボタンが赤で強調されています。クレジット：Airbnb
- 実績のある色彩の組み合わせを使いましょう。Flat UI Colorsのサイトでは、もっとも効果的なカラーパターンを集めて紹介しています。
クレジット：timbdesign
タイポグラフィで印象づける
デバイスの解像度が向上し、新しいWeb用タイプツール（Google FontsやAdobe Typekitなど）が生まれたことで、タイポグラフィの新しい時代が到来しました。
テキストもビジュアルデザインの要素となった
このタイポグラフィの流行は、魅力的なタイポグラフィ、カスタムフォント、目的のあるレタリングが使われることが多くなったことが要因です。印象的なタイポグラフィによって、ブランドアイデンティティを伝えたり、テキストコンテンツを強調したり、コンテンツの階層をわかりやすく作りやすくなります。
印象的なタイポグラフィが目立ちます。
ヒント：
- 流行のフォントを使うために、読みやすさを犠牲にしてはいけません。ユーザーが読めないタイポグラフィでは意味がありません。
- 手書き風の文字は、ホームページのデザインを引き立ててくれるでしょう。読みやすいことが前提であるので、画像の上にタイトルとして大きく用いるのみに制限したほうが良いでしょう。Creative Bloqの「50 great free handwriting fonts」という記事には、無料の手書きフォントの一覧が紹介されています。
手書きの要素はブランドに人間味のあるイメージを付与するのに有効です。クレジット：grainandmortar
１つのデザインにつき１つのフォント
フォントの種類が多すぎると、ゴチャゴチャしたデザインになる上に、ビジュアル要素の階層が認識しにくくなってしまいます。フラットデザインでは、ブランドイメージを伝えるロゴや見出しを除いて、ほとんどのテキストのフォントを統一するようにしましょう。
デザインを損なうようなフォントは必要ない
したがって、サイトをデザインする際には、異なるフォントを使うのではなく、太さや大きさを変えることで印象強いタイポグラフィにすることができるか考えてみましょう。
フォントを統一することで、文字の見た目ではなくコンテンツに焦点をあてることができます。クレジット：Dropbox
ヒント：
- サイズや太さをどのように変更しても、読みやすさやユーサビリティが損なわれない書体を選びましょう。特に小さいデバイスでは重要です。
Avenirでのフォント。クレジット：inVision
- 似た文字と混同しやすいフォントがたくさんあるので、文字の形式が簡単に区別できるフォントを選択しましょう。たとえば、大文字のIと小文字のLが別のものだとわかるようにしなければなりません。ユーザーにとってわかりやすくなるように、これらの間違いやすい文字を明確に区別するフォントを選んでください。
Clear SansとLatoというフォントの比較。大文字のIと小文字のLに注目してください。クレジット：inVision
結論
フラットデザインの人気は、今後も続いていきます。そして、新しいスタイルに向けて進化し続けていくでしょう。一方で、基本であるシンプルさが重視され続けていることが、フラットデザインの人気を維持しています。
