【色がダサい】配色に悩む初心者Webデザイナーへ。色の決め方・センスを磨く方法

今回は、こんなお悩みを抱える方向けの内容です。

Webデザイナーを目指す方、駆け出しデザイナーの方で、色のセンスに悩む方は多いです。

ただ、デザインの勉強を始めて知ったのは、

Webデザイナーが配色を決める上で、センスや感覚に頼る必要はない

ということです。

なぜならWebデザイナーの仕事はアートや芸術作品を作るのではなく、ビジネスで使用する商用デザインを作ることだから。

もちろん、センスを磨く努力も大事ですが、まずはセンスに頼らない配色の知識を身につけることが優先かと思います。

この記事では、実経験を元に「センスや感覚に頼らずに配色を決める方法」を初心者向けに解説します。

初心者Webデザイナーは自分で配色を決めないで

まず重要な点ですが、初心者デザイナーが自分の感覚だけで配色を決めるのはおすすめしません。

なぜなら、ほとんどの場合それで失敗するから。

例えば、私が良くやっていた失敗例としては、

「赤系にしよう」などと方向性だけを決めた後、Photoshopのカラーピッカーを使い、感覚で色を選ぶといったことがあります。

すると、いろいろ試しているうちに、

と迷い始め、全然色が決まらないまま時間だけが過ぎていく、という状況におちいってました。

失敗しがちな配色の決め方がこちら

私のように配色で失敗しているデザイナーさんは意外と多いのではないでしょうか。

では一体、配色はどのように決めていけば良いのか？

具体的に解説していきますね。

初心者Webデザイナー向け配色の決め方3ステップ

ステップ1：トンマナの確認

最初のステップは「トンマナの確認」です。

トンマナとは？
「トーン＆マナー（Tone & Manner）」を略した言葉で、デザイン全体の雰囲気や統一感のことを指します。

たとえば、

もちろん、トンマナをそのまま全て守って作る必要はないです。

ですが、トンマナから大きく外れると統一感が失われ、見る人に違和感を与えてしまいます。

なので、まずは自分が作るテーマのトンマナをしっかり把握しておくことが大切です。

トンマナの確認方法

バナー作成をする場合は、「Google検索」と「Pinterest（ピンタレスト）」を使うのがおすすめです。

Pinterest
世界中のデザインを集めて、好みに合わせて保存・整理できる画像検索サービス。利用には無料会員登録が必要です。

トンマナを調べるために、GoogleとPinterestそれぞれで、

といったワードを検索します。

▼Googleの検索結果

▼Pinterestの検索結果

そして、出てきた画像をチェックし、共通点や気づいたことメモしておきましょう。

こちらを頭に入れて、そこから逸脱したデザインを作らないよう意識します。

バナーだけではなく、Webサイトを作る場合も同様ですね。

トンマナを調べる方法として、今回はGoogle検索とPinterestを挙げましたが、それ以外にも以下のサイトがおすすめです。

サイト名	特徴
BANNER LIBRARY	バナーを集めたサイト。テイストやカテゴリー、カラーから検索可能
LPアーカイブ	LPを集めたサイト。カラーやイメージ、カテゴリーから検索可能
SANKOU!	Webサイトを集めたサイト。業種、カラー、書体などから検索可能

ステップ2：参考デザイン探し

2つ目のステップは「参考デザイン探し」です。

先述したように、配色を自分の感覚だけで決めるのはおすすめしません。

そうではなく、参考となるデザインをいくつか探し、それを元に配色を決めていけば失敗しづらいですよ。

参考デザインの探し方

この2つを整理します。

「②デザインの要件」とは、依頼者からの要望のことです。

たとえば、

こういった要望があれば、必ず制作前に確認しましょう。

その上で、「トンマナ」と「要件」の両方に合う参考デザインを探していきます。

▼実際に選んでみた参考デザイン

ここでメモしておきたいのは、色そのものではなく「色の組み合わせ方」です。

たとえば、

こんな感じで、「どの色と、どの色を組み合わせるべきか」をメモしておきます。

ステップ3：配色を決める

最後は「実際に使う色を決める」ステップです。

