ウェブサイトの配色を行うための色彩学の基礎知識、配色前の準備、色彩設計などウェブサイトのカラーデザインに関する情報サイト
ウェブサイトの配色を行うための色彩学の基礎知識、配色前の準備、色彩設計などウェブサイトのカラーデザインに関する情報サイト
ホーム » カテゴリー：配色のポイント
ここまでの過程でせっかくきちんとした色彩設計をしても、その使い方を誤れば印象も変わってしまいます。実際の配色にあたっての気を付けるべきポイントをご紹介します。
ウェブサイトにおけるカラーコーディネーターの役割は、大きく2つに分かれます。それは企画段階におけるカラーマーケティングです。そしてデザイン時における確認と最終調整です。実はこの2つは同じ色を扱う作業でも、まったく異なる事を行うのです。
まずはカラーマーケティングの部分ですが、サイトの目的を踏まえ、使うべきロゴ（ない場合には提案）の色や競合サイトの調査に基づく使用色の提案です。例えば水を使う企業では当然青系の水をイメージさせる色を使いたいはずですが、競合サイトと似すぎていると、比較された時に見劣りする場合があります。これは単にデザインが見劣りするという意味でなく、後発の企業（特に無名の企業の場合）には、真似されたと感じられることも少なくありません。
だからと言って、水のイメージなのにオレンジをメインで使おうというのもおかしな話です。このバランスを考えながら、どのような色合いにすれば、印象に残りやすいかを考えることも重要です。これを考える際には、実店舗が存在するかどうか、あるとすればその近隣にはどのような競合があるのかも調べなければなりません。
もう一つのデザインの確認と調整は、カラーマーケティングから導き出された配色がきちんとデザインに反映されているかどうかに加え、最終段階で重要なのはユーザビリティとアクセシビリティの確保です。
これは実際にデザイナーが色を付けてみないとわからないことも多いのです。ワイヤフレームだけでは、リンク色や見出しと本文の関係、ナビゲーションの認識しやすさなどはわからないので、情報をいかに伝達するかを考えれば、配色案を決めたらそれで終わりというわけにはいきません。（だが、そのようなカラーコーディネーターも多いです・・・） また特定の人にとって使いにくいような配色では、操作や閲覧が困難という理由で帰られてしまうかもしれません。色によって、無用な機会損失も生まれてしまうのです。
サイトリニューアルなどでは、情報をスムーズに流れるようにするだけで、1人辺りのページビューは落ちても、問い合わせ率が上がることもあります。これはわかりにくさがなくなり、目的のページへ到達しやすくなったことを表します。色の効果はきれいに見せるだけではないのです。
カラーコーディネーターは、SEOなどのサイトを訪問するまでの手段にはまったく手を出すことも出来ませんし、きちんとしたサイトが構築されていなかったり、商品や情報が魅力的なものでなければ、いかに色でごまかそうとしても消費者には見抜かれてしまうでしょう。
言い換えれば、有益なコンテンツやよい商品が持つ力を、スムーズな形で伝え、そのビジネスに貢献することが、カラーコーディネーターの最重要の課題となります。カラーマーケティングだけ出来ていてもサイトとしては不十分ですし、インターフェースなどの機能面だけが充実していてもサイトの効果は下がってしまいます。
例えるならば、カラーコーディネーターの仕事は、作戦立案における参謀（プロデューサー・ディレクターの補助をしてカラーマーケティング）と実践面における後方支援・整備（色彩実装の確認）のまったく異なる仕事を行う必要があるのです。しかし、いずれにしても、いかにサイトを訪問したユーザーの印象に残し、ストレスを感じさせない色を作り上げるかが腕の見せ所と言えるでしょう。
SEOなどの訪問数を上げる施策はもちろん重要ですが、訪問されてからどのように問い合わせ・購入につなげるかも重要ですし、そこには色が何らかの貢献が出来るはずだと考えています。
と、そんなことを踏まえながら9月28日（火）のウェブカラーセミナーで話そうかと思っています。
投稿日時: 2010年07月24日 23時54分
カテゴリー： 配色を外部へ委託する | コメントはまだありません »
タグ： カラーマーケティング, 業務委託, 色の効果
文字の読みやすさに関しての調査結果を「アンケートの集計結果1（生データ）」「アンケートの設問について」「アンケートの集計結果に対する感想」の3つのエントリーに書いてきましたが、今回はそれらのまとめとなります。回答の数字だけでなく、いただいたご意見などもまとめて、読みやすさに関してまとめてみました。
アンケートでは好みの差も含まれていますが、大きくこのような傾向が出ていると思われます。
このような結果から、以下のように提言させていただきます。
あくまでご参考に。
投稿日時: 2010年06月15日 14時29分
カテゴリー： 文字の読みやすさに関する調査 | コメントはまだありません »
タグ： 可読性, 視認性, 調査
回答の2色がWCAG2.0のコントラスト比とWCAG1.0の色差・明度差をクリアしているかどうかの判定をし、同じ色の組み合わせを反転させたときの回答を比較して、感想を書いてみました。詳しい考察ではなく、私の主観と推測ですのでご注意ください。
WCAG2.0のコントラスト比達成基準は、
」となっております。今回のアンケートでは18ポイントの文字を使っておりますので、「大きい文字」の基準で判定しております。
| 選択肢 |  |
 |
