2013.06.17 Webデザインフラットデザイン配色

フラットデザインにも有効！？スニーカーからカラーピックしてみる

こんにちは、小林です。

昨日は父の日でしたね。親元を離れて一人暮らしをしている身なので、こういう日でないと何かをプレゼントしたりすることがありません。
孝行について、とても感銘を受けた言葉があります。
【孝行は親がさしてくれて、初めて子ができるもので、子が孝をするのではなく、親が子に孝をさせるのである。（「論語と算盤／渋沢栄一」より）】
孝をさせてくれる親がいることに感謝し、一層頑張っていきたいと思います！

それでは本題に。
iOS7やwindows8などを見ると、徐々にデザインがシンプル化してきているように感じる今日この頃。
その代表的なものとしてフラットデザインがトレンドとして注目されてるのはweb業界では周知の事実です。

細部にこだわったスキューモーフィックデザイン（Skeuomorphic design）は終わったという噂もあったりなかったり…( ﾟдﾟ)

でもこういったリッチな世界観が求められるコンテンツも多々あるので、さすがに無くなることはないと思います！

スキューモーフィックデザイン（Skeuomorphic design）とは…
↓こちらの記事がよくまとめれているので御覧ください。
Appleが推奨するSkeuomorphic Designとそのメリットデメリット（Design Spice）

フラットデザインに関しては、配色がひとつ大きなポイントになってます。
その理由は、装飾が少ない分、配色によって要素を分ける必要があるからです。

実際にフラットデザインのサイトをみてみるとキレイな配色のものが目につきます。

うーむ、自分は配色に自信がないので、いざ同じようなものを作れと言われたらかなり苦戦しそうです…。
カラー選びには、そのサイトの内容であったり、ロゴの色であったり、いろんな要素を踏まえた上で選択すると思うんですが時にはそれらを無視したような大胆なカラーリングも必要に迫られる時が来るかも！？しれません。

そんな新しい配色をしたいときに、シューズからヒントを得るのはどうでしょう？

いきなりシューズが出てきて「？？？」かもしれませんが、先日なんとなく海外の新作シューズ紹介のページを見ていたら、案外6：3：1ルールに合致してるなーと思ったんです。

6：3：1ルールとは…

60%をメインの色

30%をメインと相対的な目を引く色

10%をアクセントカラー

60％はベースの色であり、デザイン全体のトーンを設定する色として配色する。
30％はベース色のコントラストとして配色し、視覚的な印象を考慮して使う。
10％は所謂「アクセントカラー」で、文字通りベース、コントラストへの”差し色”として補足的に使用する。

「( ´,_ゝ｀)ﾌﾟｯそんなの当たり前じゃん、気づくの遅っ！」って話だったらスミマセン。。
よくよく調べてみたら、この6：3：1ルールはインテリアとか、ファッションデザイナーが昔から使っている配色手法なんですよね。

詳しくはこちらの記事に書かれています↓
配色センス０でも大丈夫！？服、インテリア、デザイン、様々な“色使い”を改善するかもしれない『60-30-10 Rule』！（バンクーバーのうぇぶ屋）

これをwebにも応用してみたいなと思ったのです。