スマートフォンサイトを表示する

  1. TOP
  2. 自分のホームページに合う色の選び方 : 第8回 黄を使ったホームページ

エキスパートコラム

自分のホームページに合う色の選び方(全12回)

第8回:黄を使ったホームページ

執筆:坂本 邦夫(フォルトゥナ)

2015年11月2日更新

  • このエントリーをはてなブックマークに追加

閲覧数4,442views

このコラムをPDF形式でダウンロードする

この連載では色のイメージとホームページの色が合わなければ、せっかく内容がよくできても、訪問者は中身を読まれずに去ってしまうこともあります。この連載では訪問者のイメージに合わせることができるように、色のイメージとその心理的な効果を説明し、色によって向いているサイトと向いていないサイトを解説していきます。

第8回目は黄色の持つ意味や心理的な効果、それに向いたホームページと向かないホームページについてまとめています。

とらえどころのない黄色

黄色というと皆さんはどのようなイメージを思い浮かべるでしょうか?一面に広がるひまわり畑だという人もいるかもしれませんし、太陽をイメージする人もいるかもしれません。これらは比較的あざやかで元気なものをイメージしているはずです。

しかし、うすい黄色はクリーム色と呼ばれて優しいイメージがしますし、少し暗くなるだけでいちょうの黄色のような落ち着いた色になってしまいます。

同じ黄色に含まれる色であっても、その色調の違いでまったく異なる印象を受け、好き嫌いも分かれてしまうのが黄色のおもしろいところです。

明るく楽しいイメージを与える黄色

黄色のイメージと基本的な使い方

黄色で
連想されるイメージ
注意、楽しい、可愛らしい、華やか、快活、警告、危険、活発、甘え、緊張、軽い、酸っぱい、明朗、幼さ、陽気、希望、幸福、明るい、軽快、知恵、開放感、不安
黄色で
連想される物
ひまわり、卵の黄身、光、道路標識、太陽、カミナリ、とうもろこし、バナナ、信号、ひよこ、レモン、金、月、菜の花、信号、イチョウ

黄色は暖かさを感じさせる暖色(他に赤やオレンジなど)の中でも最も明るい色で、光を感じさせる明るく楽しいようなイメージを持つと同時に、反対に危険や注意のような意味を持つこともあります。その色合いの選び方や配置によってはネガティブなイメージを感じさせることもあります。

道路標識や工事現場で見られるように、黄色は黒と組み合わせて目立ちやすい色で注意を促すときに使われています。組み合わせ次第では黄色の明るく快活なイメージとは反対に、危険や不安を表す色であることも覚えておきましょう。

注意を表す黄色

また黄色はひらめきや新しい発想などを表現することもあります。青が知性や理性を表すのに対して、その反対の色である黄色は外に向いた頭の働きを示しているのだと考えられます。ドラえもんの青に対するのび太の黄色の服を思い出してもらえるとわかりやすいでしょう。

このような色同士の連想から、黄色は軽さや軽率さ、落ち着いていないというイメージを与えることもあるため、堂々とした安定感のあるものを表現するのには向いていません。

黄色をうまく使うコツは、なるべく背景の色として使うことです。黄色は明るい色であるため、白い背景色の上に文字色として使った場合には、文字の色が薄すぎて読めないことが多いのです。

それを避けるためには、「黄色は背景として使う」ということを覚えておきましょう。これは画面全体に黄色を使いたい場合であっても、バナーなどデザインの一部で使う場合であっても同じです。黄色を文字の色として使うのであれば、背景色は暗い色を使わなければなりません。その結果、黄色よりも暗い色の背景の面積が大きくなってしまい、黄色の持つイメージが損なわれてしまうのです。

白い背景で文字色を黄色にすると、イメージは伝わりにくいし、読めないこともある

明るい黄色と暗い黄色

黄色は明るい色と暗い色でイメージにかなり差が見られる色です。また文字色として使いにくいため、ロゴやホームページのタイトルには大変使いにくいと言えます。

明るい黄色と暗い黄色

明るい黄色は薄いクリーム色やベージュとなり、強い印象を与えない背景色として重宝です。黒い文字ではちょっときつすぎると感じられた場合には、茶色のような黒以外の暗めの色と組み合わせれば、強すぎるイメージを緩和することができます。

薄く明るい黄色と様々な文字色の組み合わせ例。黒以外の文字を使うと表現が軟らかくなる

黄色が合う業種・合わない業種

色の組み合わせとして使いどころが難しい黄色ですが、ひまわりやレモンなどの具体的なイメージをそのまま表現しやすい商品のホームページでよく見られます。

それ以外では「ひらめき」などのイメージから、デザイン会社・広告会社のホームページでも比較的多く見られています。

筆者は毎年数多くのホームページを見ていますが、黄色は全ての色の中でも最も使われていない色の一つです。それだけ表現が難しい色なのです。

白い背景を前提とするならば、黄色で強いイメージを出すのは難しく、印象を出すためには黒の背景にアクセントとして黄色を使うか、背景の部分に黄色を使うのがおすすめです。その場合には大きな写真を使い、「危険色」としての黄色にならないように配慮するのが現実的な黄色の使い方となります。

黄色は大きな写真と一緒に使う

色選びの3つのポイント

  1. 色を選ぶ場合には、「この色を使いたい」だけでなく、「この色は使わない方がよい」というマイナスのイメージや訪問者の期待する色も合わせて考える
  2. どんな色でも使いすぎると中身の邪魔をする。多く使いたい場合には文章が入らない部分の背景に色を使うようにする
  3. どの色を選ぶか迷ったら、周囲の3人以上の人に聞くこと。1人だけに聞くと好みだけを言われ、意見が分かれるだけのこともある
  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

坂本 邦夫(さかもと・くにお)

坂本 邦夫(さかもと・くにお)

カラー&Webデザイン フォルトゥナ 代表
http://www.color-fortuna.com/

1973年、大阪府東大阪市生まれ。関西大学文学部史学地理学科卒業。
2004年、色彩に関するノウハウをまとめたウェブサイト「基礎からわかるホームページの配色」を公開。以後、Web制作コンサルティングを主な業務としながら、書籍や雑誌などへの寄稿・セミナーなどで、ウェブにおける色彩環境の向上を使命として活動。日本色彩学会正会員。

主な著書に『ウェブ配色 決める! チカラ - 問題を解決する0からスタート ホームページ配色入門』(ワークスコーポレーション)、『ウェブ配色 コーディネートカタログ』(技術評論社)など。

ウェブデザイン&配色の見本帳

  • 「はじめてWEB」でホームページをはじめよう!
  • Jimdoリメイク | プロがあなたのホームページを50,000円(税抜)でリニューアル!
  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス

ホームページを作るのがはじめてのかたはまずこちらをご覧ください

コラム週間アクセスランキング[期間:2017/7/16~2017/7/22]

おすすめコンテンツ

はじめてWEBおすすめ本

創業・経営のお役立ち情報

  • ソウギョウノート

    飲食・小売・サービス業の開業スケジュールから、融資申込に必要な書類までをカンタン作成

  • 経理通信

    経営者と経理ご担当者必見!中小企業・小規模事業者のための経理サポートサイト

  • まとめてオフィス

    文具、通信、オフィスのことなら何でもお任せ

  • フリーコールS

    問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ
    今ならキャンペーン実施中!