コーポレートサイトの配色はどう決める？企業らしさを伝える色選び

コーポレートサイトでは、会社の雰囲気を伝えるだけでなく、事業内容、企業情報、採用情報、問い合わせ先を探しやすくすることが大切です。「企業なら青」と色を決めるのではなく、既存のロゴや企業理念、掲載する写真を基準に、情報の役割ごとに配色を考えましょう。企業らしさを保ちつつ、幅広い閲覧者が使いやすい色の選び方を紹介します。

ロゴと企業の特徴から基準色を決める

最初に確認するのは、会社がすでに使っているロゴの色やブランドの資料です。既存の基準色があるなら、それを無理に別の色へ置き換えず、サイトの見出しやナビゲーションで使えるか検討します。ただし、鮮やかなロゴ色をそのまま長文の文字や大きな背景に使う必要はありません。文字には濃い同系色を用意するなど、場所に合わせて役割を分けます。

次に、取引先は事業や実績、求職者は働く環境や募集要項、地域の人は会社概要や所在地というように、閲覧者が探す情報を整理します。事業紹介、企業情報、採用ページで見出しの色やリンクの扱いを統一すると、ページが変わっても同じ会社のサイトだと分かりやすくなります。

色が与える印象は業種や写真によっても変わるため、青なら必ず信頼されると決めつけず、企業の実際の活動や掲載資料に合うかを確かめることが重要です。

会社概要・事業・採用情報をつなぐ配色例

複数の事業を紹介し、採用と問い合わせの案内も掲載する架空の企業サイトを想定します。HEX（ヘックス）はWEB上の色を16進数で指定するカラーコードです。

• 全体の背景：淡いブルーグレー ■#F7F9FA。企業情報と事業紹介で広く共通に使い、写真や図表の色と競いにくい土台にします。
• 事業・拠点紹介のカード：白 ■#FFFFFF。淡いブルーグレー ■#F7F9FA との色差は約1.06:1と小さいため、余白や枠線も使って区切ります。
• 採用・企業データの案内面：淡い青 ■#E8F1F5。ページ内の補足情報に限定し、全ページの背景が同じ濃さにならないようにします。
• 本文・所在地・数字：チャコール ■#29343E。白 ■#FFFFFF の上で約12.69:1、淡い青 ■#E8F1F5 の上で約11.08:1のコントラスト比です。
• 見出し・ナビゲーション・文字リンク：深いブルー ■#254D68。白 ■#FFFFFF の上で約8.97:1。濃色ヘッダーに使う場合、白 ■#FFFFFF の文字とは約8.97:1です。リンクには下線も付けます。
• 更新日などの補助情報：ブルーグレー ■#51646F。白 ■#FFFFFF の上で約6.17:1、淡い青 ■#E8F1F5 の上で約5.39:1です。
• カード・入力欄の枠線：グレー ■#73858D。白 ■#FFFFFF の上で約3.84:1、淡い青 ■#E8F1F5 の上で約3.35:1です。入力欄の存在を薄い面の違いだけで表さないようにします。
• 「お問い合わせ」ボタン：落ち着いた赤茶 ■#93492F の背景に白 ■#FFFFFF の文字。約6.49:1のコントラスト比を確保し、強い色を主な行動に集中させます。

広い背景は淡い色、企業の共通要素は深いブルー、問い合わせは小さな面積の赤茶という役割です。色相（赤・青などの色み）の違いに加え、文字と背景の明るさの差も確保しています。

事業・採用・企業情報のページ間で確認すること

事業ごとに写真や色が異なっても、見出し・本文・リンク・問い合わせの色は基本的に共通にします。採用ページでは人物写真を主役にし、募集条件を濃い文字で表示します。投資家向け情報を扱う企業なら、IR（投資家向け情報）の表や数字も同じ文字色のルールで整えると、情報を追いやすくなります。

ブランドカラーが文字として使いにくい場合、ロゴそのものを変更するのではなく、サイト内の文字色や背景色を調整します。重要なお知らせは色だけで示さず、見出し・日付・内容を明記しましょう。スマートフォンではナビゲーションと問い合わせ先を見失わないかも確認します。

WCAG（WEBコンテンツを利用しやすくするためのガイドライン）2.2のレベルAAでは、通常サイズの文字は背景とのコントラスト比4.5:1以上、大きな文字は3:1以上が基準です。入力欄など操作に必要な枠線は隣接色との3:1以上が必要です。上記の数値は示した組み合わせで確認したもので、サイト全体の適合を保証しません。色や周囲の背景を変更したときは再確認してください。