このツールは自分の思い通りのイメージの配色を作るものではありません。思い通りの配色を行うには、それなりの色彩に対する知識なども必要ですが、思い通りにならない方のために、最低限、読みやすい配色を提供するツールです。

なおこのツールをお使いいただくためにはFlashPlayerが必要です。

「Web配色ツール」の使い方

右下の色相・明度・彩度をスライドバーで調整し、右上の一色を決めると、それに応じて自動計算で各部の色を決定してくれます。

ツールの都合上というよりもイメージに差を出しにくいので、明度・彩度とも40以下は設定できないようになっております。

予告なしに機能や仕様が変更する可能性がありますので、ご注意ください。

「Web配色ツール」で決められる色

配色できる各部分はこのようになっております。

メインカラー

ヘッダー部分の2本の横線がこれに当たります。ベタ塗りにすると重ねた文字が読みにくく、印象を損ねる可能性がありますので、控えめにしております。

ロゴ

ロゴマークの色です。マークや文字の色が決まっていない場合のために同系色を入れておりますが、実際に使う場合にはご自由に入れ替えてください。

ボタン

メニュー部分のボタンの色です。コントラストをつけて読みやすくするために黒文字を入れてあります。

ボタン背景

メニューの背景色です。メインカラーの印象を損ねないために同系色で配色されるようにしてあります。チェックボックスにより表示・非表示の切り替えが出来ます。

見出し1

そのページで一番上にある大きな見出しのことです。HTMLの<h1>要素にあたります。文字の読みやすさを優先するため、ワンポイントで視線の誘導に使っております。

見出し背景

見出し1の背景のことです。チェックボックスにより表示・非表示の切り替えが出来ます。見出し1に合わせて同系色で配色されます。

見出し2

いわゆる中見出しで、HTMLでは<h2>要素にあたります。見出し1からのスムーズな視線の移動を促すため、見出し1よりも控えめな同系色を配色しています。

背景色

コンテンツ（中身）部分の背景色を表します。本文の文字色は黒であることを前提として、十分に読むことが可能なコントラストを維持するために、明るく控えめな色を配色いたします。こちらもチェックボックスにより表示・非表示の切り替えが出来ます。

単にきれいな色を作ってくださいという依頼は、カラーコーディネーターにとって楽なもののように感じられますが、実は最も配色を行いにくい業務の一つです。

さわやかなイメージを作りたい場合でも、その配色は1つではなく、まったく違う色を使ったパターンを作り、クライアントの好みによってそれらは選ばれ、根拠のない負担が掛かることになってしまいます。

本来、ウェブサイトの配色を決める場合には、その目的や競合サイトなどの入念な調査が必要であり、それを行うことがカラーコーディネーターの仕事なのです。

そしてそれらを追求し、論理的に配色を組み立てていけば、まったく異なる配色パターンが出来上がるということも少なくなっていくはずなのです。

私が配色の仕事を行う際には、最低限の情報として、これらのことを聞いています。実際にはこれだけでは情報としては足りませんので、これを叩き台にしてヒアリングを行っています。

• サイト名（既存のリニューアルの場合はURLも）
• 業種
• サイトを制作する目的
• 主なターゲット層
• 色で伝えたいイメージ（例：楽しい、すっきりしたなど）
• 競合サイト
• ロゴマーク
• ロゴの色は変更可能かどうか
• 理想と思われるイメージのサイト
• サイトで使いたい色
• サイトで使いたくない色
• その他

配色を外部に委託するときは、少なくともこれくらいの情報を渡すようにしましょう。また成果物にこれらの情報が反映されているのか、また反映されていないとすればどのような理由かをきちんと回答してもらうようにしましょう。

最近は色彩関連企業やカラーコーディネーターもウェブサイトやブログを持っておりますので、まずそれらを確認しておくことが重要です。

色の好き嫌いは別として、美しい配色を行っているのは当然のことですが、文字が読みやすいか、操作しやすいかなどは十分に確認してください。

カラーコーディネーターは色についてのプロです。自分で作ったサイトであれ、プロのデザイナーに作ってもらったサイトであれ、色がきちんとしていないのは大問題です。特に外注の場合であれば、外注先にきちんとした色を提示できるスキルがないということです。

営業用のウェブサイトがきちんとしているかどうかは最も判断しやすいのですが、個人の嗜好がありますので、本当に依頼して良いか数人で確認すると良いでしょう。

カラーコーディネーターの得意分野を確認する

一口にカラーコーディネーターと言っても、その業務範囲はファッション分野からインテリア・建築・工業分野まで多岐に渡るため、全てをカバーすることは出来ず、各々に得意分野があります。

ウェブサイトの配色の場合は単にきれいに色を合わせればよいだけでなく、マーケティングに関する部分はもちろん、様々なインターフェイスやウェブコンテンツJISなどについての知識が要求されるため、きちんとそれらのことを把握しているかどうかなども確認しておく必要があるでしょう。

印象を変えずにコントラストを付けたい時には明度を変えるのが一番簡単です。どうもぼんやりしていると感じる時は少し明度差を多めに付けるとメリハリのある配色になります。しかし色相と彩度は同じですので、統一感は損なわれません。

