Eコマースのウェブページらしく商品写真と紹介に力を入れている。
テキストは少し大きめでスクロールを必要とするため、もう少し強調すべき所と明暗を分けた方がいい。
配色は暖色でまとめてある。
前回は文字や文章を調整して上のようなページを作りました。
これはこれで良いのですが、色が白と黒だけなので味気ないですね。
今回はこれに色をつけてみましょう。
配色はデザインの印象を決定づけますので、ページの内容にあったものにしましょう。
ここでは多くのサイトで採用されている「暖色」を配色としてつかってみます。
黄色やオレンジなどの「暖色」はあったかみがあり、活気づいたイメージを与えます。
①題名に赤、メニュー文字と、文章の一部にオレンジ系統の色をつけるだけで下のようになります。
配色ごとに、見やすい背景と文字の組み合わせを集めました。
各配色で見やすくなる色、見にくくなる色を把握しましょう。(これだけ見ても白地に黒という配色がどれだけ優秀か分かると思います)
| 基本文字色。 背景白 文字黒 |
| パステル背景 背景#ffcccc 文字黒 |
| 純色背景 背景黄色 文字#cc0033 |
| 緑系統の組み合わせ 濃い緑文字色#009933 暗い黄色文字色#666600 オレンジ系色#b56c00 |
| 黄色系統の組み合わせ 濃い赤色#cc0000 紫系統#660066 深緑#009900 |
| オレンジ系統の組み合わせ オレンジコントラスト#ffeeac 明るいピンク#ffcece 灰色系統#ededda |
| 赤系統の組み合わせ ピンク色#ffcccc 薄い黄色#ffff66 灰色系統#e4e4e4 |
| 紫系統の組み合わせ 濃い紫#720097 青系統#330099 茶色#990000 |
| 青系統の組み合わせ 明るい黄色#ffff99 紺色#003399 暗い紫#660066 |
