ブランドカラーが媒体で変わる理由：Web、アプリ、印刷の色を揃える実務ガイド

画面で鮮やかに見えたブランドカラーが、別のスマートフォンでは沈み、パンフレットではさらに違って見えることがあります。

この差は、制作担当者の感覚だけで解決できる問題ではありません。

カラーマネジメントとは、色の数値に色空間や出力条件を結び付け、異なる機器や媒体のあいだで見え方を予測しやすくする仕組みです。

完全に同じ見え方を保証するのではなく、変化の原因を管理し、許容できる範囲へ収めることが目的です。

同じ色指定でも見え方が変わる理由

色の数値は、どの色空間で解釈するかが決まって初めて意味を持ちます。

たとえばRGBの三つの値が同じでも、sRGBとDisplay P3では表せる色の範囲が異なるため、同じ組み合わせをそのまま別の色空間へ移せば同じ色にはなりません。

W3CのCSS Color Module Level 4は、従来のsRGBに加え、Display P3、Lab、LCH、Oklab、OkLChなどをCSSで扱う方法を定義しています。

ただし、広い色域を使えることと、すべての閲覧環境で同じ色が出ることは別の話です。

ディスプレイは光を発するRGB機器ですが、印刷物は紙に当たった光を反射して見えるため、インク、紙、表面加工、照明の影響を受けます。

印刷で一般に使われるCMYKは、ディスプレイのRGBより再現できる範囲が狭い部分があり、鮮やかな青、緑、オレンジなどは変換時に近い色へ置き換わることがあります。

さらに、同じ画像でも、埋め込まれたプロファイルをアプリケーションが正しく扱うか、ディスプレイが調整されているか、周囲の照明が何色かによって見え方は変わります。

色を揃える前に決める三つの基準

媒体別の数値を決める前に、基準色、使用条件、合格条件の三つを決めます。

基準色を一つのコードに閉じ込めない

ブランドカラーを16進数の色コードだけで管理すると、その値がsRGBなのか、別のRGB色空間なのか、印刷では何を目指すのかが分かりません。

仕様書には、基準となる色の見本に加え、sRGBの値、必要に応じた広色域用の値、印刷会社が指定する条件でのCMYK値や特色指定を分けて記載します。

一つの数値を全媒体へ流用するのではなく、同じ意図を各媒体で再現するための値を用意します。

観察条件を決める

Webとアプリでは、対象にするOS、ブラウザー、代表的な端末、ライトモードとダークモードを決めます。

印刷では、用紙、印刷方式、印刷会社が指定するICCプロファイル、校正方法、確認時の照明を決めます。

観察条件が曖昧なままでは、二人が異なる画面や照明で見た印象を比較するだけになり、修正の判断が安定しません。

許容差を言葉にする

色差の数値を使う場合でも、すべての制作物へ同じ厳しさを適用する必要はありません。

ロゴ、商品色、注意表示など色の正確さが意味を持つ要素と、背景の装飾や写真の雰囲気を分け、どこまで現物校正を求めるかを決めます。

数値評価と目視確認の担当者も決めておくと、納品直前の好みの衝突を減らせます。

Webとアプリの制作フロー

WebではsRGBを安全な基準として用意し、広色域の色は対応環境向けの拡張として扱う方法が実務的です。

CSSでDisplay P3などを指定する場合は、先にsRGBの代替色を置き、対応するブラウザーだけが広色域の指定を使える構成にします。

広色域の色がsRGBへ収まらないと、未対応環境では鮮やかさや色相が変わるため、代替色は自動変換へ任せず、ブランドの意図に沿って確認します。

画像を書き出すときは、使用する色空間を決め、必要なプロファイルを保持したまま、実際の配信経路で検証します。

制作ツール上のプレビューだけでなく、画像最適化、CMSへのアップロード、CDN配信を経たファイルまで確認しなければ、途中でプロファイルや形式が変わる問題を見落とします。

アプリでは、プラットフォームのカラーアセットに色空間を明記し、実機でライトモード、ダークモード、明るさ設定の違いを確認します。

色の一貫性と読みやすさは別の合格条件です。

WCAG 2.2の達成基準1.4.3では、通常の文字に少なくとも4.5対1、大きな文字に少なくとも3対1のコントラスト比を求めています。

ブランドカラーを守るために本文を読みにくくするのではなく、文字色、背景色、面積、役割を調整します。

配色と文字設計の基礎は、カラーとタイポグラフィの実践ポイントも併せて確認できます。

印刷物の制作フロー

