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

eye-catch_130617

こんにちは、小林です。

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

それでは本題に。
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ルールはインテリアとか、ファッションデザイナーが昔から使っている配色手法なんですよね。

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

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

というわけでちょっと試してみました。

※シューズにもいろいろありますが今回はカラーに注目したスニーカーを中心にピックアップします。










と、こんな所でしょうか!実際ためしてみると、(上手く行ってる部分と微妙な部分がありますが)なかなかどうして良い気がしますがどうでしょうか!?
僕自身は普段はまず思いつかない配色なので勉強になります。(特にレディースものとか)

フラットデザイン用のカラースキームなどが公開されていますが、時には新しい(web)デザインには、新しい(ファッション)デザインを参考にするのもいいですね。
視野を広げていろんなモノを見ていきたいと思いました。