【色がダサい‥】配色が難しいと悩む初心者Webデザイナーへ。色の決め方とセンスを良くする方法

こんにちは！Webデザイナーの@AoiDesignです。

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

Webデザイナーを目指している方や、駆け出しデザイナーが悩む「センス」や「配色」について、私自身の経験をもとにお話ししたいと思います。

以下は、私がデザインを始めた頃に作ったバナーです。

デザインに詳しくない方なら、「そこまで悪くないのでは？」と思ってくれるかもしれません。

ですが！いま自分で見ると相当ヤボったいと思うし、お客様に納品できるレベルではないです。当時は自信満々で提案していましたが…

そこから約6年間、数百件以上のデザインを作る中で、配色やデザインセンスについて何度も壁にぶつかり、自分なりに試行錯誤してきました。

ちなみに、ここ数年で制作したデザインは、ココナラのポートフォリオに収納しています。

Aoi Designココナラのポートフォリオ

どれだけ進歩したか興味があれば、ぜひ見てみてください笑

この記事では、私がこれまでの経験から得た

• 配色の決め方
• デザインセンスを磨く方法
• おすすめの配色サイトや参考本

これらを、初心者の方にも分かりやすく解説します。

それでは、さっそく見ていきましょう！

初心者Webデザイナーが配色を自分で決めるのはNG！

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

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

例外として、美大やデザイン専門学校で色彩を学んだ方や、生まれつき色彩感覚に優れている方は感覚でも大丈夫かもしれません。

ですが、私のようにセンスゼロ・未経験からWebデザインを始めた方は、まず間違いなく配色で苦戦します（涙

例えば、私は初心者の頃、バナーを作る時に「青系にしよう！」などと大まかな方向性だけ決めて、Photoshopのカラーピッカーで自分で色を選んでいました。

バナーの要素が少ないなら、それでもうまくいくことがあります。

ただ！文字が増えたり、装飾や図形を追加したりしてデザインが複雑になってくると、使う色の数もどんどん増えていきます。

すると、

• なんか統一感がない…
• 色の組み合わせに違和感があるゾ…
• やっぱり違う色の方がいいかも…

と、色の変更をやり始めます。

そして気づけば、あちこちの色を何度も修正するハメに。感覚だけでいろいろと色をコネクリ回し、泥沼にハマっていく‥

時間だけが過ぎていき、「なんかダサくない？」「しっくりこないなぁ」と違和感だけが残るという最悪のパターンを繰り返していました。

初心者Webデザイナーが失敗しがちな配色の決め方

私が考える「初心者Webデザイナーが失敗しがちな配色の決め方」がこちらです。

こんな感じで配色を決めてしまっている方も多いかと思います。

それでは一体、色はどのように決めればよいのでしょうか？

ここからは、初心者でも実践しやすい配色の決め方を、私の実体験も含めて具体的に解説していきます！

初心者Webデザイナーにおすすめ！配色の決め方3ステップ

こちらの3ステップを解説します！

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

ステップ1は、トンマナの確認です。

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

例えば、

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

もちろん、トンマナをそのまま全て守る必要はないですが、大きく外れてしまうと統一感が失われ、見る人に違和感を与えてしまいます。

トンマナ確認のやり方

バナー制作の場合は、Google検索とPinterestを使うのがおすすめです。

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

今回は仮に「男性向けの脱毛サロン」のバナーを作るとします。

その場合は、「男性　脱毛サロン　バナー」や「メンズ　脱毛　バナー」といったワードで検索します。

▼Googleの検索結果

▼Pinterestの検索結果

この時、出てきた画像を見て、共通点や気づいたことメモしておきます。

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

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

Google検索の他、トンマナの確認に私がよく使用しているサイトはこちら。

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

次のステップは、参考デザイン探しです。

冒頭でも書いたように、初心者は配色を自分の感覚だけで決めるのはおすすめしません。

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

参考デザイン探しのやり方

