配色を制する者はフラットデザインを制す！配色選びのコツを徹底解説

「フラットデザインを作りたいけど配色の仕方がわからない…」
「流行りのフラットデザインのカラーリングについて学びたい」
この記事は、こういったお悩み、課題のある方に向けて解説しています。
Webデザインの仕事に使える知識なのはもちろん、日々作成するプレゼン資料・報告資料にも活用できるので、ノンデザイナーの方もぜひチェックしてみてください。

フラットデザインとは

フラットデザインとは何か、いまいちわかりづらいかと思います。
フラットデザインの概要を説明すると、その名前の通り立体感のない平面的なデザインのことを言います。
また、余分な装飾をつけたりカラフルにしたりせず、とにかくシンプルなのもフラットデザインの特徴です。

なぜフラットデザインが流行ったのかというと、”シンプルゆえにどんなサイズでも見やすい”というメリットがあるから。

スマートフォンやタブレット、PCなど様々なサイズのデバイスが普及する中で、あるデザインがPCでは見やすいけどスマートフォンでは見づらいといった問題が増えてきました。
こういった問題を解決する手法としてシンプルなフラットデザインの必要性が高まったのです。
実際にiPhoneのOSであるiOS7の登場以降、iPhoneのUIがフラットデザインになっています。

フラットデザインにおける色の重要性

フラットデザインを作るには、配色がとても重要です。
使う色の数は多くありませんが、だからこそ選んだ色の効果が大きくなります。
配色のコツを掴んで、質の高いフラットデザインを作りましょう。

配色をする際のポイント

配色が大事といわれても、ノンデザイナーの方にとっては難しい問題だと思います。
今回は、フラットデザインの配色をする際のポイントを大きく2つに分けて説明していきます。

統一感が重要

配色を選ぶ際は、統一感を出すようにしましょう。
目を引くデザインにしようとすると、多くの色を使ってしまいがちですが、どこに注目すべきかわからなくなり、統一感がなくなってしまいます。

統一感をだすには、同系色の中で、明度や彩度で差をつけるのがおすすめです。
同系色とは、青色や水色の寒色系だとか、オレンジや黄色の暖色系といったまとまりのことを言います。

ダイナミックに色を使う

フラットデザインは見やすくシンプルである必要があるので、細かく色付けをするのではなく、ダイナミックに大きく色を使うようにしましょう。
細かく色を使ってしまうと、小さなデバイスで見た時に見づらくなってしまいます。
目立たせたい部分だけは異なる色味にしてみたり、装飾は最小限で差し色を入れてみるのが良いでしょう。

フラットデザインに使える配色ツール

では、フラットデザインを作る際に使える配色ツールをご紹介します。
前述した配色の際のポイントを念頭に置きながら、ツールをつかって綺麗にデザインしていきましょう。

Flat UI Colors2

URL：https://flatuicolors.com/
13の国のデザイナーさんがそれぞれの国のイメージを反映したカラーパレットが集まっています。
自分が作りたいフラットデザインのイメージに合うパレットをその中から選ぶと、カラーコードがコピーできるようになっています。

Coolors

URL：https://coolors.co/
配色ジェネレーターである「Coolors」では、スタートボタンを押すと自動でカラーパレットを生成してくれます。
スペースキーを押すことで、次の配色を提案してくれるので、気に入った色が見つかるまで探してみましょう。

Color Hunt

URL：https://colorhunt.co/
同系色でまとめられているパレットも多く、下にスクロールしていくことで無限に配色を提案してくれます。
作りたいフラットデザインにマッチする色を必ず見つけることができるでしょう。

フラットデザイン作成時の注意点

フラットデザインにおける配色の重要性をお話ししてきました。
それ以外にも注意しておきたいポイントがあるため、3つに分けて解説します。

フォントは読みやすさ重視

使用するフォントですが、なんでも良いわけではありません。
フラットデザインにおいては、可読性が良いゴシック体を選びましょう。

• Helvetica
• ヒラギノ角ゴ
• メイリオ

といったシンプルなフォントがおすすめです。これらのフォントであれば、文字のタテとヨコの太さが一定で余計な装飾がありません。

文字間は空ける

文字間は意識的に空けるようにしましょう。

上記の画像を見てみると、左の方が断然見やすいですよね。
文字の間隔調整を行うことで、フラットデザインがレベルアップします。

立体感、余計な装飾はしない

フラットデザインは、前述した通り平坦でシンプルなのが特徴です。
デザインとなると、立体感を与えたりたくさん装飾をしたりしたくなると思いますが、なにより”見やすさ”を重視しましょう。

まとめ

今回は、フラットデザインの配色について説明いたしました。
マルチデバイスに対応する、時代に適したデザインであるフラットデザインは今後も使用される場所が広がっていくと考えられます。
デザイナーの方はもちろん、ノンデザイナーの方もぜひ知っておきたい内容ですね。
ご紹介した配色ツールを活用して、多くの人が使いやすいフラットデザインを作ってみてはいかがでしょうか。