資料請求

Web Directors Studio ディレクターのための利益につながるサイト作り

機械損失を防ぐ!ECサイトの色彩設計 全3回 Vol.1 ディレクターなら最低限知っておきたい色彩設計

はじめに

今回から3回にわたり、ECサイトの色選びについて学んでいきましょう。ECサイトにおいては、何よりも重要なのはその商品を売ることです。そのためには正しい色を使って、伝えたい情報を確実に伝達させ、機会損失を減らす必要があります。

自社の商品を販売しているのでなければ、多くの商品は競合サイトでも販売されているはずです。単にサイトのデザインや配色がよいだけで売れるわけでないことは、実際にECサイトを制作・運用したことのある人であれば、既に理解されていることでしょう。

では美しい色彩が必要ないかと言われるとそうではありません。美しいかどうかは主観によりますが、その商材を販売するのに適した配色である必要があります。また訪問者にサイトを印象づけることで、再訪しやすくすることも重要ですし、ユーザビリティに配慮してストレスを感じさせることなく購入してもらうための流れを作る必要もあります。

例は同じ写真を利用した商品の紹介例です。高級品であることを訴えたいのであれば、左の図のような配色が適切です。逆に安いことを印象づけたいのであれば、右の図のような鮮やかな色で派手に飾ることが求められます。

ただし、右の図については、文字がやや読みにくく高級であることや価格が伝わりにくくなっています。

配色の印象と合わないこと、文字が読みにくく情報が伝わらないことなどの条件が合わさった場合、本来の利用者である「高級なウナギを贈答用に探している人」がページから離脱してしまう可能性が高まります。

売り上げを上げるためには、ターゲットユーザーに適し、情報を正確に理解してもらうための色を使うことが必要なのです。

本連載では競合と比較されやすいECサイトの色彩について、どのように色を選ぶか、そしてどのような位置に配置するか、色による機会損失を生まない情報伝達とはどのようなことかを学んでいきます。

色彩の基礎知識

