グローバルナビゲーションへ

本文へ

フッターへ

お役立ち情報Blog



病院サイトで最も多い色の組み合わせを調べてみた(配色の基本知識と色が与える心理的影響)

弊社ではこれまで多くの医療機関のサイトをリニューアルやコンサルティングに携わってきました。(参考:弊社病院サイト制作実績
色々なサイトに携わっていく中で、病院サイトの色の組み合わせには偏りがあるように感じました。

そこで、今回は静岡県内にある病院サイトの色の組み合わせについて調べてみました。
調査の結果を記載する前に、まずWebサイトにおける配色の基礎知識から説明します。

Webサイトにおける配色について

Webサイトの配色は基本的にベースカラー、メインカラー、アクセントカラーの3種類に分けられ、配色のバランスとしては「ベースカラー70%、メインカラー25% 、アクセントカラー5%」くらいの比率がちょうど良いとされています。

1)ベースカラー

いわゆる余白や背景の色です。最も面積を有する部分になります。コンテンツを読みやすくする必要があるため、白系やグレー系等、明度(色の明るさの度合い)が高い色が良く使用されます。

参考記事:【名刺コラム】色の三属性(色相・明度・彩度)を理解し、トレンドカラーを名刺に取り入れよう!

2)メインカラー

ベースカラーの次に面積を占める色です。サイトの印象を決める主役の色です。目立たせるために、ベースカラーとは逆に明度が低い色を選ぶことが多いです。

3)アクセントカラー

ポイントで使用する色です。一番少ない面積ながら、最も目立つ色となります。全体を引き締め、ユーザの目を引く役割があります。

色が与える心理的影響

また、色の組み合わせだけではなく、色そのものにも与える印象が異なります。

※ちなみに色が与える印象は文化に紐づくものが多く、国や地域が異なれば、与える印象も変わります。

最も光を反射する色です。他の色とも相性が良く、多くのサイトで使用されています。見る人に清廉・善性・純粋などを感じさせる色です。ネガティブな使い方としては、降伏等を表す「白旗」などもあります。ちなみに中国の文化圏では「死」を意味する色でもあります。

白とは対極に最も重たい印象を与える色です。威厳や高級感を与えるのに向いていますが、日本においては「死」を意味する色でもあるため、病院のサイトでは最も不向きな色ともいえます。

余談ですが、日本においても大正時代までは「白」が死を意味する色であったため、葬式では白い服を喪服として着用することが一般的だったそうです。しかし、戦争の影響や欧米文化の流入によって、徐々に黒い喪服が主流となり、それに伴い黒色が死を意味する単語になったと言われています。

グレー

上品で落ち着いたイメージを与えます。どの色とも相性が良いため、ベースカラーと使用するのに向いています。白色ほど色を反射しないため、文字の読みやすさなどにも優れています。

ベージュ

素朴で落ち着きのある印象を与えます。グレーに比べて暖かい印象を与えることに向いています。他の色との相性が良いため、ベースカラーとして使われることが多いです。

見た人に落ち着きを与える色だと言われています。見た人には鎮静作用だけではなく、清潔感や信頼感を与えます。イメージが良い色のため、病院サイト以外でも頻繁に使用される色です。(弊社のコーポレートサイトもメインカラーは青色で作成しております。)

自然を象徴する色だと言われています。調和や安心を与える色であるため、Webサイトにおいて使いやすい色です。緑色は国や文化が異なっても、あまり与える印象が変わらないことが多いです。

力強く最も目を引く色です。青色とは逆に見た人に興奮や警告の印象を与えます。注意喚起を促す役割があるため、アクセントカラーとして使いやすい色です。ただし、血の色を連想することもあるので、病院サイトでは使いにくい色です。

ピンク

女性的なイメージが強い色です。見た人に安らぎを与えます。赤と白の中間の役割を持ち、淡いピンクでは柔らかい印象を与えますが、濃いピンクでは注目や警告を与えることが出来ます。

オレンジ

赤色と黄色の中間にある色です。ぬくもりや親切さを与える色だと言われています。親しみやすい色でありながら目立つ色でもあるため、メインカラーでもアクセントカラーでも使える万能色です。

