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

  1. TOP
  2. 業種別ホームページカラーガイド : 第8回 建築会社・工務店のホームページの配色

エキスパートコラム

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

第8回:建築会社・工務店のホームページの配色

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

2016年11月21日更新

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

閲覧数1,903views

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

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

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

第8回目は建築会社・工務店のホームページの配色です。

建築会社・工務店でよく使われている色

建築会社・工務店と言っても、いくつかに分けて考えられます。大きくは店舗・オフィスと言った何らかのビジネスのためにビルなどを建てている会社と、住宅などの家庭向けの家を建てている会社です。

これらはきっちりと分かれているわけでもなく、どちらも行う会社もあるのですが、ホームページを見にくる人はまったく異なります。今回は主に一般的な家を作っている会社の色を中心に考えていきます。ビルなどの施工会社は、第6回「製造業のホームページの配色」と同じような傾向がありますので、ぜひそちらをご覧ください。

まず、よく使われている色は、主に以下のようなものとなっています。

  1. 会社のイメージを表す自然の緑・茶、信頼の青
  2. モダンな建物を表す黒や暗いグレー
  3. 親しみやすさを伝える明るくカラフルな色

これらの色はどれかが単独で使われることもあれば、組み合わせられて使うこともありますが、大きな傾向としては1と2は新築中心の家そのものを売りたい会社で、3はどちらかというとリフォームというサービスを売りたい会社に分けられます。

建築会社・工務店で多く見られる色

メインとなる1色を決めているのであれば、緑や茶のような色で自然でくつろげる家の印象や安心感などの会社のイメージを伝えることができますし、建物の写真を合わせることで伝えたい印象をより明確にすることができます。家の外観や内装の写真などには床の木・壁・家具などの様々な色が入ってくるため、決まっている色が1色であったとしても単調な配色にはなりません。

3の場合も同様に施工事例などで多くの写真がページに入ることが想定されます。意識しなくとも写真には多くの色が含まれているはずで、より親しみやすさやにぎやかさを出すために、自分で決めた色を使っていくというという方向になります。

いずれの場合であっても、家を購入した後、リフォームした後の写真で伝わる印象の方が、色よりも重要になりますので、「自分で決める色は小さく使う」ように心がけましょう。

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

会社のイメージを表す自然の緑・茶、信頼の青

会社のロゴマークなどが緑・茶であるならば、そのロゴの色を決める段階で自然の素材である木の印象を伝えたいと考えていたのかもしれません。ロゴで伝えたい印象とホームページで伝えたい印象が合っていれば、無理に色を足さずに、緑あるいは茶+写真の色だけを使うこともできます。

茶色や緑を使った場合。茶色の方が色の面積が多いため印象に残りやすい

また青(暗い紺色なども含む)も同様です。しっかりした印象や信頼感などを伝えたいのであれば、あまり色を増やすと軽く感じられてしまうこともあるため、青を少ししっかりめに使い、後の色は写真に任せるのです。これも青+写真の色だけを使うことになります。この場合には緑や茶に比べて、大きめに色を使うことがポイントです。

青をしっかりと面で使った配色例

写真ともう1色くらいだと少しさみしいように感じられるかもしれませんが、写真がきれいであれば大丈夫です。新築やリフォームなどのそれなりの金額を扱う業種です。写真は必ずプロに依頼するようにしましょう。いかに多くの写真があっても、その質が低ければ印象も正しく伝わりませんし、サービスの魅力も半減してしまいます。

モダンな建物を表す黒や暗いグレー

モダン(現代的な)な感じの住宅を扱っている会社の場合、黒やグレーなどのコンクリートや金属などの自然ではない素材の印象を伝える色を使うこともあります。

モダンな内装の家

ホームページ上では、多くの場合黒や暗いグレーは文字の色などで使われています。このようないつでも見えている色で、強い印象を与えたり、目立たせることは難しく、なかなかモダンな印象にはなりません。そこで意識して大きめに黒やグレーを配置します。

具体的にはページの上部やナビゲーションなどの部分にしっかり面として黒やグレーを使い、写真以外の色を使わないようにします。その上で、モダンな内装の写真を合わせると、より印象が強くなります。

モダンを表現したい場合はグレーを意識的に使う

親しみやすさを伝える明るくカラフルな色

カラフルな色は、リフォームなどのサービスを主とする会社で多く見られます。写真ももちろん重要ですが、その丁寧さやその会社でリフォームすることによるメリットを伝えたいため、「親しみやすさ」や「相談しやすさ」を強調するために色を使います。主に明るく爽やかな色を、キャッチコピーやボタン・文章の背景に使われます。

ただし何も考えずやみくもに色を増やすだけでは、ただ派手になるだけで、カラフルにした意図が伝わらないこともあります。それを避けるためには、ベタベタと画面中に色を付けるのではなく、「大事な部分だけをカラフルにし、それ以外の部分はできるだけ1色のみ」と考えておくと配色はまとまります。あるいは色を使いたいそれぞれの部分を小さくするのもよいでしょう。

カラフルにする場所を分けない場合と分けた場合の違い

まとめ

  1. 自然の緑・茶、信頼の青が多く使われる
  2. モダンな印象にしたければ暗い灰色か黒を使う
  3. 青やグレーを使う場合は面でしっかりと色を塗る
  4. カラフルな色を使うのはリフォーム中心の会社が多い
  5. 多くの色を使いたければ、カラフルな部分の色の面積を減らす
  6. いずれの場合であっても、写真はできるだけよいものを使う
  • このエントリーをはてなブックマークに追加
このコラムを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オフィスナンバー

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