【BtoB企業向け】カラーデザインで信頼されるWEBサイト制作

2021.06.11
【BtoB企業向け】カラーデザインで信頼されるWEBサイト制作

BtoB企業が自社のWEBサイトを作る上で意識しておくと良いポイントやカラーがユーザーに与える影響をご紹介します。
サービスの利用を検討する際、情報収集のために企業のWEBサイトは必ず一度は閲覧されるものです。最近では、WEBサイトからのお問い合わせ獲得を意識したサイトへのリニューアルに力を入れる企業が増えており、集客に貢献する重要なツールとして認識されるようになっています。

BtoBサイトの役割と目的

BtoBサイト_役割_目的

BtoBビジネスの商談は、WEBサイト上で完結することがほぼありません。

BtoCにおいては、ECサイトを設けることで接点が生まれ、WEB上での購入がおこなわれます。しかし、BtoBは一般消費者のように訪問してすぐに購入が決まるものではありません。そのため、購入の可能性を高めてもらうためには、検討判断ができる情報を提供することがWEBサイトには欠かせません。言い換えれば、BtoB企業のWEBサイトに求められる最大の役割は、自社の営業活動に貢献するサポートツールになることです。

WEBサイト訪問者が企業に興味関心を持った上で起こす最終アクションは、サービスに関するお問い合わせ見積り依頼です。 お問合せ後の対応は主に営業部門が担当するので、BtoBサイト自体はあくまで「ビジネスの入り口」。つまりは、営業活動の起点となる新規見込み顧客を増やすがWEBサイトに求められる役割となります。

BtoB企業WEBサイトの役割と目的とは、下記のように定義付けられます。

・サービスの検討判断できる情報の提供
・見込み顧客の獲得

企業サイトに使うべき印象別カラー

企業サイト_使うべき_印象別_カラー

BtoB企業WEBサイトの役割と目的を踏まえて、企業WEBサイト一新、またはランディングページの制作などを考えていきましょう。その際に関心興味を持ってもらう、信頼してもらうにはカラーデザインも大きく関係してきます。

例えば「クールで最先端感のあるイメージにしたいが、どの色を使えばいいか分からない」…そんな悩み、ありませんか?ここでは、色が人間に与える印象について、色彩心理学に基づいて各色が人間に与える心理効果や相性のいい色についてご説明します。

赤 Red

BtoBWEBサイト_赤_red

視覚的に訴える力が一番強い色だと言われています。口紅などの女性向け商品やお祝いの品、エネルギーを表す商品、バーゲンセールの広告などに、特によく使用されています。バーゲンセールのポスターやタグに赤を入れるかどうかで、「売上が20%変わる」とも言われています。
日本企業において、一番ロゴとして使用されることの多い色です。なお、欧米では警戒色になります。

相性のよい色

白、黒、グレー、ベージュ、カーキ、緑、紺

青 Blue

BtoB_WEBサイト_青_Blue

鎮静効果を与える色だと言われています。爽やかさやクリーンさ、安心感のある落ち着いたイメージを与えることから、世界的に、使われることが一番多い色です。なお、統計によると、青は日本人の一番好きな色だそうです。

相性のよい色

白、黒、グレー、黄、ピンク

緑 Green

BtoB_WEBサイト_緑_Green

中間色なので、どの色ともバランスよく調和することができます。薬局や衛生商品を扱う企業、飲食店、リラクゼーション系など、消費者に安らいだイメージを与えたい場合によく使用されます。緑の語源は、日本では「瑞々しさ」、英語圏では「grow(育つ)」や「grass(草)」だと言われており、いずれにしても「新鮮さ」のイメージを持っています。イスラム教では、神聖な色とされています。

相性のいい色

白、黒、グレー、茶色、ベージュ、黄色、赤、ピンク、紺色

黄 Yellow

BtoB_WEBサイト_黄_Yellow

