目次

01　配色の基本知識

• 色の三属性（色相／明度／彩度）
• トーン
• 配色と面積
• モニタでの色表現
• 色の視認性と可読性
• 色の誘目性・識別性
• 色の心理的効果(1)
• 色の心理的効果(2)

02　色相別の配色イメージ

• 赤のイメージと効果(1)
• 赤のイメージと効果(2)
• オレンジのイメージと効果
• 黄のイメージと効果
• 緑のイメージと効果
• 青のイメージと効果(1)
• 青のイメージと効果(2)
• 紫のイメージと効果
• 白のイメージと効果
• 灰のイメージと効果
• 黒のイメージと効果
• 茶のイメージと効果
• ピンクのイメージと効果

03　イメージを伝える配色

• 色相を揃えて統一感を生む
• トーンを揃えて色のイメージを強める
• アクセントカラーで動きを付ける
• 多色配色で動きを付ける
• 楽しく活気のある配色
• 力強さを表現する配色
• エレガントな雰囲気にする
• 優しく素朴な印象を与える
• 自然の色でナチュラルな配色に
• 透明感のある配色にする
• 国・地域色を出した配色にする
• 信頼感を表現する
• 親しみやすい配色
• 重厚感のある落ちついたイメージ
• 高彩度色を使ったスポーティなイメージ
• 日本的な配色にする
• グレイッシュで都会的なイメージに
• 高齢者向けの配色にする
• 男性向けの配色にする
• 女性向けの配色にする
• 子供向けの配色にする

04　印象づけるための配色

• ロゴからテーマカラーを決める
• テーマカラーをそのまま使った配色
• テーマカラーを展開して色を増やす
• 高彩度色をテーマカラーにする
• 低彩度色をテーマカラーにする
• 競合サイトからテーマカラーを決める
• 同じ色を繰り返して配色を印象づける
• 色のコントラストを使って印象づける
• 多色使いで印象づける
• ロゴを目立たせて，サイト名を覚えてもらう
• 大きな画像でインパクトを生む

05　サイトを使いやすくするための配色

• 黒以外の文字色を読みやすくする
• 見出しと本文に差を付けて読みやすくする
• 文章中のリンクをわかりやすくする
• 文字を強調する
• 背景色の機能・効果
• 文字の形・大きさによる色の調整
• 色で情報を区別する
• ナビゲーションを色分けする
• ボタンを押しやすくする
• 印刷で困らない色にする

06　レイアウトを整理するための配色

• 規則的に色を並べて，すっきり見せる
• 適切な背景色・背景画像で読みやすくする
• 情報に優先順位を付けて，重要な部分を見せる
• グラデーションで視線を誘導する
• 背景色でコンテンツを浮き立たせる
• 余白を調整して見やすくする
• 表の色を整えて情報を取得しやすくする
• ギャラリーのように写真を見せる
• ボタンを目立たせ，クリックを促す
• キャッチコピーを見せる