このページの本文へ

2008年11月13日 09時09分更新

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

第29回 

ホームページの色のナヤミを解決(2)――メインカラーの選び方

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

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

だれに何をどのようなイメージで売るのか。目的意識を色に反映する

 みなさんのショップでは、メインとなるカラーを決めていますか。今まで、Webサイトや印刷物をつくるときに、色使いについてはなんとなーく、その場かぎりの思いつきで選んでいませんか。
 良質なホームページをつくるには、目的意識がモノをいいます。ショップの運営にもホームページの制作にも、なにごとにも目的意識があってこそ、結果が生まれます。何を、だれに、どこで、どのように、どんなイメージで売るのか。商いへの行動はこの意識からはじまります。

 今のあなたのショップのホームページも、常に目的を認識してひとつずつ積み上げていくことで「売れるWebサイト」にグレードアップしていくのです。

 われわれの生活は無意識ながら、色に強い影響を受けています。信号の赤青黄色がその典型例です。近くのスーパーやケーキ屋に行くにも看板の色を目印にし、店や家のインテリアでは色調からオーナーの志向をキャッチします。スポーツのチームでも、阪神タイガースなら黄色、中日ドラゴンズなら青色と、どのチームもメインカラーを印象づけることでファンに認識されやすい、応援する意志の統一をはかる面があります。
 色彩が人間のカラダとココロにもたらす効果については、科学的に分析解説された色彩心理学の本が多く市販されているので、それらを参考にしてください。

情報の質を高める色合いとは?!

 ホームページの色を決めるにあたっては、みなさんのショップの情報の質を高めるような色を考えたいものです。
 でも、「うーん、わかっちゃいるけど具体的にどうすればいいのかわからない・・・」という声をよく耳にしますので、その選び方を紹介しましょう。

 色選びには、ホームページだけを意識するのではなく、まず「会社やショップを象徴する色」を決めます。その色は、ロゴや看板、チラシ、封筒、年賀状、会社案内、ホームページの配色などに統一して使用していくものです。
 決めるべき色は、3種。
 「メインカラー=タイトルやキャッチコピーに使う色」「サブカラー1=メインを引き立てる役割の色」「サブカラー2=背景カラー。メインと相性がよくて文字を読みやすくする色」。最初にこの3色を決めましょう。

 考える順序としては――。
 まず、なにをおいてもメインカラーから決めていきます。あなたのサイトを訪れる人たちはどんな色を好むのか、を想像してください。前回にも述べたように、「人間が生活や習慣と照らし合わせていつも目にしてきた色の共通認識」に逆らわず、商材をイメージする自然な色目を選ぶのが基本です。
 あなたのショップの商材は何ですか。男性向きスポーツグッズならブルー系、エコグッズや健康グッズならグリーン系、キッチン雑貨ならピンク系など、自分の趣味や好みだけで選ばず、サイト訪問者にあなたのショップや商材について、好印象をあたえる色を選びます。

 その場合、競合サイトを調査することからはじめましょう。あなたのショップの同業他社、大手はもちろん、小規模でも人気のあるWebサイトを検索エンジンで調べ、できるだけ多くの競合サイトを徹底的にあたります。そのサイトのメインカラー、サブカラー2種の合計3色をチェックし、紙に書き出していきます。
 100ほどの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円〜

70人が購入

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

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

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

2,499円〜

69人が購入

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

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

スペックコンピュータ

4,262円〜

21人が購入

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

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

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

2,499円〜

38人が購入

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

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

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

7,772円〜

9人が購入

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.

60人が購入

Amazon.co.jp