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

  1. TOP
  2. 0からスタート ホームページ配色入門 : 第2回 色を詳しく説明できるようになろう

エキスパートコラム

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

第2回:色を詳しく説明できるようになろう

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

2014年6月23日更新

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

閲覧数6,747views

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

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

2回目の今回は色に関する基本的な知識を覚えて、配色をコントロールするための下地作りを行います。

色みと明るさと鮮やかさで色を表現する

色みの違いは強い意志を持って決める

色の話をする場合、普通は#CC0033の赤がどうとか、思っていた青ではないので、#0000CCではなく、#006699にしたいなどとは言わず、「もう少し暗い方がいい」とか、「緑がかった青の方がよい」とか、「派手なオレンジでお願いします」のようの感覚的にわかりやすい方で伝えようとするのが普通です。

まずはこの感覚的な色の伝え方を整理してみましょう。

赤や青・オレンジのような「色みの違い」を使った表現は、色の分類で最もよく使われています。「この色は何でしょう?」という質問をされた場合、きっと多くの人が「赤であると答えるでしょう。「鮮やかな色」とか「暗い色」と答える人はそれほど多くありません。

このような色みのことを「色相」と呼んでいます。よく使われるものでは、赤・黄・緑・青・紫です。これらを組み合わせるだけで黄緑・青紫などのようにもう少し色を細かく分けていくことができます。黄赤などは一般的にはオレンジとか橙色という方がわかりやすいですね。

最もよく使われる表現ですが、これだけで色が決められるわけではなく、同じ黄緑でも黄色に近いものもあれば、緑に近いものもあります。

色を決める際に最初にやるべきことは使う色相を絞り込んでいくことです。エネルギッシュな感じで赤を使いたいと考えてデザインを進めていたのに、やっぱり青が好きだなぁなどと色を変えてしまうと、話もデザインも振り出しに戻ってしまうのです。印刷物なら刷り直しできない場合もありますよ。

「最初に決めた色相は絶対に変えないようにする」という強い意志を持って、色相を決めるようにしましょう。

明るい色か暗い色か

色相の次に大事なのが、色が明るいか暗いかです。同じ色相であっても、明るい色と暗い色ではまったくイメージが変わってしまいます。

明るい赤ならかわいらしいピンクになるのに、暗い赤だと落ち着いた感じのえんじ色や茶色になり、伝えたいイメージもまったく変わってしまいます。

このような色の明るさのことを明度と呼んだりしています。明度によってイメージが変わることももちろんですが、文字や図形の読みやすさにとって、もっとも重要な要素が明度になります。

「かわいらしいピンク」を使って、お店の看板を作ってみることにしましょう。背景が白であれば、このピンクは薄くて読みにくくなってしまいます。では読みやすいようにしようと背景を暗い色に変更すると、いかにも怪しい雰囲気の看板が出来上がってしまいました。

色の明度は非常にきちんと読めるか、あなたがホームページで伝えたいことが十分に伝わるかという、ホームページの最重要課題と直結しています。好き嫌いだけで決めるのではなく、背景にどんな色が使えるかを考えておく必要があります。

今回のピンクのような例ですと、「背景色を暗くすると怪しい雰囲気になるので、明るめの背景でも読めるピンクを選ぶ」か「読みやすくなるように縁取りでも付けてなんとかする」ということが考えられていれば十分です。

鮮やかな強い色とくすんだ弱い色

赤にも「誰が見てもわかりやすい派手な赤」と「ちょっと赤が入っているようなぼけたような赤」など様々な赤があります。絵の具を混ぜることを思い出してみてください。混じりけなしの赤100%は鮮やかに発色し、それに白を混ぜていくことで、だんだんと赤の割合が減ってきて、色はくすんでいきます。

混じりけのない色(純色とか原色とか呼ばれています)が多く含まれていれば、彩度が高いというような言い方をします。彩度が高ければ鮮やかで、彩度が低ければどんどん色はくすんでいきます。

彩度が高い鮮やかな色は画面上で多く使いすぎると、見る人が疲れてしまうことがあります。

ホームページの配色では、鮮やかな色ほど小さいサイズで控えめに使い、くすんだ色は大きく使うというのが基本となります。

白・灰色・黒を組み合わせるように意識する

赤が0%で黒が100%の色には、赤を初めとした色み(色相)はまったく含まれていません。100%の灰色とか白も同じですね。このような色みをまったく感じない色は、彩度がない色ということで「無彩色」と呼ばれています。

この無彩色と他の色を上手く組み合わせていくように考えられるかどうかが、ホームページの配色を考える上での鍵となってきます。

色の三属性でできること

色相・明度・彩度の3つを説明してきましたが、これらの3つはまとめて「色の三属性」と呼ばれています。赤とか紫という漠然とした言葉だけを使うのではなく、自分が使いたい色の明度や彩度がどうなっているのかを考える習慣を付けるだけでも、色はより具体的に説明できるようになります。

このようなカラーピッカーは知識がなくとも色を選ぶことができるツールですが、少し見方がわかるだけでも、他のお店やホームページの色を見ながら、「○○のサイトよりも彩度を控えめに」とか「△△のロゴより暗めで」のように、他の色との比較をしたり変更やその指示もしやすくなるでしょう。

次回は一番大事な色の決め方やその考え方などを説明いたします。

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

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

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

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

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

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

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

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

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

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

おすすめコンテンツ

はじめてWEBおすすめ本

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

  • ソウギョウノート

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

  • 経理通信

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

  • まとめてオフィス

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

  • フリーコールS

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

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