ホーム » カテゴリー：サイトの目標
カテゴリー：サイトの目標の記事
ここで目指す配色とは統一感を持ち、色が美しいことはもちろんですが、せっかく作ったホームページを見に来てくださった方に対し、わかりやすく、読みやすい配色をすることを主眼に置いております。ここでは色を決める前の心がけなどについて説明いたします。
美しい色を作り出すために、色彩調和論や自然界の色を学ぶことの必要性をご説明いたします。
カラーコーディネートするための最低限の要素
美しい色のウェブサイトを作ることは、家に客人を招く時に、快適に過ごしてもらうために掃除して待つというのと同じような事と考えられます。醜い色
や不調和な色をあえて施すことはあまりないと思いますが、訪問者に対して不愉快な気分にさせないために、色彩調和論などを学び、その美しさでもてなすよう
な色彩を作り出しましょう。
色彩調和論に学ぶ
色彩調和論という言葉を聞かれたことはあるでしょうか？ ピタゴラスやアリストテレスといった偉大な哲学者をはじめ、ニュートンやゲーテ、ノーベル化学賞を受賞したドイツのオストワルトなどの著名人を含め、多くの人によって、どのようにすれば美しい配色が作れるかということを数千年にわたって考えられてきました。先人達にならい、その中から使いやすい物を選んで使うのも一つです。
このウェブサイトではそれらを整理してまとめ上げたジャッドの色彩調和論について、少しだけ学ぶことにします。
自然の色をまねる
そして自然の色に学んでみましょう。少なくとも木々の緑や紅葉、夕焼けなどを見て不愉快に感じられる人は少ないと思われます。嫌いな人が少ないとわかっている色を、上手に使ってあげれば、多くの人にとって美しいと思われる配色が出来上がることでしょう。
« 隠す
美しいだけでなく、ホームページを見る対象を意識した配色や流行色を取り入れることで１ランクアップのカラーコーディネートとなります。
ターゲットを考える
色を決めるにあたっては、どんな人が見てくれるのかという事を考えることが重要です。平たく言えば「あなたの好みだけで色を選んではいけません」ということです。
例えば30代の男性に向けたモバイル製品のオンラインショップが穏やかでかわいらしいピンクを基調としたデザインだと果たして購買意欲は沸くでしょうか？ 商品の性質から考えてもシャープな印象を与える配色の方が適切と言えるでしょう。
美しいだけの配色では心に響く配色が出来上がるとは限りません。見ていただくターゲット層や商品、サービスの特性などについて考えなければなりません。
流行色を取り入れる
長期間にわたって同じデザインで用いられるウェブサイトなら、それほど意識することもありませんが、期間毎にイメージを変えられる場合などは、その時に流行している色などを取り入れるのもよいでしょう。
流行の先端としてファッション業界などの情報をチェックするのもいいでしょう。日本では流行色協会というのがありますので、そちらのウェブサイトをご覧いただければ現在流行色とされている色の情報なども掲載されていますし、共立女子短期大学の渡辺先生により運営されているストリートファッションレポートなども配色のヒントになると思います。
« 隠す
美しいと思わせるだけでない効果が色彩にはたくさん存在します。その効果を出来る限り使えば、２ランク上の配色を完成させることが出来ます。
ウェブサイトの目的を伝える
本来ウェブサイトを訪れてくれる人は何らかの情報を求めて集まる人のはずです。企業のウェブサイトはもちろんのことながら、個人の日記などについても同じようなことが言えるでしょう。
そのような訪問者に対して、読みやすい配色をするのは当然のこととして、情報の価値を高めるような配色をしなければ配色する意味はありません。
あなたが最も伝えたい情報を、円滑に伝えるために誤った色彩の使い方をしないことは大変重要なことです。
色彩の機能を使う
私たちは普段、色にコントロールされています。例えば信号について考えてみましょう。「ああ、信号が赤になったから、車のブレーキを踏んで止まらなければならないな」などと信号を見るたびに考えている人はいないといって良いでしょう。
また交差点などで銀行を探す時には、看板の色で探すことはありませんか？ ご自分の使う銀行の色を記憶していて、銀行の名前よりも先に色を判断しようとします。
このように経験や教育などから得た色彩の知識を知らずに使っているわけです。効果的に用いれば使いやすい配色を見つけることが出来ます。
心理的・生理的影響を使う
色には心や体に影響を与えるという効果もあります。よく知られた例を挙げてみます。
- アメリカのサンタクララ刑務所では、凶悪犯を収容する部屋にピンク色を塗ったところ、囚人の攻撃性が減りおとなしくなった
- 自殺の名所として有名なロンドンのブラックフライア・ブリッジを黒から緑に塗り替えたところ投身自殺者の数が34%に減少した
- 青は副交感神経に作用し、体温、血圧、脈拍を下げる効果があります。赤はその逆の効果を持っています
このような心理的な効果を利用して、色彩を決定していくことも可能です。具体的にどのような効果があるのかは、後ほど色彩の心理的効果のページで触れていくことにします。
« 隠す
配色をセンスに頼ると美しいだけの配色になります。しかしセンスだけの色彩では本当に使いやすいウェブサイトや色彩を生み出すことは出来ません。
色彩をセンスの産物として捉えるのは大きな間違いです。
センスがあると思われる人が作るとそこそこ美しい物は産まれることでしょう。しかしウェブサイトで使われる色について限定して考える場合にはそれだけでは済まない場合も多く出てきます。つまり情報を伝えるためには美しい色ということ以外の要素も重要になってきます。そしてその問題を解決するのはデザイナーのセンスではなく、しっかりとした色彩の知識やデザインの知識なのです。
カラーコーディネートをするということは、センスに任せて美しい配色をすることではありません。広辞苑によれば、コーディネートとは「各部分の調整をはかって、全体が上手くいくように整えること」とあります。このように書くと難しいとウェブサイトの目的をしっかりと捉え、色彩の理論を知り、目標を定めれば配色はけして難しいことではありません。
ここではウェブサイトのカラーコーディネートについて色彩の知識とレイアウトや使いやすさ、色彩心理学などの様々な方向から、ウェブサイト配色の手法をご紹介します。
物まねだけではよい配色は生まれない
現在、公開されているウェブサイトの配色について述べられているサイトを見てみると、「こういう色の組み合わせを使えばこんなイメージが出来ます」と言ったようなものが多いようです。そして実際に試された方も多いでしょう。
しかし、それをそのまま使って配色しても、納得の行く結果が得られることはほとんどありません。なぜなら色の持つイメージだけを重視し、ウェブサイトの本来の目的を達成させるための方法がどこにも示されていなかったからです。
またサンプルそのものがおかしい場合も非常に多く、文字が読みにくい配色がイメージに合うという理由だけで勧められています。暗い色の背景にリンクを張ったテキストを置いて、訪問済みになった途端に読めなくなったり・・・。
このような配色はウェブサイトの本来の目的を見失った表面だけをきれいに整えた配色で、少なくともカラーコーディネートと呼ぶことは出来ません。ウェブサイトの目的を情報を伝えるためのものであると捉えるとならば、情報が十分に伝わっているかどうかは、色彩について考えていく上で非常に重要な事であると言えます。
« 隠す
人の印象に残る配色は至ってシンプルに生み出すことが出来ます。その考え方について紹介します。
統一感を与えて印象的な配色を
色彩を使ってインパクトを与える方法としては、鮮やかで派手な色を用いるのが一般的と感じられるかもしれません。
しかし少ない色でも多くの人に印象を強く残すような配色は可能です。色を減らして考えることによって、配色は至ってシンプルで美しくなります。古いヨーロッパの街並みなどを見ると、屋根に同じ色が用いられ、統一感があります。そして新しく作られる建造物も周囲の色に倣った色の屋根にするのです。このような風景を美しく感じるのと同じ事と言えるかもしれません。
こちらはとあるイタリアのショーウインドウですが、黄緑だけでカラーコーディネートされているにも関わらず非常にインパクトもありますし、一度見たら忘れることはないでしょう。
ウェブサイトではインパクトのある色彩を見せることが最終的な目標であることは少ないはずで、派手な色により中身が印象に残らないようでは困ります。
シンプルで合理的な配色
多くの色を使って印象に残るウェブサイトを作るのは容易なことではありません。それぞれの色を美しく見せるための配色技法などを知っている必要があります。
しかし少ない色で印象的な色彩を生み出すことは、合理的に色彩を設計することで比較的に簡単に行うことが出来ます。
« 隠す
理想の色とは逆に必要最低限を満たさないマイナスばかりの配色もあります。このような印象を持たれている可能性があればすぐに改善の必要があります。
うさんくさい配色
普通、インターネット上で何かを知りたい時は、Yahoo!やGoogleといった検索エンジンなどで知りたい情報を検索するというのが一般的なことかと思います。自分のウェブサイトなどに人を集めるためにはSEO（検索エンジン最適化）などについて考慮する必要がありますが、幸運にも人が訪れてきてくれたとしましょう。
しかし内容を見られる前に「うさんくさい」「インチキくさい」などと思われてしまっては、どんなによい内容を準備していても、ブラウザの閉じるボタンや戻るボタンを押されてしまうことでしょう。
ではどのような配色をうさんくさいと呼ぶかと言えば、以下のようなものとなります。
- やたらと鮮やかな色が並ぶ
- 意味のない点滅や左右に流れる文字
- 文字が異常に小さい など
うさんくさい配色というのは、見に来た人を追い返す最も基本的で最大の要因と言えます。これが出来ないと安っぽいイメージが出来上がり、内容に関係なくウェブサイトそのものの信用を失わせることになりますが、色彩調和について少し考えるだけで解決する問題でもあります。
情報の邪魔をする配色
しかし、あなたのウェブサイトを見に来た人は、配色を見に来たのではなく、そこに掲載されている情報を見に来ているわけです。余計な色で情報が得にくい状態を作り出してしまえば、あっと言う間に来訪者は帰っていってしまうでしょう。
また無計画な配色の結果、リンクの色やボタンが見えず、どこから次のページへ進んでよいのかわからないようなウェブサイトも非常に多く見受けられます。これはサービスや商品を広く知らしめる障害以外の何ものでもありませんし、ビジネスの機会損失と言えるでしょう。
適切な箇所に適切な色を置くことで、中身を読んでもらう手助けをするのが、ウェブサイトの正しいカラーコーディネートです。ウェブサイトで何を見せたいかをはっきりとさせておくことで、色が必要な部分というのも必然的に決定されます。
« 隠す
配色サンプルを鵜呑みにしない
書店で販売されているカラーチャートやWebサイト上の配色サンプルはあくまでも一般的なイメージで、あなたのウェブサイトのために作られた物ではありませんし、そのまま使える物は皆無です。
よくあるのはこのようなタイプの物で、ほぼ等面積の３色が並べられ、RGBのカラーコードが掲載されていて「情熱的な」といったような形容詞が示されているものです。
はじめにカラーサンプルありきで配色を進めてしまうとこのような事態に陥ってしまいます。配色サンプルを利用するにしてもきちんとした使い時というのがあるのです。そして、それは最初に行うことではありません。
なんとなく色を決めない
色彩を使う目的やその根拠を考えるとありえないことです。今までなんとなく色を決めて困ってきたことを繰り返してはいけません。
使う色はあくまでも競合サイトの調査・分析の結果や色彩調和論などなんらかの根拠のあるものだけを使うようにします。
いきなり配色をしない
ウェブサイトに記載する情報は読めなければ意味がありません。逆の言い方をすれば、文章については白と黒だけでも伝えることが出来ます。
イメージと共に読みやすさや使いやすさを考慮するならば、使う色を決めることと実際に色を付ける工程は別々で考える方がよいでしょう。
あとから色を増やさない
色彩を決定する工程を分ける手法を取った場合、先に使用する色を全て決めてしまうわけですが、途中で色の使い方に困ってしまう場合も出てくると思います。
その時は色を増やしてはいけません。３色でも手こずっているのに４色、５色と増やして手に負えるはずがないのです。
各ページの配色を変えない
それぞれのメニューによってイメージを変えるということはよくありますし、ウェブサイト自体の目的や知名度にもよりますが、出来ると判断できればやっていただいても構いません。
ただし上手くやらなければ、移動した時に同じウェブサイト内の移動とわかりにくくなるという欠点がありますし、同じ色を使い続けることで訪問者の印象を強めるというメリットは失われてしまいます。
検索エンジンからの訪問者は必ず同じページに辿り着くとは限りません。何度も訪れてほしいとお考えなら、配色は統一して有益なウェブサイトであることを印象づけてしまうのがよいでしょう。
このサイトでは全ページ同じ配色を施すという前提で話を進めていきます。
« 隠す
▲このページの先頭に戻る
