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

  1. TOP
  2. 業種別ホームページカラーガイド : 第2回 病院・福祉施設・介護用品などのホームページの配色

エキスパートコラム

業種別ホームページカラーガイド(全12回)

第2回:病院・福祉施設・介護用品などのホームページの配色

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

2016年5月16日更新

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

閲覧数4,296views

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

明るめでカラフルな色

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

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

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

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

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

まとめ

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

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

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

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

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

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

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

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

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

コラム週間アクセスランキング[期間:2017/6/18~2017/6/24]

おすすめコンテンツ

はじめてWEBおすすめ本

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

  • ソウギョウノート

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

  • 経理通信

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

  • まとめてオフィス

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

  • フリーコールS

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

  • auオフィスナンバー

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