チラシやwebデザインを作成する時には、読む人の興味や関心を惹きつけられるようなデザインにすることが非常に大切です。
見やすくて分かりやすいデザインを考えることは大切ですが、見た人の目を惹きつけるようなアクセントがあるとさらに良いですよね。
そこで今回の記事では、チラシやwebデザインにアクセントをつけるにはどうすれば良いのかについてご紹介します。
知っておきたい配色のポイントや、デザインのコツについても解説するため、ぜひ最後まで読んでみてくださいね。
目次
webデザインで押さえるべき配色の基本について
配色はただ単に好きな色を選べば良いわけではありません。
配色を考える際には、比率を意識する必要があります。
ここでは、どのような比率で配色を決めていけば良いかをご紹介します。
ベースカラー
まずは、ベースカラーを決めていきましょう。
ベースカラーとは、webデザインやチラシの基本になる色のことです。
大部分を占める色で、背景や余白になります。
ベースカラーは、全体の70パーセントを占めるぐらいの大きさにするとバランスが良くなります。
この色は、ページの背景となるため、あまり派手な色はおすすめしません。
無難に白や黒、グレーなどの落ち着いたシンプルな色にすることで、メインカラーやアクセントカラーの良さを最大限に活かせます。
ベースカラーは文字の間の色でもあるため、明度の高い色や淡い色にすると文字が読みやすく、おすすめです。
メインカラー
次にメインカラーを決めます。
メインカラーは、webデザインやチラシの雰囲気を決定づける役割がある主役の色です。
全体の25パーセントをこの色で彩ると、ベースカラーとの比率が良くなります。
メインカラーは文字を読みやすくするために明度が低い色がおすすめです。
明度が高いと、光が反射して文字が見えにくくなってしまいます。
どの色をメインカラーにするかは、どのようなターゲットを設定しているかによって異なります。
例えば、若者をターゲットにしているのであれば明るく元気なカラーにしたり、ある程度歳をとっている層をターゲットにする場合は、明度が暗めの落ち着いたカラーにしたりすると良いでしょう。
サイトによっては、ロゴのカラーをメインカラーとマッチさせているものも見られます。
アクセントカラー
最後に、アクセントカラーを決めます。
アクセントカラーは全体の5パーセントしか使用しません。
しかし、全体の印象をさらに引き締める役割を持つため、重要な色です。
見た人の記憶に残りやすい色でもあります。
アクセントカラーはベースカラーとメインカラーの単調さを補うための色です。
ページ全体にメリハリを付けたり、目立たせたい内容に使用したりします。
楽しい雰囲気を感じてもらいたい場合には、複数の色を使用しても大丈夫ですが、落ち着いた雰囲気を出したい時は、その他の色に合わせて選ぶと良いでしょう。
配色デザインのコツをご紹介！
01.原色を避ける
1つ目は、原色を避けることです。
思い描いたようなおしゃれなデザインにするために、原色や純色などの使用は避けるようにしましょう。
原色や純色を使って、おしゃれなデザインを作ることはかなり技術が必要です。
プロのデザインナーであっても、難しいと感じる人がたくさんいます。
具体的には、彩度と明度が100パーセントになっている色の使用を控えると良いです。
原色や純色を使用しない方が良い理由は、以下の通りです。
・光が反射して文字が読みにくい
・目がチカチカして疲れてしまう
・自然にある色ではないため、読んでいて違和感を与えてしまう
Webデザインを作るときには、カラーピッカーを左下に下げて明度や彩度を調節すると良いです。
もし、原色や純色をどうしても使いたいのであれば、ほんの少しだけ明度と彩度を下げて見てください。
02.漆黒や純白を避ける
2つ目は、漆黒や純白を避けることです。
実は、黒と白にはたくさんの種類があります。
すでに存在しているwebデザインを見てみると、そのどれもが少しずつ明度が高い黒を使用しているのがわかります。
また、白であれば少し黒が混じったグレーのような白が使用されており、漆黒や純白は使用されていません。
漆黒や純白だと、目が疲れてしまって読む気が失せてしまいます。
少し黒や白を加えることで、長文であっても読みやすいデザインにできます。
03.色の数を減らす
3つ目は、色の数を減らすことです。
色はたくさん使うとどれが本当に伝えたいことなのか、読み手に伝わりにくくなってしまいます。
色数が減ると、それぞれの色の強調効果が上がるため、何を伝えたいのかが分かりやすくなります。
グラデーションを使用すると、読み手の意識を引けますが、カラフルなものだと目がチカチカしてしまうため、2から3色ほどを使用してグラデーションにすると良いです。
色をたくさん使ってしまって、配色がイマイチになりやすい場合は、まずは白黒でデザインしてみてください。
白黒でも良いデザインができたら、そこに数色加えることでさらに素敵なデザインにできます。
04.キーワードに合うイメージカラーを選ぶ
4つ目は、キーワードに合うイメージカラーを選ぶことです。
伝えたい内容はどのような色が合うのかをデザインする前に、まずはしっかりと考えることが大切です。
例えば、ピンクをイメージカラーにするのであれば、可愛さや幸福、愛情などのイメージを読み手に与えられます。
その他にも、青をイメージカラーにするのであれば、知的さや信頼、爽快感などを印象付けられます。
テーマとイメージカラーが相違していると、読み手に違和感を抱かせてしまう可能性が高いです。
例えば、地球環境保全のwebサイトが真っ赤なイメージカラーであった場合、「自然」や「エコ」などの雰囲気からは、かけ離れてしまいますよね。
テーマと配色の違いに気を取られて、内容の部分に集中してもらえない可能性があります。
05.色の持つ効果を意識する
5つ目は、色の持つ効果を意識することです。
色はたくさんありますが、そのどれもが見る人に異なる効果を与えます。
人は、視界に入る色の影響を大きく受けています。
そのため、配色を決めるときにはターゲットにそのページを読んだ後にどのような行動をしてほしいかを基準にして決めると良いです。
例えば、セールを行うことを告知するwebページを作るとします。
この場合、赤を使うと購買意欲や高揚感を高められるため、効果的に読み手に影響を与えられます。
赤やオレンジなどの色は、衝動買いをさせやすくする効果が期待できるでしょう。
一方で、青を使用すると、冷静さや集中力を高める効果があるため、じっくりと商品を選んでもらえます。
セールのwebデザインは必ず赤を使用しなければいけないという決まりはありません。
ブランドのイメージや、ターゲットに合わせて使用する色を変化させると良いです。
06.ターゲットに合わせた配色にする
6つ目は、ターゲットに合わせた配色にすることです。
ターゲットが女性なのか男性なのかで、使用する色は大きく変化します。
また、ターゲットの年齢層や、どのような価値観を持つかによっても左右されます。
子ども向けに宣伝するのであればビビットなカラーを選んだり、高齢者向けであればシックで上品なカラーを選んだりすると良いでしょう。
アクセントカラーのデザイン例をご紹介！
白のボックスに赤いラインを引くと、上品なイメージにできます。
シンプルな色に目を引くような色があることで、見た人の記憶にも残りやすくなるでしょう。
また、文章の初めの文字だけ赤で色をつけると、そこから文章が始まっていることを意識づけられます。
まとめ
今回の記事では、デザインにアクセントをつける方法についてご紹介しました。
ぜひ今回の記事を参考にしてみてくださいね。
また、webデザインなどでお困りの方は、お気軽に当社までご連絡ください。
