ものづくり経革広場の井上です。今回はホームページをデザインする際の配色のポイントについてご紹介します。これだ！という正解が決まっているわけではないですが、基本的な考え方はありますのでポイントを絞ってご紹介いたします。
この記事の目次
まずはじめに考える3つの色
ホームページを作る際にはメインカラーを先に決め、ベースカラー、アクセントカラーの順番で決めていきます。一つのホームページを例に紹介します。
メインカラー（上記の画像の紫）
メインカラーは、企業のロゴやコンテンツなどに使われる色です。メインカラーは企業の印象を大きく左右するため、色がもたらす効果についても考慮した上で決める必要があります。色がもたらす効果についてはこちらの記事を参照ください。
ベースカラー（上記の画像の背景色の白）
ベースカラーはホームページの背景となる色です。コンテンツの見やすさに大きく関わってきます。最近では白が一番使用頻度が高くなっています。目立たない色にするほうが写真や文字に集中でき、まとまった仕上がりにできること、また、メインカラーとの相性を考える際に合わせやすいことが理由として挙げられます。
アクセントカラー（上記の画像のオレンジ）
アクセントカラーは強調色とも言われ、メリハリや立体感を出すために部分的に使われる色のことです。 ホームページの印象を引き締めることができます。アクセントカラーは、メインカラーと色相の離れた色を選ぶのが一般的です。例えば、メインカラーが青ならアクセントカラーは赤やオレンジなど、色相の離れた色にすることで色鮮やかになります。同系色で揃えたい場合は濃い色をアクセントカラーとして利用します。
3つの配色方法
補色色相
補色色相（ほしょくしきそう）とは、ある色と色相環上で165～180度隔たりがある色、すなわち対向する位置にある色のことです。
参照：試験に出る色彩用語
色の差が大きいため、ダイナミックな印象やカジュアルな印象を与えることが可能になります。また、補色を少量用いることで、主となる色を強烈に引き立てることもできます。
対照色相
対照色相（たいしょうしきそう）とは、ある色と色相環上で120度から165度の隔たりがある色のことです。先程のホームページの紫とオレンジもこれにあたります。
参照：試験に出る色彩用語
補色と色あいが近く、ダイナミックな印象を与えることができます。補色と比べると色の距離は近く、選択肢も多いため、より多彩な印象形成が可能です。ロゴなどでは、補色よりも多く使われる配色です。
有彩色と無彩色
青や赤、黄などの色味を持ったすべての色を有彩色と呼び、白と黒およびそのグラデーション上に位置する灰色などの色味を持たない色を無彩色と呼びます。無彩色単色では無機質で固い印象になりがちですが、色味がないため、どんな有彩色と組み合わせても馴染む特性があります。
配色のポイント
色数はできるだけ少なく
色がまとまりなく感じるのは色数が多い場合だけです。有彩色と無彩色の2色のときにまとまりがないと感じることはありません。3色、4色と多くの色を取り入れようとすると、とたんに配色が複雑になります。つまり、出来る限り色数を抑えることがうまくまとめるポイントです。
色だけで目立たせたり意味を伝えようとしない
色数を増やそうとするのではなく他の方法と併用することが必要です。字を太くする、大きくする、左上に配置するなど他の方法で目立たせることもできます。そして何よりも大事なのは文字情報です。文字がしっかりしていれば、むやみに色付けしなくても、大事な情報は伝わります。
まとめ
配色についてはプロのデザイナーさんでも悩むぐらいに難しいものです。記事を書くにあたり色について調べましたが、本当に奥の深い分野です。また、受け取る人の属する社会や文化によっても色の与える印象は異なります。基本の配色だけは抑えた上で、色だけに頼らず、文字やそのサイズ、太さなどトータルでしっかり伝わる形を作ることが重要だと思います。
新規顧客獲得につながるWebサイトを企画・制作
「モノカク」を運営するテクノポートでは「技術をマーケティングする」という事業理念のもと、新規顧客獲得や技術の用途開発を目的としたWebマーケティングの支援を行っております。
過去に1,000社を超える製造業を中心とした技術系企業のWebマーケティングに携わった経験から、貴社の技術・製品に適した勝ちパターンをご提案。単なる会社紹介ではなく、新規顧客獲得につながるWebサイトを企画・制作します。
