WEBデザイン・開発講義WEB Design&Development Lecture

カラーイメージマップとカラーコーディネート

デザイン・テイストのイメージする言葉からカラーコーディネートへ、感性・アイデンティティを表現する配色とは!

180種のテイスト・イメージと配色

テイスト・イメージワードをクリックすると該当する5組の配色が表示され、グループワードの配色を連続に表示。

代表的な68種のテイスト・イメージと配色のマッピング(クリック表示)

参照:『カラーイメージスケール』日本カラーデザイン研究所編

カラーイメージマップ

カラー配色0162 カラー配色0164 カラー配色0163 カラー配色0174 カラー配色0172 カラー配色0167 カラー配色0173 カラー配色0045 カラー配色0048 カラー配色0043 カラー配色0044 カラー配色0046 カラー配色0001 カラー配色0007 カラー配色0011 カラー配色0004 カラー配色0121 カラー配色0119 カラー配色0111 カラー配色0109 カラー配色0116 カラー配色0117 カラー配色0067 カラー配色0073 カラー配色0070 カラー配色0069 カラー配色0098 カラー配色0034 カラー配色0035 カラー配色0038 カラー配色0033 カラー配色0095 カラー配色0147 カラー配色0144 カラー配色0153 カラー配色0161 カラー配色0152 カラー配色0156 カラー配色0159 カラー配色0148 カラー配色0094 カラー配色0086 カラー配色0024 カラー配色0082 カラー配色0088 カラー配色0085 カラー配色0091 カラー配色0084 カラー配色0079 カラー配色0028 カラー配色0030 カラー配色0026 カラー配色0023 カラー配色0016 カラー配色0019 カラー配色0022 カラー配色0018 カラー配色0056 カラー配色0060 カラー配色0100 カラー配色0059 カラー配色0105 カラー配色0125 カラー配色0124 カラー配色0126 カラー配色0131 カラー配色0134 カラー配色0129

WEBデザインにおける配色とテイスト

『カラーイメージスケール』は、SD法(Semantic Differential method:意味微分法)を用いて色相とトーン(明度と彩度との複合的概念によって表現されるもの)で分類された130色について心理調査を行い、SD法調査結果(因子分析)の平均値をマッピングし、全ての色をウォームかクール(色相軸)、ソフトかハード(明度軸)、クリアかグレイッシュ(清濁軸)の3つの心理軸からなるイメージ空間に位置づけたものです。配色と感性語(形容詞)の研究によって開発されたものを利用。

カラーコーディネート関連のリンク

カラーイメージスケールのタグ・テーブル
カラーイメージスケールのタグ
「カラーイメージスケール」における配色(カラーコーディネート)の色相とカラートーンのカラーマップとカラーコーディネートで利用するベースカラー:130色のカラー表示及び詳細内容の説明です。

カラー選択・配色レイアウトシミュレーション
カラー選択・配色レイアウトシミュレーション
カラー値入力による表示、ボックスの位置・サイズ指定によるレイアウトの変更などのシュミレーションが可能です。

WEB配色シミュレーションとカラータグチャート
WEB配色シミュレーションとカラータグチャート
「WEBカラーコーディネート」にある117色のカラータグ16進数値の表示に加え、カラー16進数値入力でカラーコード表示ができます。

ハイブリッド型WEB配色レイアウト・シミュレーション
ハイブリッド型WEB配色レイアウト・シミュレーション
160種類のテイスト(感性、イメージ語)に対応した配色レイアウト表示ができます。「テイスト」に関連した4色を「基調」「調和」「対比」「強調」に対応させ、カラーパレット・リストのカラー欄をクリックでレイアウト上の該当するカラーが自動的に変更されます。

上記の画像をクリックすると拡大画像が表示されます。

pagetopへ