文字は読めますか？

前号までで色彩の基本知識についてのお話をしてきました。今回からいよいよサイトの色彩を向上させるためのお話に入っていきましょう。

まずは文字が読めるかどうかのチェックです。何を今更と仰る方も多いかもしれませんが、実はこれが出来ていないサイトというのも結構あるのです。きっとデザインを重視しようとして、いろんな色の上に文字を乗せようとするからでしょう。

読めない、あるいは読みにくいウェブサイトは論外です。

情報が伝わらないというのは、配色の美しさ以前の問題ですので、まずはここを直すところから始めます。せっかく「送料無料」などと高らかに謳おうとしても、読めなければ伝わらないのですよ・・・。

第2号でも申し上げたように、文字の読みやすさは背景色と文字色の明度の差で決まります。基本的には差が大きければ大きいほど読みやすいのです。と言うことは、中途半端な明るさの色は文字としては使わない方が無難ということになります。

さて、ここであなたのサイトを上から下まで眺めてみてください。きちんと読めるようになっていますか？　もし自分ではわかりにくいと言う場合には、ツールを使ってチェックしてみましょう。富士通のカラーセレクターなら、フリーソフトですし、画面の色を拾うスポイト機能なども付いています大変おすすめです。

文字に変な装飾をしない

文字は読めてこそ情報に意味があります。ですが、時々あえて読みにくくしているのかと思わせるような文字の装飾を見ることがあります。妙に複雑な模様の背景の上に文字を置いていたり、安っぽいドロップシャドウが掛かっていたりするんですね。

これも思い切ってやめてしまいましょう。私見を付け加えるなら、図で使っているような角POP体もかっこいいとは思えません。

もしかすると少し寂しいと感じることもあるかもしれませんが、読みにくいよりは遙かにマシです。それ以外の部分でメリハリを付けるテクニックを覚えれば済むことです。

装飾が閲覧者の情報取得のマイナスになっているような場合には、すぐに取り外すことを検討すべきです。余計なことをしないということも、配色においては重要なテクニックの一つなのです

トーンとは

トーンは明度と彩度を複合した概念で、日本語では色調などと呼ばれます。

などと書いても大変わかりにくいと思いますが、要するに「明度と彩度が割と似た色を集めてみたら、きれいに揃って、印象に残りやすそうな配色になるよね」ってことです。そこでいくつかのブロックに色を分けてみました。

これはJIS規格で決められているトーン（らしきもの）を元に、私が勝手に作ったものです。ですので、細かい色の違いは気にしなくてよいのですが、「ごくうすい～」辺りの色は優しい印象がしますし、「暗い」辺りの色ですと落ち着いて固いような雰囲気がします。

「ごく暗い」色を見て、明るくて心が浮き立つという人はあまりいないかと思いますし、色を見て感じるイメージは個人差はあるものの、人によってバラバラというほどでもありませんので、自分の直感に従って、作りたいイメージに合ったトーンを選ぶと良いでしょう。

トーンを組み合わせる

同じトーンから色を選んで配色を行うと、強いイメージが生まれますが、きつすぎたりぼんやりしたりすることがあります。そのため、違うトーンから色を選ばなければならないことが多々あります。

このような場合には、他のトーンからも色を選ばなければならないのですが、他のトーンからドカンと色を配置すると、元々のトーンのイメージは崩れてしまいます。そこで、違うトーンを使うときは、ちょこっとだけ追加すれば、最初に伝えたいと思ったイメージを維持することが出来ます。

ここまで3回で色彩の基礎の基礎についてお話してきましたが、次号からは必要な言葉はその都度覚えていただくことにして、いよいよ実践的な内容に入っていくことにしましょう。

彩度とは？

彩度とは色の鮮やかさのことです。最も鮮やかな色は純色などと呼ばれ、大変派手な印象を持っています。彩度がどんどんと下がっていくと、色は白・灰色・黒に近づいていき、色相はわからなくなってしまいます。このような白・灰色・黒を彩度の無い色という意味で無彩色と呼びます。くすんだ色は純色に比べると大変地味に見えますよね。

彩度は高い・低いで表すこともあります。鮮やかな色は「彩度が高い」、くすんだ色は「彩度が低い」ということになります。

