はじめてWEBエキスパート(専門家)コラム 業種別ホームページカラーガイド(全12回)

病院・福祉施設・介護用品などのホームページのおすすめ配色の見本(第2回)

第2回は病院・福祉施設・介護用品のホームページの配色です。

このコラムでは、業種ごとに「合う色と合わない色」「注意すべきこと」をまとめています。

毎回、異なる業種を取り上げて解説しますが、それらの業種でよく使われる色やたびたび見られる失敗があり、それにはきちんとした理由があります。それに加え、ホームページの色は、看板や紙のパンフレットと同じ色の場合であっても、画面の構成や使い方のポイントも異なります。

第2回目は病院・福祉施設・介護用品のホームページの配色です。

病院・福祉施設・介護用品でよく使われている色

病院・福祉施設のような人の支えになるサービスのホームページでは、主に3つの系統の色が使われています。

  1. 緑から青にかけての爽やかな色
  2. ベージュやピンクなどの優しい色
  3. 明るめのカラフルな色

病院・福祉施設・介護用品などで多く見られる色

最も多いのが1の緑・青緑・青に掛けての明るい色です。大学病院や総合病院では少し暗めのしっかりした色も多く見られますが、中小規模の病院では明るい色が多いようです。色は原色のような鮮やかな色は少なく、やや薄い感じの色が多く、見る人に圧迫感や痛みのようなマイナスイメージを感じさせないように配慮されています。

2はベージュやピンクなどの柔らかく優しい色のグループです。1のグループと違う点は暖かく感じられる暖色を使っている点です。病院に喜んで行く人はあまりいませんし、行きにくい場所であることに間違いはありません。出来るだけその心理的な障壁を下げられるように、優しい色を使っていることがわかります。福祉関係の施設やサービス、美容クリニックなどのページでは、青や青緑よりもベージュやピンクが多く見られます。

3の明るめでカラフルな色は、小児科の病院や歯医者など、特に医療色を出したくないホームページで多く見られ、メニューやイラストなどをカラフルにしていることが多くなっています。それに加え、総合病院などの比較的大きな施設でもカラフルな色使いが使われています。これはページ全体をカラフルにするのではなく、全体のイメージは1で爽やかなイメージを作り、各診療科やアクセスなどのそれぞれのメニューを色分けして使っているところが見られます。このタイプでは全体的に明るい色のトーンが使われていますが、紫色はほとんど見られません。

また強めの赤が使われているところは、赤十字社関係の病院を除いてはあまり見られず、使われていてもごく小さく使われています。これは病院と赤という組み合わせはどうしても血液のイメージが出てしまい、痛そうに感じられたりするため、基本的に避けられているからです。

赤を大きく使うと、血のような痛々しいイメージになるので避ける

赤い十字は病院や薬局などのイメージがあるかもしれませんが、けしてそうではなく「赤十字の標章及び名称等の使用の制限に関する法律」で、「白地に赤十字、赤新月若しくは赤のライオン及び太陽の標章若しくは赤十字、ジュネーブ十字、赤新月若しくは赤のライオン及び太陽の名称又はこれらに類似する記章若しくは名称は、みだりにこれを用いてはならない。」と規定されています。この法律には罰則もありますので、病院のホームページに気軽に赤い十字を使わないようにしましょう。

病院のホームページを作る人は、以下の記事も読んでおくとよいでしょう。

色の使い方と配色のポイント

緑から青にかけての爽やかな色

このタイプの配色は、まずロゴが左上にあり、ナビゲーションやボタンなどのそれぞれのパーツに同じ緑から青に掛けての濃淡が使われています。大きな画像としては、病院の外観や内観などのスライドショーが入り、その中にキャッチコピーが入っているのが主流です。

ロゴ+写真+もう1色という組み合わせでシンプルなホームページに

全体的にシンプルなデザインで、余計な色を使わないことで文章や内容が伝わりやすくなります。背景色なども使わずに清潔感のあるデザインにしたい場合の、一番オーソドックスな配色です。ロゴの色がホームページのイメージと全然違うという場合でも、別の1色の方が分量が大きくなるため、ロゴのイメージを気にしなくてもよくなります。

ベージュやピンクなどの優しい色

子供を対象にした病院や老人ホーム・介護用品の販売などには、このタイプの配色も多く使われます。写真やイラストも柔らかい色や自然の色が入ったものが多く使われるため、全体的に穏やかなイメージになります。また背景に薄いベージュやオレンジなどを敷くことでも、優しいイメージにすることが出来ます。

1のように青や緑を使いたいという場合にも、背景に色を足すだけで柔らかい印象が出るため、青の冷たさを緩和させることができます。

少しでも背景に薄い色を敷いて、暖かい感じを出した例

注意点としては、優しい印象を出そうとして、文字の色なども優しくなりすぎてしまい、見出しなどが読みにくくなっているものが多く見られます。病院や福祉系のホームページを見ている人は、「現在、体調が悪い」人も多いため、読みにくいことでストレスを与えたり、無用の負担を強いることは避けたいものです。

色が優しすぎて読みにくい見出しの例

明るめでカラフルな色

明るくカラフルな色を使いたいのであれば、見える部分全体に様々な色を使うのではなく、画面のどこか一部分を決めて、その部分のみに多くの色を使う方が効果的です。

例えばメイン画像のイラストにカラフルなものを使ってみたり、メイン画像の下に配置する各ページへのメニューだけをカラフルにするなどが考えられます。多くの色を使う場合には、あまりちぐはぐな思いつきの色を使わずに、トーンを揃えて色を使うようにしましょう。トーンについては、「0からスタート ホームページ配色入門 第6回:誰でもできる色の整理方法」に、「似たような情報をトーン(色調)を使ってまとめる」という部分がありますので、そちらをご覧ください。

トーンを揃えた色で、メニューだけをカラフルにする

もう1つ注意したいのは、カラフルにした部分に文字が重なる場合の色です。文字を白くするか黒くするかによって、文字が読みにくい場合が出てきます。その場合には文字に影を付けたり、色を変えたりすることで、読めるようにしておかなければなりません。病院や介護施設などは見る人の様々な年齢・体調が幅広いため、イメージを優先して読むことを困難にするような色を選んではいけません。

カラフルにすると文字が読みにくくなることがある。その場合は読めるように必ず調整

まとめ

  1. 多く使われるのは、緑から青の爽やかな色・ピンクやベージュといった優しい色、明るくカラフルな色
  2. 鮮やかすぎる色や血液・痛みを連想させる赤は使わないようにする
  3. カラフルにしたい場合には画面全体をカラフルにしようと思わず、一部にとどめるようにする
  4. 黄色・オレンジを使う場合に読みにくくならないように気を付ける
  5. 様々な年齢や体調の人が見るため、読みにくいことで訪問者に負荷をかけないようにする

このコーナーのコンテンツは、KDDI提供の情報サイト「はじめてWEB」掲載の「エキスパート(専門家)コラム」の情報を、許諾を得てWeb担の読者向けにお届けしているものです。

「はじめてWEB」掲載のオリジナル版はこちら:
業種別ホームページカラーガイド(全12回)「第2回:病院・福祉施設・介護用品などのホームページの配色」(2016/05/16)

この記事が役に立ったらシェア!
tweet19はてなブックマークに追加
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

日本赤十字社 東日本大震災 義援金募集
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

Web業界の転職情報

もっと見る
Sponsored by

今日の用語

アップロード
手元のPCなどの機器から、ネットワークを介して、別のPCやファイルサーバー、ウェ ... →用語集へ

連載/特集コーナーから探す

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]