【永久保存版】12のルールでフラットデザインを簡単に作る方法

フラットデザインを簡単につくるためのルール12

別の記事でフラットデザインがどういったものか解説しました（下にリンクを乗せています）。次はフラットデザインを簡単に実現する方法をデザインとテクニックと配色に分けて詳しく説明していきます。大体の基本は網羅しているので多分ここの情報を全て使えば、フラットデザインを普通に作れると思います。

IT業界で最近流行っているデザインといえば「フラットデザイン」。シンプルで素朴ながら魅力的ですね。なぜこのデザインは魅力にあふれるのでしょうか？いつからつかわれているのでしょうか？ここではその2つの謎へ答えを出します。

フラットデザインの説明記事へのリンクです

デザイン編 1.影を使わない（ロングシャドウは除く）

フラットデザインでは影を使わないことが重要です。立体をつければ強調されるのでついつい、影をつけてしまいがちですが最初は一切つけないようにしてみると上手くいきます。
光が真上の空から来ているとイメージしましょう。影はできないはずです。

2.反射や光沢もつけない

反射や光沢もフラットデザインが失敗する原因です。影と違ってほぼ使わないのでフラットデザインを作成するときに限っては、反射や光沢を使おうとする頭の中のスイッチをOFFにしましょう。

3.色は明度が明るいものを使う

デザイン次第では明度が低いものでもフラットデザインは作れます。しかし初めのうちは色の明度が高い、パステルカラーなどを使いましょう。その方が簡単に上手く作れます。

4.直線的なデザインを意識する

曲線を使っても作れますが直線だけで簡単に作れます。慣れるまでは直線を貴重とした、デザインで取り組むと早いです。

テクニック 1.ゴーストボタン

画像のように白や明るいグレーでふちと文字だけを描いた、中身がスッキリしている「ゴーストボタン」つかうとらしさがでてきます。

2.ロングシャドウ

3.文字フォントは丸っこいものを

4.弱めのグラデーションを使う

5.背景にシンプルな写真を使う

思い切って背景のデザインは写真にするのもありです。そのばあいは文字を写真の上に書く必要があります。見やすいように写真に含まれていない色を使うといいでしょう。そして全体の色を多くし過ぎないように注意してください。

配色編 1.色を白と黒ともう1色だけで配色する

2.トライアド配色を使う

白と黒と1色での配色が難しいならトライアド配色を使うと簡単です。下のリンクにある参考サイトで色を確認して使ってみてください。
トライアドは3人組という意味です。3つの色を色相環という輪の中で正三角形で取ることにより、安定した配色を実現します。
何も考えずにサンプルの中からトライアド配色を使うと初心者でも上手く配色できるのでおすすめです。

3.白と黒と同色相の色で配色する

さてこれでフラットデザインの全ては網羅しました

もうフラットデザインについてあなたは大丈夫なはずです。あとは専門的なデザイン用語の世界。基本は網羅しました。ここに書いてあるルールだけでもいいデザインが作れます。時は満ちました、さあデザインに挑戦しましょう。
2次元の世界にようこそ（笑）