|---|---|---|
| とても読みやすい | 10 | 31 |
| やや読みやすい | 41 | 44 |
| どちらでもない | 19 | 19 |
| やや読みにくい | 25 | 3 |
| とても読みにくい | 2 | 0 |
| まったく読めない | 0 | 0 |
WCAG2.0のコントラスト比はレベルAAAをクリアしていますが、WCAG1.0の方では明度差のみのクリアとなっております。
背景色が暗い方が、全般的にやや読みやすいという結果となりました。いただいたコメントにもありましたが、同じ色の組み合わせでも読みやすさが変わるということのようです。
| 選択肢 |  |
 |
|---|---|---|
| とても読みやすい | 4 | 23 |
| やや読みやすい | 13 | 38 |
| どちらでもない | 18 | 22 |
| やや読みにくい | 56 | 13 |
| とても読みにくい | 6 | 1 |
| まったく読めない | 0 | 0 |
こちらはどの基準も達成していないのですが、背景色が暗い方が読みやすいという結果が出ています。
もしかすると文字が白であることで、膨張色の効果で文字が太く見えることが関連しているのかもしれません。
| 選択肢 |  |
 |
|---|---|---|
| とても読みやすい | 27 | 20 |
| やや読みやすい | 32 | 29 |
| どちらでもない | 14 | 24 |
| やや読みにくい | 21 | 22 |
| とても読みにくい | 3 | 2 |
| まったく読めない | 0 | 0 |
こちらはコントラストは十分の組み合わせですが、比較的結果はばらけています。
読みやすさとは別に色の好みが結果に表れているのかもしれません。基準値をクリアしていればよいということではないようです。
今回の調査では短めの文章ですが、背景色と文字色が入れ替わってもあまり差は出ていませんが、長文になればより差が出てくる気もします。
| 選択肢 |  |
 |
|---|---|---|
| とても読みやすい | 5 | 7 |
| やや読みやすい | 21 | 24 |
| どちらでもない | 29 | 25 |
| やや読みにくい | 36 | 39 |
| とても読みにくい | 6 | 2 |
| まったく読めない | 0 | 0 |
WCAG2.0のコントラスト比はレベルAA、WCAG1.0の方は明度差のみのクリアとなっています。
読めないことはないが、好きこのんで読みたくないというところでしょうか。
| 選択肢 |  |
 |
|---|---|---|
| とても読みやすい | 50 | 56 |
| やや読みやすい | 31 | 33 |
| どちらでもない | 11 | 7 |
| やや読みにくい | 5 | 1 |
| とても読みにくい | 0 | 0 |
| まったく読めない | 0 | 0 |
基準値は全てクリアしています。正直なところ、この組み合わせを否定されたらどうしようもないというところです。
背景色が白の方がやや読みやすいという結果ですが、この辺りは好みなどの誤差の範囲かと考えています。
| 選択肢 |  |
 |
|---|---|---|
| とても読みやすい | 0 | 0 |
| やや読みやすい | 2 | 6 |
| どちらでもない | 6 | 9 |
| やや読みにくい | 30 | 59 |
| とても読みにくい | 58 | 23 |
| まったく読めない | 1 | 0 |
どれも基準値にはるかに及ばない数字になっています。これだけ読みにくい人が多いということは、避けた方がよい配色でしょう。
まったく読めないという回答も一人ありました。
| 選択肢 |  |
 |
|---|---|---|
| とても読みやすい | 74 | 46 |
| やや読みやすい | 19 | 36 |
| どちらでもない | 3 | 8 |
| やや読みにくい | 1 | 7 |
| とても読みにくい | 0 | 0 |
| まったく読めない | 0 | 0 |
こちらも基準値ははるかに超えており、かなり多くの方が読みやすいという方向で回答されています。
設問5と30の組み合わせに非常に近い色ですが、ややコントラストが高くなっています。背景が薄いグレーになっている方が、「圧倒的にとても読みやすい」という回答が多いという結果になっているのがおもしろいところです。どのような理由から来るものなのか考えてみるべき場所かもしれません。
| 選択肢 |  |
 |
|---|---|---|
| とても読みやすい | 1 | 0 |
| やや読みやすい | 2 | 1 |
| どちらでもない | 2 | 0 |
| やや読みにくい | 17 | 5 |
| とても読みにくい | 71 | 66 |
| まったく読めない | 4 | 25 |
およそ読みにくいことが想像される、推奨されない組み合わせの代表的な例ですが、背景色が赤い方が全く読めないという方が非常に多くなっているのが興味深い点です。
| 選択肢 |  |
 |
|---|---|---|
| とても読みやすい | 5 | 5 |
| やや読みやすい | 32 | 25 |
| どちらでもない | 28 | 25 |
| やや読みにくい | 29 | 34 |
| とても読みにくい | 3 | 8 |
| まったく読めない | 0 | 0 |
コントラスト比がぎりぎり基準に満たないという数字でこの結果が出ておりますので、この規格はある程度妥当な基準値が設定してあるなと感じました。
実はこの組み合わせも全ての基準をクリアしていない組み合わせになっています。好みが出ているのかもしれませんが、「やや読みやすい」「とても読みやすい」の方がかなり多いという結果となっています。
設問10と設問35
| 選択肢 |  |
 |
|---|---|---|
| とても読みやすい | 19 | 41 |
| やや読みやすい | 25 | 35 |
| どちらでもない | 17 | 17 |
| やや読みにくい | 28 | 4 |
| とても読みにくい | 8 | 0 |
| まったく読めない | 0 | 0 |
WCAG2.0のコントラスト比がレベルAAとなっており、1.0の方では両方クリアしています。
ですが、赤い背景の方が読みにくいという方がかなり多いようです。文字は白ですので、膨張色の効果も期待できそうですが、それ以上に読みにくい要因があるのかもしれません。
| 選択肢 |  |
 |
