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

建築会社・工務店のホームページのおすすめ配色の見本（第8回）

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

坂本邦夫（フォルトゥナ） 2017/5/19 7:00 Web担当者／仕事 | 解説／ノウハウ

30 15 6

※「はじめてWEB」は2020年10月13日をもってサービスを終了しました。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

モダンな内装の家

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

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

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

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

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

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