Hatena::ブログ(Diary)

納豆には卵を入れる派です。 このページをアンテナに追加 RSSフィード Twitter

2013-06-19

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

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倍くらいの大きさで使う

アイコンはFont Awesome

これも数字くらいのサイズで文字の2倍くらいのサイズで使うとよい。

http://fortawesome.github.io/Font-Awesome/icons/

その他ポイント

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

思いつくの今のところこのくらいか。。。もうちょっと具体的なTIPSや色の組み合わせのパターン等をまとめて、類型化できると面白そう

しかし、図解がないのでわかりづらいな…(しかし図解をつけるのがめんどくさい・・・・いずれもうちょっとちゃんとした形に、どこかでまとめたいです。。

n2n2 2013/06/20 14:16 記事を拝見しました。とても分かりやすく参考になりました。
途中で紹介されているDIN Mediumですが、これはいわゆるknok off(海賊版のフォント)ではないでしょうか?
タダでダウンロードできる海賊版フォントはディティールやラインが汚いことが多く、タイポグラファやグラフィックデザイナーなど、プロは絶対に使いません。
FF DINを販売しているFontFont社や、DIN Nextを販売しているLinotype社など、正式なものを紹介した方がいいのではないかと思いました。

この記事は感覚的なことが分かりやすく言語化されており、非常に有用なものと思います。その分、影響力があり、クオリティの低い海賊版が広がってしまうのではと心配に思いましたので・・・。失礼致しました。

ken_c_loken_c_lo 2013/06/20 19:45 ありがとうございます。
DIN、英字はそもそも個人的に好きじゃないんですが、この場合は数字限定推しで、このフォントでも数字は綺麗なので、いいのではないかなあ…と、個人的には、ケースバイケースで審美した上で使うのはアリだと思っています。
あくまで私の独断と偏見に基づいたものですので、ご参考程度にとどめていただけると幸いです。

niconico 2013/06/20 22:41 >ken_c_loさん
DINについて、英字の好みとかの話では無く、
有料で販売しているフォントを無断で配布しているグレーなサイトにリンクを貼るのはいかがなものか?というコメントだと思いますよ。
DINの正規のフォントライセンスはLinotype等で有料販売しているものなので。
デザイナーがそういうライセンスが曖昧なURLを広く勧めるのは如何かと。

ken_c_loken_c_lo 2013/06/20 22:51 すみませんでした…以後気をつけます。

ふぉお9ふぉお9 2013/06/20 23:56 ? 広く勧めたわけじゃないでしょう。

通りすがりの端くれ通りすがりの端くれ 2013/06/24 11:29 >n2さん、nicoさん

DIN自体はドイツの工業規格で、DIN準拠のフォントは様々なメーカー各社が自由に作っているのでは?FontFont社しかり、Linotype社しかり。こちらのページ(http://blog.petitboys.com/archives/din.html)に各社の提供するDIN準拠フォントがまとめられてますね。
FontZoneのフォントがどこかのメーカーのフォントをトレースして作られてるのか否かは存じないのですが、そこのところどうなんでしょう。

> タイポグラファやグラフィックデザイナーなど、プロは絶対に使いません。
この点については同意です。ライセンス関係で全く悩む必要がなくなるという意味でも。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証