可読性は明度差によって決まる

明度に差を付けると言うことは可読性（読みやすさ）を考える上では非常に重要なことです。背景によっては会社やお店の名前やロゴが見えにくくなったりします。

2色間の境目がぼんやりして見える場合は、この2色を背景色と文字色にすると読みにくくなるいうことになります。

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

得意とするテーマ

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

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

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

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

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

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

アクセシビリティと色彩

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

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

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

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

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

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

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

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

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

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

現在とこれから

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

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

色彩に関する情報発信

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

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

2006年

3月29日

技術評論社の「Web Site Expert #06」より「使いやすい，伝わりやすい WebカラーコーディネートLesson」の連載が始まりました。

2005年

11月17日

このサイトをMovabletypeを利用してリニューアルしました。

9月29日

技術評論社発行の「Web Site Expert #04」の第2特集「配色で失敗しない！Webサイトの色彩設計」という20ページの記事を書きました。

9月21日

毎日コミュニケーションズより初の著書となるが発売されました。

6月29日

MdN発行の月刊ウェブクリエイターズに「配色の基本とルール」としてコラムを執筆しました。

2004年

12月9日

当サイトが、YAHOO!JAPANに登録されました。(トップ > コンピュータとインターネット > インターネット > WWW > ホームページ作成 > 「色彩の情報 」)

8月5日

当サイトが、Fuji Sankei Business i. にて、紹介されました。( HOME >> リリースボード >> 新サービス>> 「ホームページのカラーコーディネート手法を無料で提供」)

8月2日

当サイトが、週刊アスキーの新着Webサイトのコーナーにて、紹介されました。

5月21日

マイドーム大阪にて行われた大阪府産業デザインセンター主催のセミナー「Webコンテンツを効果的に見せる色彩計画」でメインスピーカーを務めました。

5月15日

マネジメントリンクにて行われたIvy SOHO主催のセミナー「WEBのカラーと最新のWEB制作について」でメインスピーカーを務めました。

2月20日

鯖江ITビジネス研究会「さばえIT塾」の2月度例会「Webサイトのカラーリング講座と、ホームページ診断」でメインスピーカーを務めました。

2月2日

扇町インキュベーションプラザ・メビック扇町主催のセミナー「明日使える色彩入門　はじめに決める1色」でメインスピーカーを務めました。

SEO 検索エンジン最適化

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

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

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

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

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

サービス案内サイト

ホームページ作成代行プロジェクト

確かなプロデュースとSEOで、クライアントのビジネスに貢献するホームページ作成代行を提供します。東京、大阪、千葉を中心に全国に対応。ホームページ制作とSEOならお任せください。

Internet-Strategy

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

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

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

ホームページ制作代行プロジェクト

確かなプロデュースとSEOで、クライアントのビジネスに貢献するホームページ制作代行サービスをご提供します。東京、大阪、千葉を中心に全国に対応。

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

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

記事の引用について

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

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

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

「坂本邦夫の『基礎からわかるホームページの配色』」は、インターネットで情報を発信する全ての方に色彩のことについて考えていただけるために、カラーコーディネートのための知識とコツを提供するサイトです。

多くの人がインターネットを利用するようになり、多様な情報が発信されるようになりました。そして非常に多くの有益な情報をインターネットから享受される方も多いと思います。しかし有益な情報であっても色彩のまずさにより、有益であることを判断すらしてもらえないサイトや逆に非常に美しいが重要な情報が全く伝わってこないようなサイトも多く見受けられます。

その多くの情報の中で埋もれてしまいがちな情報を、色彩を効果的に用い、スムーズな情報伝達を促すことによって、インターネットの発展に寄与できればと考えております。

美しいだけの配色は50点

美しいと感じさせる配色では50点だと私は考えています。「大変美しいが情報が読みにくい」とか「ボタンの場所がわかりにくい」ために、サイト内での移動がわかりにくいというような配色は問題です。そのためにビジネスの機械損失を起こしてしまうことも考えられます。

色彩は美しいと感じさせるイメージ作りはもちろんのことですが、それ以外にも心理的生理的影響などの様々な効果を持っております。特にウェブサイトにおいては特に機能的な面も多く要求されます。

美しい色を作るための色彩に関するウェブサイトは多数ありますが、機能的な部分まで考慮し、トータルに色彩設計を行うことで重要な情報や有益な情報を多くの方に伝えることが出来るようになります。

効果的な配色は自分で出来る

色彩の話をすると「私にはセンスがないから」と多くの方がおっしゃいます。しかし多くの先人達が蓄えてきた理論などに従うことにより、色彩に関する多くの問題を理論的に解決することが出来るのです。逆の言い方をすれば、一歩一歩色彩のことをすることによって、どなたにもカラーコーディネートを行うことは出来るのです。

確かにけして簡単なことではありませんし、多くの時間と労力を使うことになります。カラーコーディネーターに業務を依頼することも検討する必要があるでしょう。

