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

  1. TOP
  2. 業種別ホームページカラーガイド : 第6回 製造業のホームページの配色

エキスパートコラム

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

第6回:製造業のホームページの配色

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

2016年9月20日更新

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

閲覧数1,498views

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

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

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

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

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

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

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

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

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

製造業で多く見られる色

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

強調用の目立つ色

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

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

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

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

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

まとめ

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

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

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

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

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

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

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

  • 1年間無料

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

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

コラム週間アクセスランキング[期間:2017/5/14~2017/5/20]

おすすめコンテンツ

はじめてWEBおすすめ本

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

  • ソウギョウノート

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

  • 経理通信

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

  • まとめてオフィス

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

  • フリーコールS

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

  • auオフィスナンバー

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