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

  1. TOP
  2. 0からスタート ホームページ配色入門 : 第5回 読みやすい色を選ぼう

エキスパートコラム

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

第5回:読みやすい色を選ぼう

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

2014年9月8日更新

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

閲覧数8,879views

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

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

5回目となる今回は、わかりやすいテキストの色・ナビゲーションの色・画像リンクの基本となる考え方について説明します。サイトの内容をよく読んでもらい、理解を進め、注文やお問い合わせまでたどり着いてもらうためには、文章の読みやすさと次のページへ進んでもらえるリンクやわかりやすいナビゲーションは大変重要なものです。

背景に別の色を敷いて読みやすくする

読みやすさの基本は白背景と黒文字

文字を読みやすくするための基本は、白の背景に黒い文字を配置することです。検索結果にカラフルな文字が使われているのは見たことがありませんし、会議資料や文庫本のように内容を淡々と読んでもらうことだけを考えれば、それだけでも十分な場合もあります。

しかしホームページの場合にそうはいきません。1ページだけで全ての内容が理解できるとは限りませんし、商材をより魅力的に使うためには、様々な画像も入れなければなりませんし、画像に文字を重ねることも必要になってきます。

写真や模様の上に文字が重なる場合

背景が写真であったり模様がある壁紙であったりする場合には、その上の文字は読みにくくなります。ページ上で大きく使われる画像やバナーなどに置かれる文字は、目立たせたい重要な文章であることも多く、それが読めないと文章の理解も進みにくくなります。

模様の影響を避けて文字を読みやすくするためには、文字部分に背景色を敷くか、文字に縁取りを付けるようにしましょう。

文字のリンクの色の役割

文字へのリンク色の復習

リンクの色の基本については、連載の第3回「1番大事な色を決める」でも述べていますが、もう少し工夫が必要な場合について説明しておきます。

何も指定されていない場合の文字のリンクの色は青が基本となります。多くのホームページや検索エンジンでも青の色が使われているのを見かけますし、それ以外の色である場合には戸惑ってしまうこともあります。特にデザイン上の問題がなければ、無理に他の色を使わない方が訪問者の戸惑いは少なくなります。

また色以外にリンクであることを示すものとして、下線があります。下線が引かれていれば他の色であってもリンクであると認識しやすくなるため、リンクの色が青以外であるならば、下線は外さないようにした方が無難です。

また訪問済みのページへのリンクは紫がよく使われます。これは単に見た目の差を付けているだけでなく、「どのページが既読なのかを表すことができます。総ページ数の少ないホームページでは問題になりませんが、見てもらいたい内容が多く、ページが分かれているような場合には、訪問済みのページの色も変えない方がよいでしょう。

見た目ももちろん重要なのですが、伝えたいのは文字の色ではなく、サービスや商品の詳細であることを忘れないようにしてリンクの色を設定しておきたいものです。

強調とリンクの色の差を付ける

第4回目「色の面積で文章を強調する」の記事で文字を太くしたり、色を変えることで、重要な部分を強調する方法をお伝えしましたが、強調にリンクが加わることで、その色の選び方は少し注意が必要になります。強調の色がリンクの色と似ていると、どちらをクリックしていいかわからなくなってしまうのです。

強調とリンクを併用する場合には、まったく異なる色を選ぶようにしたり、リンクには下線を付けるなどして、どれをクリックすればよいかをはっきりさせるようにします。その場合には強調したい文字に下線を付けると間違いやすくなるため、リンク以外の文字には下線を付けないようにしましょう。

また強調の色が青、リンクの色がそれ以外の色という組み合わせもクリックする場所がわかりにくくなる大きな原因となります。

リンクを貼るということは、基本的にはその先を見てもらいたいということですので、勘違いが起きにくくする色を選びたいものです。

無料ツールで読みやすさをチェック

カラーコントラストアナライザー

文字の読みやすさは見ているモニタや環境によっても違いますし、人によって色の好みもあるため、必ずしも自分が読みやすいと思っているものが、他の人も同じように読みやすいと感じているとは限りません。色弱や加齢・眼の病気などが理由で色の区別が付きにくくなっている人もいます。

そこで読みやすさを客観的に見るために重要な部分の文字などはツールを使ってチェックしてみましょう。今回ご紹介するのはカラーコントラストアナライザーです。

Macでは英語版しかありませんが、使い方は簡単で背景色と文字色を選べば、その読みやすさをコントラスト比と言うもので表示してくれます。最も読みやすい白と黒の組み合わせはこの21:1になり、同じ色同士でまったく見えない組み合わせは1:1になります。

これで重要な部分のコントラスト比を調べ、概ね4.5:1以上の数値が出ていれば、基本的には大丈夫と言ってよいでしょう。

このソフトは元々色弱や高齢者なども含めた様々な条件の人であっても読みやすい色にする目的で作られたものですが、特に目が悪い人でなくても読みやすいに越したことはありませんので、必ずチェックするようにしましょう。

モノクロでの色のチェック

もうひとつのチェックは、画面をモノクロにした場合の読みやすさです。色を付けることにとらわれて、実は大事な部分が見えていないようでは意味がありません。

そういう時にはChromeとFirefox用の拡張機能である、(un)clrdを使って、自分のホームページの色をモノクロにして、画面から数メートル離れるか目を細めて見てみましょう。少し離れたところから見て、その見出しやキャッチコピーなどの重要な文章が見えなかったら、その色選びは失敗です。

両方のチェックを行うのが望ましいのですが、できればどちらか片方だけでもおこなって、読めないことの機会損失を減らすようにしましょう。

次回は色を増やしたり減らして配色をまとめる方法などをお伝えします。

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

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

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

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

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

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

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

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

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

コラム週間アクセスランキング[期間:2017/6/18~2017/6/24]

おすすめコンテンツ

はじめてWEBおすすめ本

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

  • ソウギョウノート

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

  • 経理通信

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

  • まとめてオフィス

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

  • フリーコールS

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

  • auオフィスナンバー

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