坂本邦夫の「基礎からわかるホームページの配色」» 執筆 http://www.webcolordesign.com 自分でウェブサイトの配色を行うための色彩学の基礎知識、配色前の準備、色彩設計などウェブサイトのカラーデザインに関する情報サイトです。 Thu, 26 Aug 2010 14:47:59 +0000 ja hourly 1 http://wordpress.org/?v=3.3.1 Webプロフェッショナルのための黄金則 Web配色デザインのセオリー http://www.webcolordesign.com/information/publishing/56.html http://www.webcolordesign.com/information/publishing/56.html#comments Mon, 25 Jan 2010 06:41:16 +0000 坂本邦夫 http://cpfortuna.heteml.jp/webcolor/?p=56 続きを読む ]]> フォルトゥナのカラーコンサルタント坂本邦夫の2冊目の著書「Webプロフェッショナルのための黄金則 Web配色デザインのセオリー」のご紹介です。

内容

Webプロフェッショナルのための黄金則 Web配色デザインのセオリーウェブサイトの「色づかい」は、「その色がきれいだから」などと恣意的に決まるものではありません。場合に応じて、目的によって、適切に色を使っていく「セオリー」があります。

本書は、Webプロフェッショナル、またはWebクリエイターを目指す方であれば必ず知っておきたい、ウェブサイトにおける配色のセオリーをまとめたものです。
1項目を基本的に見開きで構成し、図解を多用した誌面になっており、また適宜「チェックリスト」を設けることで、「見てわかりやすく、調べて使いやすい」内容となっています。

Chapter1「ウェブ配色の基礎」では、色彩および配色の基本を簡潔にまとめます。色彩の基本を知り、色の持つ性質を覚えておけば、より効果的な色の使用ができるでしょう。

Chapter2「配色を整えるテクニック」では、テーマカラーの決め方から、前景色、背景色の決定方法、さらに決めた色をどう配置すればよいか、といった「整え」のテクニックをまとめています。

Chapter3「デザインの目的別テクニック」では、「テキスト」「レイアウト」「画像」といった要素ごとに、その要素の目的を達するためのテクニックやノウハウを解説します。また、配色の調整方法なども説明しています。

Chapter4 「ビジネスゴールごとの目的別テクニック」では、ユーザビリティ、アクセシビリティ、CI、ブランディングといったサイトのビジネスゴールや、ニュースサイト、広告サイト、公共系サイトなどのサイトの目的という視点から、その目的を達するためにはどのように配色を考え、決めていけばよいかを解説していきま す。サイトの目的に最適の色づかいをするのに、きっと役立つでしょう。

「色」はウェブサイトにおいて、ビジュアルイメージの方向性や、情報伝達に重要な意味を持ちます。より高いビジネスゴールを実現するために知っておきたい、Webプロフェッショナルのための"黄金則"です。

毎日コミュニケーションズのサイトで本の一部を立ち読みすることが出来ます。購入を検討している方はご参考にどうぞ。

