サイトの作り方

色を選ぶ

2007/02/20
2022/04/09

2色以上の色の組み合わせを配色と言います。その組み合わせは無限にあり、配色によって見る人に伝わるイメージが異なります。DTP、アパレル業界では常に配色が意識されておりWEBサイトでも同じです。

企業、地域、公共、民族、文化などに関わるWEBサイトを制作する場合様々な点に注意する必要がありますが、個人サイトの場合は細かいことにはこだわらず制作者の好きな色、センス、好みなど自由に決めることができます。

コカ・コーラの赤、全日空の青のように企業を表す色をコーポレートカラーと呼び、赤い缶を見ればコカ・コーラと連想できるなど商品訴求のため、企業にとっては重要なものです。

太陽を描く際、欧米人はオレンジ色や黄色で塗りますが、日本人は日本国旗の日の丸のイメージが強く赤色に塗る人が多いと言われています。

多彩な配色を使用する伝えたいことがうまく伝わらず結果的に見にくいWEBサイトとなってしまうため、まず初めにベースカラーサブカラーアクセントカラーの3色を選ぶことにしましょう。

  1. ベースカラー(基調色)

    ベースカラーとはWEBサイトの全体的な統一色で、第一印象を決める色でもあります。

  2. サブカラー(補助色)

    サブカラーとはベースカラーに変化をつけるために使用する色です。WEBサイトの印象はベースカラーとサブカラーの配色バランスに影響されるためベースカラーに調和する色を見つけ出すことが大切です。

  3. アクセントカラー(強調色)

    配色が単調になるのを防ぐ、目を誘導させたい場所に使用するなど、多用するのではなく部分的に使うことで効果が発揮される色です。映画「シンドラーのリスト」で全体が無彩色で描かれる中、赤い服を着た少女が登場するシーンなどのように強いインパクトを与えることもできます。

色が持つイメージを利用する

高級感のあるブランドでは黒を基調にした配色、地球環境保護訴えるWEBサイトは緑を基調にした配色になっていることがあります。これらは色が持つイメージをうまく利用している例と言えます。もし海の美しさを伝えるWEBサイトが赤を基調にした配色であったら違和感を感じるはずです。

WEBサイトをデザインする前に配色を決めることが大切です。

  • コールマン(Coleman) テント タフスクリーン2ルームハウス
  • Anker Soundcore 3 Bluetooth スピーカー
  • GameSir T4 pro

サイトの作り方の参考書籍