フラットデザインのコツ的なアレ

design

P4Dで教えていただいたエンジニアさんに聞かれたので、なんか整理しきれてなくてざっくりなんですが、取り急ぎ、なんかそれっぽくなるコツみたいなのを独断と偏見でまとめてみました。

3色〜5色くらいの色を画面の中で均等に使うのおすすめ

作りたいサービスが何で色分けできるか考えます。ちょうどよく3〜5種類くらいのステータスやカテゴリなどがあったら、それに応じて色が変わるとかするとうまくハマる。かも。

Flat UI Colorで色選び

http://flatuicolors.com/
という便利なサイトがあって、ここから3〜5色くらい選ぶとよいです。クリックするとカラーコードがコピーされます。あら便利。赤は他の色と仲良くするのが難しめ。

Sassで彩度を抑えると落ち着いた色調になって、使いこなしの難易度が低くなります

上のサイトもそうなんですが、Flat UIによく使われている色は、鮮やかなが多くて、うまく使えるとかわいいんですが、使い方を間違えるとギラギラしてしまう可能性もあるので、彩度（鮮やかさ）を少し落としておくのが安牌でおすすめ。



$color-1: desaturate(#25b89a, 10%)

$color-2: desaturate(#efc319, 10%)

$color-3: desaturate(#e57d24, 10%)
こんなかんじで、上で選んだ3色をSassで彩度を10%落としてます。これで割とどのようなレイアウトでも調和がとりやすいトーンになったりします。

メインのテキストの色は真っ黒よりも、グレー or 濃紺が合います

グレー

#666 〜 #888 くらいの濃さ
#95A5A6, #7F8C8D （http://designmodo.github.io/Flat-UI/ 参考）

濃紺

#34495E, #2C3E50 （http://designmodo.github.io/Flat-UI/ 参考）

  • 上で選んだ3〜5色 + テキスト色（グレー or 濃紺）+ あと、ベースになる色（薄いグレーかベージュ等がおすすめ）+ 白 で構成。それ以外の色を使わない。
  • 色の上に白抜きで文字を載せる
  • 白の上に色で文字を載せる
  • rgba(0,0,0,0.1) -> 黒の透明度 0.1 / rgba(255,255,255,0.3) -> 白の透明度 0.3 等を色面の上に乗せて活用する


テキストエリアやボタンまわりにrgba(0,0,0,0.1)を使ってます

フォントづかい

Latoおすすめ

http://www.google.com/fonts/specimen/Lato

数字だけ違うフォントで、2〜3倍くらいの大きさで使う
  • 幾何学的に単純なスタイルの数字を持ったフォントがおすすめ
  • おすすめ DIN medium > http://fontzone.net/font-details/din-medium
  • 文字の大きさにメリハリをもたせるとそれっぽくなります。ポイントになる部分は大胆に大きく、それ以外の部分は小さく。

アイコンはFont Awesome で

これも数字くらいのサイズで文字の2倍くらいのサイズで使うとよい。
http://fortawesome.github.io/Font-Awesome/icons/

その他ポイント

  • マージンは大きめにとる。ボタンであれば、文字の高さと同等のマージンを上下に取る。
  • ボタンが認識されづらい。Submitボタンなど、押して欲しいボタンの周りにはマージンを大きめにとって、周りに何も置かないなどして目立たせる工夫必要。
  • 画面の半分以上が色ベタ面になるようにする（もしくは写真を敷いてもよいです）。画面の半分以上が白だとさびしくなりがち。
  • タイトル的な大きく使う文字要素は、フォントサイズを大きくして、フォントのウェイトをUltraLightなどの極細にするとそれっぽい。（やっぱり周りにマージンが大きく必要）
  • 日本語をなるべく使わないｗ （日本語使う場合、大きな文字はboldにせず細い文字で使う、文字の周りにはマージンを大目に取る等するとよいです。）
  • 写真とかボタンとかをマルにするとかわいい

思いつくの今のところこのくらいか。。。もうちょっと具体的なTIPSや色の組み合わせのパターン等をまとめて、類型化できると面白そう
しかし、図解がないのでわかりづらいな…（しかし図解をつけるのがめんどくさい・・・・いずれもうちょっとちゃんとした形に、どこかでまとめたいです。。