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

製造業のホームページのおすすめ配色の見本(第6回)

第6回は製造業のホームページの配色です。
※「はじめてWEB」は2020年10月13日をもってサービスを終了しました。

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

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

第6回目は製造業のホームページの配色です。

製造業でよく使われている色

何かの物を作っている会社は製造業で、食料品や家具・繊維から機械や金属部品を作っている会社など非常に幅広い表現です。その中でも今回は機械や金属製品などのホームページの色を中心に解説しますが、素材の色や製品の色を基本とした配色を考えるという点は、どの製造業にも共通するものとなっています。他の製造業の方もぜひ参考にしてください。

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

  1. 素材感の伝わる色、製品の色
  2. 会社のロゴや理念などを表すイメージ優先の色
  3. 強調用の目立つ色

この3つのうち、いずれかだけが使われるということではなく、1から順に少なくとも2まで、必要であれば3までというように、順に使う色を決めていきます。

製造業で多く見られる色

製品によってイメージが大きく変わってしまうため、特に使ってはいけないという定石のような色はありません。そのため1つずつの色をよく考えて色を決めていくことが重要です。

明るく日用的な色と、暗く非日用的な色

金属や機械部品のような工業製品は、高い信頼性や安定感を表す色が求められ、暗い色や青がよく使われる傾向があり、反対に日用品のように生活で見られる製品の色も多様です。例えば玩具であれば、子供が見て楽しそうに感じられる方がよいため、暗く沈んだ色はあまり使われない傾向にあります。

日用品は明るく、非日用品が暗くというのが全体的な傾向

製品を使う人がどのような人なのか、どのような製品を期待されているかを考えることで、主に明るい色を使うか暗い色を使うかは絞り込めるようになります。

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

素材感の伝わる色、製品の色

製造業のホームページの色を考える場合には、まず素材感が感じられる色や製品の色が、まずホームページの色の候補となります。鉄であれば固くて金属的なイメージの黒やシルバー、暗い紺色や茶色などが考えられます。あるいは木製家具などであれば、木の茶色は外せません。

素材と出来上がった製品のイメージにあまり差がない場合には、素材の色をそのままホームページに使ったり、素材の色を大きく使うことで、訪問者へのイメージは伝わりやすくなります。写真が使える場合にはメイン画像などに使います。

ただし、写真に使った素材や製品の色をそのままホームページ全体に使ったとしても、メリハリがなく平坦なイメージができあがり、画面のどこから見ていいのかわからなくなってしまいます。それを避けるためにも写真に使った色にもう1色を加えて、最低2色での配色を行うようにします。

素材の色・写真の色だけの場合、ぼんやりとしたイメージになる

素材・製品の色はホームページには欠かせない色なのですが、それだけでは足りないことがほとんどで、多くの場合に次に説明するロゴやイメージカラーなどを決めなければなりません。

会社のロゴや理念などを表すイメージ優先の色

製品・素材の色と異なる2色目を選ぶのですが、ロゴの色や会社のイメージカラーなどは、ほとんどの場合に決まっているはずです。そのような場合には無理に新しい色を取り入れる必要はありません。

1で候補に挙がった色と、会社のイメージなどを表す色を並べ、特に違和感がなければ、配色の方向性は決まったようなものです。

製品の色+1色にすることで、製品イメージをより伝えやすくなる

新しい会社などで、もし何も色が決まっていないという場合には、会社のイメージ・製品のコンセプトなどから色を選ぶようにします。どの色を選べば良いかがまったくわからない場合には、「自分のホームページに合う色の選び方(全12回)※「はじめてWEB」は
サービスを終了しました
」をぜひご覧ください。

新しく色を選ぶときには、「自分の好きな色」を選ぶのではなく、会社・お店として伝えたいことを考えて、選ぶようにします。けして「にぎやかに見せたい」とか「楽しそうな感じがよい」のように個人の気分で色を選んではいけません。訪問者が興味を持っているのは製品やそれを生み出す会社の姿勢であって、色を決めるあなたの気分ではないのです。

色が多すぎると内容より色そのものに注意が向かってしまう

色は写真に加えてイメージカラーの2色にしておき、どうしても別に使いたい場合には、ほんの少しだけ強調色を追加するようにします。

強調用の目立つ色

強調色は1と2で決めた2つの色とは異なる色で、主にボタンなど画面の小さな部分だけで使うようにします。必ずしもすべてのホームページで必要なわけではありません。使うのは見せたい部分が目立たない時です。

例えばロゴマークが黒、製品も暗い色であった場合に、ボタンの色が黒であれば、そのボタンは目立ちません。そのような時に強調用の色の出番です。ボタンを目立たせるために大事なことは、使われていない目立つ色を選ぶことです。赤やオレンジ・青・緑などから鮮やかで目立つ色を選びます。

強調用の色を使う場合には、その分量も重要になってきます。多すぎると元の素材のイメージやロゴの色のイメージも消し去ってしまいます。少量だけを本当に必要な場所1~2ヶ所だけに使うのがポイントです。

強調に使う色。少しだけ使うのがポイント

もしロゴの色が十分に目立つ色であるならば、強調に使う色を無理に追加する必要はありません。この色を使う時は「本当に素材以外の色が1つもない」と感じた時だけにしましょう。

まとめ

  1. 製造業のホームページでは、まず素材の色・製品の色を考える
  2. 日用品は明るい色、非日用品は暗い色というのが大雑把な傾向
  3. 素材・製品の色だけでは足りないため、ロゴなどの第2の色を選ぶ
  4. 新たに色を決める場合には、自分の好みはできるだけ避け、訪問者の期待する色を選ぶ
  5. 目立たせたい部分が目立たない時だけ、強調用の色を追加する
  6. 強調用の色はできるだけ少ない分量にすること

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

※「はじめてWEB」のオリジナル版は掲載を終了しました

この記事が役に立ったらシェア!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

人気記事トップ10(過去7日間)

今日の用語

アクセシビリティ
広義には、障害者、高齢者を含むすべての人間が、同じレベルでサービスや機器、施設を ...→用語集へ

インフォメーション

RSSフィード


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