まずは、ステップ1で確認したトンマナと、今回制作するデザインの要件を整理します。

「デザインの要件」とは、デザインを作る上で必要となる条件のこと。

実際の案件ではお客様から要望をいただくことがあります。

例えば、

こういったクライアントの要望がある場合は、必ず制作前に確認しておきましょう。

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

今回は、「男性向け脱毛サロンのバナー制作」をテーマにします。

そこで、お客様からの要望が、

青色の爽やかな印象にしてほしい

だったと仮定します。

ステップ1を元に、実際に選んだ参考デザインがこちらです。

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

例えば、

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

そうすることで、色の組み合わせを自分の頭でゼロから考える必要がなく、配色の失敗を防げます。

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

最後に、実際に使う色を決めます。

ステップ2で選んだ「参考デザイン」をもとに選んでいきましょう。

ただ、参考バナーの色をそのままコピーするのはNGです。

パクリになってしまう可能性があるので、あくまで色の組み合わせや雰囲気を参考にし、自分のデザインに合わせて調整します。

私の場合は、配色ツールやMagnificなどを使いながら、配色を決めています。

例えば、Color Huntを使う場合は、以下の配色パターンが使えそうです。

Magnificは、バナーやWebサイトのテンプレートをダウンロードできるので、その機能を使います。

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

この中から、自分が作りたいデザインのイメージに近いものを選び、色（や装飾）を使わせてもらいます。

この時、必ずしも一つの配色パターンや参考デザインに絞る必要はないです。

例えば、配色パターンの中で「強調カラーがない」または「イメージと合わない」といった場合は、別のデザインも検索しましょう。

今回は例として、ボタンに使う強調カラーを、青色と相性の良い「黄色」にするとします。

その場合は、Pinterestなどで「青色 バナー」などのキーワードで検索します。

出てきたデザインの中から、全体の色味を確認し、「この黄色なら自分のデザインにも合いそう！」と思う色を取り入れさせてもらいます。

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

ここからは、色のセンスをよくするために実践できる3つの方法をご紹介します！

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

一つ目は、配色の理論やルールをしっかり学ぶことです。

デザインスクールや講座で学んだことがあっても、時間が経って忘れている方も多いと思います。

配色のルールを無視してデザインを続けていると、気づかないうちに独りよがりなマイワールド色になってしまうので要注意ですよ。

配色の理論・ルールは、本が一番手っ取り早く、かつ体系的に学べます。

まずは初心者向けの配色本を1冊読んでみることをおすすめします。

▼初心者向けおすすめデザイン本

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

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

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

▼私が初心者時代に行ったトレースの例

注意点として、単純に真似て作るだけでは、配色のセンスは鍛えられません。

トレースをするときは、「なぜこの色が使われているのか」を考えながら進めることが大切ですよ。

こういったポイントを意識しながらトレースすることで、配色のパターンやデザインの引き出しが少しずつ自分の中に増えていきます。

▼トレースの詳細は、別記事で解説しています

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

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

私自身の経験から言えるのは、デザインは作れば作るほど、どんどん上達していくものだということ。

冒頭でもチラッと紹介しましたが、初心者時代の私は、今見ると「素人っぽさ全開」のデザインしか作れませんでした。

当時の私は、これが100％の出来だ！と思ってデザインを作っていました…

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

そこで実感したのは、デザインのセンスは生まれ持った才能だけではなく、経験によって磨いていけるものだということ。

実際、有名なクリエイティブディレクター水野学さんの著書に、センスは知識からはじまるという一冊があります。

この本でいわれているのは、

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

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

ということです。

これは、私自身の経験からも本当にその通りだと思います。

今はAIの進化によって、バナーや画像などを誰でも一瞬で生成できる時代になりましたよね。

ですが、AIが作ったデザインが本当に良いものなのか、目的に合っているのかを判断するには、デザインを見る力が必要です。

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

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

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

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

いくつかおすすめを載せておきますね！