目次

  • Chapter 1　ウェブ配色の基礎
    • Category_1.　色彩の基礎知識
      • Theme 1-1　色の三属性
      • Theme 1-2　トーンとそのイメージ
      • Theme 1-3　色と面積
      • Theme 1-4　アクセントカラーとセパレーションカラー
      • Theme 1-5　同化現象と対比現象
      • Theme 1-6　色の誘目性
      • Theme 1-7　視認性と可読性
      • Theme 1-8　色の識別性
      • Theme 1-9　モニタと印刷との色域の違い
      • Check List
    • Category_2.　印象を左右する色彩の心理的効果
      • Theme 2-1　色の寒暖
      • Theme 2-2　派手な色と地味な色／興奮色と沈静色
      • Theme 2-3　重い色と軽い色／固い色と柔らかい色
      • Theme 2-4　色の遠近感
      • Check List
    • Category_3.　ウェブサイトの配色
      • Theme 3-1　HTML/CSSでの色指定
      • Theme 3-2　Webセーフカラー
      • Theme 3-3　HSBを利用して色を作る
      • Theme 3-4　色のユーザビリティ
      • Theme 3-5　色のアクセシビリティ
      • Theme 3-6　可読性のチェックとソフトウェア
      • Theme 3-7　テキストリンクの色
      • Check List
  • Chapter 2　配色を整えるテクニック
    • Category_1.　テーマカラーを決める
      • Theme 1-1　基本テーマカラーを1色設定する
      • Theme 1-2　テーマカラーの彩度と面積
      • Check List
    • Category_2.　色相・トーンを手がかりにした配色
      • Theme 2-1　色相を限定した配色
      • Theme 2-2　多色配色
      • Theme 2-3　トーンによる配色
      • Theme 2-4　自然の色を使った配色
      • Check List
    • Category_3.　背景色
      • Theme 3-1　背景と文字のコントラストの調整
      • Theme 3-2　背景画像の上のテキスト
      • Theme 3-3　背景色とリンクの色
      • Check List
    • Category_4.　色の配置
      • Theme 4-1　情報の優先順位を決めて配色する
      • Theme 4-2　視線移動の基礎
      • Theme 4-3　全体のレイアウトと視線の移動
      • Theme 4-4　グラデーションで視線を誘う
      • Check List
  • Chapter 3　デザインの目的別テクニック
    • Category_1.　テキストの扱い
      • Theme 1-1　テキストを読ませる
      • Theme 1-2　メニューを読みやすくする
      • Theme 1-3　テキストリンクの下線を外す
      • Theme 1-4　テキストの強調
      • Check List
    • Category_2.　レイアウトを構成する色
      • Theme 2-1　ロゴやサイト名を見せる
      • Theme 2-2　ロゴの下のナビゲーションの色
      • Theme 2-3　サイドバーの色
      • Theme 2-4　コンテンツを整理して見せる
      • Theme 2-5　印刷できる色にする
      • Theme 2-6　ボタンをクリックさせる
      • Check List
    • Category_3.　画像の扱い
      • Theme 3-1　画像の色を重視する
      • Theme 3-2　多数の画像を並べる
      • Theme 3-3　商品を紹介する画像
      • Check List
    • Category_4.　配色の調整
      • Theme 4-1　離れて配色を見る
      • Theme 4-2　項目ごとにチェックする
      • Check List
  • Chapter 4　ビジネスゴールごとの目的別テクニック
    • Category_1.　ユーザビリティ、アクセシビリティを重視するサイト
      • Theme 1-1　政府・自治体や公共交通機関などのサイト
    • Category_2.　CIを重視するサイト
      • Theme 2-1　ロゴの色の彩度を考えた配色
      • Theme 2-2　色の繰り返しによるイメージ定着
      • Check List
    • Category_3.　色彩によるブランディング
      • Theme 3-1　競合サイトと似ていないか？
      • Theme 3-2　用いる色相を絞り込む
      • Theme 3-3　独自のサービスを持つサイト
    • Category_4.　印象を重視するサイト
      • Theme 4-1　信頼感の表現方法
      • Theme 4-2　親しみやすさを表現
      • Check List
    • Category_5.　高齢者をターゲットとするサイト
      • Theme 5-1　加齢に伴う見え方の変化
      • Theme 5-2　高齢者の嗜好と視覚特性を考慮した配色
    • Category_6.　SNSやWiki、ニュースなど情報を扱うサイト
      • Theme 6-1　繰り返し訪れられるサイトの色
      • Check List
    • Category_7.　人物の写真があるサイト
      • Theme 7-1　写真と文字の両方を見せる配色
    • Category_8.　飲食物を扱うサイト
      • Theme 8-1　美味しそうに見せる色
      • Check List
    • Category_9.　広告で収益を得るサイト
      • Theme 9-1　画像広告を挿入する場合
      • Theme 9-2　文字広告の挿入
    • Category_10.　地域限定サービスのサイト
      • Theme 10-1　地域で親しまれている色を探す
      • Theme 10-2　地域の競合サイトを調査して配色を考える
      • Check List
  • Appendix　配色技法

関連記事：

]]> http://www.webcolordesign.com/information/publishing/56.html/feed 0 効果的に伝えるWeb配色標準デザインガイド http://www.webcolordesign.com/information/publishing/%e5%8a%b9%e6%9e%9c%e7%9a%84%e3%81%ab%e4%bc%9d%e3%81%88%e3%82%8bweb%e9%85%8d%e8%89%b2%e6%a8%99%e6%ba%96%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%82%ac%e3%82%a4%e3%83%89.html http://www.webcolordesign.com/information/publishing/%e5%8a%b9%e6%9e%9c%e7%9a%84%e3%81%ab%e4%bc%9d%e3%81%88%e3%82%8bweb%e9%85%8d%e8%89%b2%e6%a8%99%e6%ba%96%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%82%ac%e3%82%a4%e3%83%89.html#comments Mon, 25 Jan 2010 06:36:38 +0000 坂本邦夫 http://cpfortuna.heteml.jp/webcolor/?p=53 続きを読む ]]> フォルトゥナのカラーコンサルタント坂本邦夫の初の著書「効果的に伝えるWeb配色標準デザインガイド」のご紹介です。

