WEBデザイン基礎（３）配色
WEBの配色
色が人に与える心理的な影響は大きいです。WEBデザインにおいても配色について基本的な知識が必要です。「清潔感のあるホームページを作ってほしい」とクライアントから依頼されたとき、要望に基づいた提案をできなければいけません。「清潔感」でイメージする色は、人それぞれかもしれません。ただ、多くの人が清潔だと感じる色はあります。色の持つ共通イメージを学んでいきます。
WEBの色は、モニターが表現できる色になります。カラーモードは、RGBです。HTMLでは、カラーコードを使います。
赤のカラーコード
color:#ff0000;関連用語
CMYK、光の３原色、色相、明度、彩度、同系色、類似色、補色、反対色、トーン、メインカラー、サブカラー、アクセントカラー
参考になるサイト
Adobe Color
原色大辞典
配色パターンを作ってみよう
演習 divボックスを作って、配色パターンを作ってみよう。
まずは、思いついた、形容詞などの単語を１０個考えます。
その言葉を色にしてみよう。以下のテンプレートには、４個ボックスがあります。それぞれに色を設定してみよう。
ボックスの大きさの割合を変化させて、その色の占める割合を変えてもよいです。
color.html
<!Doctype HTML>
<html>
<head>
<meta charset=utf-8>
<title>BOX float clear</title>
<style type="text/css">
<!--
#content {
width: 600px;
background: white;
}
.box {
height: 100px;
float: left;
}
.a {
width: 25%;
background: red;
}
.b {
width: 25%;
background: blue;
}
.c {
width: 25%;
background: yellow;
}
.d {
width: 25%;
background: green;
}
.fc{
clear:both;
}
-->
</style>
</head>
<body>
<div id="content">
<p>原色（言葉を入れる）</p>
<div class="box a">
<p>red</p>
</div>
<div class="box b">
<p>blue</p>
</div>
<div class="box c">
<p>yellow</p>
</div>
<div class="box d">
<p>green</p>
</div>
<div class="fc">
</div>
</div>
</body>
</html>
制作したカラーチャートをみんなで共有して、お互い感想を言い合おう。
この記事が気に入ったらサポートをしてみませんか？