続きを読む… »

内容

ウェブサイトの「色づかい」は、「その色がきれいだから」などと恣意的に決まるものではありません。場合に応じて、目的によって、適切に色を使っていく「セオリー」があります。

本書は、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　配色技法

« 隠す

続きを読む… »

内容

どんなに色の美しいホームページでも、伝えるべき情報が閲覧者に伝わらなければ、まったく役に立ちません。見栄えだけではなく、使いやすく読みやすいサイトをデザインするには、どのように色彩設計を行い、配色を行っていけばいいのでしょうか？

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

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

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

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

目次

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

« 隠す

続きを読む… »

リンクについて

どなたでも自由にこのサイトへのリンクを設定いただいて構いません。連絡などは一切不要です。相互リンクの受付はしておりませんが、有益なサイトを教えていただけるのであれば、これを拒むものではありません。メールにてご連絡ください。

トラックバックについて

このサイトへのトラックバックは、原則として以下のようなルールに基づいて取り扱います。

• このサイトのコンテンツと無関係のエントリからのトラックバックは受け入れません。
• このサイトへのリンクのないエントリからのトラックバックは受け入れません。
• 上記2点に該当しない限り、原則的にトラックバックは歓迎します。
• トラックバックのリンクには「nofollow属性」を指定しません。

コメントについて

コメントについては、できる限りそのまま掲載するよう心がけていますが、内容によってはやむをえず編集や削除を行うことがあります。このサイトは私（坂本邦夫）個人の所有物であり、公共のものでも、あなたのものでもないことをご理解ください。

« 隠す

続きを読む… »

1からスタート、ネットショップの配色マニュアルです

まったくデザインや色彩の基礎知識のない方でも学んでいただけるように、専門知識などは詰め込まず、ゆったりとネットショップの配色を学んでいただけるように配慮した情報サイトです。

主なテーマは「まずこれだけは」で、最低限必要な色彩の基礎知識を学んでいただき、即効性の必要な「既存サイトの修正」「１から配色を考える場合」という順に進んでいきます。また色彩を学ぶのに有益と思われるサイトや書籍なども随時掲載していきます。

こんな人におすすめのサイトです

ウェブサイトの配色に興味を持つ全ての方に読んでいただきたいのですが、このサイトでは、特にオンラインショップの運営に携わる色彩初心者を対象としています。特に下記の項目に心当たりのある方におすすめします。

• 自分でネットショップを運営しているが、なんとなく色がおかしい気がするという方
• 色彩の勉強は必要だが、きちんと学んでいる時間がない、あるいは急いで学ぶ必要がないという方
• ファッションやインテリアの色彩は勉強したが、ウェブの色彩も同じようなものだと考えていた方
• 出来るだけ安く色彩を学びたいという方
• ウェブの配色も業務に追加したい、あるいは業務には含んでいるが、実はウェブのことはよくわかっていないというカラーコーディネーター
• 坂本の本を買うのは嫌だが、無料なら話くらいは聞いてやってもよいという方

ゆっくりでは間に合わないという方に

出来るだけ早く学びたい方やサイトの修正が急務という方は、管理人が主宰するフォルトゥナのサイトをご覧ください。

1から最善の色彩を作り上げるウェブカラー設計、既存のサイトの問題点と改善策をご提案するウェブカラー診断・アドバイスなど、様々な色彩に関するサービスをご用意しております。

« 隠す

続きを読む… »

著作権について

当サイト内に掲載されたすべての内容、デザイン、構成などに関する著作権および著作権に関わる権利は、すべて当サイトの運営者であり作者である坂本 邦夫に帰属します。当サイト内に掲載されたすべての内容の一部または全部について、無断転載、複製、複写、盗用を禁じます。

無断転載、複製、複写、盗用などの行為は、営利非営利の目的を問わず、著作権等の権利侵害となります。権利侵害となる使用が見られたものについては、法的手段を講じることもありますので、ご注意ください。

記事の引用について

記事の引用に関しては、著作権に十分に配慮された上での使用に限り、これを認めます。当サイト内の記事を引用する場合は、必ず以下のことを守るようにお願いします。

1. 印刷物で引用する場合は事前に連絡の上、必ずURLを明記する
2. インターネット上で引用する場合は必ず当サイトにリンクする

これらのことが守られない形での引用は盗用にあたり、著作権等の権利の侵害行為です。確認できた場合には相応の手段で対応させていただきます。なお、連絡先はE-Mail: info@color-fortuna.comです。

« 隠す

続きを読む… »

無償で提供しているコンテンツ

SEO 検索エンジン最適化

自分でSEO 検索エンジン最適化を行うための基礎知識、チュートリアル、SEOツールなどを提供するウェブポジショニングの総合情報サイトです。

人を動かすウェブライティング

ホームページの情報を効果的に伝える、WEBライティングのコツがつかめる入門サイトです。

難読漢字・機種依存文字チェッカー

指定されたファイルの文章から、文章を難しくするため使うべきではないJIS第2水準文字と、状況によって文字化けなどを起こすため使うべきではない機種依存文字/半角カナを検出するツールです。オンラインから無料で利用できます。

サービス案内サイト

カラープランニングオフィス・フォルトゥナ

このサイトの執筆者の坂本のサイト。ウェブサイトの配色を中心に、様々な物に対する機能的な色彩を提案しています。

色いろスクエア

坂本のブログ。色彩の話題から日常の様々な話題まで、のんびりしたペースで書いております。

ボーディー有限会社

日本で最初のSEO書籍を執筆した住太陽氏のサイト。最近は執筆や講演を主にした活動をしています。