内容

効果的に伝えるWeb配色標準デザインガイド―ユーザビリティ/アクセシビリティ/マーケティングを考慮したサイトの色彩設計から配色の実際までどんなに色の美しいホームページでも、伝えるべき情報が閲覧者に伝わらなければ、まったく役に立ちません。見栄えだけではなく、使いやすく読みやすいサイトをデザインするには、どのように色彩設計を行い、配色を行っていけばいいのでしょうか？

本書では、ユーザビリティ、アクセシビリティ、カラーマーケティング等を考慮しながらウェブサイトの配色を行っていくための「プロセス」と「ルール」をまとめています。

色彩や配色の考え方から、イメージの作り方、色彩設計の行い方、そして実際に配色を行う際に気を付けなければならないことまでを解説しています。後半には 5つのケーススタディを掲載し、実際にシステム開発会社やネットショップ等の配色を決定していく過程を見ることで、実践的な活用法を習得することができます。

センスだけに頼らないサイトの配色を行うために、また伝えたいことが効果的に伝わり、説得力のあるサイトをデザインするために、WebデザイナーおよびWeb制作者必読の配色ルールブックです。

毎日コミュニケーションズのサイトで本の一部を立ち読みすることが出来ます。購入を検討している方はご参考にどうぞ。

目次

  • ウェブサイトのデザインと配色
    • ウェブデザインに求められる色とは？
      • 美しい色とは
      • 機能的な色とは
    • ウェブ・ユーザビリティと色
      • 情報を伝えるための色
    • ウェブ・アクセシビリティと色
      • 誰にでも見ることが出来る色を目指して
    • ビジネスとウェブサイトの配色
      • 立ち去られない配色
    • COLUMN　バランスの取れた配色とは
  • ウェブサイト配色のための基礎知識
    • RGBによる色表示
      • RGBの仕組みと色の表示
      • Webセーフカラーについて
    • HSBによる色表示
      • HSBによる色表示
      • HSBを扱える環境について
    • 環境による見え方の違い
      • 環境によって見え方は違う
    • 色彩の基礎知識
      • 色相と色相環について
      • 明度と彩度について
      • トーンとは
      • ジャッドの色彩調和論とは
    • 配色の方法
      • 色相に基づく配色
      • 明度・彩度に基づく配色
      • その他の配色
    • 色彩の心理的効果
      • 色が与える影響
      • 読みやすさ・見えやすさ
      • 対比現象による見え方の違い
      • 色相と食欲
      • 言葉からの色彩イメージ
  • 色彩の設計
    • 色彩設計の前に
      • デザインの前に色彩決定を行う意義
      • 配色の目的を定める
      • 使う色と使わない色
    • カラーマーケティングの基礎
      • カラーマーケティングが必要な理由
      • コーポレートカラー・ロゴマークの検討
      • コーポレートカラーの扱い方
      • 競合サイトの分析
      • 競合サイトの色相の分析
      • 競合サイトの明度と彩度の分析
      • 「売れる色」は存在しない
    • 色彩設計の実践
      • 色彩イメージを面積比で考える
      • 配色の基本となるベースカラーを決める
      • 色相を変えたサブカラー
      • 明度と彩度を変えたサブカラー
      • 3属性のうち2つを変えたサブカラー
      • アクセントカラーを決定する
      • 4色以上の色を使うには
      • 補助カラーを利用する
      • 配色の調整
    • COLUMN　カラーイメージで競合チェック
  • 配色の実際
    • 配色の基本
      • レイアウトは先に済ませておく
      • 色の誘目性を利用する
      • 自然な視線の流れに従った配色
    • 伝えたい情報の重要度を考えた配色
      • 情報に優先順位をつける
      • 企業の名前やサービス名を覚えてもらう
      • 写真やバナーに注目をさせる
      • 文章に注目をさせる
    • 読みやすい背景色
      • あらゆる文字の背景を考慮する
      • 背景色とリンク色
      • 印象を壊さない背景色の選び方
    • アクセシビリティを確保する
      • 色覚異常に対する配慮
      • 高齢者に対する配慮
      • 客観的なコントラストの判定
      • 色だけで情報の区別を行わない
      • 点滅や同じパターンの繰り返しを避ける
      • その他の文字に関する注意
    • 配色に困ったとき
      • 多色でまとまらない場合
      • 色の面積を減らす
    • COLUMN　「当たり前」の配色
  • ケーススタディ
    • case1 歯科医院
      • 案件概要
      • 分析
      • 設計
      • 色の配置
    • case2　システム開発会社
      • 案件概要
      • 分析
      • 設計
      • 色の配置
    • case3　食品卸
      • 案件概要
      • 分析
      • 設計
      • 色の配置
    • case4　書道教室
      • 案件概要
      • 分析
      • 設計
      • 色の配置
    • case5　ブランド品のセレクトショップ
      • 案件概要
      • 分析
      • 設計
      • 色の配置
    • COLUMN　クライアント更新用のカラー指定
  • Appendix
    • 参考書籍
    • ウェブリソース
    • 言葉のイメージと色

