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

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

エキスパートコラム

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

第10回:茶色を使ったホームページ

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

2016年1月5日更新

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

閲覧数4,263views

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

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

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

安心・安定の茶色

茶色は赤やオレンジ・黄色のような暖かい色(暖色と呼ばれます)が暗くなった色で、私たちが見慣れている木や土の色でもあり、自然なイメージが必要な場合に多く使われます。

基本的には暗い色ですので、白い背景の上に茶色を配置すれば、画面にメリハリも付きやすいですし、全体を茶色にすると安定感のある重々しい雰囲気も出すことができます。

また黒や灰色ではちょっと強すぎる感じがしたり、冷たい感じがする場合には、暖かく柔らかい感じを出すこともできますので、いろいろな場面で使い勝手のよい色です。

土や木で見慣れた茶色で落ち着いたイメージに

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

茶色で連想される
イメージ
大地、安定、安らぎ、重厚、力強さ、田舎、頑固、穏やか、地味、渋い、素朴、安心感、伝統、自然
茶色で連想される物 土、チョコレート、革製品、カレー、木、コーヒー、枯れ葉、栗、髪、馬、紅葉、秋、どんぐり

茶色から連想されるイメージはやはり自然のものに由来するものが多くなっています。逆に言えば違和感や派手さ、華々しさなどを表現できる色ではありません。また赤みの強い茶色と黄色みの強い茶色、あるいは黒に近い茶色では伝わるイメージも大きく異なってきます。

また基本的に暗い色や濁った色なので、ベタ塗りにするのではなく、木の質感をそのまま使ってみたりするなど、何らかの模様や写真と組み合わせた表現の方が茶色のイメージは活かされやすくなります。

抽象的な茶色と写真を使った具体的な茶色

落ち着いた茶色のイメージをできるだけ壊さないようにするためには、あまり派手な色や異質な色は合わせない方が無難です。特に相性がいい色は、自然を連想させる緑ですが、紅葉のように茶色と鮮やかな赤を組み合わせることもできます。自然の色の組み合わせは色のおさまりがいいのです。

あるいは同系色の薄い色を背景に敷くのも茶色を有効に使う方法として効果的です。

背景に薄い同系色を敷いた場合の茶色でまとまりよくする

明るい茶色と暗い茶色

元々が全ての色の中でも暗い色に含まれる茶色ですが、元の赤や黄色のイメージが見える茶色と黒に近い茶色では伝わるイメージも変わってきます。

明るい茶色と暗い茶色

明るい茶色は木の葉のような軽いイメージになりますし、暗い茶色を使えば高級感を持った堂々としたイメージにもなります。極端なことを言えば、茶色の濃淡だけで様々なイメージを作ることができますが、その時には明るい色を中心に配色するのか、暗い色を中心に配色するのかのどちらかに決め、中途半端にならないようにしましょう。イメージがはっきりしていない茶色は「ただ濁っているだけの色」になりがちです。

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

茶色の合いやすい業種としては、人や素材の暖かみを活かしたい飲食店やホテルなどが挙げられます。

特に飲食店のホームページでは、冷たく感じられる青などは食べ物がおいしそうに見えにくいことから暖色が使われます。しかし、派手な赤やオレンジは扱いが難しいですし、店内の照明や内装の木などの雰囲気が表現しやすいことで、茶色が多く使われています。

逆に金属をイメージさせたい機械や精密部品などのメーカーは茶色よりも、灰色や黒を使う方が製品イメージを伝えられやすくなります。

暖かい色であるため、クールとかかっこいい、洗練されたイメージを出したい場合の色としてはあまり向いていません。

茶色と灰色から受けるイメージの違い

色選びの3つのポイント

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

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

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

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

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

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

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

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

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

コラム週間アクセスランキング[期間:2017/10/8~2017/10/14]

おすすめコンテンツ

はじめてWEBおすすめ本

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

  • ソウギョウノート

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

  • 経理通信

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

  • まとめてオフィス

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

  • フリーコールS

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

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