google-site-verification=Ki0Z2jblCbwU1amfJPZbQwjCyqmTvpZ-JMaCUZxQ2dg
Webデザイン PR

【色が決まらない…】初心者のバナー配色がスルッと進む3つの考え方

記事内に商品プロモーションを含む場合があります

こんにちは、もちこです。

バナーを作るとき、レイアウトまでうまくいったのに、配色をしようと思ったら…

あれ?どうしたらいいの?

と、手が止まってしまいそのまま白黒で保存、終了…なんてこと、ありますよね。

私もデザイン初心者のころ、最後の配色まで作り切れなかった経験あります。

配色で迷って決められない原因、結論からいうと、3つの考え方と順番を知らないからです。

この3つの考え方は

📍誰に伝えるのか(ターゲット視点)
📍どんな印象を与えるのか(世界観・イメージ)
📍どう組み合わせるか(3色配色ルール)

この3つの考え方を押さえておくことで、配色で迷うことはなくなります。

今回は、初心者さんでも迷わず配色がサクサクできちゃう

伝わるバナー配色の3つの考え方」を

初心者からデザインを学び、フリーランスのWebデザイナーになった私が、
初心者の頃悩んだバナーの配色について、体験を交えてお伝えしていきたいと思います。

なぜ初心者は配色で手が止まるのか?

配色でもよくあるのが、「最初に色を決めてしまっている」こと。

私も経験があります…

でも実はこれが一番時間を無駄にしてしまうポイントなのです。

色を決めるのは「最後」でいい理由

配色で悩む人がやってしまいがちなこと、それは、最初に色から決めようとする。

私もあります、そんな経験…

でも、正直それがいちばん時間を無駄にしてしまう原因です。

見出しの通り、色を決めるのは「最後」でOK。

なぜなら、色はだたの飾りではなく、「ターゲットに世界観を届けるための手段」だからです。

バナーで大切なのは、まずこの二つ。

📍誰に何を伝えたいのか
📍どこに目を引きたいのか

文字、配置、余白などこれらが整ってこそ色が活きてきます。

たとえば、新聞を想像してみてください。

白黒なのに目を引く広告ってありますよね。

つまり、色はなくとも「伝わるデザイン」は作れます。

ですので、色は伝えたいことをよりターゲットに伝えるためのスパイスのようなものだと思っていただければいいのかなと思います。

だから最後でOK。

色選びに失敗する一番の原因は“正解探し”

「良い配色ってどんな感じ?」「おしゃれに見える色ってどれ?」
そう考えて、あれこれ迷って、気づけば何時間もさまよっていた…そんな経験ありませんか?

私もデザインを学び始めたころ、配色に悩みまくって、結局“よく見る無難な色”でまとめてしまったことがあります。

今思えば、これは正解を求めすぎてしまった結果でした。

配色にもデザインにも、「これが絶対の正解!」というものはありません。

だからこそ大切なのは、「誰に、何を伝えたいのか」。
その構成を引き立てる色を選ぶことで、迷わず、伝わる配色に近づけます。

「伝わる配色」のための3つの考え方

では、「伝わる配色」ってどんなものなの?ということになりますが、3つの考え方についてお伝えしていきます。

① 誰に伝えたいか?“ターゲットの気持ち”で色を選ぶ

配色でミスってしまいがちなこと、それは、自分の好きな色を選んでしまうこと。

配色の考え方で一番大事なことは、ターゲットが好む世界観に寄せていくことです。

たとえば、ナチュラル志向のママ向けにするなら、落ち着いたアースカラーが◎

おそらくキラキラしたゴージャス系の配色にしてしまったらスルーされてしまいます。

ですので、配色のベースとなる考え方は、相手の気持ちを考えてみてくださいね。

② “印象”で色を選ぶ|意味よりも空気感が伝わるかが大切

色はそれぞれ、「青は信頼」「赤は情熱」など、色の持つ意味があります。