関連記事：

]]> http://www.webcolordesign.com/information/publishing/%e5%8a%b9%e6%9e%9c%e7%9a%84%e3%81%ab%e4%bc%9d%e3%81%88%e3%82%8bweb%e9%85%8d%e8%89%b2%e6%a8%99%e6%ba%96%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%82%ac%e3%82%a4%e3%83%89.html/feed 0 講演・執筆・取材の依頼について http://www.webcolordesign.com/information/about_me/%e8%ac%9b%e6%bc%94%e3%83%bb%e5%9f%b7%e7%ad%86%e3%83%bb%e5%8f%96%e6%9d%90%e3%81%ae%e4%be%9d%e9%a0%bc%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6.html http://www.webcolordesign.com/information/about_me/%e8%ac%9b%e6%bc%94%e3%83%bb%e5%9f%b7%e7%ad%86%e3%83%bb%e5%8f%96%e6%9d%90%e3%81%ae%e4%be%9d%e9%a0%bc%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6.html#comments Mon, 25 Jan 2010 05:33:03 +0000 坂本邦夫 http://cpfortuna.heteml.jp/webcolor/?p=28 続きを読む ]]> 講演・執筆・取材の依頼は大歓迎です。得意とするテーマについてや、依頼の受け付けについて説明しています。

出し惜しみせず情報発信します

ウェブサイトの配色には隠すべき特別なノウハウなどはありません。私たちの日常業務では、個別の案件ごとに異なる対応をしますが、基本とされるものは特別なものでも何でもなく、色彩の知識を持ち、当たり前のことを当たり前に行っていくという性質の物ばかりですので、隠すようなものではありません。今までにも講演や取材などによる情報発信に関して実績があり、今後も出し惜しみすることなく、多くの皆様に伝えていく所存です。講演・執筆・取材などのご依頼はお気軽に
E-Mail: info@color-fortuna.com までご連絡ください。

得意とするテーマ

マーケティングに基づく配色決定
ウェブサイトの配色を決める際のマーケティングについて触れた日本で最初の書籍である「効果的に伝えるWeb配色標準デザインガイド―ユーザビリティ/アクセシビリティ/マーケティングを考慮したサイトの色彩設計からの配色の実際まで」を表すなど、この分野のパイオニアとして活動しており、ウェブサイト配色の新たなアプローチについての話題を提供できます。
イメージを決めるための色彩調査
コンセプトから色彩を決定するためのプロセスは非常に重要です。なんとなく色を決めるのではなく、目的に従って色彩を設計するためのプロセスについての話題を提供できます。
デザイン・ユーザビリティと色彩
ウェブサイトのユーザビリティについては様々なところで紹介されておりますが、色彩心理学や色彩調和論を駆使することで、ユーザビリティをより高めることが可能です。私はウェブデザイナーの経験がありますので、単に色を合わせるだけでなくウェブサイトに適した色彩の話題を提供することが可能です。
アクセシビリティと色彩
WebアクセシビリティがJIS化されたことにより注目されている分野です。高齢者・障害者だけでなく、あらゆる方に見やすい色彩とは何かということについて講演・執筆を行うことも可能です。

関連記事：

]]> http://www.webcolordesign.com/information/about_me/%e8%ac%9b%e6%bc%94%e3%83%bb%e5%9f%b7%e7%ad%86%e3%83%bb%e5%8f%96%e6%9d%90%e3%81%ae%e4%be%9d%e9%a0%bc%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6.html/feed 0