黄色

太陽やひまわりなど、明るい印象を与える色でもありますが、黒色と組み合わせることで警告色としても使われます。また、この色は文化によって与える印象が異なることが多く、キリスト圏では「裏切り」、中国では「色欲」、エジプトでは「死」、アフリカ圏では「権力」を連想させる色だともいわれます。

取り扱いが難しい色です。神秘・低俗・高貴・退廃など、相反する印象を与えるため不安な気持ちにさせることが多いです。

色の組み合わせの調査

色の使い方について説明させていただいたところで、本題です。

今回は日本病院会に加入している静岡県内の71病院サイトの色を調べました。その中でベースカラー、メインカラー、アクセントカラー毎に上位3つの色と、最も多かった色の組み合わせを紹介します。

ベースカラーのランキング

1位 66サイト(93%)
2位 グレー 3サイト(4%)
3位 ベージュ 2サイト(3%)

病院サイトのベースカラーでは、白色が圧倒的に多かったです。文字の読みやすさに加えて、白色が持つ清潔感を与える役割が病院サイトに適しているからだと考えられます。

メインカラーのランキング

1位 33サイト(46%)
2位 23サイト(32%)
3位 5サイト(7%)

落ち着きを与える青色と、安心を与える緑色が圧倒的に多い結果でした。3位にランクインした赤色を使っていたのは、日本赤十字社系列の病院のみでした。ちなみに4位の色はピンクで4サイトでした。

アクセントカラーのランキング

1位 15サイト(21%)
2位 オレンジ 14サイト(20%)
3位 ピンク 9サイト(13%)

アクセントカラーでは暖色が多いことを予想していましたが、一番多かったのは緑でした。2番手のオレンジは青や緑と相性が良いため、この順位ということだと思います。ちなみに特定のアクセントカラーを設けず、複数の色を採用しているサイトは、8サイトでした。

一番多かった色の組み合わせ

ベースカラー
メインカラー
アクセントカラー オレンジ

白/青/オレンジの組み合わせが一番多いという結果になりました。この組み合わせは全部で15サイト(21%)ありました。
実際、青とオレンジの組み合わせは対照色相(色相環で正反対に位置する組み合わせ。補色とも呼ばれます。)と呼ばれ、とても相性が良い組み合わせとされています。

ちなみに静岡県の県旗は、ベースカラーが青、メインカラーがオレンジ、アクセントカラーが白といった組み合わせです。静岡県内の病院サイトの色の組み合わせが、県旗と逆になっているのが面白いですね。

まとめ

今回は病院サイトの色の組み合わせについて調べました。

ベースカラーはほとんど白一色、メインカラーは青か緑のほぼ二択だったので、色の組み合わせに偏りがあることは間違いありません。しかし病院のWebサイトである性質上、ターゲットとなるユーザや提供するサービスに変わりがないため、色の組み合わせに偏りがあることは、ある意味当然とも言えます。

奇を衒って個性的な色の組み合わせを狙うのも、差別化として効果的だとは思いますが、定番とされる色の組み合わせにはどのような効果をもたらすか考えるのも良いと思います。

また、色の組み合わせを考える際には、コントラスト比に気を付けることを推奨します。背景と文字のコントラスト比をはっきりとさせ、色弱の方にとっても見やすいサイトになるようこころがけましょう。

1.4.3 コントラスト(最低限レベル)の達成基準(レベルAA)

テキスト及び文字画像の視覚的提示には,少なくとも4.5:1 のコントラスト比がある。 サイズの大きなテキスト及びサイズの大きな文字画像には、少なくとも3:1のコントラスト比がある。JIS X 8341-3:2016より

この記事を書いた人

池谷 将太朗
池谷 将太朗ソリューション事業部 営業
2015年にアーティスに入社。
ソリューション事業部の企画・営業担当として、主に静岡県・愛知県内の企業・医療機関・教育機関のホームページリニューアル案件に携わる。2021年からは、ソリューション事業部の社内マーケティング担当を兼任し、リスティング広告の運用も行っている。
この記事のカテゴリ

FOLLOW US

最新の情報をお届けします