Remain Style Guide

ブランドカラー

ブランドカラーとは

ブランドを表す固有色で、ブランド全体に統一感を与え、ユーザーに絶えず同じメッセージを伝えるのに効果的です

ブランドカラーの活用

ブランドカラーは主にprimary color 1色とsecondary color 1色で提案します。多数のカラーを使用するよりも少数のカラーを使用する方がブランド性をより高めながら、コンテンツ中心のデザインをしやすくするのを助けます。あまりにも単調に感じられる場合は、ブランドカラーに彩度と明度を加えて、より豊かな表現をすることができます。

ブランドカラーの比率

primary colorがsecondary colorより比率が高くなければなりません。これと逆になると、ユーザーに主要色に対する混乱を引き起こす可能性があるため、primary colorをsecondary colorより多く使用するのが良いです。

primary colorとして #3d5afe、secondary colorとして #ff6e40を選定し、
primary colorの比重がsecondary colorより高いことを示す例です。

色彩の配合 (color scheme)

primary colorとsecondary colorを決める際、色同士の組み合わせも非常に重要です。カラーホイール(色相環)ツールは調和のとれた配色を助けるツールです。すべての色は互いに調和することもあれば衝突することもあるため、その過程で時間がかかりすぎたり、難しさを感じたりすることがあります。その際、カラーホイールツールを使うことで時間を短縮できます。

primary color (#3d5afe)とsecondary color (#ff6e40)の関係は補色関係で、ウェブ上でどのように活用されるかを示す例です。

インタラクションカラー(interaction color)

インタラクションカラーは、デフォルトカラーから1〜2トーン明るい色と暗い色を使用することを提案します。明度と彩度の段階をより大きく設けて使用することもできます。

default colorを決めた後、interaction colorとしてlighten, darken colorを4〜5段階程度設けて使用可能です。interaction colorを1〜2色で設定したときよりも、より豊かな表現が可能です。lighten colorは左に行くほど明るくなり、基本色と比較して明るいほど数字が高くなります。darken colorは右に行くほど暗くなり、基本色と比較して暗いほど数字が高くなります。

マウスホバー時の色にinteraction colorを活用することで、ユーザーがどの位置にマウスをホバーしているのかを分かりやすくするのに役立ちます。

マウスホバー前の基本色としてdefault colorを、マウスホバー時の色としてinteraction color (lighten-1)を使用した例です。

---

トピック: デザイン
カテゴリ: スクラップ/記事
%% ソース: http://styleguide.co.kr/content/color/brand-color.php %%