秋田こまっち。
サイトの色彩表現
１．はじめに
サイトのデザインを考える際に「色彩」がとても重要になります。しかし私は色の専門家ではありませんので、美術の授業でやったような知識しかありませんし、色彩感覚もその方面の方々に比べるとはるかに乏しいことでしょう。ですが、ネットを閲覧する大衆としての色彩感覚は備えているつもりです。
２．Webセーフカラー
サイトの色彩表現を考える際、どうしてもぶつかる壁の一つに「Webセーフカラー」の問題があります。タグのことをご存知の方は、色を「000000」や「ffffff」などと6桁で表現することをご存知でしょう。このように00〜ffまでの256通りが3桁分あることになるので、256の3乗で「1600万色以上」もの色をを表現することができます。
ですが、OSやブラウザが違う様々な環境で見た際にほぼ同じように見えると思われる色はわずか216色しかないのです。「赤、緑、青」のそれぞれに「00、33、66、99、cc、ff」のみの6通りです。6通りが3桁分あることになるので、6の3乗で「256色」となるわけです。
また「ほぼ同じように見えると思われる」などという曖昧な表現をあえてしているのは、環境が異なると全く同じ色で表現されるとはでは限らないためで、例えば「ウインドウズではマックよりも比較的薄めに表示される」などといったことがあるようです。ウインドウズで薄すぎるように感じる色、マックで濃すぎるように感じる色で表現してしまうと、他の人には製作者が意図したよりももっと薄く、あるいはもっと濃く見えているのかもしれません。
「256色」はすごく多いように感じられますが、実際そうではありません。実際色々いじってみると分かるのですが、背景に適した薄い色を表現することがなかなかできません。このサイトで公開しているテンプレートののタイトルや見出しに使われている色は「cccccc」で、216色で表現できる色の中で最も薄い灰色です。本当はもっと薄い色を使いたかったのですが、「Webセーフカラー」を意識して薄い色は使いませんでした。
現在「256色」しか表現できないディスプレイは少ないでしょうし、特に「Webセーフカラー」を意識しなくとも構わないと思います。ただし、他の人には全くといっていい程違うように見えていることもあるかもしれません。そのことだけは意識しておきたいです。
３．背景と文字
一応「Webセーフカラー」なんてことを頭の片隅に置きながら、背景色や背景画像を選択します。基本的に自分のセンスを重視して選べばいいのですが、その際に注意しなければならないことがいくつかあります。
「背景を派手にしない」ということを実戦することが必要です。「チカチカ動く背景画像」や「原色の赤」などもってのほかで、ものすごく印象が悪くなってしまいます。こういった背景は目立ちます。本来サイトで目立つべきなのは中身なので、背景はあっさりした方が見やすいです。
「文字との組み合わせ」も積極的に見やすくなるよう取り組まねばなりません。例えば「背景が白、文字が黄」という組み合わせだとよく見えません。専門家ではないのでどういった組み合わせがいけないかをなかなか伝えられません。ちょっともどかしいのですが、まあ一つの目安として「ドラッグしようかな」と見てくれている人に思わせないことが大事ではないかと思います。私の場合、見にくいサイトは「ドラッグ」して文章を読みますから。
「色が持つイメージ」も意識した方がいいのではないでしょうか。すごくポップな背景なのに「貴書を愛読してもう数十年になる」などの文章があったらもうビックリですよ。サイトの内容にあった背景の方がいいと思います。背景はサイト全体で最も広い面積を占めますから、そのサイトの印象にもつながりますしね。
次に文字色に関してですが、無駄に多用してはいけません。文字色には意味を持たせるべきで、適度に使うことで相手にうまく伝えることができます。せっかくいい文章が書けても、見ている人にチープで中身が無いように思われてしまいがちで、文全体の印象が悪くなってしまいます。
あと、私が気になりはじめたのは青を文字色にしているサイトです。青の文字からはリンクが連想されてしまうので混乱します。ですからリンクの文字色に関してはデフォルトのままが望ましいようです。私のサイトも青い文字色を使ってしまっていて反省しています。アンダーラインで区別できるかと思いましたが、そんなに甘くは無いようです。それもエッセイを全て手直ししようと思ったきっかけの一つです。
最後に、背景や文字に関しては「スタイルシート」を使用しましょう。デザインの統一という面と管理という面の両面で楽ですし、その手法が推奨されているみたいです。これが手直ししている一番大きなきっかけです。
４．素材
背景を選択するのとはちょっと違う感覚が必要となります。「小さくて派手」というのが基本です。背景はあっさりが基本ですが、素材は目立たないといけません。
「小さい」方がいいのは軽いからです。大きな画像などは表示に時間がかかりますから、ページを重くしないためにも小さめの素材を使うべきです。でも小さいとあまり目立たないため、意識して目立たせなければなりません。そのため「派手」なものが活躍するのです。
派手といっても、派手すぎるのは困りものです。長い文章の途中にチカチカ動く素材やすごく目立つ素材があると、すごく気になります。素材はあくまでも補佐的なもので、それがメインになってはいけませんからね。
04.09.08