スマートフォンサイトを表示する

  1. TOP
  2. 0からスタート ホームページ配色入門 : 第3回 1番大事な色を決める

エキスパートコラム

0からスタート ホームページ配色入門(全6回)

第3回:1番大事な色を決める

執筆:坂本 邦夫(フォルトゥナ)

2014年7月14日更新

  • このエントリーをはてなブックマークに追加

閲覧数5,457views

このコラムをPDF形式でダウンロードする

「0からスタート ホームページ配色入門」では、センスではなく、簡単な配色の知識やレイアウトのセオリー、情報伝達の基本を学ぶことで、あなたのホームページの目的を達成させるための配色を解説します。

3回目の今回は配色を左右する最も重要な色であるキーカラーを決める時の考え方・注意事項をお伝えします。

最も重要なのは最初の1色です

キーカラーという考え方を知る

配色の印象を左右する鍵となる色をキーカラーと呼びます。多くの色が使われていても、そのキーカラーが変われば配色の印象がガラッと変わってしまう色、それがキーカラーです。

図の3種類の配色は全て同じ3色を使っていますが、受ける印象はまったく異なっているはずです。

配色を決める際にはまずキーカラーを決めることが重要で、その時の気分によってキーカラーを変えたりすると以下のようなデメリットが生じることがあります。

  • 色による印象が長続きせず、訪問者に記憶されにくい
  • 前回の訪問時と色がまったく異なっていると、訪問者が戸惑ってしまう
  • 以前重要なポイントを表す色であったものが、現在では重要でなくなってしまうことで情報が伝わりにくくなる

他にもいろいろありますが、キーカラーを決めずに、好き勝手に色を変更していても、あまり得することはないので、キーカラーは一度決めたら変えないようにすることだけは忘れないようにしましょう。

キーカラーをどこで使いたいかを検討する

キーカラーは最もサイトに合っている色を選ぶということで構わないのですが、使う前に大まかな方針を考えておくと、配色しやすくなります。配色イメージの絞り込みや合っているかどうかの確認は、「第1回:色の違いでできることを覚えよう」で説明しましたので、忘れた方はもう一度ご確認ください。

まず最初に考えておきたいのは、キーカラーをロゴやキャッチコピーなど重要な場所で使うかどうかです。もし重要な部分に使うのであれば、サイト名やコピーが読めないのは、配色として致命的なので、読みやすいような色を選んでおく必要があります。

例えば明るく淡い黄緑をキーカラーにしたいのであれば、背景色が明るい色ではサイト名などが読みにくくなってしまいますが、背景色を暗くしてしまうと配色のイメージは変わってしまいます。

2つを見比べて、どちらのイメージが希望するイメージに近いか考えてみましょう。明るい黄緑を使うということを優先させるのであれば、黄緑を文字に使わず、黄緑を背景に使って、サイト名などの重要な部分には違う色を使えばよいのです。

大雑把な表現ですが、画面から2mくらい離れて見たり、目を細めて見た場合に、目に入ってくる色がキーカラーです。以下の例は背景の黄緑が変われば印象はまるで変わってしまいますが、サイト名の色を変えても大きく印象は変わらないため、黄緑がキーカラーであると言うことができます。

キーカラーの分量を調整する

次にキーカラーの分量を多くするか、少なくするかを考えます。「第2回:色を詳しく説明できるようになろう」で大きく鮮やかな色は疲れやすいと説明しましたが、それを避けるために、鮮やかな色は小さく、くすんだ色は大きく使うのが配色の基本となります。

同じ色でも彩度の高い鮮やかな色は少量でも強い印象を与えることができます。逆に彩度の低い灰色に近い色は大きく使っても強い印象を与えにくいのです。それを踏まえて、まずキーカラーに使いたい色が、強い色なのか弱い色なのかを考えておけば、その後の配色は非常に楽になります。

暗い色を背景に使いたい場合

全体的に暗い色を使った落ち着いた配色にしたい場合、背景に暗い色を使うようにし、同系色の鮮やかな色をキーカラーにすると全体のまとまりがよくなります。暗い彩度の低い色(例えば黒や暗い茶色)は、鮮やかな色に負けてキーカラーになりにくいのです。