印刷では、最初に印刷会社へ入稿仕様を確認します。

CMYKへ変換すれば終わりではなく、どの印刷条件を表すプロファイルへ変換するか、画像のプロファイルを埋め込むか、PDFの規格を何にするかをそろえる必要があります。

変換先が決まる前にRGB原稿を無差別にCMYK化すると、後で別の用紙や印刷方式へ転用するときに、すでに失われた色域を取り戻せません。

再利用する写真やイラストは適切なRGBの原本として保管し、納品物を出力条件ごとに作るほうが管理しやすくなります。

ICCプロファイルは、色の符号化と機器や出力条件の特性を結び付けるためのデータです。

印刷会社からプロファイルが提供される場合は、自己判断で似た名前のプロファイルへ置き換えず、指定された設定を使います。

ソフトプルーフは、印刷条件のプロファイルを使って画面上に結果を近似表示する確認方法です。

Adobeの説明でも、特定の紙とプリンターの組み合わせを記述したプロファイルほど、より正確なソフトプルーフにつながるとされています。

ただし、画面は発光し、紙は反射するため、ソフトプルーフだけで現物を完全に再現することはできません。

企業ロゴ、パッケージ、商品カタログなど色の誤差が事業に影響する制作物では、契約校正や本紙校正など物理的な確認工程を残します。

媒体別の引き継ぎ表

制作チームは、色見本だけでなく、入力、出力、確認方法を一枚の表で共有すると判断をそろえやすくなります。

この表は色だけの資料に見えますが、実際には発注、制作、実装、印刷の責任分界を示す資料でもあります。

見た目で終わらせないデザイン品質の考え方と組み合わせると、色以外の情報設計や運用性も同じレビュー工程へ載せられます。

よくある失敗と直し方

色コードの一覧だけを納品する

色コードだけでは色空間、用途、背景、状態が分からないため、ボタンの通常時と無効時、文字と背景、Webと印刷を分けて記録します。

すべてを早い段階でCMYKへ変換する

変換先の印刷条件が決まる前はRGB原本を保持し、出力時に指定プロファイルへ変換します。

一台のモニターだけで合否を決める

基準となる調整済みモニターを用意したうえで、一般的な端末でも破綻しないかを確認します。

色だけで状態を伝える

エラー、選択、必須項目などは、色に加えて文言、アイコン、線、形の変化を使います。

アクセシビリティを工程へ組み込む方法は、発注から運用までのWebアクセシビリティのチェックポイントで詳しく整理しています。

小さく始める運用手順

1. 現在使っている色を集め、用途と色空間が不明な値を洗い出します。
2. ブランドの基準色と、Web、アプリ、印刷の派生値を分けます。
3. 対象端末、印刷条件、確認用の照明など観察条件を決めます。
4. 文字、UI部品、ロゴ、写真など用途ごとの合格条件を記録します。
5. 公開前と増刷前に使うチェックリストを作り、確認結果を残します。
6. 端末、印刷会社、用紙、ブランド方針が変わったときに仕様を更新します。

最初から測色機器や複雑な色差管理を全案件へ導入する必要はありません。

どの色空間の値か、どの条件で確認したか、誰が合否を決めたかを記録するだけでも、再現できない修正指示は大きく減ります。

よくある質問

Web画像はすべてsRGBにすべきですか

sRGBは広い互換性を得やすい基準ですが、広色域対応の閲覧環境へDisplay P3などを届ける選択肢もあります。

その場合もsRGBの代替表示を用意し、実際の対象環境で確認します。

印刷物は最初からCMYKで作るべきですか

文字やベクター図形を印刷条件に合わせて設計する場面はありますが、再利用する画像の原本まで早期にCMYKへ固定する必要はありません。

入稿先の条件を確認し、原本と納品用データを分けて管理します。

ソフトプルーフがあれば校正紙は不要ですか

一般的な制作物ではソフトプルーフが効率的ですが、重要色の誤差が売上、承認、表示の正確さへ影響する場合は物理校正を省けません。

ブランドカラーとコントラスト基準が両立しない場合はどうしますか

ブランドカラーそのものを本文文字へ使う前提を見直し、見出し、線、背景のアクセントなど別の役割へ移します。

識別性を保ちながら、情報を読むための色は十分なコントラストを確保します。

参考資料

• W3C：CSS Color Module Level 4
• International Color Consortium：ICC Frequently Asked Questions
• Adobe：Proofing colors in Photoshop
• W3C：Web Content Accessibility Guidelines 2.2