鮮やかな色をたくさん使えば派手になり、見た目はにぎやかに見えますが、「ウォーリーをさがせ！」のようになってしまい、肝心の部分がどこにあるかわからなくなることもあります。何か情報を伝えるという目的をウェブサイトが持っている場合（ほとんどそうだと思いますが・・・）、彩度の高い色を使う場所を慎重に考えねばなりませんね。

よい配色を行うには、彩度の低い色や無彩色を上手に使うことがポイントになります。今まで派手な色ばかり使っていたという人は、ぜひくすんだ色を使うことにチャレンジしてみましょう。

明度とは？

明度とは色の明るさのことです。明るい・暗いという言葉は普段の生活でもよく使いますが、それと同じような感覚で使っていただければいいでしょう。明るい色を多く使うと軽く柔らかい印象になり、暗い色だと重く固い印象になります。

明度も高い・低いで表すことがあります。明るい色は「明度は高い色」、暗い明度は「明度が低い色」のように表現します。

重要なのは色の明度は見やすさや読みやすさと密接に関わっているということです。色相や彩度が違っていたとしても、明度が近い色の組み合わせの場合、境界線がぼんやりとしてしまいます。

特にモノクロで印刷した場合には、色相や彩度の違いはわからなくなり、明度の差だけが読みやすさに影響します。「プリントアウトしたら重要な情報が読めなかった」や「地図を持っていこうとしたけど、モノクロでは全然道がわからなかった」ということのないように、明度に差を付けることで、読みやすくするということを常に心がけなければなりません。

色の三属性とは？

ここまでに学んだ色相・明度・彩度を合わせて、色の三属性と呼んでいます。これからはこの3つを駆使して、様々な配色を考えていきますので、まずこの3つをきっちりと覚えるようにしてください。

色相とは？

例えばこの色はなんですかと聞いたときに多くの人が「赤」と答え、「明るい色」や「鮮やかな色です」と答える方はそれほど多くないでしょう。色を区別するときに最も多く使われる色味の違いのことを色相と呼びます。

日本語では赤・黄・緑・青・紫の5つと、その5つの組み合わせである橙（オレンジ）・黄緑・青緑・青紫・赤紫の合計10の色相が主に使われています。JIS規格では橙は黄赤と呼ばれますが、普段の生活で使うことはないかと思いますので、ここではわかりやすく橙かオレンジで表記しますね。

実際には一口に赤と言っても、紫がかった赤やオレンジっぽい赤など様々な赤が存在しますが、それらを全てひっくるめて赤と呼びましょう。

どこからどこまでを赤と呼ぶのか、緑と青緑の境界線はどこかという疑問もあるかもしれません。

しかしそんな細かいことを気にしてはいけません！

もちろん色彩の規格やシステムによって、その分類ははっきりしているのですが、多くの人にとっては必要のないものです。このメルマガにおいては私が赤と言えば赤です。皆さんが自分で作業するときは、自分が青と感じればそれでよいでしょう。

では、白・灰色・黒はどうなのか？　それは次回のメルマガで説明します。

色相環

これらの色相を細かく分解していくと、色相は連続していることがわかります。それを環状につなげた物を色相環と呼んでいます。色相環にも様々な種類がありますが、一般的には赤→オレンジ→黄→黄緑→緑→青緑→青→青紫→紫→赤紫→赤のように、色相の順番に色が連続的につながって、一周すれば元の色に戻るという形になっています。無秩序に並んでいるものは色相環と呼びません。

この色相環にも様々なスタイルがあって、6色であったり、10色、12色、20色、24色などいろいろな物が存在しています。

このメルマガでは、主に12色か24色の色相環を用いて、色を説明していきます。理由は既にそのデータを持っていて、使い回したいからです。

大事なことは色相というのは連続しているということなのです。ここはぜひ押さえておきたいところです。

このサイトの運営者

このサイトはカラープランニングオフィス・フォルトゥナが運営しています。フォルトゥナでは他にも様々な情報を無償で提供しております。そちらの方もどうぞご利用ください。