|---|---|---|
| とても読みやすい | 29 | 9 |
| やや読みやすい | 34 | 22 |
| どちらでもない | 14 | 15 |
| やや読みにくい | 18 | 42 |
| とても読みにくい | 2 | 0 |
| まったく読めない | 0 | 0 |
コントラスト比は9.2:1とかなり高い数字になっているのですが、色差・明度差とも基準値に達していません。
こちらは緑背景の方が、圧倒的に読みにくい割合が増えています。彩度の高すぎる背景色は好まれないのかもしれません。
| 選択肢 |  |
 |
|---|---|---|
| とても読みやすい | 61 | 27 |
| やや読みやすい | 28 | 31 |
| どちらでもない | 5 | 17 |
| やや読みにくい | 3 | 20 |
| とても読みにくい | 0 | 2 |
| まったく読めない | 0 | 0 |
こちらはコントラスト比が十分で、リンク色に使われているのも納得の組み合わせです。
ただし背景色が青い場合には、とても読みやすいという比率はかなり下がります。やはり高彩度の背景色はあまり好まれていないようです。
| 選択肢 |  |
 |
|---|---|---|
| とても読みやすい | 2 | 1 |
| やや読みやすい | 4 | 3 |
| どちらでもない | 14 | 8 |
| やや読みにくい | 52 | 48 |
| とても読みにくい | 25 | 36 |
| まったく読めない | 0 | 1 |
こちらもいずれの基準値も満たさないかなり読みにくい組み合わせです。
オレンジの背景色をとても読みにくいとされた方が多めになっています。
| 選択肢 |  |
 |
|---|---|---|
| とても読みやすい | 19 | 19 |
| やや読みやすい | 30 | 30 |
| どちらでもない | 17 | 20 |
| やや読みにくい | 27 | 23 |
| とても読みにくい | 4 | 5 |
| まったく読めない | 0 | 0 |
いずれの基準値も満たす、コントラスト十分の組み合わせですが、やや読みにくいと判断された方がかなり多くなっています。
補色に近い配色になりますので、数値以上にコントラストが強いと感じられるのかもしれません。青背景に黄文字の分布は、設問37の青背景に白文字とそれほど変わりませんが、黄色背景に青文字は、設問36の白背景に青文字よりもずっと読みにくいという結果になります。
読みやすさに背景色の彩度がかなり関連性があることを示唆しているように思えます。
| 選択肢 |  |
 |
|---|---|---|
| とても読みやすい | 52 | 37 |
| やや読みやすい | 40 | 36 |
| どちらでもない | 5 | 18 |
| やや読みにくい | 0 | 6 |
| とても読みにくい | 0 | 0 |
| まったく読めない | 0 | 0 |
この組み合わせもコントラストは十分の組み合わせです。
白背景の方がやや読みやすいという傾向が出ていますが、茶背景の方もなかなか読みやすいようです。
白文字は膨張色の効果が出るのではないかという仮説をさっき書きましたが、ここではあまり感じられません。あるいは他の要因があるのでしょうか。
| 選択肢 |  |
 |
|---|---|---|
| とても読みやすい | 5 | 3 |
| やや読みやすい | 24 | 16 |
| どちらでもない | 31 | 21 |
| やや読みにくい | 32 | 44 |
| とても読みにくい | 5 | 13 |
| まったく読めない | 0 | 0 |
コントラスト比はレベルAAをクリアしていますので、読めないことはないという基準の組み合わせになります。ただし、WCAG1.0の方では基準値にまったく届いていません。
「とても読みやすい」という方もいらっしゃいますが、読みにくいという方も多いので、これもWCAG2.0のコントラスト比がそれなりに妥当であるという印象を受けます。
| 選択肢 |  |
 |
|---|---|---|
| とても読みやすい | 27 | 24 |
| やや読みやすい | 37 | 34 |
| どちらでもない | 16 | 22 |
| やや読みにくい | 14 | 15 |
| とても読みにくい | 3 | 2 |
| まったく読めない | 0 | 0 |
WCAG1.0の色差だけ基準を満たしていないのですが、それもわずかなことです。色の組み合わせが変わってもそれほど結果に差はありません。
この組み合わせも好みの差が出ているのかもしれませんが、高彩度色の組み合わせの中では、比較的無難な結果となっています。ただし積極的に使いたいという組み合わせでもありません。
| 選択肢 |  |
 |
|---|---|---|
| とても読みやすい | 45 | 36 |
| やや読みやすい | 40 | 43 |
| どちらでもない | 11 | 15 |
| やや読みにくい | 1 | 2 |
| とても読みにくい | 0 | 1 |
| まったく読めない | 0 | 0 |
いずれの基準も満たす組み合わせで、概ね読みやすいという評価をしていいかと思います。
背景色が青緑の方が、「とても読みやすい」が減っていることについては、検討が必要でしょう。
| 選択肢 |  |
 |
|---|---|---|
| とても読みやすい | 8 | 1 |
| やや読みやすい | 25 | 8 |
| どちらでもない | 15 | 18 |
| やや読みにくい | 38 | 40 |
| とても読みにくい | 9 | 28 |
| まったく読めない | 2 | 2 |
WCAG2.0のコントラスト比はクリアしていますが、色差・明度差とも基準には遠く及びません。どちらかというと読みにくいという人の方が多い組み合わせであることに要注意です。
設問10と35の時は文字が白でしたが、背景色が鮮やかな赤の場合には、読みにくさが増すようです。アクセントとして非常に重要な色なので、使い方に気をつける必要がありそうです。
| 選択肢 |  |
 |
