【ホームページで使う色を考える！】複数色の使い方をご紹介！

　平均読み取り時間：4分

こんにちは！EveryFineです！

皆さんはホームページをデザインする上で、コンテンツやバナーの配色に悩んだ経験はないでしょうか。

色はホームページの印象を決定づける大事な要素ですので、全体のバランスを考えて決める必要があります。

今回はそんな配色のパターンについて24色の「色相環」を用いてご紹介いたしますので、

今後ホームページを更新していく中で参考にしていただければ幸いです。

---

色相環とは？

色相の総体を順序立てて円環にして並べたものを色相環（しきそうかん、英: color circle）と言う。
色相環上では、補色を反対の位置に設ける。
連続的な色相環中のある1色を指すために、色を円の角度として表現したり、有限個の色の集合を定義したうえでそれを選ぶことで表現したりされる。

wikipedia-色相環　より

---

1．同系色の組み合わせ

色相環の中で近い位置にある色同士を組み合わせる配色です。

自然に調和する組み合わせなのでデザイン初心者の方でも比較的取り入れやすいかと思います。

同系色は、主に以下の3つに分類されます。

（1）同一色相

同じ色相内で、明度や彩度の違う二色を使った配色です。

ホームページ内で1つのカラーを強く押し出したい場合には効果的ですが、

色の差がないので無難な配色と捉えられてしまうこともあります。

（2）隣接色相

色相環上で隣り合った色を組み合わせた配色です。

隣り合った色同士なので統一感があり、シンプルでまとまりのある印象にになりますが、

同一色相と同様に単調になりやすいので、

変化をつけたい場合は明度や彩度を変えてトーンに差をつけるとよいでしょう。

（3）類似色相

色相環上で2～3つ離れた色同士の配色です。

色に適度な共通性と変化が感じられ、同系色の配色パターンの中でも特にバランス感覚に優れています。

彩度や明度の調整をせずに統一感のとれた配色にしたい方にはお勧めです。

---

2．反対色の組み合わせ

色相環上で反対方向の位置にある色を反対色と言います。

使用すると見た目にインパクトが生まれるので人に対して興味・関心を持たせる効果がある半面、

使いすぎると目を疲れさせてしまうため、色の配置には注意が必要です。

こちらも、同系色と同様に3つの分類をご紹介します。

（1）補色色相

色相環上で正反対の位置にある色を組み合わせた配色です。

補色は最もコントラストが強く対比効果があるため、お互いの色を強調させることが出来ます。

ただ2色の配置が近すぎたり、色の占める領域が広いときつい印象を与えてしまうので、

無彩色(白、黒、グレー)を挟むなどして、見ていて疲れるデザインにならないように気をつけましょう。

（2）対照色相

色相環上で8～10離れた位置にある色同士を組み合わせた配色です。

補色に次いで色味の違いが大きい為、共通性がなく対照的な印象を与えます。

また、多彩なイメージを与える効果もあることから

ロゴマークや看板などによく使われる配色としても知られています。

（3）中差色相

色相環上で直角の位置にある色を組み合わせた配色です。

中差色相は類似とも対照とも異なる関係性を持っているので

一般的に調和の取りにくい印象をもたれています。

しかし、平安時代の貴族が来ていた衣服や韓国の民族衣装「チマチョゴリ」など、

アジアの伝統的な色遣いによくみられる配色であるため、

アジアの民族色を出したいときに使用するのは効果的かもしれません。

彩度を落とすことで、エスニックな雰囲気を出すことも出来ます。

---

3．まとめ

何万通りにも及ぶ色の組み合わせの中から、

自身のホームページに適した配色を設定することは大変難しい作業だと思います。

しかし、今回ご紹介した基本的な配色方法を活用することで、

ホームページの目的や印象にあったデザインに仕上げることは可能です。

ホームページに使われる色は3～4色が良いと言われているので

同系色と反対色を効果的に組み合わせながら、

色彩のバランスが取れたホームページを作り上げてください。

▼色の持つ特性や印象についてはこちらの記事で触れておりますので気になった方はぜひご一読ください。

ホームページで、よりクリックされるバナーのポイント②～色編～

https://everyfine.e-tenki.co.jp/tips/11158/

また、ホームページをご契約のお客様はサポートセンター宛にご相談頂ければ

バナーのデザイン等、対応させて頂くことも可能ですのでお気軽に問い合わせくださいませ。

お問い合わせはこちら

03-5459-4073 　　　　　　　　 fines-help@e-tenki.co.jp

関連資料・記事