クライアントとのやりとりの中では、青や赤という漠然とした表現が使われることが多いのですが、具体的なRGB値(#FF0000)などを指定しない限り、一人一人の頭の中で思い浮かべる色は異なります。そのため、想像していたのとは違う」という抽象的な理由で、提出したデザインを拒否されることもあります。

色を表現するための基本的な用語を理解することで、論理的でより踏み込んだ色の話をできるようになり、好みに依存した効果が得られにくい色選びを避けることができます。

色相

色相とは赤・青・黄などの色みの違いを表す言葉で、色を表現するためにもっとも多く使われます。通常、どんな色がいいですかと質問した場合、青や緑のように色相を表す言葉が多く使われます。また色相が順に移り変わっていく様子を環状にしたものは、色相環と呼ばれ、配色を考える際によく使われます。

明度

明度は色の明るさを表します。明度が高いと言えば明るい色、明度が低いと言えば暗い色となります。この明度は文字や図の見えやすさ、読みやすさにもっとも大きな影響を与えます。

背景の色と文字の色の明度の差が大きければ大きいほど、文字は読みやすくなります。ECサイトにおいては、商品をよく理解してもらうための説明文や価格など、購入に必要な情報が読みにくければ、単に買いにくくなるだけでなく、重要な情報を隠そうとしているのではないかという不信感を与えることになりかねません。

文字による情報の伝達を図る上で、もっとも重要な背景と文字・図の色の関係は、「コントラスト比」という値で表すことができますが、これについては、後ほど解説します。

彩度

彩度は色の鮮やかさを表します。彩度も明度と同じように高低で表すことがありますが、彩度の高い色は鮮やかで、彩度が下がるほど色はくすんでいき、元の色相が感じられなくなっていきます。

まったく色相が感じられない白・灰・黒は、彩度のない色という意味で無彩色と呼ばれます。色の扱いに慣れていない場合、彩度の高い色を多く使いがちですが、ごちゃごちゃとした印象になってしまうことがあります。無彩色をうまく組み合わせることが、配色の鍵になることも少なくありません。

トーン

トーンは似たような明度と彩度の色をまとめて、グループ化したものです。それぞれの色よりもグループ全体の印象が伝わりやすくなり、様々な場面で利用されます。「明るい感じ」や「女性的な感じ」「堂々として落ち着いた感じ」などの印象を伝えるのに重宝されます。

キーカラー

キーカラーとは、配色の鍵となるもっとも重要な色です。キーカラーがきちんと定まっていなければ、目指す配色がしっかりと定まらず、結果としてデザインも定まりにくくなってしまい必要もないのに複数案を提示することになり作業負担が増えます。

このキーカラーにどの色を選び、どれくらいの分量で使うかを決めることが、色彩設計の最初の山場と言えます。中小規模のサイトでは、この辺りを明確にせず、大雑把なイメージだけで配色を進めていくような場合もあります。例えばオレンジを使うと言うことが決まっていたとして、どの部分にどれくらいの分量のオレンジを使うのか、全体の背景色はオレンジなのか、白のままなのかなど、ある程度詳細な色の使い方を共有できていなければ、どのような仕上がりになるのかがクライアントの中で想像できないこともあります。今日烏有共有できている情報が「オレンジを使う」ということだけで、細かい部分の意図を伝えられていなければ、「なんとなく違う」のように抽象的なことを言われることもあるため、実際にデザインの前にキーカラーをどのように扱うかを共有しておくと、その後の作業もスムーズに進めやすくなります。

例えばCPIのWebサイトでは、キーカラーは青になっています。青はロゴをはじめ、様々な部分で使われていますが、ロゴよりは落ち着いた紫に寄った青が使われています。ロゴの色をそのまま使わなかった理由があるはずです。

キーカラーを決めるための様々なアプローチがありますが、詳しくは次回取り上げますので、ここではキーカラーという言葉と、常にキーカラーを意識して色を選ばなければならないということだけ覚えておきましょう。

文字のコントラスト

文字の読みやすさは、背景色と文字色の組み合わせによって決まります。重要な情報が読めない・見えないということは、ECサイトにおいては直接の機会損失へとつながります。例えば価格がわからないために買えないとか、どこをクリックしてよいかわかりにくいなどです。文章が読みにくいサイトに長時間ユーザーが付き合ってくれるとは限りません。イメージ優先で文字の色は淡くしたいというリクエストはよく聞きますが、サイトの目的が販売である以上、文字を淡くするメリットよりもデメリットの方が多いことを理解し、クライアントにもそのことをきちんと伝えなければなりません。

また誰もがその色を同じように見ているとも限りません。色弱者の方は色の区別が付きにくかったりしますし、加齢によっても目の機能は衰えていきます。

そこで多くの人がきちんと読みやすい文字にするために出てくるのが、コントラスト比というものになります。文字の色と背景の色の関係はコントラスト比という言葉で表され、WebコンテンツのJIS規格であるJIS X8341-3:2010やその元となったWCAG2.0(ウェブコンテンツ・アクセシビリティ・ガイドライン )の中で規定されています。

コントラスト比は21:1〜1:1の間で表され、21:1は白と黒の組み合わせとなり、もっとも見えやすい色とされています。モニタの環境によって見える色は様々ですが、概ね4.5:1以上あれば多くの人にとって読みやすい色であるとされています。

この計算を人の手で行うのは大変ですが、Web上に簡単にチェックできるContrast-A(http://www.dasplankton.de/ContrastA/)のようなツールがあります。あるいはWindows版のみですが、インフォアクシアが提供するカラー・コントラスト・アナライザー(http://www.infoaxia.com/tools/cca/index.html)を利用してもよいでしょう。これらを利用して、少なくともショップ名・商品名・価格・キャッチコピーなど、店舗のことを知ってもらったり、商品の理解に欠かせない情報については、きっちりとチェックを行うようにし、「誰にでもできることで機会損失を生まないように」しなければなりません。

有名なサイトを参考にした色選び

ECサイトでは扱う商品が似てくると、どうしてもイメージも似たり寄ったりになり、似たような配色になることは仕方ありません。ナビゲーションも似てくるのは当たり前です。有名なサイトや実際に売れていると評判のサイトに学ぶことも必要でしょうが、そっくりになってしまっては、その印象も薄れてしまいがちになります。

そこでその分野でよく知られているサイトや、同じような商材を扱う何らかの賞をもらったサイト(例えば楽天やYahoo!ショッピングの中で表彰されたことがあるなど)を参考にします。既に実績を持つサイトの全体の配色バランスやキャッチコピー、バナーなどの各部の配色を見ることは、色の扱いに不慣れな人でも参考にしやすいでしょう。ただし、あまりに似すぎていると模倣と思われてしまうため、「少し変える」ようにしなければなりません。

この「少し変える」には3通りの方法が考えられます。

  1. 使われている色そのものを変える
  2. 使われている色の分量を変える
  3. 色とその分量の両方を変える

このいずれを選ぶかは、サイトのロゴや目指す印象などの個別の事情によって異なります。この具体的な方法については、次回以降で紹介します。

第2回目はターゲットユーザー別の色彩設計やクライアントとの色のイメージの共有についての方法などを解説します。

坂本 邦夫(さかもと くにお)
カラー&Webデザイン フォルトゥナ 代表
http://www.color-fortuna.com/
1973年、大阪府東大阪市生まれ。関西大学文学部史学地理学科卒業。
2004年、色彩に関するノウハウをまとめたウェブサイト「基礎からわかるホームページの配色」を公開。
以後、Web制作コンサルティングを主な業務としながら、書籍や雑誌などへの寄稿・セミナーなどで、ウェブにおける色彩環境の向上を使命として活動。日本色彩学会正会員。
主な著書に『ウェブ配色 コーディネートカタログ』(技術評論社)、『Webプロフェッショナルのための黄金則 Web配色デザインのセオリー』(マイナビ)など。

ページトップに戻る

CPI

copyright KDDI Web Communications inc. All Rights Reserved.