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

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

エキスパートコラム

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

第4回:緑を使ったホームページ

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

2015年7月6日更新

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

閲覧数8,804views

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

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

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

緑は豊かな自然の色、青でも赤でもないやさしい色

緑は木々の葉の色としてよく見られる色で、自然の何かを表現するときに茶色と組み合わせて使われることが多い色です。

以前紹介した赤や青のような特別な色ではなく、中間に位置する色として、日常の中に安心をもたらすような意味を持たせて使うこともあります。

豊かな自然を表す緑色

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

緑で連想される
イメージ
若さ・さわやか・初心者・安らぎ・安全・平和・バランス・成長・エコロジー・未熟・健康
緑で連想される物 自然・草・木・森・ピーマン・エメラルド・緑の窓口・黒板・信号・お茶

緑と聞いて浮かぶ具体的なものは、やはり植物や野菜などが中心になります。抽象的なイメージに未熟というのもありますが、嬰児(みどりご。昔は緑児と書いた)のように、今から成長していく=まだ成長していないという意味合いでも使われることがあります。

緑は安全や衛生・進めを表す色として、信号や標識での進行の情報・非常口などの避難や救急箱の存在を示すのにも使われています。

緑は安全・衛生・進めなどを表す色

ホームページでは、お問い合わせフォームに進むためのボタンや注文ボタンのような、ページ内でも重要な意味を持つ「進んでほしい場所」でのボタンで多く見られます。このような場合には警告やエラーを表す赤とセットで使われることも多いです。

デザインによって変わることも多いですが、機能面での色選びに困った場合には、進むボタンの緑、戻る(進んではいけない)ボタンの赤、文字のリンクで次に進ませたい青を標準的な色のセットに選ぶとよいでしょう。

「進む」という意味を持たせた緑の使い方

明るい緑と暗い緑

緑は自然の色という大きなイメージの括りがありますが、明るい場合と暗い場合では使われる場面は大きく異なります。

明るい緑(特に黄緑)は葉の色で言えば新芽や若葉の色であることから、若々しさや成長・みずみずしさなどを表現するのに適しています。また心者・熟練していないという意味でも使われることがあります。初心者マークなどがよい例でしょうそれによって、初心者向けのサービスなどのホームページに明るい緑のものが多くなっています。

明るい緑と暗い緑で受ける印象の違い

それに対して、暗い緑は森の木々のイメージです。常緑樹の暗い森は葉が落ちることもなく、常に緑色をたたえていることから、落ち着いたイメージや伝統的なイメージ・ずっと継続している安定感のあるイメージを伝えるのに向いています。

このように明るい緑と暗い緑では、伝わるイメージが大きく変わるため、緑系の色でデザインをまとめたいという場合には、明るい色と暗い色のどちらを主に使うかによって、伝わるイメージも全く変わってしまうことを忘れないようにしましょう。

明るい緑と暗い緑。黄色と青のどちらに近いかでもイメージは大きく変わる

同じ緑であっても黄色みが強い黄緑と青みが強い青緑では少しイメージが変わります。黄緑の方が暖かい感じがし、青緑は青の影響で少し冷たく感じられることもあるため、親しみが必要な場合は黄色が多めの緑を選び、すっきりと見せたい場合には青が多めの緑を選ぶようにしましょう。

また初心者マークの色として、業種を問わず初めての人を案内するための色としてもよく使われます。この「はじめてWEB」の色はまさにそのような組み合わせになっています。

はじめてWEBのトップページ。明るい緑を中心に

緑が合う業種・合わない業種

自然の豊かさを伝える場合にもっとも適した色が緑になります。土の豊かさや実りを表す茶色よりも、もっとストレートに自然をイメージさせることができます。これは木や花をモチーフにしたデザインを加えるとよりはっきりします。

その自然の意味合いを一歩進め、「人工的ではない」ことを表現したいホームページに合っているのが緑です。医療系やサロンなどの人間のスキルが必要になるビジネスにも合った色でしょう。

衛生などを表すことから、病院やサロンのホームページでもよく見られる緑ですが、清潔感を出したい業種でもあるため、黄緑よりは青緑の方が多く使われる傾向があります。それに対して黄緑は介護などの親しみやすさが必要な場合の緑として使われています。

言い換えれば高級感を出したい場合には明るい緑は向いていません。高級感が必要であれば、暗い緑を使いましょう。先ほども述べたように常緑樹の変わらないイメージで、歴史のある施設・教育機関や商店などでも好まれる色です。

三井住友銀行のロゴマークは、この若々しさ・成長性と金融機関としての安心感・安定感の両方を表現するために、明るい緑と暗い緑が同じくらいの分量で使われています。

色選びの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オフィスナンバー

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