|---|---|---|
| とても読みやすい | 30 | 29 |
| やや読みやすい | 51 | 31 |
| どちらでもない | 13 | 22 |
| やや読みにくい | 3 | 14 |
| とても読みにくい | 0 | 1 |
| まったく読めない | 0 | 0 |
どの基準値をクリアする配色です。訪問済みのリンク色として使わることにも納得出来ます。
この紫は比較的彩度が高いせいか、背景色になった場合には読みにくくなるのかもしれません。
| 選択肢 |  |
 |
|---|---|---|
| とても読みやすい | 42 | 38 |
| やや読みやすい | 37 | 39 |
| どちらでもない | 14 | 17 |
| やや読みにくい | 4 | 3 |
| とても読みにくい | 0 | 0 |
| まったく読めない | 0 | 0 |
この組み合わせもよく使われる組み合わせですが、色差だけはクリアしておりません。
設問5と30の組み合わせに比べると、ややコントラストが低い組み合わせとなっていますが、「とても読みやすい」の比率はやや下がっています。この例のように短い文章である場合には、やや物足りないコントラストなのかもしれませんが、長文の場合にはどうかというのは今度の研究課題でしょう。
| 選択肢 |  |
 |
|---|---|---|
| とても読みやすい | 5 | 7 |
| やや読みやすい | 23 | 21 |
| どちらでもない | 30 | 25 |
| やや読みにくい | 36 | 40 |
| とても読みにくい | 3 | 4 |
| まったく読めない | 0 | 0 |
いずれの基準にも満たない組み合わせで、背景色と文字色を入れ替えても結果に差は出ませんでした。私の主観ではあらためて2つ並べてみると、オレンジが背景の方が見えやすいように感じました。皆さんの環境ではいかがでしょうか？
| 選択肢 |  |
 |
|---|---|---|
| とても読みやすい | 9 | 2 |
| やや読みやすい | 30 | 15 |
| どちらでもない | 35 | 30 |
| やや読みにくい | 20 | 45 |
| とても読みにくい | 3 | 5 |
| まったく読めない | 0 | 0 |
これもコントラスト比はかろうじてクリアしているという数値になっています。この付近の数値の場合、「どちらでもない」を中心に「やや読みやすい」と「やや読みにくい」の両方が出てくるように思います。
そのような意味で、WCAG2.0のコントラスト比のレベルAAという基準は、最低限読めるけれども、やや物足りないという位置づけが出来るのかもしれません。
| 選択肢 |  |
 |
|---|---|---|
| とても読みやすい | 18 | 16 |
| やや読みやすい | 50 | 38 |
| どちらでもない | 25 | 24 |
| やや読みにくい | 4 | 17 |
| とても読みにくい | 0 | 2 |
| まったく読めない | 0 | 0 |
色差以外は基準値をクリアしています。
ただし背景色が暗い場合には、「やや読みにくい」という数字が増えています。
| 選択肢 |  |
 |