キーカラーを決める際に気を付けたいことをあらためて整理しておきましょう。

  • サイト名やキャッチコピーに使うのであれば、読める色を選ぶ
  • 鮮やかな色ほど小さく使う
  • 暗めの配色にしたい場合は、背景に大きくくすんだ色、キーカラーは鮮やかな色にする
  • 一度決めたキーカラーは変えないようにする

この4点がクリアできれば、まずキーカラー選びは成功と言えます。

ホームページの配色は4色を基本に考える

キーカラー以外に必要な色

キーカラーを決めてもそれだけで配色ができるわけではありません。先ほどの例でもキーカラーと背景色の2色が出てきました。ホームページの実際の配色では4色を基本にそれらを上手く使っていくことが重要です。その4色とは

  • キーカラー:画面の印象を左右する最も重要な色
  • 文章の色:黒や暗いグレー(背景が暗い色は逆に白や明るいグレー)が使われることが多い
  • 背景の色:キーカラーを活かすことができる画面全体の背景色
  • リンクの色:文字のリンクの色。青が使われることが多い

となります。

このうちリンクの色を、文章の色と似たような色を使ってしまうと、目立ちにくくクリックされなくなります。GoogleYahoo!Wikipediaなどの多くのサイトで青が使われていることから、青をリンク色にするのが無難ですが、それ以外の色を使うのであれば、リンク部分に下線を使うことで、よりクリックされやすいリンク色にすることができます。

このようにキーカラーを決めただけでも、それ以外の色も数色使うことが決まってきます。色数が増えるほど配色は難しくなっていくので、配色に苦手意識がある人は色数を増やさず、できるだけ4色を繰り返し使うようにします。

強調の色(アクセントカラー)を1色選んでみよう

もうひとつ覚えておきたいのは重要な部分を示すためのアクセントカラー(強調色)です。アクセントカラーは目立たせるための色ですから、赤が多く使われているところに赤を使っても目立たせることはできません。

つまり今まで使われている色と大きく異なる色を選ぶことが重要です。最も簡単な色の選び方は、並べた時にまったく異なる印象の色を選ぶことです。青がキーカラーなのであればオレンジを、赤がキーカラーなのであれば青緑を選ぶという具合です。

ただしくすんだ暗い色などをキーカラーに選ぶと目立たないため、鮮やかでしっかりと見える色を選ぶようにします。

またアクセントカラーの色が薄いと、強調として使えなかったりすることもあるため、きちんと読みやすい色を選ぶようにしなければなりません。

また文字中心のシンプルな配色のサイトであれば、強調したい文字を大きくすることでアクセントカラーにすることができますが、色の大きさを利用するテクニックは次回の連載でお伝えすることにします。

  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

坂本 邦夫(さかもと・くにお)

坂本 邦夫(さかもと・くにお)

カラー&Webデザイン フォルトゥナ 代表
http://www.color-fortuna.com/

1973年、大阪府東大阪市生まれ。関西大学文学部史学地理学科卒業。
2004年、色彩に関するノウハウをまとめたウェブサイト「基礎からわかるホームページの配色」を公開。以後、Web制作コンサルティングを主な業務としながら、書籍や雑誌などへの寄稿・セミナーなどで、ウェブにおける色彩環境の向上を使命として活動。日本色彩学会正会員。

主な著書に『ウェブ配色 決める! チカラ - 問題を解決する0からスタート ホームページ配色入門』(ワークスコーポレーション)、『ウェブ配色 コーディネートカタログ』(技術評論社)など。

ウェブデザイン&配色の見本帳

  • 1年間無料

    「はじめてWEB」でホームページをはじめよう!
  • Jimdoリメイク | プロがあなたのホームページを50,000円(税抜)でリニューアル!
  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス

ホームページを作るのがはじめてのかたはまずこちらをご覧ください

コラム週間アクセスランキング[期間:2017/5/14~2017/5/20]

おすすめコンテンツ

はじめてWEBおすすめ本

創業・経営のお役立ち情報

  • ソウギョウノート

    飲食・小売・サービス業の開業スケジュールから、融資申込に必要な書類までをカンタン作成

  • 経理通信

    経営者と経理ご担当者必見!中小企業・小規模事業者のための経理サポートサイト

  • まとめてオフィス

    文具、通信、オフィスのことなら何でもお任せ

  • フリーコールS

    問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ
    今ならキャンペーン実施中!