他社のブランドカラーを参考にする具体的な方法【Canva】

自分のお店のブランドカラーって決めてありますか？

「いつもなんとなく色を決めている」

「まだ決めていない」

という方は、ぜひ他社のブランドカラーを参考にしてみましょう！

今回は他社のサイトや広告画像などを参考に、Canvaを使って自社のブランドカラーを決める具体的な方法について解説していきます。

無料デザインツールのCanvaについてまだご存知ない方はこちらの記事を参考にしてください。

ブランドカラーを決める方法に関してはこちらの記事も参考にしてみてください。

ブランドカラーを決める必要性

ブランドカラーを決めることで、自分のお店がどんなお店なのかを視覚的にアピールすることができるようになります。

また、カラーを統一することで「この色＝このお店」と覚えてもらえるようになり、競合他社との差別化の手助けをしてくれます。

例えば、FacebookとTwitterのブランドカラーはどちらも青系と白です。

しかし、カラーコードで言えばFacebookは＃1876F2、Twitterは＃1D9BF0ですので、まったく同じ色ではありません。

同じ青系統でもこの色を見ればFacebookとTwitter、どちらか想像しやすいですよね？

このように、ブランドカラーを決めることで、その色を見たときにお店のことをイメージしやすくなります。

ブランドカラーはサイトやSNSの投稿画像、アイコン、チラシなど
様々な場面で使われます。

具体的な方法

1.参考になるサイトなどを見つける

自分のお店のターゲットが好みそうなお店やサービスのサイトや広告をリサーチして、ブックマークやスクリーンショット（以下、スクショ）などを残しておきましょう。

CanvaをPCで操作する場合にはブックマークとスクショ、どちらでもOKです。
スマホやタブレットの場合はスクショが必須です。

スクショの場合はサイトに使われている全てのカラーを写しておくように注意してください。

2.Canvaで四角を作っておく

下の参考画像のような四角を作っておきましょう。

色は何でもOKです。
とりあえず適当に四角を作ります。

大きい四角、中くらい、小2つで作っておくとわかりやすいです。細かい大きさは気にしないでください。

3.色を抽出する

スクショの場合

1. Canvaにスクショと先ほどの四角を並べる
2. 一番大きい四角をクリック
3. 左上のカラー変更アイコンをクリック
4. 新しいカラーを追加をクリック
5. スポイトアイコンをクリック
6. スクショした中で一番面積の広いカラーの部分をクリック

これでベースの色の抽出が完了です。

他の四角の色も同様に変えていきます。

中くらいのサイズの四角はサイトの中でよく使われている色（ロゴやヘッダー、フッターなどに使われることが多い）

小さいサイズの四角はサイト内であまり使われないけど目立つ色

一番右端の小さい四角は文字の色に変更します。

ブックマークの場合

PCの場合、サイトから直接カラーを抽出することも可能です。

Canvaと参考サイトを別ウィンドウで並べておいて、スクショのときと同じように抽出したいカラーの部分をクリックするだけです。

実はCanvaのスポイト機能はキャンバスの外のカラーも抽出できるんです！

スクショだと画像が小さすぎて上手く抽出ができない場合もあるので、サイトから直接抽出する方が楽ですよ。

補足

サイトを見るとたくさんお色が使われているように見えますが、実は他の色の透明度を下げただけというパターンが多いです。

例えば参考画像でも濃い色の透明度を下げると背景の色になります。

色を抽出するときは濃い色を選んでいきましょう。

また、必ずしも色がサンプルのような4色になるとは限りません。

複数の色を使っているサイトの場合は、四角の数を増やしてカラーを抽出しましょう。

4.カラーの微調整をする

抽出したカラーのままでは、参考サイトの丸パクリになってしまいます。

ターゲットが好みそうなサイトを参考にしているわけですから、実際にターゲットがそのサイトを見ている可能性が高いです。

なので、まったく同じ色だと

「あのサイトと同じだ。パクリじゃん。」

と思われる可能性もありますし、

「この色＝この店」というブランディングが出来なくなってしまいます。

ですので、抽出した色を少々変更していきましょう。

色相を変えてみる

抽出した色をベースにして、先ほど作った四角の色相を変えます。

参考画像のαの部分をそれぞれ同じくらいの位置に動かしてみましょう。

これで簡単に色相を変えられます。

彩度を変えてみる

今度は色の明るさを変えてみます。

色を抽出したそれぞれの四角を選択し、カラーの変更で大体同じような場所をクリックします。

元の色より下の辺りを選択すると暗めの色になり、上の方になると明るめの色になります。

このようにカラーを変更して、自分のお店に合うオリジナリティのあるブランドカラーを決めましょう！

四角だとわからないという場合

色を抽出しても、四角に当てはめただけだとわかりにくい
という場合もあるかと思います。

そんなときは、参考画像のように実際にサイトなどに使ったときのサンプルイメージを作ってみることをおすすめします。

背景色を一番大きい四角の色

「もっと見る」という文字と、その枠は小さい四角の色

「メニュー　▶」は大きい四角の色

「メニュー　▶」の周りは中くらいの四角の色

背景の色は中くらいの色の透明度を15くらいにしたもの

下の文字は一番小さい四角の色

こんな感じでサンプルを作るといいでしょう。

サンプルのテンプレートをこちらに載せておくので、自分で作るのが面倒な方はご活用ください。

まとめ

他のサイトなどを参考に自分のお店のブランドカラーを決めるには、Canvaで参考サイトの色を抽出して、色相や彩度を変えてみましょう！

他のサイトの色をそのまま使わず、何か変更するようにしましょうね！