 |
▼デザインカラー
デザインにおいて、色使いというのは結構重要なウェイトをしめます。
色彩センスがあるとそれだけでレベルの高いものを作成する事も可能です。
というわけで、デザインをする際にちょっとは役に立つカラーについて…ご説明しますわ♪
■色の指定
R（赤）G（緑）B（青）の三色の度合いを１６進数で指定します。
#RRGGBB |
各桁を２桁、２５６段階であらわすのが一般的です。
■RGBで思い通りの色を作る方法
基本的な考え方は、グレースケール（白または黒を起点にして、黒または白に近づけていくグラデーション）を起点にして自分の作りたい色が#ff0000（赤■）#ffff00（黄■）#00ff00（緑■）#00ffff（シアン■）#0000ff（青■）#ff00ff（マゼンタ■）のどれにどのくらい近いかを考えます。なれないうちは#000000（黒■）#ffffff（白■）のどちらかを起点にすると考えやすいです。
・黒を起点にする場合、「足し算」で近づけます（単純に近づけたい色の数値を大きくする）
・白を起点にする場合、「引き算」で近づけます（補色を引き算することで、相対的に近づけた色の数値を大きくします）
●RGBの合計が少ない色は、暗い色調、RGBの合計が多い色は淡い色調です。またRGBの数値の差が大きい色は鮮やかな色調になります。
●ウェブセーフカラーの簡単な見つけ方
・RRGGBBそれぞれの値が00,33,66,99,cc,ffのいずれかの値であると、ウェブセーフカラーです。
■色の三属性〜色相・明度・彩度
●色相：青、赤、緑、黄など色みの変化を「色相」と言います。
●明度：色の明るさを表し、白から黒までの階調で表現できます。白が最も明度が明るく、黒が最も低いです。同じ色相彩度の中でも、黄は赤や青よりも冥土が高いです。
●彩度：色の鮮やかさを表します。彩度が高くなるほど色は鮮やかになり、彩度が低くなるほど色はグレーに近くなりくすんだ印象になります。
●トーン：明度と彩度をあわせた概念のことです。
■画面の読みやすさ
画面の読みやすさを中心に考えるときに、最も重要なのは明度です。画面上の明度の（コントラスト）の大きさで見易さが決まるのです。背景の明度が高い場合は、文字や画像の明度を低く、背景が低い場合は、文字・画像を高く設定すると比較的見やすくなります。
次に大切なのは彩度です。彩度が高い色は人目を引きやすいですが、刺激が強く疲れをかんじさせます。逆に低い色は、目立ちにくいのですが、刺激が弱いです。背景とテキストの色には無彩色や彩度の低い色のほうが適切です。リンク等目立たせたいものは彩度の高い色にすると効果的です。
■配色の効果
明度と彩度が、見易さを決めるのならば、色相とトーンはウェブ全体のイメージを決める要素となります。
●色相
| 同一色相 |
同じ色身で、トーンの差（白み、黒み、灰みの加減）がある関係 |
| 類似色相 |
赤-オレンジ-黄、緑-アクアマリン-シアンなど、色相環状で比較的近い色みの関係 |
| 反対色相 |
赤-シアン、青-黄、色相環状で180度の関係にある色みの関係 |
●トーン
| 類似トーン |
同じトーングループに属するトーン |
| 対照トーン |
明度の差が大きい対照（明るい←→暗い）と彩度の差が大きい対照（鮮やか←→渋い、もしくはモノトーン）があります |
◆色相差の効果
同一色相、類似色相の組み合わせの配色は、おだやかで落ち着いた印象になります。逆に色相差を大きくすると活動的な印象になります。
同一色相による配色例■■■■対照色相による配色例■■■■
◆トーン差の効果
類似トーンの組み合わせの配色は、色相が違っても統一された印象を与えます。対照トーンの組み合わせは、力強い印象になります。明度の差が大きい組み合わせのほうが彩度の差が大きい組み合わせよりも効果が強いです。
類似トーンによる配色例■■■■対照トーンによる配色例■■■■
■ページ全体の色彩計画のやり方
●最初に主役になる色＝テーマカラーを決定します。
テーマカラーを配置する場所としては、「タイトル画像」「ページの上部、左端の帯」「ヘッダ・フッダの中に入るロゴ」等が代表的です。
●テーマカラーが引き立つ背景色を決定します。読みやすい色が大前提。
| 同一色相・類似色の濃淡 |
おとなしくまとまった印象 |
| 反対色 |
テーマカラーの持つ印象が強まる配色。彩度が高い色同士だと色同士が調和しないので注意が必要 |
| 白い背景に彩度の高いテーマカラー |
活力のある元気な印象 |
| 白い背景に彩度の低い渋いテーマカラー |
上品で都会的な印象 |
| 白い背景に淡いテーマカラー |
ロマンティック、女性的な印象 |
| 渋めの色の背景 |
落ち着いた印象。テーマカラーを引き立てるのがむずかしいので使用に注意が必要 |
| 暗い色の背景 |
黒に少しだけ色味がついた色は、同一〜類似色の明度の高い色と組み合わせるとドラマティックな印象になる |
| 黒い背景 |
先鋭的、ドラマティック。ただし、テーマカラーを上手に選ばないといけない |
●テキスト色を選びます。
基本はテーマカラーを一段くすませた色、もしくは無彩色を選びます。無彩色を選ぶ場合には、テーマカラーが鮮やかな色であれば黒、渋めの色や淡い色ならばグレーを選ぶとなじみやすいです。
●リンク色、訪問済みリンクはテーマカラー・引き立て色のどちらかを選びます。
リンク色と訪問済みリンクは、同一もしくは類似色相で選ぶほうがいいでしょう。
●アクセントカラーを配置する。
配色が単調で面白みがないと思ったら、テーマカラーとは反対色で彩度の高いアクセントカラーを使用すると良いでしょう。アクセントカラーは一箇所にたまらないように、画面全体にちりばめるように使うのが効果的です。小見出しの前の「■」や「●」などの記号に使うと効果的です。
【参照】
おすすめデザイン系の本♪
朱沙は、基本的に本で勉強しています。図書館で借りたり、買ったり…♪
そんな朱沙がおすすめ本はこちら⇒ デザインの仕方
ネタを探すならこちら⇒ デザインのネタ |
| ▼ BACK |
|
|