2010年1月28日
カテゴリー: 配色のポイント | コメントはまだありません »
サイトのデザインをする時にページの上から行うのでなく、どこに何を置くかを考えてから配色します。
レイアウトを先にする理由
これまでは色彩設計を説明するため、便宜上いろいろなサンプルをお見せしてきましたが、皆さんが作っているウェブサイトとはアピールしたいこともメニューの数も違うはずです。
しかしこんな感じにしたいというレイアウトや他のウェブサイトを見て気に入ったデザインなどもあるはずです。またシンプルでものすごくわかりやすいブログのような文章を読ませることを中心としたデザインもあります。
カラーのイメージを中心にアピールするのであれば、それぞれの色を大きな面積に用いることになるでしょうし、テキストを重視するのであれば全体の面積を減らして、白い背景色を中心とした配色になるでしょう。
まずは表示する情報を手書きでもよいので、大雑把に決めてみましょう。重要なことはレイアウトしながら配色していくのではなく、レイアウトをしてから配色すると言うことです。言うまでもないことですが、レイアウトが決まらなければ面積比を考えようがないからです。
重要な部分や見せたい部分を考える
あとは読ませたい部分が読みやすいか、自分の伝えたいイメージが伝えられているかを考えながら配色していきます。行き詰まってしまった時は引き算を上手にしてやれば、混乱することもないでしょう。
« 隠す
タグ: ワイヤーフレーム
コメントはまだありません »
2010年1月28日
カテゴリー: 読みやすい背景色 | コメントはまだありません »
デザイン領域の幅を固定するデザインの時の背景色の選び方を説明しております。
印象を壊さない背景色で
ブラウザウインドウのサイズによって、幅が可変して最大幅が変わるようなデザインであればあまり問題はないのですが、固定レイアウトの場合、800×600ピクセルに対応して作られたデザインはもっと広い画面で見れば大きく隙間が出来てしまう場合があります。
この部分についつい色を使いたくなってしまいますが、使う場合でもほぼ白に近い色を彩度が低く、明るい色を使うようにしましょう。空いている面積がかなり大きいのでベースカラーなどを用いるとくどい印象になってしまいます。
この例ではベースカラーがHSB[270:15:90]、サブカラーにもHSB[270:5:90]と色相が270で統一感が出来ておりますので、背景の色として色相は近い物を選び、同じような低彩度、高明度のHSB[305:5:90]を用いました。読みやすさを重視するために本文が入る部分の背景には色を付けておりません。
背景に色を使うことで、色の印象は強くなるのですが、無理に背景色を付けて、違和感を感じるようであれば、白背景のままにしておくのも選択肢の一つでしょう。必要ないと判断された場合には背景色を使う必要はないのです。
« 隠す
タグ: レイアウト, 背景色, 類似色相
コメントはまだありません »
2010年1月27日
カテゴリー: 読みやすい背景色 | コメントはまだありません »
背景色を変えることによって生じるリンク色の変更のデメリットについて説明しております。
リンク色と操作性
通常、未訪問のリンクは青で訪問済みのリンクは赤紫、となっております。背景色が明るい場合にはそれほど神経質になることはありませんが、暗い場合にはテキストの色を変える必要が出てきます。
またリンク色が読めなくなる場合が多く、変更の必要が出てきますが、リンクの青色を黄色などに変更すると、そこがリンクと認識しにくくなります。そのような場合にはテキストのリンクを使わず、ボタンなどにしてリンクであることをはっきりさせておかないと操作性が格段に落ちることとなります。
リンク色を変更する場合
このような理由からリンク色については少なくとも色相を大きく動かすことは避けた方がよいでしょう。黄色や緑などにしてしまうと、リンクと通常のテキストとの区別が付きにくくなります。少なくともリンクの下線をスタイルシートで取り去るようなことは避けるようにしましょう。
ただし元のままの青をそのまま用いた場合、彩度、明度ともに高すぎ、Windowsでブラウン管のモニターをお使いの方にはまぶしく見えることもあります。その場合には明度や彩度を落として微調整のみ行うことにします。
« 隠す
タグ: リンク色, 可読性, 文字色, 背景色
コメントはまだありません »
2010年1月27日
カテゴリー: 読みやすい背景色 | コメントはまだありません »
背景色を使う場合の文字の読みやすさとその重要性を説明しております。
全ての人のために読みやすくする
基本的には背景色を使うことと文字の色を変えるのは見出しなど特別な場合を除いては変えることはお勧めしません。これは文字が読みにくいことで来訪者が帰ってしまうことを防ぐと共に、誰にでも使いやすいホームページを目指すことでビジネスの機会損失を減らすことも目的としております。
色覚障害者、白内障の方への配慮
色覚障害者は日本人男性の5%、女性では0.2%と言われ300万人以上の方が程度の差はあれ、色覚に障害を持っていると言われております。また白内障については60歳代では70%以上で水晶体の白濁が見られるそうです。
合計すると1000万人を軽く超えることは明らかで、今後高齢化社会が進行するにあたっては、文字の読みやすさは考慮されてしかるべき問題となっております。
このような状況も踏まえ、文字色を決定する際には富士通が提供しているColorSelectorやアイ・クリエイツの提供しているカラーコントラストチェッカーなどを使いチェックすることが望ましいでしょう。
« 隠す
タグ: アクセシビリティ, 可読性, 白内障, 色覚の問題, 視認性
コメントはまだありません »
2010年1月27日
カテゴリー: 配色を外部へ委託する | コメントはまだありません »
全てのカラーコーディネーターがウェブサイトの配色に長けているわけではありません。必要なスキルを持っているかを見極めてから依頼することにしましょう。
カラーコーディネーター自身のウェブサイトを確認する
最近は色彩関連企業やカラーコーディネーターもウェブサイトやブログを持っておりますので、まずそれらを確認しておくことが重要です。
色の好き嫌いは別として、美しい配色を行っているのは当然のことですが、文字が読みやすいか、操作しやすいかなどは十分に確認してください。
カラーコーディネーターは色についてのプロです。自分で作ったサイトであれ、プロのデザイナーに作ってもらったサイトであれ、色がきちんとしていないのは大問題です。特に外注の場合であれば、外注先にきちんとした色を提示できるスキルがないということです。
営業用のウェブサイトがきちんとしているかどうかは最も判断しやすいのですが、個人の嗜好がありますので、本当に依頼して良いか数人で確認すると良いでしょう。
カラーコーディネーターの得意分野を確認する
一口にカラーコーディネーターと言っても、その業務範囲はファッション分野からインテリア・建築・工業分野まで多岐に渡るため、全てをカバーすることは出来ず、各々に得意分野があります。
ウェブサイトの配色の場合は単にきれいに色を合わせればよいだけでなく、マーケティングに関する部分はもちろん、様々なインターフェイスやウェブコンテンツJISなどについての知識が要求されるため、きちんとそれらのことを把握しているかどうかなども確認しておく必要があるでしょう。
« 隠す
タグ: 業務委託
コメントはまだありません »
2010年1月27日
カテゴリー: 配色を外部へ委託する | コメントはまだありません »
カラーコーディネーターに提供するべき情報とは 単にきれいな色を作ってくださいということではありません。具体的な方針がないと、よい配色もサイトも生まれないのです。
カラーコーディネーターに提供するべき情報とは
単にきれいな色を作ってくださいという依頼は、カラーコーディネーターにとって楽なもののように感じられますが、実は最も配色を行いにくい業務の一つです。
さわやかなイメージを作りたい場合でも、その配色は1つではなく、まったく違う色を使ったパターンを作り、クライアントの好みによってそれらは選ばれ、根拠のない負担が掛かることになってしまいます。
本来、ウェブサイトの配色を決める場合には、その目的や競合サイトなどの入念な調査が必要であり、それを行うことがカラーコーディネーターの仕事なのです。
そしてそれらを追求し、論理的に配色を組み立てていけば、まったく異なる配色パターンが出来上がるということも少なくなっていくはずなのです。
私が配色の仕事を行う際には、最低限の情報として、これらのことを聞いています。実際にはこれだけでは情報としては足りませんので、これを叩き台にしてヒアリングを行っています。
- サイト名（既存のリニューアルの場合はURLも）
- 業種
- サイトを制作する目的
- 主なターゲット層
- 色で伝えたいイメージ（例：楽しい、すっきりしたなど）
- 競合サイト
- ロゴマーク
- ロゴの色は変更可能かどうか
- 理想と思われるイメージのサイト
- サイトで使いたい色
- サイトで使いたくない色
- その他
配色を外部に委託するときは、少なくともこれくらいの情報を渡すようにしましょう。また成果物にこれらの情報が反映されているのか、また反映されていないとすればどのような理由かをきちんと回答してもらうようにしましょう。
« 隠す
タグ: サイトの目的, 業務委託
コメントはまだありません »
2010年1月27日
カテゴリー: JIS規格への対応 | コメントはまだありません »
画面の急激、高速の変化は読みにくいばかりでなく、光感受性発作などを引き起こすことがあります。（JIS X8341-3, 5.7.a-b)
画面全体の点滅を避ける
1997年に起きたいわゆる「ポケモン事件」で番組を見ていた子供達が次々と病院へ運ばれたのを覚えておられる方も多いと思います。赤と青の光が交互に点滅したことが原因と言われております。
このような症状は光過敏性てんかんなどと言われており、点滅が１秒間に15回～20回の時に症状を発しやすいと言われております。また赤と青の点滅で特に起こりやすいというようなことも報告されております。
以前はJavascriptなどを用いた画面の点滅などが使われたウェブサイトを多く見かけました。最近では見かけなくなりましたが、使用しないように注意しましょう。
バナーなどでのアニメーション
アニメーションGIFなどの画像の切り替えは今でも良く見受けますが、これも切り替わる前と後の色相・明度・彩度の変化を極力抑えるように気を付けます。
早い周期での大きな変化は目に負担が掛かるばかりでなく、そこに載せられた情報の認識もしにくくなりますので、注意しましょう。
重要な情報をこのようなアニメーションの中に組み込むと、閲覧者が目を凝らしてアニメーションを見なければならないため、光過敏性てんかん以外にも気分が悪くなったりの諸症状を引き起こす可能性があります。このようなことを考えて重要な情報を早い周期の点滅の中に組み込むことは避けるべきでしょう。
JIS規格では「1秒間に2回以上の点滅を行わない」「彩度の高い赤での点滅、コントラストの強い画面の反転を避ける」のように例示されていますが、実際は1秒に1回の点滅でもかなりせわしなく感じることがあります。右に掲載したサンプルは3秒に1回の点滅です。
« 隠す
タグ: JIS X8341-3, ポケモンフラッシュ, 点滅
コメントはまだありません »
2010年1月27日
カテゴリー: JIS規格への対応 | コメントはまだありません »
文字のサイズとフォントによっては読みにくい組み合わせがあります。（JIS X8341-3, 5.6.a-b)
文字サイズを固定しない
スタイルシートで文字サイズをpx（ピクセル）で指定すると、ブラウザの表示サイズをそれぞれの人が調整できなくなってしまいます。文字サイズを指定する場合はem,%などの相対値を使って指定しましょう。
フォントの選び方
フォントには様々な種類がありますが、日本語フォントの場合は画数が多い物があるため、同じ大きさなら欧文フォントに比べ読みにくい場合が多くなります。
明朝系のフォントははねやはらいなどで先が細くなっており、サイズが小さいとにじんだように見えてしまいますので、ゴシック系のフォントを選ぶ（つまり本文部分のフォントを変えない）方がよいでしょう。
また特に明朝のような細い書体だけでなく、DFPOP体のような特に太いフォントもサイズが小さい場合は、文字の細部がつぶれてしまって読みにくくなってしまいます。
ブラウザのデフォルトで指定されているフォントを変えるような場合には、読みやすさとサイズに十分ご注意下さい。
また画像で文字を表現する場合や閲覧環境によっては、アンチエイリアスによって、文字が薄く見える事もあることを留意しておきましょう
« 隠す
タグ: フォント
コメントはまだありません »
2010年1月27日
カテゴリー: JIS規格への対応 | コメントはまだありません »
視覚障害がある方が利用する場合でもテキストが読みやすいような組み合わせについて検討しております。（JIS X8341-3, 5.5.c)
視認性・可読性と明度差
JISX8341-3 5.5.cに対応する部分で、視覚特性によっては背景色と文字色の関係から読みにくい組み合わせが存在することが指摘されています。
文字の見えやすさを視認性、読みやすさを可読性と言いますが、これは主に背景色と文字色の明度差に依存します。色覚障害の場合や加齢による場合など様々な条件が考えられますが、適切な視認性・可読性を確保するには、一般的には中央のサンプルのように明度差を大きく取るようにします。弱視の方などでOSのハイコントラスト機能を使って画面を閲覧する場合でも明度差がないと文字の判別がしにくくなります。
また画像などの場合には、明度差の大きな色で文字を縁取りしてやることによって、読みやすくなることがあります。
WCAG2.0によるコントラスト比を使った色差計算
ウェブの様々な規格を制定するW3C（World Wide Web Consortium）のアクセシビリティ・ガイドラインであるWCAG2.0では、コントラスト比を用いた計算方法が推奨されています。
計算方法は難しくないのですが、株式会社インフォアクシアが簡単にチェックできるツール「カラー・コントラスト・アナライザー」を公開しておりますので、それを利用するとよいでしょう。
以前提案されていた明度差と色差に基づく基準値
W3Cの「Techniques
For Accessibility Evaluation And Repair Tools」の中で読みやすさの計算式の試案が提示されております。下記のものがそれにあたります。
明度差の計算式
- 文字、背景それぞれの色のRGB値を0～255の10進数で表し、それぞれR, G, Bとする
- 文字色、背景色の明るさを計算式 ((R x 299) + (G x 587) + (B x 114)) / 1000 で計算する
- 明度差が 125以上あれば、まず読みやすいと考えてよい
色差の計算式
- 文字、背景それぞれの色のRGB値を0～255の10進数で表し、数値の大きい方と小さい方をそれぞれmaxR、minRのようにする
- 色の差を計算式 (maxR – minR) + (maxG – minG) + (maxB – minB) で計算する
- 色差が 500 以上あれば、まず読みやすいと考えてよい
実際に計算を行うのは非常に大変なことですが、既出のカラーコントラストチェッカーや富士通から提供されているColorSelectorを用いれば、計算することなく視認性・可読性を確保することが出来ます。どなたにも使いやすいサイトの第一歩としてお使いになられることを推奨いたします。
« 隠す
タグ: JIS X8341-3, アクセシビリティ, 可読性, 視認性
コメントはまだありません »
2010年1月27日
カテゴリー: JIS規格への対応 | コメントはまだありません »
色彩で区別するだけでは全ての方にわかりやすい情報とは言えません。グラフ、ボタンを例に挙げて解説しています。
視覚に障害がある場合、色だけで情報を区別していては、その理解を妨げることもあります。
左側のグラフが悪い方の例になります。色だけで情報を区別しておりますので、その色自体の区別が付かなければ、A社が実際にどこの領域に対応しているのかがわからないということになります。
対して、右側は引き出し線を付けることによって、領域と文字が１対１で対応しますので、どのような方にもわかりやすいということになります。
これはグラフの表示に留まらず、ボタンなど操作が必要な部位には特に重要になってきますので、特に気を付けるようにしましょう。
模様の併用
また色だけに頼らず、模様を併用する場合にも注意が必要です。色彩と模様のみで区別しようとすると、左側の例の黄色のように明度の高い色は模様が見分けにくくなります。
また水色の部分のように、特に面積の小さなところでも模様がわからないことがありますので、どのような状況であれ、文字の情報を領域と一致して表示するような工夫が必要です。
« 隠す
タグ: JIS X8341-3, アクセシビリティ, グラフ, 情報の伝達
コメントはまだありません »
Webプロフェッショナルのための黄金則 Web配色デザインのセオリー
効果的に伝えるWeb配色標準デザインガイド―ユーザビリティ/アクセシビリティ/マーケティングを考慮したサイトの色彩設計から配色の実際まで