|---|---|---|
| とても読みやすい | 41 | 18 |
| やや読みやすい | 38 | 43 |
| どちらでもない | 17 | 23 |
| やや読みにくい | 1 | 13 |
| とても読みにくい | 0 | 0 |
| まったく読めない | 0 | 0 |
上の設問24と49と同様に、色差以外はクリアしている例で、コントラスト比は4.5:1となっています。
ただし背景色が緑色の場合に、とても「読みやすい」と「読みやすい」が大変多くなっているのが特徴です。同じコントラスト比でかなり差が出ているのがおもしろい結果となりました。この辺りも要検討でしょう。
投稿日時: 2010年05月18日 19時45分
カテゴリー： 文字の読みやすさに関する調査 | 2件のコメント »
タグ： 可読性, 視認性, 調査
調査結果の考察に入る前にまずはいただいたご意見を踏まえて、どのような基準で設問を作ったかを説明したいと思います。
今回の調査では、条件付けはほとんどせず、テキストは「コントラスト比と読みやすさ」としました。今にして思えば配色と全然関係ない言葉でもよかったようにも思いますが、気づいたときにはいくつか回答をいただいておりましたので、やむを得ずそのままにしておりました。
背景色が全面に大きく使われている場合には、当然回答も変わってくるかと思います。短い文章にしたのは、見出しに使用する場合を想定したからです。これは背景色が全面に施されるよりも、見出しなどの一部に使われることが多いというところからです。もちろん今回の例のようなサイズだと見えやすい場合でも、全面に使えば見えにくいと感じることも多々あるかと思いますが、逆にこのサイズでも見えにくいものは、大きく使っても見えにくいと思います。
そして色の問題ですので、個人の好みの差が出るはずですが、そこまで考えていくと、ただでさえ多い設問や選択肢がもっと増えていくので、今回は大雑把な方向のようなものがわかればよいと考えています。
またいくつかの組み合わせを除いては、実際にウェブ上で見かけた配色を使っています。気づかれた方も多いと思いますが、設問1～25と設問26～50は同じ色の組み合わせを反転させたものになっています。WCAG1.0の色差・明度差やWCAG2.0のコントラスト比はあくまで、2色の差だけに着目した基準ですが、「実際にはどちらを背景にするかによって、感じ方に差が出るのではないか」という仮説を立てて設問を作った結果、全部で50問という数になってしまいました。長いアンケートに最後までお付き合いいただいた方には心から感謝いたします。
フォントによっても読みやすさが変わるのはご意見をいただいたとおりです。メイリオフォントという例を挙げていただきましたが、フォントが大きくなる、太くなるということは、文字の各部が太くなりますので、その分コントラストが出やすくなるので、読みやすくなるはずです。OSやブラウザによってもフォントは変わりますし、アンチエイリアスの掛かり方も変わりますし、モニターによって見え方が異なるのも当然です。またそれぞれが設定をカスタマイズしていることも考えられますので、今回はアンチエイリアスなしの18ポイントの「MS P ゴシック」ということで、画像を作りました。
投稿日時: 2010年05月18日 18時22分
カテゴリー： 文字の読みやすさに関する調査 | 1件のコメント »
タグ： 可読性, 視認性, 調査
2010年2月19日から4月30日のかけて、文字の読みやすさに関するアンケートを実施し、98名の方の回答をいただきました。ご協力ありがとうございました。考察は後ほど加えるとしまして、まずは結果の生データを公開しておきます。
質問は「この色の組み合わせは読みやすいですか？」とだけ記し、特に条件などは設けておりません。異なる背景と文字の組み合わせを読んでもらい、それぞれを「とても読みやすい」「やや読みやすい」「どちらでもない」「やや読みにくい」「とても読みにくい」「まったく読めない」の6段階で分類していただきました。
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 10 |  |
| やや読みやすい | 41 | |
| どちらでもない | 19 | |
| やや読みにくい | 25 | |
| とても読みにくい | 2 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 4 | |
| やや読みやすい | 13 | |
| どちらでもない | 18 | |
| やや読みにくい | 56 | |
| とても読みにくい | 6 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 27 | |
| やや読みやすい | 32 | |
| どちらでもない | 14 | |
| やや読みにくい | 21 | |
| とても読みにくい | 3 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 5 | |
| やや読みやすい | 21 | |
| どちらでもない | 29 | |
| やや読みにくい | 36 | |
| とても読みにくい | 6 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 50 | |
| やや読みやすい | 31 | |
| どちらでもない | 11 | |
| やや読みにくい | 5 | |
| とても読みにくい | 0 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 0 | |
| やや読みやすい | 2 | |
| どちらでもない | 6 | |
| やや読みにくい | 30 | |
| とても読みにくい | 58 | |
| まったく読めない | 1 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 74 | |
| やや読みやすい | 19 | |
| どちらでもない | 3 | |
| やや読みにくい | 1 | |
| とても読みにくい | 0 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 1 | |
| やや読みやすい | 2 | |
| どちらでもない | 2 | |
| やや読みにくい | 17 | |
| とても読みにくい | 71 | |
| まったく読めない | 4 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 5 | |
| やや読みやすい | 32 | |
| どちらでもない | 28 | |
| やや読みにくい | 29 | |
| とても読みにくい | 3 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 19 | |
| やや読みやすい | 25 | |
| どちらでもない | 17 | |
| やや読みにくい | 28 | |
| とても読みにくい | 8 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 29 | |
| やや読みやすい | 34 | |
| どちらでもない | 14 | |
| やや読みにくい | 18 | |
| とても読みにくい | 2 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 61 | |
| やや読みやすい | 28 | |
| どちらでもない | 5 | |
| やや読みにくい | 3 | |
| とても読みにくい | 0 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 2 | |
| やや読みやすい | 4 | |
| どちらでもない | 14 | |
| やや読みにくい | 52 | |
| とても読みにくい | 25 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 19 | |
| やや読みやすい | 30 | |
| どちらでもない | 17 | |
| やや読みにくい | 27 | |
| とても読みにくい | 4 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 52 | |
| やや読みやすい | 40 | |
| どちらでもない | 5 | |
| やや読みにくい | 0 | |
| とても読みにくい | 0 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 5 | |
| やや読みやすい | 24 | |
| どちらでもない | 31 | |
| やや読みにくい | 32 | |
| とても読みにくい | 5 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 27 | |
| やや読みやすい | 37 | |
| どちらでもない | 16 | |
| やや読みにくい | 14 | |
| とても読みにくい | 3 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 45 | |
| やや読みやすい | 40 | |
| どちらでもない | 11 | |
| やや読みにくい | 1 | |
| とても読みにくい | 0 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 8 | |
| やや読みやすい | 25 | |
| どちらでもない | 15 | |
| やや読みにくい | 38 | |
| とても読みにくい | 9 | |
| まったく読めない | 2 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 30 | |
| やや読みやすい | 51 | |
| どちらでもない | 13 | |
| やや読みにくい | 3 | |
| とても読みにくい | 0 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 42 | |
| やや読みやすい | 37 | |
| どちらでもない | 14 | |
| やや読みにくい | 4 | |
| とても読みにくい | 0 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 5 | |
| やや読みやすい | 23 | |
| どちらでもない | 30 | |
| やや読みにくい | 36 | |
| とても読みにくい | 3 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 9 | |
| やや読みやすい | 30 | |
| どちらでもない | 35 | |
| やや読みにくい | 20 | |
| とても読みにくい | 3 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 18 | |
| やや読みやすい | 50 | |
| どちらでもない | 25 | |
| やや読みにくい | 4 | |
| とても読みにくい | 0 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 41 | |
| やや読みやすい | 38 | |
| どちらでもない | 17 | |
| やや読みにくい | 1 | |
| とても読みにくい | 0 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 31 | |
| やや読みやすい | 44 | |
| どちらでもない | 19 | |
| やや読みにくい | 3 | |
| とても読みにくい | 0 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 23 | |
| やや読みやすい | 38 | |
| どちらでもない | 22 | |
| やや読みにくい | 13 | |
| とても読みにくい | 1 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 20 | |
| やや読みやすい | 29 | |
| どちらでもない | 24 | |
| やや読みにくい | 22 | |
| とても読みにくい | 2 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 7 | |
| やや読みやすい | 24 | |
| どちらでもない | 25 | |
| やや読みにくい | 39 | |
| とても読みにくい | 2 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 56 | |
| やや読みやすい | 33 | |
| どちらでもない | 7 | |
| やや読みにくい | 1 | |
| とても読みにくい | 0 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 0 | |
| やや読みやすい | 6 | |
| どちらでもない | 9 | |
| やや読みにくい | 59 | |
| とても読みにくい | 23 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 46 | |
| やや読みやすい | 36 | |
| どちらでもない | 8 | |
| やや読みにくい | 7 | |
| とても読みにくい | 0 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 0 | |
| やや読みやすい | 1 | |
| どちらでもない | 0 | |
| やや読みにくい | 5 | |
| とても読みにくい | 66 | |
| まったく読めない | 25 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 5 | |
| やや読みやすい | 25 | |
| どちらでもない | 25 | |
| やや読みにくい | 34 | |
| とても読みにくい | 8 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 41 | |
| やや読みやすい | 35 | |
| どちらでもない | 17 | |
| やや読みにくい | 4 | |
| とても読みにくい | 0 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 9 | |
| やや読みやすい | 22 | |
| どちらでもない | 15 | |
| やや読みにくい | 42 | |
| とても読みにくい | 9 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 27 | |
| やや読みやすい | 31 | |
| どちらでもない | 17 | |
| やや読みにくい | 20 | |
| とても読みにくい | 2 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 1 | |
| やや読みやすい | 3 | |
| どちらでもない | 8 | |
| やや読みにくい | 48 | |
| とても読みにくい | 36 | |
| まったく読めない | 1 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 19 | |
| やや読みやすい | 30 | |
| どちらでもない | 20 | |
| やや読みにくい | 23 | |
| とても読みにくい | 5 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 37 | |
| やや読みやすい | 36 | |
| どちらでもない | 18 | |
| やや読みにくい | 6 | |
| とても読みにくい | 0 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 3 | |
| やや読みやすい | 16 | |
| どちらでもない | 21 | |
| やや読みにくい | 44 | |
| とても読みにくい | 13 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 24 | |
| やや読みやすい | 34 | |
| どちらでもない | 22 | |
| やや読みにくい | 15 | |
| とても読みにくい | 2 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 36 | |
| やや読みやすい | 43 | |
| どちらでもない | 15 | |
| やや読みにくい | 2 | |
| とても読みにくい | 1 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 1 | |
| やや読みやすい | 8 | |
| どちらでもない | 18 | |
| やや読みにくい | 40 | |
| とても読みにくい | 28 | |
| まったく読めない | 2 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 29 | |
| やや読みやすい | 31 | |
| どちらでもない | 22 | |
| やや読みにくい | 14 | |
| とても読みにくい | 1 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 38 | |
| やや読みやすい | 39 | |
| どちらでもない | 17 | |
| やや読みにくい | 3 | |
| とても読みにくい | 0 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 7 | |
| やや読みやすい | 21 | |
| どちらでもない | 25 | |
| やや読みにくい | 40 | |
| とても読みにくい | 4 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 2 | |
| やや読みやすい | 15 | |
| どちらでもない | 30 | |
| やや読みにくい | 45 | |
| とても読みにくい | 5 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 16 | |
| やや読みやすい | 38 | |
| どちらでもない | 24 | |
| やや読みにくい | 17 | |
| とても読みにくい | 2 | |
| まったく読めない | 0 | |
| 選択肢 | 回答数 | |
|---|---|---|
| とても読みやすい | 18 | |
| やや読みやすい | 43 | |
| どちらでもない | 23 | |
| やや読みにくい | 13 | |
| とても読みにくい | 0 | |
| まったく読めない | 0 | |
| 性別 | 人数 | |
|---|---|---|
| 男性 | 57 | |
| 女性 | 41 | |
| 年齢 | 人数 | |
|---|---|---|
| 0～ 9歳 | 0 | |
| 10～ 19歳 | 2 | |
| 20～ 29歳 | 35 | |
| 30～ 39歳 | 43 | |
| 40～ 49歳 | 13 | |
| 50～ 59歳 | 5 | |
| 60～ 69歳 | 0 | |
投稿日時: 2010年05月02日 15時22分
カテゴリー： 文字の読みやすさに関する調査 | コメントはまだありません »
タグ： 可読性, 視認性, 調査
今年（2010年）に改訂されるとされるWeb JIS（JIS X8341-3:2010）の公開レビュー版を読みましたので、文字色について少し書いてみようと思います。正式版ではどうなるやらわかりませんが、大きく変わることもないでしょう。
と言うわけで公開レビュー版で出てきている内容は、W3Cが勧告したWeb Content Accessibility Guidelines（WCAG)2.0の内容と同じものになっております。各国で基準が異なるというのもおかしな話ですので、世界的な標準となるWCAG2.0に従ったというのは大変評価出来ることだと思います。
2004年版が「背景色と文字色で十分に明度差を付けなさい」とか「色だけで情報を区別せずに、文字情報と合わせて使いなさい」と言ったような、言ってみれば大雑把な指針が示されただけなのですが、今回の改訂で最も重要な部分として、きちんと数値化された達成基準が示されたことにあります。
今回の改訂では文字色の達成基準は文字コントラストによって示されています。では文字コントラストとは何かと言うことですが、以下の式で表されます。
コントラスト比 (L1 + 0.05) / (L2 + 0.05)
このL1は明るい方の色の相対輝度、L2は暗い方の相対輝度を表します。ではこの相対輝度はどのように計算されるかと言いますと、
- 相対輝度
- L = 0.2126 * R + 0.7152 * G + 0.0722 * B
また新しいRGBという記号が出てきましたが、こちらについては、
- if RsRGB <= 0.03928 then R = RsRGB/12.92 else R = ((RsRGB+0.055)/1.055) ^ 2.4
- if GsRGB <= 0.03928 then G = GsRGB/12.92 else G = ((GsRGB+0.055)/1.055) ^ 2.4
- if BsRGB <= 0.03928 then B = BsRGB/12.92 else B = ((BsRGB+0.055)/1.055) ^ 2.4
として定義されております。ついでにRsRGB、GsRGB、および BsRGB は
- RsRGB = R8bit/255
- GsRGB = G8bit/255
- BsRGB = B8bit/255
このような式で計算されます。この計算結果は1:1～21:1の間の値を取るのですが、この比が4.5:1を超えていれば達成基準AAをクリア、7:1を超えていれば達成基準AAAをクリアしていることになります。
また大きいサイズの文字（半角英数字なら18あるいは14ポイント以上の太字、日本語のフォントであれば22あるいは18ポイント以上の太字）の場合には、達成基準AAを満たすためには3:1、達成基準AAAを満たすためには4.5:1というように、フォントのサイズによっても基準は変わってきます。
とは言え、このような複雑な計算を毎回やってられませんので、インフォアクシアさんが提供されているカラー・コントラスト・アナライザー 2.2 日本語版を利用することにしましょう。
では背景色が白い場合のコントラスト比を実際に見てみましょう。12ptと18ptの文字を用意しました。背景色は#FFFFFFの白、文字色は#000000の黒から#111111、#222222のように順に明るくしていきます。
| 文字色 | コントラスト比 | 達成基準AA | 達成基準AAA |
|---|---|---|---|
| #000000 | 21:1 | OK | OK |
| #111111 | 18.9:1 | OK | OK |
| #222222 | 15.9:1 | OK | OK |
| #333333 | 12.6:1 | OK | OK |
| #444444 | 9.7:1 | OK | OK |
| #555555 | 7.5:1 | OK | OK |
| #666666 | 5.7:1 | OK | NG |
| #777777 | 4.5:1 | OK | NG |
| #888888 | 3.5:1 | NG | NG |
| #999999 | 2.8:1 | NG | NG |
| 文字色 | コントラスト比 | 達成基準AA | 達成基準AAA |
|---|---|---|---|
| #000000 | 21:1 | OK | OK |
| #111111 | 18.9:1 | OK | OK |
| #222222 | 15.9:1 | OK | OK |
| #333333 | 12.6:1 | OK | OK |
| #444444 | 9.7:1 | OK | OK |
| #555555 | 7.5:1 | OK | OK |
| #666666 | 5.7:1 | OK | OK |
| #777777 | 4.5:1 | OK | OK |
| #888888 | 3.5:1 | OK | NG |
| #999999 | 2.8:1 | NG | NG |
12ポイントの方では白（＃FFFFFF)の背景色に対し、文字色#777777までなら達成基準AAを、#555555までなら達成基準AAAもクリアすることが出来ます。次に大きなフォントとされる18ポイントの方では、#888888までで達成基準AAを、#777777までで達成基準AAAをクリアすることが出来ます。
もちろんフォントの形状などによっては、見やすさは変わってきますので、「最低限」とされるAAではなく、「より十分」なAAAを目指していくのがよいでしょう。また、この基準をクリアしたからと言って、読みやすいとは限りません。特に加減ぎりぎりになってくると、色相などによっても読みにくく感じてしまうでしょう。
背景色が#FFFFFFの白の場合に限って言えば、背景色と文字色との差が小さいほど柔らかい印象に見えますが、私の個人の主観としては、柔らかさを表現するために文字色を#666666以上の明るさにする必要を感じません。もしそれが必要なのであれば、その他の部分の色で表現することが可能だからです。
今回のJISの改訂は「こうした方がよい」と言うものではなく、「こうあるべきである」と言うことを示したものです。Webや色彩のプロフェッショナルがまず範を示し、広く世の中に知らしめるようにしたいものです。
投稿日時: 2010年02月19日 13時21分
カテゴリー： JIS規格への対応 | コメントはまだありません »
タグ： JIS X8341-3, アクセシビリティ, 可読性
同じ色の組み合わせでも、サイズが異なればその組み合わせによる印象や機能が変わる場合があります。
図は同じ2色の組み合わせを高さを変えて並べてみた例です。左から30ピクセル、10ピクセル、5ピクセル、2ピクセル、1ピクセルとなっています。理屈の上では、2色の差は変わらないのですが、右に行くほど2色の境界線はわかりにくくなっていきます。この現象は2色の彩度が低いほど顕著になります。2色の物理的な性質は左から右まで変わらないので、見え方の違いは見る側の人間の脳の働きによるものなのです。
この見え方が問題になってくるのは、主に細い文字による表現においてです。表示するフォントのサイズにもよりますが、通常のテキスト部分で使われるサイズだと文字の線は太さが1ピクセルであることが多いでしょう。その際に強調やリンクなどの色を変えたときに、思ったほど色の差がないという場合が多いのです。単なる強調である場合には、文字は読めるわけなので、読み進める上での問題はないのですが、これが下線を取り外したリンクである場合には、クリックされないと困るような事態も生じます。そこで、下のように強調する方の色の彩度や明度を調整して、より目立たせるようにしなければなりません。
閲覧環境によっても、同じ色が様々な見え方になったりします。色の差で何か情報を伝えたいような場合には、あまり細いラインなどは使わないようにした方が無難でしょう。文字色ではなく、背景色を使って強調するのも、情報を区別する良い方法です。
投稿日時: 2010年02月14日 21時20分
カテゴリー： 使いやすさを考えた配色 | コメントはまだありません »
タグ： ユーザビリティ, 視認性
サイトのデザインをする時にページの上から行うのでなく、どこに何を置くかを考えてから配色します。
これまでは色彩設計を説明するため、便宜上いろいろなサンプルをお見せしてきましたが、皆さんが作っているウェブサイトとはアピールしたいこともメニューの数も違うはずです。
しかしこんな感じにしたいというレイアウトや他のウェブサイトを見て気に入ったデザインなどもあるはずです。またシンプルでものすごくわかりやすいブログのような文章を読ませることを中心としたデザインもあります。
カラーのイメージを中心にアピールするのであれば、それぞれの色を大きな面積に用いることになるでしょうし、テキストを重視するのであれば全体の面積を減らして、白い背景色を中心とした配色になるでしょう。
まずは表示する情報を手書きでもよいので、大雑把に決めてみましょう。重要なことはレイアウトしながら配色していくのではなく、レイアウトをしてから配色すると言うことです。言うまでもないことですが、レイアウトが決まらなければ面積比を考えようがないからです。
あとは読ませたい部分が読みやすいか、自分の伝えたいイメージが伝えられているかを考えながら配色していきます。行き詰まってしまった時は引き算を上手にしてやれば、混乱することもないでしょう。
投稿日時: 2010年01月28日 09時58分
カテゴリー： 配色のポイント | コメントはまだありません »
タグ： ワイヤーフレーム
デザイン領域の幅を固定するデザインの時の背景色の選び方を説明しております。
ブラウザウインドウのサイズによって、幅が可変して最大幅が変わるようなデザインであればあまり問題はないのですが、固定レイアウトの場合、800×600ピクセルに対応して作られたデザインはもっと広い画面で見れば大きく隙間が出来てしまう場合があります。
この部分についつい色を使いたくなってしまいますが、使う場合でもほぼ白に近い色を彩度が低く、明るい色を使うようにしましょう。空いている面積がかなり大きいのでベースカラーなどを用いるとくどい印象になってしまいます。
この例ではベースカラーがHSB[270:15:90]、サブカラーにもHSB[270:5:90]と色相が270で統一感が出来ておりますので、背景の色として色相は近い物を選び、同じような低彩度、高明度のHSB[305:5:90]を用いました。読みやすさを重視するために本文が入る部分の背景には色を付けておりません。
背景に色を使うことで、色の印象は強くなるのですが、無理に背景色を付けて、違和感を感じるようであれば、白背景のままにしておくのも選択肢の一つでしょう。必要ないと判断された場合には背景色を使う必要はないのです。
投稿日時: 2010年01月28日 00時20分
カテゴリー： 読みやすい背景色 | コメントはまだありません »
タグ： レイアウト, 背景色, 類似色相
背景色を変えることによって生じるリンク色の変更のデメリットについて説明しております。
通常、未訪問のリンクは青で訪問済みのリンクは赤紫、となっております。背景色が明るい場合にはそれほど神経質になることはありませんが、暗い場合にはテキストの色を変える必要が出てきます。
またリンク色が読めなくなる場合が多く、変更の必要が出てきますが、リンクの青色を黄色などに変更すると、そこがリンクと認識しにくくなります。そのような場合にはテキストのリンクを使わず、ボタンなどにしてリンクであることをはっきりさせておかないと操作性が格段に落ちることとなります。
このような理由からリンク色については少なくとも色相を大きく動かすことは避けた方がよいでしょう。黄色や緑などにしてしまうと、リンクと通常のテキストとの区別が付きにくくなります。少なくともリンクの下線をスタイルシートで取り去るようなことは避けるようにしましょう。
ただし元のままの青をそのまま用いた場合、彩度、明度ともに高すぎ、Windowsでブラウン管のモニターをお使いの方にはまぶしく見えることもあります。その場合には明度や彩度を落として微調整のみ行うことにします。
元ウェブデザイナーの経験から、操作が必要なもののカラーコーディネートを得意としております。ウェブカラーに関する講演や執筆も多数あります。写真は飼い猫のぶるたんです。
アクセシビリティ アクセントカラー コーポレートカラー サイトの目的 サブカラー ジャッド トーン ベースカラー ユーザビリティ レイアウト 中性色 分析 可読性 執筆 売れる色 失敗 寒色 彩度 心構え 情報の伝達 明度 暖色 書籍 有彩色 業務委託 無彩色 競合サイト 背景色 色の三属性 色の心理的効果 色彩調和論 色相 色相環 視認性 調整 調査 配色 配色サンプル 閲覧環境 面積 面積比 類似色相 CIカラー HSBカラーモデル JIS X8341-3
iPhoneでWeb配色をシミュレートすることができるウェブアプリを公開しています。
発行:技術評論社
2011年2月発売
発行:毎日コミュニケーションズ
2007年8月発売
坂本邦夫の「基礎からわかるホームページの配色」 produced by カラープランニングオフィス フォルトゥナ
Copyright © 2002-2010 Color Planning Office Fortuna All Rights Reserved.
