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

  1. TOP
  2. みんビズ制作講座 色について考えよう : 第2回 これだけは避けたいWebの配色

エキスパートコラム

みんビズ制作講座:色について考えよう(全4回)

第2回:これだけは避けたいWebの配色

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

2012年7月25日更新

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

閲覧数5,491views

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

Webの配色で最も考えなければならないことは、そのサイトのビジネスを成功させることです。そのためには重要な情報を訪問者にきちんと伝えなければなりません。第2回目の今回は、Webサイトの情報伝達を妨げないようにする色の使い方と配色に重要なキーカラー選びをお伝えします。

文字情報をきちんと読ませる

文字が読めないことによる機会損失

まず読みやすくするためには背景色と文字色の明度差が重要です。明度差が小さければ、文字は読みにくくなり、それが原因でサイトから去られてしまうこともあります。

明度差によって変わる読みやすさ

また色は誰もが同じように見えているとは限りません。色弱で特定の色が見にくい人もいれば、病気や加齢によっても色の見え方が変わる人もいます。このような見え方の人は少なくなく、知らないうちに機会損失を生み出していることもあるため、ツールを使ってチェックする習慣を付けましょう。

読みやすさをチェックする無償のツール

客観的に読みやすさをチェックするための無償のツールもたくさん存在しますが、おすすめは富士通が提供しているカラーセレクターです。

富士通カラーセレクター

このツールでは背景色と文字色を指定すれば、○×で判定してくれます。5つの判定結果がすべて○であれば、まず問題ないと判断してよいでしょう。

読みやすさをチェックしておくべき部分

サイトのどの部分の文字もきちんと読めるのが一番ですが、特にチェックしておきたい部分は以下の部分です。

  • サイト名やロゴ
  • キャッチコピー
  • 文章の見出し
  • テキスト本文
  • ボタン上の文字

リンクの色の基本は青

GoogleやYahoo!などの多くのサイトで、未訪問ページへのリンク色は青になっています。図の右側の例のように、普段見慣れない色に変更すると、どこをクリックしてよいかわからなくなることがあるため、リンクの色は「青が望ましい」のです。

リンクの色は青色が基本

リンク色が青色以外のテンプレートを選んだ場合でも、リンクの色だけは青に変更した方が、機会損失という点において無難です。もちろんリンク部分の文字もきちんと読めるかのチェックも必要です。

配色の鍵となるテーマカラーを1色選ぶ

よい配色はテーマカラーと呼ばれる1色を決め、その色を様々に展開されて作られたものがほとんどです。まずは自分のサイトのイメージに合う1色を決めてしまいましょう。

テーマカラー選びで重要なことは、業種やサービスのイメージに合っているかということです。もし、どうしても使いたい色と目指す配色の印象が違う場合には、目指す印象に近い色の方をテーマカラーとしましょう。

サイトの内容と配色イメージ

右の例のように天然素材をアピールしたいのに、ロゴの色に合わせて強い色にしてしまうと、商品の良さが十分に伝わらなくなってしまうのです。

次回は、テーマカラーから色を増やして、必要な部分に配置する考え方を学んでいきます。

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

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

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

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

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

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

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

  • はじめてWEB 大感謝祭!~新規加入または2年目更新をし、アンケートに答えてギフト券をもらおう!~
  • Jimdoリメイク | プロがあなたのホームページを50,000円(税抜)でリニューアル!
  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス

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

コラム週間アクセスランキング[期間:2017/4/16~2017/4/22]

おすすめコンテンツ

はじめてWEBおすすめ本

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

  • ソウギョウノート

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

  • 経理通信

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

  • まとめてオフィス

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

  • フリーコールS

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

  • auオフィスナンバー

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