印刷用ブランドカラーをWEB用カラーに調整するときの考え方

印刷物で使っているブランドカラーをWEBサイトにも使いたいとき、パンフレットと画面の色が違って見えることがあります。印刷と画面では色の表し方や再現できる範囲が異なるためです。印刷用の指定を尊重しながら、WEBで使う色をどう選び、どこまで調整してよいかを考えます。

印刷用CMYKをそのままHEXに置き換えない

印刷でよく使われるCMYKは、シアン・マゼンタ・イエロー・ブラックのインキ量を表す方式です。一方、WEBで一般的なRGBは赤・緑・青の光の成分で色を表します。HEX（ヘックス）はRGBの値を16進数で記すカラーコードで、通常の6桁の指定はsRGBというWEBで広く使われる色空間に対応します。

CMYKの数値が同じでも、用紙や印刷条件が異なると色の見え方は変わります。ICCプロファイルは、印刷機や画面などの色の再現特性を記録し、色を別の環境へ変換するときに使うデータです。印刷用の数値だけを単純な計算でHEXにする方法では、指定した色が正確に再現されるとは限りません。

最初にブランド資料の最新版を確認し、印刷色見本、指定されたCMYK・特色、使用したICCプロファイルを集めます。公式のWEB用カラー指定がすでにあるなら、それを優先して確認します。印刷条件が不明な場合は、確定値として扱わず関係者に問い合わせましょう。

青緑のブランド色をWEB用に展開する具体例

架空のメーカーが、製品カタログの青緑を製品紹介ページにも使う場面を考えます。次のHEX値は色管理された変換の結果ではなく、WEB表示を検討するための仮の候補です。実際の印刷指定から一意に算出した色ではありません。

白い文字■#FFFFFFを基準色■#2D91A8に直接載せると、コントラスト比は約3.67:1で、通常サイズの文字の目安となる4.5:1に届きません。そこで、ボタンには別の濃い青緑■#15566Cを提案します。この背景と白文字■#FFFFFFの比は約8.14:1です。また、本文文字■#273C49と淡い背景■#EFF8FAの比は約10.65:1になります。いずれも不透明な2色の計算値です。

基準色をロゴや装飾に残す一方、文字や操作部分には明暗差を確保した派生色を使うと、色の印象を保ちながら画面上の役割を分けられます。ただし、派生色をブランドの正式色として採用するには承認が必要です。

印刷見本との比較とWEB公開前の確認

1. 変換条件を記録する：使用した印刷側のICCプロファイル、変換先のsRGB、担当者が承認した基準を記録します。印刷見本との比較で、完全一致を約束しないことも重要です。
2. 用途ごとに検証する：本文文字・背景・ボタンを実際の組み合わせで確認します。WCAG（WEBコンテンツのアクセシビリティ指針）では通常サイズの文字に原則4.5:1以上、必要な操作部品やアイコンの視覚情報には隣接色と原則3:1以上が求められます。
3. 表示状態を試す：パソコンやスマートフォンで確認し、ホバー（ポインターを重ねた状態）やフォーカス（キーボード操作などで選ばれた状態）も確認します。画面設定によって見え方が変わる点にも注意します。
4. 色の版を確定する：印刷用の指定とWEB用の採用色を別々に管理し、変更理由・承認者・利用箇所を残します。

印刷色をWEBへ移す際は、数値の置換だけで終わらせず、再現条件・画面での読みやすさ・ブランド側の承認を順に確認することが大切です。