ホームページ配色の基本テクニック

ホームページを作成する時、必ず迷うのが「配色」です。
専門的な人材がいれば問題ないのですが、一人のWebの担当者で全てまかなわないといけないような会社も多くなっています。色について学ばないまま何となく配色してしまうと、締りがなかったり、印象が曖昧なホームページに仕上がってしまいます。
そこで「自分は色彩センスが無いから…」と嘆いているWeb担当者様。諦める必要はありません。
ホームページの配色は、色の基本とちょっとしたルールを押さえれば、それなりのものに仕上げることができます。

今回は、プロのデザイナーでなくても良い配色ができるようになるための、色彩に関する基本と色を選ぶときのコツをご紹介します。
ホームページ以外の制作物（企画書など）にも使えるテクニックなので、ぜひ覚えてみてください。

色の基本中の基本。色の三属性について

色は色相、彩度、明度の3要素で構成されています。
まずはそれぞれをご紹介します。

色相とは

青、赤、黄、緑など色味を指します。
色相環というもので表現されています。

彩度とは

色の鮮やかさを指します。
彩度が高ければ高いほど鮮やかになり、彩度が低ければ低いほどくすんだ色味になります。彩度が最も低くなるとどんな色でも無彩色（グレー）になります。

明度とは

色の明るさを指します。
明度を高くすると明るくなってやがて白に、反対に低くしていくと黒になります。
簡単に言うと、色とは色味と鮮やかさと明るさで出来ています。

それに加えて、トーンという要素を知っておくと便利です。
トーンとは、明度と彩度をプラスしたものです。

色のトーンを揃えると、イメージを作り出しやすくなります。
下の図はトーン別に色相を表現していますが、なんとなくイメージしていただけるでしょうか。

出典：色カラーhttp://iro-color.com/colorchart/tone/

例えば「かわいらしい感じ」を出したければ13番の「very pale tone」か9番の「pale tone」を、「派手」にしたい時は1番の「bright tone」か2番の「vivid tone」を使用する、というようなになります。
トーンを考慮することで、配色の幅は間違いなく広がります。

配色を決める方法

色の基本を覚えたら、次は配色を決めます。まとまりのある配色をする上で大切なのは、使う色の面積比（割合）です。
同じ配色でも面積比が違うと、印象は大きく変わります。

作業前に、色の面積比のカラーパレットを作っておくことで効率的に作業を行えます。

面積比率は以下の通り。

・ベースカラー（全体のイメージを作る色、背景に使う）：70％
・サブカラー（ベースカラーを補う色）：25％
・アクセントカラー（強調色）：5％

数字はあくまで目安と考えてください。

１．ベースカラーとサブカラーを決める

ベースカラーとサブカラーで全体の色のイメージを作ります。
コンセプト に合わせた色やターゲットユーザが好むであろう色にすることをオススメします。

初心者の場合は、ベースカラーとサブカラーを同じ色同士で構成し、統一感が出てると無難な仕上がりになるので試してみてください。
その場合は、サブカラーを濃い色、ベースカラーを薄い色にするとよいでしょう。
（印刷物やホーム ページ では文字を読ませるのが重要なので、薄い背景を使うことが多くなります。）

２．アクセントカラーを決める

アクセントカラーは、目立つ色にする必要があるので、メインカラーとベースカラーとは全く異なる色を使いましょう。
補色を使うとバランスが取れやすいので、慣れないうちは補色をアクセントカラーにおきましょう。（補色とは、色相環の円の反対側に位置する色のことです。）

３．３色では足りない場合はセパレーションカラーを使う

ホームページを作成していると、使用できる色が３色では収まらないケースが多々発生します。そんな場合は、セパレーションカラーを作って色を増やします。
ベースカラー、サブカラー、アクセントカラーを分割して増やしていきます。

同じ色相でトーン違いの色を作る方法と、トーンが同じで色相が違う色を作る方法があります。

セパレーションカラーを増やしすぎてしまうと、サブカラーとアクセントカラーの比率が変わってしまい、元のイメージを壊してしまうので、注意しましょう！

セパレートカラーの増やし方の例

まとめ

以上のことを押さえれば、ある程度まとまりのある配色を行うことができます。
色の基本を抑えることも大事ですが、一番重要なのは、 ターゲットユーザー に受け入れられるにはどのようなイメージを打ち出せばいいのか、どのようなホームページを作成すればいいかをしっかり考え、計画立てることです。
独りよがりなホーム ページ デザインにならないよう、常に ユーザー を意識したホームページ作りを心がけましょう。

このニュースに関連するカリキュラム

LPOカリキュラム一覧

効果的なホーム ページ ・ ランディングページ の作成を順を追って説明しています。配色のみにこだわらず全体的な構成もしっかり考えましょう。