• 基礎からわかるホームページの配色
• 色彩の情報提供（フォルトゥナのサイト内）
• パーソナルカラーナビゲーター

講演・執筆などの依頼

運営者の坂本は雑誌や書籍の記事執筆、セミナーの講師なども行うウェブ配色に関するエキスパートです。

ウェブサイトの配色には隠すべき特別なノウハウなどはありません。私たちの日常業務では、個別の案件ごとに異なる対応をしますが、基本とされるものは特別なものでも何でもなく、色彩の知識を持ち、当たり前のことを当たり前に行っていくという性質の物ばかりですので、隠すようなものではありません。

今までにも講演や取材などによる情報発信に関して実績があり、今後も出し惜しみすることなく、多くの皆様に伝えていく所存です。講演・執筆・取材などのご依頼はお 気軽に E-Mail: kyunimaru@gmail.comまでご連絡ください。

また今までの実績等、詳しくはカラープランニングオフィス・フォルトゥナのウェブサイトの該当ページをご覧ください。

著作権(知的財産権)について

著作権について

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

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

記事の引用について

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

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

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

ごあいさつ

はじめまして。発行者の坂本邦夫です。今回から、ネットショップの配色についてのメールマガジンを発行していきます。どうぞよろしくお願いいたします。

デザイナーではない人向けのメルマガのつもりですので、読者の皆様の色に関するリクエストや悩みなどがあれば、ご意見などもいただければと思います。

それでは早速始めていきましょう。

きれいな色を作るだけではありません

あまり色の勉強をしたことがない方にとって、美しい配色を作るためにはどうすればよいかは、日々頭を悩ませる大きな問題なのかもしれません。しかし色の役割は相手に美しいと思わせるだけではありませんし、さらに重要なことは色にはTPOがあると言うことなのです。

画像：華やかな花の色例えば美しい花束などが部屋に置かれていたとします。それをあなたは大変美しい色だと感じました。だからと言って、その色で壁全体を塗ってみようとは思わないでしょうし、同じ色の服をすぐに買って着ようとも思わないはずです。

それと同じように、ある美しい配色が、そのウェブサイトにとって最適か、あるいは役に立っているのかは全く別問題なのです。

ウェブサイトならではの性質や、あなたが作りたいサイトの各部分の役割をふまえ、適材適所の色を配置することが重要なのです。

適材適所の色を使う

と言っても、一言で解決出来る問題ではありませんので、それは今後のメルマガに書かれていくわけですが、まずここでは、色によって解決出来そうなことを挙げてみましょう。

• サイト名やショップ名がきちんと見えていますか？
• 文字は読みやすくなっていますか？
• キャンペーンなどのバナーが色に埋もれていませんか？
• どこを押せばよいのか明示されていますか？
• 写真の色はくすんで見えたりしていませんか？
• なんとなくギラギラして見えるような画像はありませんか？

まだまだ、たくさんありますが、心当たりのある方も多くいるのではないでしょうか？　

でも、これらの問題の多くは、センスではなく、知識と技術で解決していくことが出来ます。

ですから、センスがないとあきらめてしまわずに、地道に知識を吸収していくことにしましょう。

機会損失を減らすのが目的です

サイトの配色だけで売り上げが決まるわけではないことは、皆さんもご理解いただいているかと思います。色は万能ではないのです。

しかし、色の使い方によって、サイトが使いにくくなったり、ユーザーにいつまで経っても覚えてもらえなかったり、帰られてしまったりということは十分あり得ます。せっかくの魅力ある店舗が色によって台無しになっていることも多いのです。

そんな色による機会損失を減らしていくためのあれこれをご紹介していこうと思います。

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

マガジンで配信した内容は、このサイトにも公開いたしますが、無理のないペースで学んでいただくためには、右上の登録フォームよりメルマガの登録をおすすめします。仕事の合間にでも読んで、知識を少しずつ貯めていきましょう。

こんな人におすすめのメルマガです

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

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

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

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

1から最善の色彩を作り上げるウェブカラー設計、既存のサイトの問題点と改善策をご提案するウェブカラーチェック、短期間で基礎からウェブの配色に必要な知識を学んでいただけるウェブカラー講座など、様々な色彩に関するサービスをご用意しております。