ここではステップ2で選んだ「参考デザイン」を元にします。

ただし！参考バナーの色をそのままコピーするのはNG。パクリになってしまうからですね。

あくまで「色の組み合わせ」や「デザインの雰囲気」を参考にするに留めておきましょう。

おすすめツール	特徴
Color Hunt	4色の配色パターンが揃ったサイト
COOL COLORS	ベストな色の組み合わせを探せるツール
Magnific	画像をAIで高品質化・加工できるツール

例えば「Color Hunt」なら、今回はこちらのパターンが使えそうです。

Magnificの場合は、バナーやサイトのテンプレートを使います。

例えば、「青　バナー」といったキーワードで検索すると、さまざまなテンプレートが出てきます。

この中から、自分が作るデザインにマッチするものを選び、色や装飾を取り入れるといった感じですね。

この時、必ずしも一つの「配色パターン」や「参考バナー」にしぼる必要はないです。

例えば、上記のMagnificだと、青系のバナーの中に「強調カラー」が見当たりません。

そんな時は、他のサイトも利用して、いい感じの強調カラーを探しましょう。

私はPinterestで探すことが多いですが、今回なら「青色 バナー」といったキーワードで検索します。

検索結果の中から「この色なら、自分のデザインにも合いそう」と思うカラーを見つけてください。

▼ボタンの黄色が使えそうです

以上が、一連の流れになります。

このステップを使えば、初心者デザイナーさんでも、センスや感覚に頼らずに「失敗しない配色」が作れるようになりますよ。

配色のセンスをよくする3つの方法

最後に「配色のセンスをよくするために実践できる3つの方法」をご紹介します。

1：配色のルールをしっかり学ぶ

1つ目は、配色のルールをしっかり学び、知識として身につけることです。

私がそうでしたが、スクールなどで学んだ経験があっても、何度もデザインを作るうちに、いつの間にか独りよがりなマイワールド色を使うようになってしまう方は多いです。

▼おすすめ配色本

2：いいデザインをトレースする

2つ目は、初心者デザイナーの定番のスキルアップ法である「トレース」です。

トレースとは？
見本のデザインを下敷きにして、上からなぞっていく作業のこと。

▼例えばこちら

トレースのメリットは、「なぜこの色が使われているのか？」を考えながらやることで、いろんなことに気づけるからです。

例えば、

こういったポイントを意識しながらトレースをやっていきましょう。

そうすることで、自分の中に配色の引き出しがドンドン増えていきますよ。

▼トレースのやり方はこちら

3：とにかくデザインを作りまくる

3つ目は、とにかくデザインを作る経験を積むことです。

当たり前かもしれませんが、デザインは作れば作るほど上達します。

▼こちらが一例です

今見ると、本当にひどいなぁと思いますが、当時の私は「これが100％の完成度だ！」と信じて作っていました。

あれから6年ほどが経ち、膨大な数のデザインをみて学び、制作する中で、少しずつデザインを見る目が養われてきたと思います。

ちなみに、ここ最近作ったデザインは、私のポートフォリオで確認いただけます。
ココナラのポートフォリオはこちら

この実体験からつくづく感じるのは、

センスは生まれ持った才能ではなく、経験によって磨いていけるもの

だということです。

同じことを言っている本を以前読んだので、ご紹介します。

▼有名なクリエイティブディレクター水野学さんの著書です。

この本に、

センスは生まれついたものではなく、知識の蓄積で獲得するスキルである。

センスは知識からはじまる

という一節があります。

AIが進化した今、簡単なデザインであれば誰でも一瞬で作れる時代になりました。

ですが、そのデザインが「本当に良いものなのか？」を判断するには、デザインを見る力が不可欠です。

だからこそ、初心者はたくさんのデザインに触れて、自ら手を動かして作る経験を積むことが大切ではないかと思います。

その積み重ねが、少しずつ配色をはじめとするデザインセンスの向上につながっていくはずです。

まとめ：初心者デザイナーは「配色ブック」も活用しよう

本記事では「配色パターンのサイト」をご紹介をしましたが、「配色ブック」を活用するのもおすすめです。

▼おすすめ