しかしカラーコーディネーターに依頼しようとしても、今作ろうとしているサイトが何を目的とし、そのために必要な色彩がどのようなものであるのか、そして美しいだけでなく本当に役に立つ色彩とはどのようなものであるのかを知らなければ、その成果を知ることは出来ません。このようなことを考えれば配色の本質的な部分については自分自身で考えるべきであると考えております。

難しい理論は極力避け、すぐに取り入れて使いやすい知識やテクニックを公開したのが「坂本邦夫の『基礎からわかるホームページの配色』」です。このサイトの情報が少しでも皆様のお役に立てればうれしく思います。

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

テキストでのリンク

通常のテキストによるリンクをいただける場合には、特に制限はありません。好きなページに、好きな文字列を使用してリンクしてください。また、コメント文なども適当につけていただいても構いませんし、もちろん無くても構いません。当サイトの正式なサイト名は坂本邦夫の『基礎からわかるホームページの配色』、トップページのURLはhttp://www.webcolordesign.com/ですが、特にこの文字列やトップページのURLを使用しなくても構いません。あなたのサイトの文脈に合わせて、リンクテキストを任意の文字列に変えたり、リンク先を当サイト内のトップページ以外にすることは自由です。

ボタンバナーでのリンク

ボタンバナーを使用する場合には、少し制限を設けさせていただきます。申しわけございませんが、下に紹介するソースをコピーペーストしてそのままお使いください。これは当サイト管理者の都合で画像を作り替える可能性があることと、アンカーテキストの最適化のためです。よろしくお願いします。
Windows環境でInternetExplorerをご利用の方で、JavaScriptが有効な方は、「クリップボードにコピー」ボタンを押すことでソースをコピーできます。Netscapeユーザー及びMacユーザーの方でJavaScriptが有効な方は、「すべて選択」ボタンを押してから、コピーを行ってください。 それ以外の方は、テキストエリア内を手動で選択してコピーしてください。

このようにリンクを張っていただいた場合、画像表示に対応したブラウザでは下のように表示されます。なお、下の表示例はイメージで、実際のボタン画像ではありません。

なお、上のソースにtarget属性を指定していただいても構いません。ただし、フレーム内に表示させるようなtarget属性の指定はご遠慮ください。

トラックバックについて

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

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

コメントについて

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

基本的には背景色を使うことと文字の色を変えるのは見出しなど特別な場合を除いては変えることはお勧めしません。これは文字が読みにくいことで来訪者が帰ってしまうことを防ぐと共に、誰にでも使いやすいホームページを目指すことでビジネスの機会損失を減らすことも目的としております。

色覚障害者、白内障の方への配慮

色覚障害者は日本人男性の5%、女性では0.2%と言われ300万人以上の方が程度の差はあれ、色覚に障害を持っていると言われております。また白内障については60歳代では70%以上で水晶体の白濁が見られるそうです。

合計すると1000万人を軽く超えることは明らかで、今後高齢化社会が進行するにあたっては、文字の読みやすさは考慮されてしかるべき問題となっております。

このような状況も踏まえ、文字色を決定する際には富士通が提供しているColorSelectorやアイ・クリエイツの提供しているカラーコントラストチェッカーなどを使いチェックすることが望ましいでしょう。

通常、未訪問のリンクは青で訪問済みのリンクは赤紫、となっております。背景色が明るい場合にはそれほど神経質になることはありませんが、暗い場合にはテキストの色を変える必要が出てきます。

またリンク色が読めなくなる場合が多く、変更の必要が出てきますが、リンクの青色を黄色などに変更すると、そこがリンクと認識しにくくなります。そのような場合にはテキストのリンクを使わず、ボタンなどにしてリンクであることをはっきりさせておかないと操作性が格段に落ちることとなります。

リンク色を変更する場合

このような理由からリンク色については少なくとも色相を大きく動かすことは避けた方がよいでしょう。黄色や緑などにしてしまうと、リンクと通常のテキストとの区別が付きにくくなります。少なくともリンクの下線をスタイルシートで取り去るようなことは避けるようにしましょう。

ただし元のままの青をそのまま用いた場合、彩度、明度ともに高すぎ、Windowsでブラウン管のモニターをお使いの方にはまぶしく見えることもあります。その場合には明度や彩度を落として微調整のみ行うことにします。

ブラウザウインドウのサイズによって、幅が可変して最大幅が変わるようなデザインであればあまり問題はないのですが、固定レイアウトの場合、800×600ピクセルに対応して作られたデザインはもっと広い画面で見れば大きく隙間が出来てしまう場合があります。

この部分についつい色を使いたくなってしまいますが、使う場合でもほぼ白に近い色を彩度が低く、明るい色を使うようにしましょう。空いている面積がかなり大きいのでベースカラーなどを用いるとくどい印象になってしまいます。

この例ではベースカラーがHSB[30:60:80]、サブカラーにもHSB[30:40:60]と色相が30で統一感が出来ておりますので、背景の色として低彩度、高明度のHSB[35:5:95]を用いました。読みやすさを重視するために本文が入る部分の背景には色を付けておりません。

もちろん必要ないと判断された場合には背景色を使う必要はありません。