でも、それよりも見る人が、「これ、私のためのものだ、これなんか好き」と感じる空気感をつくること。

ターゲットにどんな印象をもってほしいのか、言葉のイメージから色を選ぶのもおすすめです。

たとえば『ひらめきデザイン引出し帖』では、「やさしい」「スタイリッシュ」など印象キーワードから配色が探せて、とっても参考になります◎

③ 3色でまとめる|配色は“引き算”が正解

迷いやすい理由のひとつは「色を使いすぎること」。

実は、伝わるデザインはたった3色で十分なんです。

  • ベースカラー(背景・土台):70%

  • メインカラー(主役):25%

  • アクセントカラー(注目):5%

この割合を意識すると、自然とデザインがスッキリ整いますよ◎

白黒レイアウトに色を足すとどう変わる?

別の記事

【初心者のバナー作り方】まずは白黒で“配置だけ”で整うレイアウト練習法

で、レイアウトを組んだ白黒のデザインに配色をしていきたいと思います。

色をのせると“誰のためのデザインか”が一目で伝わる

こちらのデザインは、ペルソナを次のように設定しました。

  • 名前:さやかさん
  • 年齢:42歳
  • 家族構成:高校生と中学生の子供がいる主婦(夫は会社員)
  • 住まい:郊外の一戸建て
  • 経歴:元一般事務(最近までパート勤務していた)
  • 性格:コツコツ型、慎重派だけど興味を持つをハマりやすい
  • 趣味:カフェ巡り、ナチュラル系雑貨が好き、バレットジャーナルにちょっと憧れている
  • デジタルスキル:Canva は無料版をたまに使う、デザインに興味あり、本格的にデザインを学んだ経験はない。
  • デザインを独学してみたけど、うまくなっている実感はない、誰かに教えてもらいたい

 

さやかさんが好きそうなもののヒント

  • 性格:コツコツ型、慎重派だけど興味を持つをハマりやすい
  • 趣味:カフェ巡り、ナチュラル系雑貨が好き、バレットジャーナルにちょっと憧れている

落ち着いた印象、ナチュラル系→Francfrancより、ニトリ・無印・IKEA・北欧雑貨系

くすみカラー、ベージュ、グレージュ、木の温もり系

さやかさんの気持ち

  • デジタルスキル:Canva は無料版をたまに使う、デザインに興味あり、本格的にデザインを学んだ経験はない。
  • デザインを独学してみたけど、うまくなっている実感はない、誰かに教えてもらいたい

初心者でもできそう、ハードルも低そうな印象だと安心する

ゴリゴリの体育会系というよりは、誰でも和める同行会系

丸っぽいフォントやあしらいで易しい印象にしたい

 

そんな、ペルソナさやかさんにぴったりな世界観は

ナチュラルカラー × 丸ゴシック × 余白広め × やさしい言葉

このようにペルソナの好みや思考から色を考え出していきます。

まとめ|色で迷っていたあなたへ伝えたいこと

色は、デザインの“飾り”ではなく、「伝える」ための大切な味方。

バナーの配色は、センスじゃなく考え方と順番で整います。

迷って手が止まってしまっていた方も、
今日からは「何を伝えたいか」「誰に届けたいか」から考えることで、配色の迷いがグッと減っていくはずです。

まずは白黒レイアウトでもOK。
最後に色をのせるだけで、きっと“伝わるバナー”に近づきます。

「できるか不安…」と思っていたあなたへ。
色はきっと、あなたの発信の味方になってくれます◎

最後まで読んでいただきありがとうございました。

もちこ

【参考文献】

  • 『ひらめきデザイン引出し帖』pasto著(株式会社 技術評論社 , 2022年 )

ABOUT ME
motico-marketer
地方在住、在宅でWebデザイン、グラフィックデザイン、SNS運用、Webマーケティングするフリーランス。 夫、高校生男子、中学生女子、シニアのダックスフンドと暮らしています。 在宅ワークのこと、中高生、犬との暮らし方について発信してます。