このページの本文へ

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ディレクター江口明日香が行く

みんなが買ってる最新アイテムはコレだ!

VOCALOID3 スターターIA ARIA ON THE PLANETES

VOCALOID3 スターターIA ARIA ON THE PLANETES

ヤマハ

17,745円〜

24人が購入

標準HTML5タグリファレンス (WEB PROFESSIONAL)

標準HTML5タグリファレンス (WEB PROFESSIONAL)

アスキー・メディアワークス

2,205円〜

107人が購入

Google上位表示 64の法則 (WEB PROFESSIONAL)

Google上位表示 64の法則 (WEB PROFESSIONAL)

アスキー・メディアワークス

2,499円〜

69人が購入

メモリーカード 32GB (PCH-Z321J)

メモリーカード 32GB (PCH-Z321J)

ソニー・コンピュータエンタテインメント

7,772円〜

11人が購入

Speck MacBook Air 13型 See Thru - Clear SPK-MBA13-SEE-CLR

Speck MacBook Air 13型 See Thru - Clear SPK-MBA13-SEE-CLR

スペックコンピュータ

4,262円〜

20人が購入

jQuery Mobile スマートフォンサイト デザイン入門 (WEB PROFESSIONAL)

jQuery Mobile スマートフォンサイト デザイン入門 (WEB PROFESSIONAL)

アスキー・メディアワークス

2,499円〜

36人が購入

iPhone 4S/4 防指紋性・高光沢機能性フィルム PRO GUARD AF for iPhone 4S/4 / PGAF-IPH4

iPhone 4S/4 防指紋性・高光沢機能性フィルム PRO GUARD AF for iPhone 4S/4 / PGAF-IPH4

マイクロソリューション Micro Solution Inc.

66人が購入

Amazon.co.jp