ツールを使って配色を決める
「連想キーワードから配色を決める」では、色から連想するキーワードをヒントにホームページの配色を決めました。
ここでは、実際の色を並べながら判断するツールを紹介します。
カラースキーマについて
ホームページの配色を決める時に便利なサイトのご紹介です。
http://createafreewebsite.net/html-color-tool.html
このツールでは基本となる色を選ぶだけで、同系色や相性のいい色、反対色などを選んで同時に表示してくれます。
和訳されていないので、ここから使い方を解説します。参考にしてくださいね。
基本色を選ぶ
基本色にしたい色をクリックします。
カラースキームを選ぶ
選択した色を基準に、単色配色、対象の補色、3等分した配色、4等分した配色、類似色と対象の補色をそれぞれ選ぶことが出来ます。
初期は単色配色。
mono/同一色相配色
同じ色相の色だけを使い、「まとまり感」を表現しやすい配色。単調になりがちなので、トーンのコントラストを大きく取ることが多い。色相が絞られているので、配色のテーマが明確化されます。
Contrast/補足色相配色
色相環で180度反対方向に位置する色同士の配色。色相の対照性について、どの程度、どのように表現するかを常に意識しておかなければならない配色です。
Triad/対象色相配色
色覚的に均等関係にある色とされ、ほぼ、補色の関係になります。お互いを強調する色の組み合わせなので、強烈な印象を与える配色です。彩度が高い色同士を組み合わせると、強烈になりすぎる傾向にあります。
Tetrad/類似色色相・対象色相配色
色相差の近い色同士の配色で、色相に適度な共通性と変化をつけることができる色の組み合わせ。バランスの取りやすい配色形式といえます。色相の幅が狭いので、単調な印象になりやすい。
色覚的に均等関係にある色とされ、ほぼ、補色の関係になります。お互いを強調する色の組み合わせなので、強烈な印象を与える配色です。彩度が高い色同士を組み合わせると、強烈になりすぎる傾向にあります。
Analogic/隣接色相・補職色相配色
補色色相配色の1歩手前の色相との配色。対照色相配色と同じくほぼ補色の関係で、お互いの色を強調する組み合わせなので、トーンや面積などでバランスを取るのが良い。
色相環で180度反対方向に位置する色同士の配色。色相の対照性について、どの程度、どのように表現するかを常に意識しておかなければならない配色です。
色幅を選ぶ
カラースキムで3等分した配色、4等分した配色、類似色と対象の補色を選ぶと基本色をもとに配色を補正することができる。
対象の補色を追加する
カラースキムで類似色と対象の補色を選ぶと対象の補色を表示するチェックボックスが表示されチェックすることができる。
ウェブセーフカラーに限定
ウェブセーフカラーに限定することが出来ます。
カラーバリエーションを選ぶ
選択した色に対して、パステル系、ダークパステル系、ライトパステル系、コントラスト系、淡い系に変更することが出来ます。
色の順番を入れ替える
四角いパレットに表示されている色の順番を入れ替えることが出来ます。
色の補正をする
四角いパレットに表示されている色をクリックして、色の補正をすることが出来ます。
色盲のシュミレーション
プルダウンメニューから以下のモードを選択してシュミレーションを行うことができます。
- Normal Vision（正常）
- Protanopy（赤色色盲）
- Deuteranopy（緑色色盲）
- Tritanopy（青色色盲）
- Protanomaly（赤色色弱）
- Deuteranomaly（緑色色弱）
- Tritanomaly（青色色弱）
- Full colorblindness（全色盲）
- Atypical monochromatism（単色色盲）
では、次に「デザイン講座」で実際にデザインをしてゆきましょう。
