ウェブ配色コーディネートカタログ

[表紙]ウェブ配色コーディネートカタログ

紙版発売

B5判/160ページ

定価2,728円(本体2,480円+税10%)

ISBN 978-4-7741-4560-0

ただいま弊社在庫はございません。

→学校・法人一括購入ご検討の皆様へ

書籍の概要

この本の概要

ウェブデザイナーのためのまったく新しい見本帳です。200を優に超えるすぐれたウェブサイトを色相別,印象別,目的別に紹介します。各テーマや各サイトごとに,配色理論に基づいたくわしい解説も添えました。ぱらぱらっとめくって配色のアイディアを得たり,「こんな印象を与えるにはどうすればよいんだろう」とヒントを探ったり,さらにはじっくり読み込んでいちから配色理論を学んだり……。デザイナーを目指している人から,バリバリ活躍中の方まで,さまざまな使い方が可能です。

こんな方におすすめ

  • ウェブデザイナーの方
  • 配色のアイディアを得たい方
  • 配色のセオリーを知りたい方

この書籍に関連する記事があります!

ウェブサイトの印象を左右するのはテーマカラー
ウェブサイトにおいて色はいくつかの役割をもちます。そのひとつは,なんらかの印象を生み出すことです。

本書のサンプル

本書の一部ページを,PDFで確認することができます。

本書の紙面イメージは次のとおりです。画像をクリックすることで拡大して確認することができます。

サンプル画像1

サンプル画像2

サンプル画像3

目次

01 配色の基本知識

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

02 色相別の配色イメージ

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

03 イメージを伝える配色

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

04 印象づけるための配色

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

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

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

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

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

著者プロフィール

坂本邦夫(さかもとくにお)

カラープランニングオフィス フォルトゥナ代表。カラーコンサルタント。日本色彩学会正会員。

大学卒業後,機械・電気メーカーに5年間勤務。退職後,ウェブスクールに入学し,ウェブデザインを学ぶうちに,色彩の重要性・有効性と奥深さに気づき,並行して色彩についても学びはじめる。

2004年,ウェブサイトにおけるカラーマーケティング・ユーザビリティ・アクセシビリティを総合的に考慮した色彩設計のノウハウを,ウェブサイト「基礎からわかるホームページの配色」にて公開。以後,書籍や雑誌などへの寄稿・セミナーなどで,ウェブにおけるよりよい色彩環境を広めるための活動を使命として活動している。2010年に公開したブラウザ上で配色をシミュレートできる「ウェブ配色ツール Ver2.0」は,実用的で使いやすいと各方面から高評価を得る。

最近では住環境や工場における安全性の高い色彩など,機能性の求められる場面での色彩設計やアドバイスなども行っている。

著書に『Webプロフェッショナルのための黄金則 Web配色デザインのセオリー』『効果的に伝えるWeb配色標準デザインガイド』(以上,毎日コミュニケーションズ)がある。

ウェブサイト:http://www.color-fortuna.com/

ブログ「色いろスクエア」:http://www.colorsquare.net/

Twitter:http://twitter.com/#!/Kunio_Sakamoto