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

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

エキスパートコラム

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

第3回:青を使ったホームページ

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

2015年6月1日更新

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

閲覧数6,322views

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

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

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

青はいつも見ている安心感のある色

青は空や海のようにもっとも見慣れている色です。自然界でよく見ている色は一般的に嫌われにくい色です。「色としての青が嫌い」という人はいても、空の青が嫌いな人や南の島で見られるような素晴らしい海の青を嫌いという人は少ないです。

赤が国旗や鳥居・紅白などで使われる特別な色であるのに対し、お祭りのはっぴなどで使われる庶民に親しまれてきた色でもあります。

その親しまれた安心感のある色は、堅いイメージの必要な企業やお店で多く使われています。

自然の中で見られる青

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

青で連想される
イメージ
冷静、眠り、男性、寂しさ、信頼、知性、平和、清潔、落ち着き、涼しさ、冷たい
青で連想される物 海、地球、魚、空、信号、水、ドラえもん、デニム

青は冷たさや海・水などをイメージさせるため寒色と呼ばれています。明るい青から暗い青まで幅広く信頼感・安定感を出すのに使われていますが、暗くなるほどに親しみやすさはなくなり、冷たさを感じさせることもあります。

また明るい青や水のイメージからみずみずしさやさわやかさ、清潔感を出すのに向いています。

色が変わるだけで涼しさやさわやかさは損なわれてしまいます

第2回:赤を使ったホームページ」にも書いたように、青と赤は男性と女性の区別や水とお湯・信号の進めと止まれのように対照的な意味合いでも使われます。

ホームページにおいては、青は特別の機能的な意味合いを持った色です。それは文字リンクの色です。GoogleやYahoo!をはじめとした多くのサイトでリンクの色は青に設定されています。

GoogleとYahoo!の検索結果の青

これは多くのブラウザの標準のリンクの色が青に設定されていることに由来します。そのため多くの人は青い文字を見れば、それがリンクであり、クリックするとページの移動ができると考えているため、リンクの色をむやみに青から他の色に変えると、誤ってクリックしてしまうことで訪問者にストレスを与えることもあるので注意が必要です。

青以外の色はリンクだと理解されにくい

明るい青と暗い青

様々な青がありますが、明るい青はさわやかな感じが強くなっていきますが、パステルくらいの薄さになるとベビーブルーなどと呼ばれる青になり、男の子(乳児や幼児くらいまで)の色としてよく使われます。

それに対し暗くなっていくと、堅くフォーマルな場面でよく見られるようになります。日常生活においてのリクルートスーツなどがよい例でしょう。古い企業のロゴに青が多くみられるのも、やはりお客様からの信頼を得たいということに由来します。

暗い青は金色や無彩色と組み合わせられて高級感や重厚感を表すのによく使われます。

明るい青と暗い青。軽快な感じから重厚な感じまで様々な場面で使われる

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

青は安心・安定・平和の色です。実際に青を見続けていると体温や血圧が少し下がるという実験結果もあり、落ち着いた印象を与えるのに最適です。

安心感はあるのですが、少し冷たかったり寂しかったりという印象を与える色で、にぎやかさや楽しさを表すのは暖色ほど得意ではありません。それは画面上で使われる色数が少ないほど顕著になります。

青を使ってにぎやかさを出したい場合には、暖色の色を混ぜたり、色の数を増やすようにします。色を増やす場合であっても、青色の分量の方が多くなるように注意しましょう。

青と赤の組み合わせはお祭りのイメージ

色の明るさに関わらず、青はとげとげしさの出にくい色で、特に明るめの色は病院やサロンなど清潔感が必要なホームページでよく使われる色です。

暗くなるほど落ち着いた重いイメージが強くなっていきます。信頼感が重要な機械や部品メーカー・システム会社・学習塾などの分野・夜をイメージさせる業種などで青が活躍します。

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

色選びの3つのポイント

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

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

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

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

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

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

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

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

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

コラム週間アクセスランキング[期間:2017/9/17~2017/9/23]

おすすめコンテンツ

はじめてWEBおすすめ本

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

  • ソウギョウノート

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

  • 経理通信

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

  • まとめてオフィス

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

  • フリーコールS

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

  • auオフィスナンバー

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