ホーム » カテゴリー：既存のサイトの配色を改善する
カテゴリー：既存のサイトの配色を改善するの記事
既存のサイトを、最低限必要な情報を伝えられるように改善していくための色彩の知識を学んでいきます。
リンクの色の基本であるテキストリンクの色について学びます。サイトの使いやすさにおいて、最も重要な要素になりますので、しっかりと基本を身につけておきましょう。
テキストによるリンク
文字によるリンクをテキストリンクと言いますが、スタイルシートなどでリンク色を指定しなければ、未訪問のリンクが青、訪問済みのリンクが紫となります。
これは単にデザインの都合によるものではなく、黒や灰色で書かれたリンクされていない文章とリンクを区別するために変えられています。リンクがきちんとリンクであるとわからなければ、見てほしい肝心のページに誘導できない可能性が高まりますので、通常のテキストとテキストリンクをきっちりと分けて表現することが大事です。
リンクであるとわかりやすく区別する方法は、主に「下線を付けること」と「色を変えること」となります。下線を外すだけでも、リンクであるとわかりにくくなります。左の図では、「スペクトル色のおける食欲訴求色」という部分のみがリンクとなっており、赤色の文字は強調を示しているのですが、リンクの下線がないため、強調とリンクの差が一目で見てわかりにくくなっています。
デザインや配色に自信がなければ、リンクの下線は取らないようにしてください。
訪問済みのリンクと未訪問のリンク
Googleなどで検索してもらうとわかりやすいのですが、訪問済みのリンクが紫に変わることで、「このページは既に見たから他のページを見よう」というように使われているのではないでしょうか。
これを自分のサイト内に置き換えてみると、「まだこの商品やページは見ていないので、見てみよう」という風になります。多くの商品が並べられているショップでは、リンクの色を使い分けることで、まだ見られていないページにユーザーを誘導することも可能です。
未訪問のリンクと訪問済みのリンクの色が、同じ色に揃えられていた場合には、前にどのページを見たかわからなくなり、同じページをぐるぐると巡ってしまうことも考えられます。
もちろん同じページを何度も見られるのは悪いことではないのですが、本来見たい商品が使い勝手の悪さによって見られないのは、閲覧者のストレスになります。未訪問と訪問済みの色を分けることによるデメリットは特にありませんので、違う色を指定しておくのが無難でしょう。
また未訪問は青、訪問済みは紫であるという認識が一般的となっています。まったく違う色のリンクはユーザーを混乱させることになるので、青・紫の範囲内でリンク色を選ぶようにしましょう。
« 隠す
ユーザーは詳細な情報を文字で読み、書かれている内容を把握します。読めない文字は、情報やサイトの価値を下げるので、きちんと読むことが出来る色を選ぶようにしなければなりません。
文字の読みやすさ
文字が読めるかどうかは、ウェブサイトの配色の中で最も重要な要素です。どんなにきれいな印象の色が出来上がっても、文字が読めなければ、伝えたい情報が伝わりません。最低限の機能を果たすためには、読めるような色の組み合わせにしておく必要があるのです。
文字を読みやすくするためには、背景色と文字色の明度の差が最も重要です。基本的には差が大きければ大きいほど、読みやすくすることができます。
ネットショップの場合、全体の背景色に一番多く使われるのは白か薄い色になるはずです。高彩度色などの強い色を使うと、文字だけでなく、商品写真も見えにくくなりますので、一部を除いては避けた方が無難です。
白い背景色と最も明度差のある色は黒になりますが、モニタで見る場合には、白(#000000)と黒(#FFFFFF)の組み合わせはコントラストが強すぎると感じられることがありますので、#333333から#666666くらいまでの濃い灰色の文字色を選ぶのが一般的です。
文字の読めるかどうかをツールでチェック
文字と背景の色が白・灰色・黒以外の場合には、どのくらいの色にすれば読みやすいのかわからないことも多いでしょう。その時には無料のツールなどを使って、客観的な判断をすることも出来ます。
このようなツールには様々なものがありますが、まずは富士通(株)が提供しているカラーセレクターをおすすめします。6桁のRGB値がわからなくとも、スポイト機能が付いていますので、実際に使っている文字色と背景色を画面上から拾い出して、読みやすいかどうか判断することが出来ます。
単に読みやすいかどうかだけでなく、「一般」、「白内障」、「第一色覚(赤)」、「第二色覚(緑)」、「第三色覚(青)」と様々な色覚特性について、それぞれに○(まる)、×(ばつ)を付けてくれるので、ページのバリアフリー化を実現することも可能です。
もう一つは(株)インフォアクシアが提供しているカラー・コントラスト・アナライザーです。こちらはW3C(ワールド・ワイド・ウェブ・コンソーシアム)というウェブの標準的な規格などを策定している団体が提唱する、WCAG2.0(ウェブコンテンツ・アクセシビリティ・ガイドライン)に定められたコントラスト比という基準が達成されているかどうかをチェックするものです。
こちらもスポイトが付いていますので、現状のサイトの文字が読めるかどうかを判断して、すぐに改善することが出来るでしょう。
文字が読みにくいあるいは読めないサイトは、それだけでユーザーがページから離れる要因となります。配色の美しさは二の次にして、今すぐ改善しましょう。
« 隠す
▲このページの先頭に戻る
