このページの本文へ

2008年11月27日 21時28分更新

コンテンツをパワーアップ!Webサイト編集術

第30回 

ホームページの色のナヤミを解決(3)――売れているショップの色は赤系と青系が多い

文● 朝日奈 ゆか/株式会社ユンブル 代表取締役

  • はてなブックマークに登録
  • del.icio.usに登録
  • livedoorクリップに登録
  • Buzzurlに登録
  • StumbleUponに登録
  • Google Bookmarksに登録
  • Facebookでシェア
  • Yahoo!ブックマークに登録
  • お気に入りに登録
  • 本文印刷

人に好まれるのは青。売れているショップの色のトップは赤。

 大手のメーカーは、商品を大量生産する際に「人が好む色の調査」をよく実施しています。一般的に、20歳以上の成人に好まれるのは、青だと知られています。青は外国でも好まれる傾向にあります。
 一般的に、男性が好む色のトップは青、女性は赤ということもよく言われます。好まれない色のトップは、男女ともに灰色です。

 さらに、楽天市場やヤフーショッピングなどに出店しているECショップのうち、売れているショップのWebサイトの色目は、1位が赤、2位が青、というデータがあります。赤と青の数値の差はあまりなく、時期によっては1位が青、2位が赤ということもあります。
 赤か、青か。これはもう、顧客対象が女性であれば、赤系を選べばよいことになります。顧客が男女両方である場合は、業種や扱う商材によって必然的に決まってきますね。
 暖色系の赤は、積極的に行動を促す色で、寒色系の青は、安定、安心、希望を表します。実例で多いのは、飲食系、ファッション系の商材を扱うなら赤、生活雑貨、健康食品、スポーツ系や会社のサイトなら青です。
 特筆すべきは、和風系の商材や年齢層が高い人に売れているショップの色目は紫(赤紫)が多いということ。2番目が茶です。特に女性向きショップでは紫系が多く使われています。

文字が読みやすい、シンプルな配色を。

 ひとことで赤、青、紫といっても、当然ながら、真っ赤、真っ青、真紫ではありません。ピンクに近くて黄色味が入ったほんわりした赤とか、緑を帯びた濃いブルーなどと、次は「Webサイトに合いそうな微妙な色合い」を決めていきます。ここがみなさんの腕の見せどころですね。

 色には、「色の三属性」というものがあり、「色相」(赤、青、紫というように色見のこと)、「明度」(色の明るさのこと)、「彩度」(色の鮮やかさのこと)で特徴が決まります。グラフィックソフトを操作して、明度と彩度を組み合わせながら、微妙な色を生み出してください。

 ここで、その作業の際の注意点を記しておきます。

文字が読みやすいか」。この連載ではもう、第1回目から何度も繰り返し述べていますが、デザインも写真もキャッチコピーも、何のためにあるのか? そう、「本文を読んでもらうため」にあるのです。色も同様です。本文を読んでもらうよう、ナビゲートするにあたってデザイン的に適切な色が使われているかどうか。何をおいてもまずはこれを検討します。

「色を選んだら、グラフィックソフトを使って、大きな面、小さな面、丸い面、四角い面など、さまざまな形、いろいろな大きさの面に塗りつぶしてみて、色合いを確認します。

 Webサイト全体を作っている過程なら、色をつけるのはあとの作業にします。いきなり色に凝って配色するのは編集の段取りに逆らうことになり、失敗のもとです。

ページごとに色を変えない。閲覧者が混乱します。配色を統一させます。

リンクの文字色は青のままにしておく。強調したい箇所なので、閲覧者になじみのある青を使用します。下線をはずすのはもってのほか。

 色は3色まで。あとから色を増やさない。ごちゃごちゃと色を使うと、幼稚になります。シンプルな配色こそ「読みやすく、知的で、洗練されたデザイン」にするコツです。

色のイメージをことばで表してみる。たとえば、「女性にファッション雑貨を広く多く売るために、明るく快活な配色」や「高級インテリアを扱うにあたり、落ち着いた大人っぽさを感じさせる配色」など、ことばで表現することからはじめます。これはWebサイトのコンセプトと直結するわけですから、とっくに考え済みのことと思います。まずはことばありき。そのことばを色に反映していきます。

 これらのことを意識しながら作業し、作業後にはスタッフやセンスのいい友人らに「別の目」でチェックをしてもらって修正をかけていきます。他人の視点をどこまで反映させることができるのか。あなたの編集のチカラにかかっています。

著者プロフィール

名前 朝日奈 ゆか info_email_01[アットマーク]yumble.com
※著者に直接問い合わせをする際は、お名前、会社名、サイトURLなどを明記してください。
会社 株式会社ユンブル
サイト http://www.yumble.com/

カテゴリートップへ

この連載の記事

ASCII.jp RSS2.0 配信中

Webディレクター江口明日香が行く

Web Professional 連載記事一覧

Norton Internet Security 2010

Norton Internet Security 2010

シマンテック

5429円~

34%OFF!!

やよいの青色申告 10

やよいの青色申告 10

弥生

7721円~

26%OFF!!

Norton Internet Security 2010 ニコニコパック

Norton Internet Security 2010 ニ…

シマンテック

5462円~

34%OFF!!

一太郎2010 [25周年記念パック] バージョンアップ版

一太郎2010 [25周年記念パック] バージョンアップ版

ジャストシステム

6945円~

17%OFF!!

Adobe Photoshop Elements 8 日本語版 Windows版

Adobe Photoshop Elements 8 日本語版…

アドビシステムズ

1万1340円~

22%OFF!!

JUST Suite 2010 [一太郎25周年記念パック] 特別バージョンアップ版

JUST Suite 2010 [一太郎25周年記念パック] …

ジャストシステム

1万2980円~

18%OFF!!

Age of Empires III : Complete Collection

Age of Empires III : Complete C…

マイクロソフト

7890円~

20%OFF!!

一太郎2010 [25周年記念パック] アカデミック版

一太郎2010 [25周年記念パック] アカデミック版

ジャストシステム

6973円~

17%OFF!!

Office Standard 2007 アップグレード Office 20周年記念 優待パッケージ

Office Standard 2007 アップグレード Of…

マイクロソフト

1万4299円~

20%OFF!!

Norton AntiVirus 2010

Norton AntiVirus 2010

シマンテック

4194円~

32%OFF!!

Amazon.co.jp