色をデザインに落とし込む

どうも！いまです。

前の記事で色を数字から読み解いてみました。

今回はよりデザインに近い色の考え方をまとめていきます。

70:25:5の法則

デザインを勉強していると、この数字をよく目にします。

これは、
70%：ベースカラー
25%：メインカラー
5%：アクセントカラー
の比率を表しているものです。

noteを例に挙げた時、
70%：ベースカラー　　→　白（背景）
25%：メインカラー　　→　グレー（線や文字）
5%：アクセントカラー　→　薄緑（アイコンや投稿ボタン）
となります。

ベースカラーは、メインカラーを薄めた色だと馴染みがよいと言われています。
メインカラーを黒にしてしまうとベースカラーと離れてしまうので、グレーにすることで親和性が高まりますね。

モノクロに差し色を入れるのはファッションなどにもよく利用されていて、強調したいところが意識せずとも目に入りやすくシンプルでスタイリッシュな作りに見えます。

もう少し色を多用したい場合、次のお話にうつります。

色相環

デザインを知る上で色相環は非常に大事な要素で、世の中に存在する色の大枠的なものだと捉えています。以下12色がそうなのです。

これで色の近い遠いを判断してデザインに活かしていきます。

例えば、先ほどの70:25:5の法則に当てはめたとき、
メインカラーの捕色と呼ばれる色をアクセントカラーにするといいです。

捕色とは、対角線にある色のことです。
真上の赤の捕色は真下の水色、一番右の薄緑の補色は一番左の紫に当たります。
メインカラーを赤にしたい場合は、
70%：ベースカラー　　→　赤
25%：メインカラー　　→　薄いピンク
5%：アクセントカラー　→　水色
と単純に考えると水色が映えるようになります。

先ほど例に挙げたnoteに当てはめると、右下の青緑が一番近いアクセントカラーなので、メインカラーを左上の赤寄りのピンクにしてもいいわけです。ただ、この色の割合が高くなると女性的なイメージが強くなるため、ターゲットにはそぐわないですね。単純に補色を使えばいいと言うわけではなく、色のイメージやターゲットでも変えていく必要があります。
noteを制作している会社のデザイナーの方がこんな記事もあげていました。色によるインパクトやイメージは様々です。

センスを感じるWebサイト

散々ルールに則ったデザイン論を記載していきましたが、デザインによって見る人にどんなイメージを持たせたいかというのが一番大事な要素となります。

最近私が見た中で衝撃的だったWebサイトをご紹介します。葵プリズムちゃんというバーチャルモデルとコラボした大阪の商業施設「HEPFIVE」のWebサイトです。彼女の世界観を存分に詰め込み、とにかくゴチャゴチャしていますがメッセージ性が強く思わず見入ってしまう世界観がとにかく素晴らしいです。

みんなのアキバデビューはいつ？

ぷりは秋葉原BEEPでエロゲをあさったりラジオ会館でマイコン買ったよ👩🏼‍🔧

ちな、よくおっさんじゃね？って言われるけど、もはや時空超えてIBN5100探してる系💙✨#ちなウチCG pic.twitter.com/xAwoWsIqWj

— 𝑨𝒐𝒊𝑷𝒓𝒊𝒔𝒎 / 葵プリズム (@Aoiprism) September 24, 2019

HEPNOW

今回伝えたかったのは、デザインに絶対的なルールはなく、基礎を抑えた上でそれをどう使うかは自分の自由で、最終的にはデザインで何を伝えたいかと言うのが大事だと学びました。

ここまで読んでくださりありがとうございました。是非、また読んでくださると嬉しいです！