Webデザインを作るうえで、色の配色は相手に情報やイメージを伝える大切な要素です。
Webサイトのテーマに合わせた配色を考えたいけれど、
「Webデザインに効果的な色の選び方がわからない」
「Webデザインの配色に関する基本を学びたい」
とお悩みの方も多いのではないでしょうか。本記事では、Webデザインの配色で押さえたいポイントや配色選びに役立つサイトについてご紹介します。ぜひ最後までご覧ください。
Webデザインの色の基本
色に関する基礎知識を持つことは、ユーザーに伝わるWebデザインを作るうえで非常に大切な要素です。色は色相・明度・彩度の三要素から成り立っており、それぞれの性質を理解すると、バランスの取れた配色ができるようになります。
たとえば、Webサイトを見るユーザーに落ち着いたイメージを持たせたいときは、低彩度で鎮静作用のある寒色を。反対に、興奮を伝えたいときは高彩度な暖色を。あえて寒暖を感じさせたくないときは中性色を用い、引き立てたいときは無彩色を活用するなど、相手に伝えたいイメージに合わせて配色すると効果的なWebデザインができます。
色相
色相とは色を構成する三要素の一つで、イメージを決定するのに最も重要な要素です。色相は、それぞれの色味の違いを表しています。たとえば、虹のように赤→橙→黄→緑→青→紫と色味がグループに分かれているものをイメージするとわかりやすいでしょう。
また、色相を円状に配置したものを「色相環」といいます。さらに、色相環のうち、赤のなかにも赤紫や朱色など複数の色があるように、隣同士や近くに配置された色のことを「類似色相」といいます。
色相を正しく理解し活用することは、配色選びに必要不可欠ですので、ぜひ理解しておきましょう。
トーン
色の三要素のうち、明度と彩度を合わせた概念を「トーン」と表現します。PCCS（日本色研配色体系：Practical Color Co-ordinate System）*1とは、トーンをグループ分けしたカラーシステムのことで、下の表のように縦軸を明度、横軸を彩度として表しています。
このように、それぞれの配色グループごとに異なった印象を与えるのが、トーンの持つ効果です。これらのトーンを参考に配色を決めていくと、統一感のあるWebデザインが行えるでしょう。Webデザインを構成する要素についてくわしく知りたい方は、ぜひこちらの記事もあわせてご覧ください。
Webデザインにおける配色の「3つのカラー」
Webデザインにおける配色を決める際に意識すべきポイントは、配色するカラーを3つに絞るということです。たとえば、
- ベースカラー：70％
- メインカラー：25％
- アクセントカラー5％
といった比率で組み合わせると、バランスが取れて統一感のある美しい配色にすることができます。
それでは、3つのカラーが持つ役割や効果、比率の理由についてくわしく解説していきます。
Webデザインのベースカラー
Webデザインにおけるベースカラーは、Webサイトの背景や余白のような、大きな面積を占める配色を指します。ベースカラーの比率を全体の70％にすることで、メインカラーやアクセントカラーの効果を引き立てることができます。
ベースカラーを決定する際は、基本的に濃い色は避けた方が良いでしょう。背景や余白が濃い色だと、Webサイト上の文字や画像などが見にくくなってしまいます。そのため、一般的には明度の高い、白やライトグレーなどを配色することがおすすめです。
Webデザインのメインカラー
メインカラーは、Webサイトの印象を決定づける色です。そのため、Webデザインを通じて最も相手に伝えたいテーマを参考に配色すると、伝わりやすいデザインができます。たとえば、Webサイト上で使用するロゴのカラーをメインカラーに設定すると、全体的な統一感を作り出すことが可能です。
メインカラーを決定する際には、明度の低い濃い色を選択すると、ベースカラーとの対比で引き立ちやすくなります。Webサイトのブランドイメージや、相手に与えたい印象から選定すると、よりユーザーに届きやすいWebデザインができます。
Webデザインのアクセントカラー
アクセントカラーは、Webデザインにおける差し色となります。アクセントカラーを用いる箇所は、とくに相手に主張・強調したい箇所や、Webデザインを引き締めたい箇所に活用すると良いでしょう。
メインカラーとベースカラーに対し、アクセントカラーの比率は全体の5％程度です。目立たせたい箇所に使用するため、色相のうち明度差や彩度差を持たせることが大切です。
Webデザインの配色のコツと気をつけるポイント
これまで配色にまつわる基礎知識をお伝えしてきました。ユーザーの心を引きつけるWebデザインを作るためには、適切な配色の選び方やコツがあります。ここからは、配色の基礎知識をもとに、配色の際に押さえておきたいコツや気を付けるポイントについて解説していきます。
コンセプト
Webデザインの配色を選ぶ際、まず押さえておきたいのがサービスやブランドのコンセプトです。どんなサービスやブランドにも、ユーザーに伝えたいイメージや大切にしたいコンセプトがあるでしょう。個人や企業の大切な価値観を、Webサイトに反映させるのも、Webデザインが持つ大切な役割の一つです。
そのためには、Webデザインを通じて届けたいサービスやブランドのコンセプトを理解することが重要です。ロゴやブランドカラーがあれば、それらを参考にWebデザインの配色にも一貫性を持たせると良いでしょう。
たとえば、青は信頼性や安心感を、赤は活気や情熱を表現する際に用いられます。サービスやブランドの目的を考慮した配色をすると、ターゲットユーザーに伝わるWebデザインにすることができます。
視認性
ユーザーに届くWebサイトにするためには、ユーザーがストレスなくWebサイトを閲覧できるような工夫も必要です。ベースカラーとの対比関係にある色相から文字色を選定するなど、視認性を高められる工夫を施すようにしましょう。
たとえば、ベースカラーが白だった場合、色相環のなかでも明度が低い青や紫は視認性が高く、明度が高い黄色や橙などは視認性が低くなります。このように、色と色同士が近い類似色相での組み合わせは視認性が低くなるため、意図したものでない場合は避けることが望ましいでしょう。
競合サイトの色
配色を決める際の要素として、競合サイトの配色を研究することも非常に大切です。競合サイトの配色を研究していくと、ブランドカラーの差別化や配色の欠点や改善点の発見につながります。くわしく解説していきます。
- ブランドカラーの差別化
- ブランドカラーが競合と類似していると、ブランドの独自性やブランド力をアピールすることが難しくなってしまいます。Webデザインに取り掛かる前段階で、競合他社のサイトを研究し、ターゲット層や目的、サービス内容について情報収集しておくことが大切です。
- 配色の欠点や改善点の発見
- 実際に競合他社のサイトへ訪問したり、サービスを利用してみるのも効果的です。実際に体験してみることで、コンセプトカラーの選定や視認性などの配色の欠点及び改善点を発見することができます。この際、ただ欠点や改善点を発見するために行うのではなく、あくまでも自社のWebデザインをより良いものにするための参考とするようにしましょう。
Webデザインに必要なスキルをもっとくわしく知りたい！という方は、ぜひ下記の記事も合わせてご覧ください。
Webデザインの配色パターン選びに役立つおすすめサイト
Webデザインの配色のコツや気をつけるべきポイントについて解説してきました。Webデザインを行ううえで、配色選びに悩む方も少なくないでしょう。また、Webデザイン初心者だと、なおさら配色選びに時間がかかってしまうかもしれません。
そのようなときは、配色パターンを自動で提案してくれるサイトを活用してみるのもおすすめです。ここからは、配色パターン選びに役立つサイトを2つご紹介します。
Adobe Color
「Adobe Color」とは、Adobe（アドビ）が提供している無料の配色デザインソフトです。Adobe Colorの機能はご自身もしくは他のクリエイターがカラーテーマを作成し、そのテーマやインスピレーションを共有できます。
使い方はシンプルで、
- カラーハーモニールールを選択
- カラーホイールを動かす
- カラーコードをコピー
といった3つのステップでカラーテーマを選び設定していくことができます。また、ご自身でカラーテーマを選択するのが難しいと言う場合は、トップヘッダーにある「探索」タブから探索機能を活用することもおすすめです。
そのときどきのトレンドやイメージから、膨大な量のカラーパレットが表示されます。ぜひ、Webブランドコンセプトに合った配色パターンを見つけてみてください。
HUE/360
もう一つご紹介したいのは「HUE/360」という配色デザインサイトです。HUE/360は、一つの色を選択すると、その色に合った配色を自動で選定してくれるといった特徴があります。
こちらも使い方はとても簡単です。
- カラーパレットからメインカラーに当たる色を選択
- 選択した色に合う色が表示されるため、アクセントカラーを選択
- [Shiftキー]を押しながらベースカラーにしたい色を選択
- サイト全体の配色が選択した色に変化
- 左下のカラーバーの[Print User Color]を選択
- ウィンドウが出現し、選択した配色のカラーコードが表示される
このように、クリックしていくだけでバランスの取れた配色パターンを選ぶことができる、便利な配色デザインサイトです。
配色の基本を学び、心を引きつけるWebデザインを作ろう！
ユーザーの心を引きつけるWebデザインにするためには、色の持つ効果を学び配色に工夫を施すことが大切です。色の三要素に関する知識や配色のコンセプト・視認性・競合調査などが必要であることがおわかりいただけたのではないでしょうか。
今回はWebデザインの配色に関する基礎知識についてご紹介しましたが、ユーザーに伝わるWebデザインを作るためには、配色以外の知識やスキルも必要です。
女性向けキャリアスクールSHElikes（シーライクス）では、Webデザインの基礎からデザインツールを使用した制作、コーディングまで幅広い知識とスキルを習得することができます。
Webデザインについてもっとくわしく学んでみたい！という方は、ぜひ一度無料体験レッスンに参加してみてはいかがでしょうか。
女性向けキャリアスクールSHElikes無料体験レッスンはこちら
※引用
*1：日本色研事業株式会社｜PCCSのトーンより引用
