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

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

エキスパートコラム

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

第6回:オレンジを使ったホームページ

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

2015年9月7日更新

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

閲覧数6,048views

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

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

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

赤と黄色の間のオレンジ

オレンジは赤のように強すぎず、黄色のように明るすぎずという中間の色で、暖かみを感じさせたい場面で多く使われています。カボチャやオレンジ・マンゴーなど食品にもよく見られ、食べ物を美味しく見せる色としてよく知られています。

数ある色の中では、比較的マイナスイメージを感じさせず、あまり嫌われることの少ない色でもあります。またにぎやかに見せたい場合にも欠かせない色の1つです。

暖かく優しいオレンジ色

オレンジのイメージと基本的な使い方

オレンジで
連想されるイメージ
暖かい・美味しい・暖かい・にぎやか・落ち着かない・元気・陽気・庶民的・子供っぽい・活発
オレンジで
連想される物
カボチャ・みかん・夕陽・マンゴー・読売ジャイアンツ・電球・太陽・工事

オレンジは暗くなると茶色になってしまい、まったく別のイメージを持つようになります(茶色は別の回で詳しく扱います)。そのため明るいオレンジだけに限れば、イメージされる言葉やその意味も明るめのものが多くなります。

またにぎやかさや人気(ひとけ)を出したい場合などで多く使われるので、逆に重々しいイメージやどっしりしたイメージを作りにくい色です。

もしオレンジを使ってしっかりと安定したイメージを作りたいのであれば、茶色を大きく使って、その一部に少量のオレンジを差し込むことになります。

オレンジと茶色の落ち着いた店内

視線を引きつけやすい色であるため、工事現場などでは危険を表示するためにオレンジは使われています。このようなオレンジの特性を利用して、ホームページでは、押してほしいボタンや目をひきたい文字などでよく使われますが、実は文字の色として使うにはオレンジはとても難しい色です。

目立たせようとして、文字をオレンジしたり、背景にしているのを見かけますが、組み合わせによってはまったく読めなくなってしまうこともあります。

オレンジは読みやすくするのが難しい色

文字の読みやすさはこの差が大きいほどよいので、白背景の場合には黒の文字がもっとも読みやすくなるのです。オレンジの場合には、背景が白い場合には、白とオレンジの両方が明るくなってしまうことから、読みにくくなってしまうのです。

大事な部分を目立たせようとオレンジを使い、かえって読めなくなったというのは本末転倒なので、オレンジを文字として使いたい場合には、文字に影を付けたり、背景の色を暗くしたりと、できるだけ明度の差を付けるように工夫することが重要です。

明るいオレンジと暗いオレンジ

暗いオレンジは茶色になるため、オレンジは基本的に明るい色と考えておくとよいでしょう。明るいオレンジの中で、どれくらい鮮やかか、どれくらい薄いかなどを変えて様々なオレンジを作ることになります。

明るいオレンジと暗いオレンジ。暗いオレンジは茶色になる

オレンジのイメージを素直に伝えたいのであれば、あまり他の色を混ぜずに、鮮やかめのオレンジを単体で使うのがよいのですが、主張の強い色でもあるため、大きすぎるとにぎやかすぎたり派手すぎる感じになってしまい、親しみやすさなどの優しい感じはなくなってしまいます。

オレンジを大きく使いたい場合には、大きく配置するオレンジを控えめで薄いものを選び、アピールしたい部分に強めのオレンジを配置すれば上手くまとまります。

またオレンジのよいところを活かして、すっきりとまとめたいのであれば、白あるいは黒+オレンジを配色の基本にして、文字の色を黒や茶色などの暗い色にし、オレンジは少量を配置していくようにするとよいでしょう。

強いオレンジは少量で使う方が写真などの中身が活きる

オレンジが合う業種・合わない業種

オレンジはどの業種でも幅広く使われており、特別に得意や不得意という業種はありません。にぎやかさや楽しさを表現したいのであれば、最有力の選択肢となります。大人や子供という区別も特にないため、飲食店から学校などの教育機関・宿泊施設まで使える万人向けの色と言えます。

ただし、にぎやかさを出したいという理由だけでオレンジを選んではいけません。分量やその色合いにもよりますが、主張の強い色であるため、商品やサービスのイメージと合っていなければ、オレンジのイメージがマイナスに働くこともあります。どの業種であっても、薄いオレンジほど大きく、あざやかなオレンジは小さく使うというのが基本的な考え方になります。

「あざやかなオレンジは小さく」で配色はまとまる

もし「どの色を使ってよいかわからないからオレンジ色」という方向でオレンジを選んだのであれば、オレンジの量をできるだけ減らすようにしましょう。主役はいつでも商品やサービスなのです。

色選びの3つのポイント

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

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

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

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

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

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

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

  • はじめてWEB 大感謝祭!~新規加入または2年目更新をし、アンケートに答えてギフト券をもらおう!~
  • Jimdoリメイク | プロがあなたのホームページを今なら45,000円(税抜)でリニューアル!
  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス

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

コラム週間アクセスランキング[期間:2017/3/12~2017/3/18]

おすすめコンテンツ

はじめてWEBおすすめ本

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

  • ソウギョウノート

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

  • 経理通信

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

  • まとめてオフィス

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

  • フリーコールS

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

  • auオフィスナンバー

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