「お店を出すぞー！」
となって、いざチラシやサイトの作成などをしようと思ったとき
「緑っぽいイメージだから」
と思って、いつも似てる緑を選ぶけど微妙に違うってことはありませんか？
適当な色を使っていると何となくバランスが悪く見えたり、ダサく見える可能性が高いです。
「色のことなんてわからないよー！！青は青！！赤は赤でしょ！？」
みたいな人でも、Canvaを使えば簡単に写真からコンセプトカラーを決めることができますよ。
【はじめに】コンセプトカラーとは
コンセプトカラーとは、そのお店や企業などを象徴する色のことです。
「このお店といったらこの色！」
と思われる色ですね。
例えばUber Eatsは緑と黒のイメージ。トークアプリのLINEだと緑と白ですよね。
言葉としては同じ「緑」ですが、どちらも微妙に違う色です。
このように、色の微妙な差でも「あ、これの色だ」と認識できたりできなかったりするのです。
コンセプトカラーを決めるメリット
メリットはこの2つ
- イメージの統一感を出せる
- いちいち配色に困らない
お店を出すとなったら、これからはSNSの運用もしたい時代です。
メニュー表やチラシ、ポスター、ショップカード、サイト、各種SNSなど
色を使う場所はたくさんあります。
これらすべてでカラーを統一していると、チラシやSNSを見てお店に来てくれたお客様に安心感を与えることもできます。
また、メニュー表などを自分で作るときにいちいち配色に困らなくなります。
色の数は4色
- ベース
- メイン
- アクセント
- 文字用
この4つの色を使います。
ベースカラー
背景や余白などの面積の広い部分に使われる色です。
大体は白系を使うところが多いですね。たまに黒系をベースにして、白で文字を書いたりするところもあったりします。
メインカラー
ロゴに使われたりする色です。
「このお店といえばこの色！」
と思われるメインの色です。
アクセントカラー
たま～に使う色です。
サイトのお問い合わせボタンなど、相手に注目して欲しいところに使います。
学校の教科書とかにマーカーを引くようなイメージです。
マーカーを使いすぎるとどこが重要なんだかわからなくなるやつです。
本当に必要な部分にだけ使いましょう。
文字用
文字などに使う黒はカラーコード#333333などのちょっとだけ優しい色を使うのが無難なようです。
真っ黒（カラーコード＃００００００）だと印象が強すぎるため、あまり使われないそうです。
ちなみにこれは勝手に私が「文字用」と呼んでいるだけなので、正式名称などがあるのかも知りません。
Annadesign（＃000000）
Annadesign（＃333333）
この上と下でちょっとだけ色が違うのわかりますか？
基本的には下の色を使います。
コンセプトカラーの決め方
step1. Canvaで好きな雰囲気の写真を見つける
まずはCanvaを起動して、適当なサイズのキャンバスを開きます。
サイズは何でも構いません。
左側の黒いところ（以下、ダッシュボード）の『素材』をクリック。
検索窓から「カフェ」や「バラ」「癒し」など、お店の雰囲気に合う単語を検索します。
そして、検索窓のすぐ下にある『写真』をクリック。
好きな雰囲気の写真を探します。
もしお使いのプランが無料プランであっても、ここでは有料素材を選んでOKです。
むしろ有料素材の方がキレイな写真が多いので、有料素材をおすすめします。
写真をクリックしただけでは課金されないのでご安心を！
Step2. 四角を用意する
ダッシュボードの『素材』の『線と図形』から四角の図形を選択します。
もしすぐに見つからなければ、検索窓から「四角」を検索してください。
四角を4つに増やします。
ダッシュボードの四角を４回クリックです。
ちょっとだけずれながら４つの四角がキャンバスに出てきます。
四角の辺のちょっと太くなっているところをクリックしながら動かして大きさを変更します。
適当な大きさにしたら、四角の辺や頂点以外の部分をクリックしながら移動させます。
大きさは半分より大きいもの、中くらいの、小さいのが2つ出来ればOKです。
四角のそれぞれの大きさはこんな感じ
▼▼▼
ざっくり使う色の比率の大きさになっています。
Step3. ベースと文字用の色を指定する
ベースにほんのり色を付けたいとか
濃い青系の色にしたいとか、茶色っぽくしたいとか
そういった要望がなく
「白と黒でOK！」
という方は、四角の色を
- ベースの色：#ffffff
- 文字用の色：＃333333
にしましょう。
意外と素人がこのベースと文字用の色を上記の色以外にしようと思うと大変なので、さくっと上記の色にしちゃうのがおすすめです。
私はこだわろうとした結果、ハチャメチャに時間がかかりました。
意外とね…白って難しいんですよ…
「お前、大きくなったらこんな色してたんか」
「他の色の邪魔をしないで…！！」
ってなります。
それでもこだわりたい人は次のステップで色を探しましょう。
メインカラーを白にする場合は、もうキャンバスが白なので四角を消してOK。
文字用の四角の色を黒（＃33333）にするには、
- 四角をクリック
- 画面の左寄りにある色のついた四角いアイコンをクリック
- ダッシュボードに出てきた、一番左の+マークがついてる虹色のアイコンをクリック
- 下に出てきたカラーコードを入力する場所に333と入力
これでOKです。
ここでは＃333333と入力しなくても、333で自動的に＃333333として認識してくれます。
Step4. 写真から色を抽出する
メインカラーを想定した四角をクリック。
画面左寄りの色のついた四角いアイコンをクリック。
この時点でなんと！
下の方に写真に使われている色が自動で出てきます！！
もしここで気にいる色が見つからなくても大丈夫です。
Canvaにはさらなる機能があります！
- ダッシュボードにある一番左の+マークがついてる虹色のアイコンをクリック
- 下の方に出てきたスポイトマークをクリック
- カーソルを写真の好きな色の場所に持っていってクリック
円の中が写真を拡大して1px単位で表示させたもので、円の中心の色が抽出されます。
同じようにしてアクセントカラーも写真から色を抽出します。
アクセントカラーを想定した四角をクリックして、同じ作業をします。
写真の中で、面積は広くないけど目立つ色を抽出するといい感じです。
ロゴになった状態などをイメージしにくければ、『素材』から適当なイラストを選択して色を変えてみるのもおすすめです。
「コーヒー」や「花」といったキーワードを検索して、シンプルなイラストを選択しましょう。
色を変える四角いアイコンが出てきたら色を変えられるイラストです。
色を変えられないものもあるので注意してください。
Step5. カラーコードをメモ
カラーが決まったら、最後の作業です。
- メインカラーの四角をクリック
- 色の変更アイコンをクリック
- 左端の+マークがついた虹色のアイコンをクリック
- 下に出てきたカラーコードをメモ
カラーコードはメモ帳などにコピペしておきましょう。
アクセントカラーも同様にカラーコードをメモします。
ベースカラーや文字用の色を変更している人はそちらもメモしておきます。
Step6. ブランドカラーを登録する
- カラーを選択する画面を開く
- 「ブランドキットにカラーを追加」をクリック
- カラーパレットにカラーコードを入力
カラーコードを入力したら、隣に出てきた+ボタンを押しましょう。
次のカラーを登録できます。
これで色の選択画面で常に表示されるようになります。
次回から簡単に登録してあるカラーを使うことができます。
ここで黒の#333333も登録しておくと便利です。
注意点
無料プランだと、登録できるカラーの数は3つまでです。
ベースカラーを#ffffff以外にしていた場合、使いたい色が４つになるので全部は登録できません。
４つの色を登録しておきたい場合は、有料プランにアップグレードしましょう。
有料プランは使える素材が増えたり、使える機能が増えるので非常におススメです。
30日の無料トライアルもあるので、ちょっとお試ししてみるのもいいかもしれません。
有料プランを使ってみたガチなレビューはこちらをご覧ください。
▼▼▼
