Webサイトをデザインする際には、ユーザーに与える印象や見やすさなどを考慮して、適切な配色を心がけることが重要です。しかし、配色に関する知識や経験がない場合、どのように色を決めるべきか悩むことでしょう。
この記事では、Webデザインにおける配色の基本、トーンや色ごとのイメージや参考になるサイトを紹介するので、ぜひ参考にしてください。
→テンプレートからすぐにサイトが作れる「BiNDup」を30日間無料体験する
Webデザインにおける配色の重要性
人は色やデザインなどの視覚から得る情報に影響を受けやすいといわれています。Webデザインも同様で、色によって与えるイメージが異なります。そのため、Webサイトを制作する際はユーザーに与える印象や情報を考慮し、配色を決めましょう。
Webデザインで知っておくべき配色「3つのカラー」とは
Webデザインの配色を考える際には、知っておきたい3つのカラーがあります。その3つとは「ベースカラー」「メインカラー」「アクセントカラー」の3種類です。基本的には、ベースカラー70％、メインカラー25％、アクセントカラー5％という割合で配色すると美しいとされています。以下では、カラーごとの特徴を解説します。
BiNDupのテンプレート TALKTALK English Club｜アクセントカラーのイエローを目立たせたいコンバージョンボタンに使用
ベースカラーとは
ベースカラーとはその名のとおり、制作するWebサイトのベース（基本）となる色のことです。
Webデザインでは背景や余白などといった面積の多い部分に使用されます。比較的ベーシックなカラー、たとえば白や黒、グレーなどを使います。メインカラーやアクセントカラーを引き立てる役割があります。
メインカラーとは
メインカラーとは、制作するWebサイトのイメージを表す色です。Webサイトの印象を決定づけるカラーとなる、いわば主役の色です。そのため、メインカラーを最初に決めておくとよいでしょう。また、好きな色を選ぶのではなく、ターゲット層のイメージにあう色、Webサイトや自社製品などのイメージにあう色を探すことが重要です。
アクセントカラー
アクセントカラーとは、制作するWebサイトのワンポイントとなるような色です。アクセントカラーは使用量こそ少ないものの、Webサイトでは目立つ色です。Webサイトを引き締めたり、目を引いたりする役割があります。
メインカラーと同系色だと目立たないため、反対の色を選ぶようにするといいでしょう。
→テンプレートからすぐにサイトが作れる「BiNDup」を30日間無料体験する
色の「3つの属性」とは
色には3つの属性があります。ここでは、「色相」「彩度」「明度」という3つの属性について詳しく解説します。
色相
色相とは、簡単にいえば色味の違いです。たとえば、赤や青、黄や緑というように、色相によって色の性質が変化します。
彩度
彩度とは、色の鮮やかさを表しています。各色相の中にも彩度があり、もっとも鮮やかな色のことを「純色」と呼びます。
明度
明度とは、色の明るさを表しています。明度が高いほど白に近くなり、明度が低ければ低いほど暗く黒い色に近くなります。
Webデザインではトーンの意識が大切
Webデザインでは、トーンを意識しましょう。トーンとは、色調のことで明度と彩度で表されます。もっとも彩度の高い純色を基本として表し、白を加えることで明度は高くなりますが彩度が低くなるという反比例の関係になっています。
トーンの種類により、イメージが異なるため、Webデザインの配色を決める際にはトーンの種類を理解しておくとよいでしょう。
→テンプレートからすぐにサイトが作れる「BiNDup」を30日間無料体験する
vivid（ビビッド・純色）
ビビッドとは、基本となる純色のことです。鮮やかな印象があるため、目立たせたい場合に効果的です。アクセントカラーとして少量使うとよいでしょう。
light（ライト）
ライトは、健康的で陽気なイメージを与えるトーンです。ビビットよりも穏やかなトーンのため、爽やかさも感じられます。
strong（ストロング）
ストロングとは、ビビッドより深みのあるトーンです。インパクトや強烈な強さを与えるため、印象に残りやすくなっています。
deep（ディープ）
ディープとは、力強さや深みを兼ね備えており、安定感や安心感のあるトーンです。上質な木材のブラウンと相性がよく、日本の伝統家具などにも向いています。
peal（ペール）
ペールとは、パステルカラーのことです。淡い色合いでやさしいイメージのトーンで、爽やかで澄んだ印象を与えます。
soft（ソフト）
ソフトとは、中彩度・中明度のトーンのことです。穏やかな雰囲気があり、親しみを感じやすいカラーだといえます。
dull（ダル）
ダルとは、中間色のことです。ダルには鈍い色という意味があり、その名のとおり地味な印象で目立ちにくいトーンとなっています。
dark（ダーク）
ダークは渋いイメージのあるトーンで、熟成した印象を与えます。そのため、アンティーク調のデザインとなじみやすくなっています。
very peal（ベリーペール）
ベリーペールとは、純色にもっとも多く白を混ぜた色です。淡くやさしい雰囲気があり、かわいらしいイメージもあります。
light grayish（ライトグレイッシュ）
ライトグレイッシュとは、落ち着きのあるトーンです。適度な明るさと濁りを感じられるトーンとなっています。
medium grayish（ミディアムグレイッシュトーン）
ミディアムグレイッシュトーンとは、くすみのあるトーンです。曖昧さや穏やかさがあり、アンニュイな雰囲気とよくあいます。
dark grayish（ダークグレイッシュトーン）
ダークグレイッシュトーンとは、気品や高級感が漂う色です。ただし、彩度が低いため視力が弱い場合は判別しにくくなりがちです。
dark grayish（ベリーダークトーン）
ベリーダークトーンとは、純色にもっとも多く黒を混ぜたトーンです。重厚感のあるイメージで、ムーディーな雰囲気になじみやすくなっています。
色ごとのイメージ
色によっても与えるイメージは異なります。以下では、色ごとにどのような印象を与えるのかを解説します。
赤
赤は、エネルギッシュさやパワフルさのあるカラーで、ポジティブな印象を与えます。インパクトがあるため、商売においてはセール品などに使われるケースも多く、購買意欲を増す効果があるともいわれています。
ただし、怒りなどを表すカラーでもあるため、場合によっては暴力的、攻撃的といった印象を抱かせる可能性もあるようです。
橙・オレンジ
橙・オレンジは、ポジティブなイメージのある色です。また、活発なイメージや陽気なイメージもあります。食欲を増す効果があるともいわれており、飲食関連のWebサイトや食品などのパッケージにもよく利用されています。明るくてカジュアルな雰囲気もあるため、大衆的なイメージを与えることも可能です。
黄
黄は、明るい印象を与える色です。幸せや希望などを表したり、光が差し込むイメージだったりと、ポジティブな意味合いを感じさせます。賑やかさや快活さがあるため、キッズ用のサイトや商品などに使用されます。また、目を引く色でもあるため、黒と組み合わせることで注意を促す効果もあります。
BiNDupのテンプレート SAPPORO SR｜赤〜黄色系のグラデーションを大きく打ち出してエネルギッシュなイメージに
緑
緑は、森林や草花などの色のため自然を感じることができ、エコや環境と結びつきやすい色です。また、穏やかな印象がある色のため、リフレッシュできる、安心できるなど、穏やかな印象が強い色だといえるでしょう。ネガティブな印象を与えにくい色ではありますが、中間色のため強いインパクトを与えることは難しくなっています。
青
青は、寒さや冷たさなどをイメージさせる色で、清涼感があります。また、空や水などのイメージも強いため、自然を感じられる色でもあります。男性向けの商品やサービスに使われることが多く、誠実さや落ち着いたイメージがあります。そのため、スーツやシャツなどにもよく使われます。
BiNDupのテンプレート BANANA PAIN CLINIC｜ベース、メイン、アクセントを緑・青系で統一して、爽やかなイメージに
紫
紫は、高貴なイメージや神秘的な雰囲気を感じさせる色です。赤と青という正反対の色を混ぜて作られており、暖色と寒色の特徴をあわせ持っています。そのため、深みがありミステリアスな雰囲気を与えます。また、日本では古くから地位の高さを表す色です。着物などにも使われており、和の色としての印象が強い色でもあります。
黒
黒は明度や彩度のない色で、硬さや重さを感じさせる色です。シックさや高級感を演出することができ、洗練されたイメージも与えられます。落ち着きのある色ですが、使い方によってはネガティブな印象になるため注意が必要です。
BiNDupのテンプレート SHIGEMOTO SUSHI｜黒をベースにして、高級で重厚感のあるイメージに
白
白は万能カラーで、他の色との相性が非常によいカラーです。清潔なイメージがあり、病院やホテルなどでよく使われています。白だけだと味気なく殺風景になるため、配色を考えながら他の色と組み合わせて使うのがおすすめです。
灰・グレー
灰・グレーは白色と黒色の中間色です。主張が控えめなカラーでもあるため、どの色とも相性がよく、ベースカラーとしても向いています。また、高級感や上品さ、スマートなイメージなどがあり、大人っぽい印象も与えます。
BiNDupのテンプレート DAISY Rental Spaces｜白ベースに淡めの色を組み合わせ、上品でやさしい印象に
Webデザインの配色で気をつけるポイント
Webデザインの配色を考える上で気をつけたいポイントがあります。以下では、ふたつのポイントについて解説します。
色を使いすぎるとまとまりがなくなる
Webデザインでは、色を使いすぎないことが重要です。多くの色を使うとまとまりがなく、統一感がないように見える、ごちゃごちゃした印象を与える可能性があります。そのため、基本的には3～4色程度に押さえるとよいでしょう。
色を多く使いたい場合は、メイン・アクセントカラーと色相が近い色を選び、まとまりを出すのがおすすめです。
ユーザーが見やすい色を考える
Webデザインの場合、ユーザーの閲覧環境がそれぞれ異なるため、薄すぎる色を使うと意図したデザインに表示されない可能性があります。また、背景色と文字色のコントラストにも注意しましょう。背景色と文字色のトーンが似ていると文字が読みにくく疲れてしまうため、離脱の可能性が高まります。ユーザーの視覚的負担を減らすことを意識しましょう。
→テンプレートからすぐにサイトが作れる「BiNDup」を30日間無料体験する
Webデザインの配色を考えるときに参考にしたいサイト
Webデザインの配色を考える際には、サイトやツールを使うのも効果的です。ここでは、配色の参考になるサイトを紹介します。
Adobe Color CC
Adobe Color CCは、Photoshopなどの他のAdobe製品とも同期できるため、Adobeユーザーにおすすめのサイトです。カラーホイールを直感的に操作して配色パレットを作成でき、初心者でも扱いやすくなっています。
PALETTABLE
PALETTABLEは、色を「好き」か「嫌い」という判断基準を基にして選び、パレットを作成する仕組みです。その色が好きか嫌いかで判断していくため、色や配色についての知識がなくてもパレット作成が簡単に行えます。
Hue 360
Hue 360は、カラーパレットの作成が簡単に行えるツールです。まず、彩度を選択し表示されるカラーホイールで色を選びます。選んだ色にあうものが残っていく仕組みとなっているため、自然にセンスのよい配色ができあがります。
BiNDupのテンプレートなら配色のカスタマイズも簡単
Webデザインの配色を決める際は、どのような色を使うかだけでなく、トーンや配色バランスなどに気をつける必要があります。Webデザインの配色はセンスや知識が問われますが、一からそれらを磨くには時間がかかってしまいます。
BiNDupは、Webデザインのスキルや知識がなくても、簡単にセンスのよいWebサイトを作成できるサービスです。デザイン性の高いテンプレートを選択できるだけでなく、テンプレート全体の配色やフォントカラーなどの配色もDress機能で簡単に設定・変更できます。Webサイト制作をお考えなら、ぜひ登録してみてください。
POINT
- Webデザインの配色ではベースカラー、メインカラー、アクセントカラーの割合に気を付ける
- 伝えたいイメージに合わせた色のトーンを選ぶ
- コーポレートカラーや業種に合わせて色を組み合わせる