Internet-Strategy

角掛健志があなたのホームページを、ライバルを叩きのめす高い攻撃力を持ったホームページへリニューアルします。

女性を惹きつけるホームページ制作-AISHA(アイシャ)

20代女性向けの商品やサービスを取り扱うクライアント向けに、ホームページ制作サービスをご提供します。

その他のリンク

パーソナルカラーナビゲーター

パーソナルカラー診断を受けられる場所と学べる教室のリンク集です。

ピアノ教室ナビゲーター

ピアノ・エレクトーンを学べる教室のリンク集です。

フラワーアレンジ教室ナビゲーター

フラワーアレンジ・プリザーブドフラワーアレンジ教室のリンク集です。

色彩検定ナビゲーター

色彩検定を学べる教室のリンク集です

必読の色彩の本

色彩を学ぶときに役立つ書籍のリンク集です。管理人が読んだ物ばかり集めました。

« 隠す

続きを読む… »

カラーコーディネーターとして

インターネットとはいったい何のために存在するものでしょう。イベントや企業のサイトを閲覧して情報を得たり、友人や有名人の個人的な日記や趣味のページも含めて、多くの場合は文字による情報を取得するためのものではないでしょうか？

逆に情報を発信する側にとっても文字情報は重要です。ギャラリーのように写真を見てもらうサイトでも文字情報がなければ、それがいったい何の写真であるのかは伝わりにくいですし、そもそも写真が掲載されているサイトに辿り着くことも不可能です。

文字がないとわかりづらい情報において文字を軽視ということは、交通標識を見えない場所に設置することと同じではないかと考えたのです。

本来カラーコーディネートとは、適切な場所に適切な色を与えるということが本質ですので、文字情報を軽視してビジュアル中心のウェブサイト作成に違和感を感じておりました。

ウェブデザインとカラーコーディネート

私は色彩の勉強と並行してウェブデザインについて学び、最初はウェブデザイナー兼カラーコーディネーターという形で独立しました。しばらくの間自身でもウェブサイトを制作していたのです。そして色彩のイメージをアピールしてフリーランスのデザイナーとして活動しておりました。

そのような時期に色彩に関する情報を調べていて、ある色彩に関するサイトに出会いました。そのサイトは色彩に関するサイトということで、非常にカラフルでしたが、イメージを重視したせいか本文の文字色は薄いグレーで私の閲覧環境では文字が読めなかったのです。おそらくどこかのリンク集か検索エンジンから辿り着いたのだと思いますが、いくらたくさんの情報が掲載されていても読めなければ何の価値もないサイトであるということに気づきました。

そのような折、ウェブサイトにおける色彩のイメージと情報の伝達についてお話しさせていただいたところ、非常に多くの方にご賛同いただきました。

それ以来、ウェブサイトにおける色彩の重要性について多くの方に伝えるのが私の使命と思い、カラーコーディネーターとしてウェブサイトの色彩に関わっていくためにウェブデザイナーという肩書きを外しました。

現在とこれから

このような経過を経、現在ではウェブサイトをはじめ、パソコンソフトなどの機能性を要求されるものの色彩設計を中心としたカラーコンサルティングを行っております。そのような業務を主とするカラーコーディネーターはまだあまり多くないため、ノウハウや情報の公開はライバルを育て上げるという行為ではあります。

しかし私個人の利益よりも、今まであまり省みられることのなかったインターネットにおける色彩の別の側面を多くの方に知っていただくことにより、カラー業界やインターネット業界だけでなく、インターネットを使用する全ての人の利益につながると考えております。

色彩に関する情報発信

色彩に関する情報発信はこのサイトだけにとどまらず、「カラーコーディネーターが送る色いろスクエア」などの管理するいくつかのサイト、各地でのセミナー・講演・スクールの講師などでご好評をいただいております。私には情報発信の準備がありますので、書籍や記事などの執筆、セミナー講師などのご依頼は大歓迎です。お気軽に
E-Mail : info@color-fortuna.com までご連絡ください。

最後に、このサイト内のすべてのドキュメントの著作権は私にあります。著作権についてのページで、転載・引用などについての注意点を公開しています。ご一読ください。

詳しいプロフィールや活動実績は、カラープランニングオフィス フォルトゥナのサイト内にある「坂本邦夫のプロフィール」や「今までの実績」のページをご覧ください。

« 隠す

続きを読む… »

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

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

得意とするテーマ

マーケティングに基づく配色決定

ウェブサイトの配色を決める際のマーケティングについて触れた日本で最初の書籍である「効果的に伝えるWeb配色標準デザインガイド―ユーザビリティ/アクセシビリティ/マーケティングを考慮したサイトの色彩設計からの配色の実際まで」を表すなど、この分野のパイオニアとして活動しており、ウェブサイト配色の新たなアプローチについての話題を提供できます。

イメージを決めるための色彩調査

コンセプトから色彩を決定するためのプロセスは非常に重要です。なんとなく色を決めるのではなく、目的に従って色彩を設計するためのプロセスについての話題を提供できます。

デザイン・ユーザビリティと色彩

ウェブサイトのユーザビリティについては様々なところで紹介されておりますが、色彩心理学や色彩調和論を駆使することで、ユーザビリティをより高めることが可能です。私はウェブデザイナーの経験がありますので、単に色を合わせるだけでなくウェブサイトに適した色彩の話題を提供することが可能です。

アクセシビリティと色彩

WebアクセシビリティがJIS化されたことにより注目されている分野です。高齢者・障害者だけでなく、あらゆる方に見やすい色彩とは何かということについて講演・執筆を行うことも可能です。

« 隠す