有彩色の中で一番明るく、視覚に訴える力の強い色です。日本では、明るく、希望のあるイメージがあることから、活動的なイメージを持たせたい企業でよく使用されます。一方、欧米では、イエス・キリストを裏切ったユダの衣装が黄色だった伝承から、「裏切り」「嫉妬」などマイナスイメージを持たれることもあるので、注意が必要です。

相性のいい色

白、黒、グレー、オレンジ、緑、青、紫

オレンジ Orange

BtoB_WEBサイト_オレンジ _Orange

赤と黄色の中間色で、温かみのある陽気なイメージを与える万人受けする色です。人の心を開かせ、コミュニケーションを活発にしてくれる効果があると言われています。そのため、エンタメ系やキャリア系など、人との繋がりを重視したサービスを提供する企業に使われることが多いです。海外では、欧米やオセアニア各国が特に好む色だと言われています。

相性のいい色

白、黒、グレー、赤、黄色、ベージュ、茶色、紺

ピンク Pink

赤に白が混ざった色合いなので、赤と同じく目を引きやすい色です。女性的な商品やお菓子によく使用されています。色味がきつくなると、アダルトなイメージや下品なイメージを与えてしまうので注意が必要です。一方、欧米では、赤ちゃんや幼児の肌の色を連想させる親しみやすい色だとされています。

相性のいい色

白、黒、グレー、ベージュ、青、紺、緑、カーキ

紫 Purple

BtoB_WEBサイト_紫_Purple

純色のひとつで、赤と青が混ざり合った色です。高貴かつ神秘的なイメージがあるため、女性向けの化粧品やファッション、デザイン、音楽、演劇などの芸術系分野の企業で採用されることが多いです。日本では、古くから、身分の高い人間が身につける高貴な色とされており、その影響から、「高貴、上品」なイメージがあります。一方、海外では、「不気味」「気持ち悪い」「下品」などマイナスイメージを持つ人が多いとされています。

相性のいい色

黒、白、グレー、紺、ピンク、黄色、青

グレー Gray

BtoB_WEBサイト_グレー_Gray

白と黒の中間色で、無彩色に分類されます。上品で落ち着いたイメージがあるため、教育系や士業系の企業、または自動車や時計などの高額商品に採用されやすい傾向にあります。ナチュラルで調和感のとれた印象を与えるため、日本では特に人気のある色です。海外においても、日本と同様のイメージです。

相性のいい色

黒、白、青、赤、黄色、ピンク、紺

白 White

BtoB_WEBサイト_白_White

無彩色かつ膨張色で、光を最も反射する明るい色です。日本では、清廉なイメージから、企業ロゴとしても人気のある色です。英語圏においても、善意や純粋などのプラスのイメージがあります。一方で、欧米では、負けを認めるイメージ、東アジアでは、葬式や死のイメージなど、マイナスのイメージがあるので注意が必要です。

相性のいい色

どんな色でも可

黒 Black

BtoB_WEBサイト_黒_Black

無彩色で、光をすべて吸収する色です。強さや威厳、重厚さを感じさせるので、落ち着いたイメージや高級感を出したい企業に人気です。欧米では、高価さや優雅さのイメージが強いですが、日本や東アジアなどでは、死や闇などのマイナスイメージがあるので、注意が必要です。

相性のいい色

どんな色でも可(※どの色でも黒が目立つ)

印象別オススメ配色例

印象別_オススメ配色_例

WEBサイトに使う色の数は、3色までが理想的です。それ以上になると、色がごちゃごちゃして見えてしまい、かえって視認性が悪くなってしまいます。

3つのカラーとは?

配色を決めるときは、まず「テーマカラー」を決めます。テーマカラーを決めると統一感があるデザインに仕上がります。
テーマカラーは、「ベースカラー」「メインカラー」「アクセントカラー」の3色。
もちろんそれ以上にもできますが、色数が増えるほど扱いが難しくなりますので、まずは基本の3色をマスターしていきましょう!
各々の比率比率としては、ベースカラー70%、メインカラー25%、アクセントカラー5%が理想的です。
全体的にバランスが取れて、キレイは配色に仕上げることができます。

ベースカラー(70%)

