サイトマップ   お問い合わせ   このサイトについて   ホーム   
WEB制作支援
 HTMLリファレンス
 スタイルシート
 JavaScript
 PHP/データベース
WEBデザイン
 デザインテクニック
 素材集/テンプレート
 ウェブ配色の見本
 ユーザビリティ
WEB運営
 ウェブの開設と運営法
 アクセスアップの技
 アフィリエイト (WEB広告)
 ドメインとサーバー
特集・トピックス
 Web広告で収入を得る
 独自ドメインの利点
 使えるWeb作成ソフト
 Webデザイナーになるには
 SEOでアクセスアップ
 光ファイバーの導入
リンク集
 ウェブ作成リンク
 無料リンク
 オンラインソフトリンク
 ユーザーリンク
 ウェブコラム
 参考文献一覧
 サイトマップ
 このサイトについて
 お問い合わせ
 eWebホーム


Home >> Web配色の見本 >> 配色のルールと注意点

配色のルールと注意点



配色ルール

一般に配色の良い、悪いを区別することはできませんが、一体どういった配色の組み合わせが調和するのか・相性がいいのかを知っておくと上手な配色ができます。

配色には、右図の「色相環」を元に考えると簡単です。

隣り合っている色、反対に位置する色などを頭において配色をしてみてください。
 

・同系色でまとめる
  同一色相
色相が全く同じで、明度、彩度などの要素を変化させた色との組み合わせ。
例:青と薄い青、緑と薄い緑


 

組み合わせ例
隣接色相
色相が隣り合っているもの同志の組み合わせ。
例:赤とオレンジ、水色と青




組み合わせ例
類似色相
色相は少し遠いが、似ている色同志の組み合わせ。
例:黄色と緑、青とシアン




組み合わせ例

・反対の色でまとめる
  補色色相
色相環で、反対側に位置しているもの同志の組み合わせ。
例:赤とシアン、青と黄色


 

組み合わせ例
対照色相
色相環で正三角形を置いた時に、2点に位置するもの同士の組み合わせ。
例:青と緑、緑とシアン




組み合わせ例
中差色相
色相環で直角に位置するもの同士の組み合わせ。
例:赤と紫、青とシアン




組み合わせ例

・トーンでまとめる
  類似トーン
トーン(明るさや鮮やかさなど)が同じ、または似たもの同士の組み合わせ。色の印象を揃えるため、おさまりの良い配色となります。

 

組み合わせ例
対照トーン
トーンが異なるもの同士の組み合わせ。色相が近いもの同士が組み合わさった時のアクセントとして有効です。




組み合わせ例


配色の注意点

配色は、モニタの性能に大きく左右されます。例えば、ブラウン管で見ている人と液晶で見ている人とでは、色の濃さが大きく違います。

自分の環境では、薄い文字が見えているからと言ってそのまま使用すると、それがほとんど見えないユーザーもいるのです。こういう点から、あまりにも同一のトーンを使うことは避けたほうがいいかもしれません。

また、フルカラーで微妙な色を表現するのはいいですが、256色または65536色のユーザーにとっては、その微妙さが表現されない可能性があることにも配慮しておきましょう。


 
 

Web配色の見本に戻る




 eWeb/ HTML/ スタイルシート/ Javaスクリプト/ PHP/ 素材集/ テクニック/ 配色/ ユーザビリティ/ 開設と運営/ アクセスアップ/ アフィリエイト/ ドメイン
Copyright(C) 2004. Aeu, Gundam, eWeb, Web Color Scheme Samples. All rights reserved. - Home