これはWebサイトのもっとも大きな面積を占めるベースとなる色で、多くの場合、背景や余白などがこの色になります。
一般的に、白またはライトグレーなどの明度の高い濁色が使われることが多いです。

メインカラー(25%)

メインカラーは、一番テーマとなる(主張したい)色を設定します。
サイトの印象を決定づける主役の色になります。
例えば、使用する企業ロゴのカラーの色をメインカラーに設定すると統一感が出やすくなります。商品やサービスのターゲットが好みそうな色や、企業や商品イメージを表す色を設定するといいかもしれません。
メインカラーは、見出し、キャッチフレーズなど、見る人にとって目にとまりやすい箇所に使用します。

アクセントカラー(5%)

全体の5%とても重要な役割を果たします。刺激や変化を加えるため、アクセントカラーを利用します。
メインカラーの反対色を使うと、鮮やかさが引き立つので目にとまりやすくなる効果があります。お問い合わせのボタンなどに使用するのがおすすめです。

WEBサイト制作のポイント

BtoB_WEBサイト制作_ポイント

シンプルで分かりやすく

WEBサイト内で求める情報をすぐに見つけることが出来なかった訪問者は、すぐに離脱をしてしまいます。コンテンツへの導線や掲載する文言はシンプルにしましょう。

最近は強烈なデザインでインパクトを与えようとするWEBサイトも増えていますが、情報収集をするユーザー側は、簡単に収集したいと考えています。シンプルなWEBサイトの方が情報を集めたい側にとってはありがたく思われ、その気遣いが結果として企業の印象にも繋がってきます。

デザインは信頼感を大切に

BtoBサイトにおいては必要以上に奇抜な見た目は必要ありません。判断に必要な情報を収集するためにWEBサイトを訪れています。競合他社との差別化は必要ですが、本質から外れたサイト作りをしないよう注意しましょう。自社の強み・解決力を理解してもらうことに重点を置いたデザインにすることが大切です。また、何より重視するのが、信頼できるのかということです。自社サイトはそのまま会社の印象にも繋がるためイメージと異なる印象を与えるようなデザインしないようにすることもポイントです。

設置するコンテンツは、質で考える。

他社のWEBサイトでも見られる情報ばかりでは、判断基準を作り出すことができません。そして、結果として購入検討の話自体が消えてしまうことにも繋がります。差別化として、導入事例(実績)・お客様の声などが挙げられます。これらは企業によって違いが出やすい情報のため、その企業だからこそが伝わりやすいコンテンツであると言えます。

まとめ

BtoB_WEBサイト_カラー_まとめ

BtoB企業がWEBサイトを作る上で大事なことは、ユーザー目線わかりやすさと質を意識します。またWEBデザインにおいて、ユーザーに良い印象付けをしたり、信頼してもらったりするためには色と配色のバランスが大切になります。使用する色によって、消費者に与えるイメージは大きく変わってきます。打ち出したい企業イメージや商品イメージに合せ、慎重に色やデザイン考えましょう。

弊社では定額制マーケティング&クリエイティブ制作サービスを開始いたしました。貴社内にマーケティング部門を置くよりも手軽にWEBサイト制作から広告運用まで月額11万円(税別)から始められます。

弊社の営業資料や企画書、
販促チラシ、実績資料、
動画データ等を
ダウンロードできるサービスです。
東京オフィス
〒107-0052 東京都港区赤坂9-5-26
AKASAKA HEIGHTS 301
名古屋オフィス
〒464-0037 名古屋市千種区楠元町2-60-2
LOFT 3B
大阪オフィス
〒530-0001 大阪府大阪市北区梅田2-5-13
桜橋第1ビル304
金沢オフィス
〒920-0024 金沢市西念4-24-30
MGビル302
富山オフィス
〒939-8204 富山県富山市根塚町1-1-4
ASNビル2F
ベトナムオフィス
Unit 1008, 10 Floor, Dreamplex Building, 195 Dien Bien Phu, 15 Ward, Binh Thanh District, Ho Chi Minh City, VIETNAM