こんにちは！プロダクトデザイナーの先輩として、今日は君と少し深い話をしよう。
君はMacの美しいRetinaディスプレイで完璧にデザインしたはずの色が、いざコーディングされてブラウザに上がってきた瞬間、「あれ？ なんか少し…くすんでないか？」と絶望した経験はないかい？ あるいは、iPhoneアプリのデザインとWeb版のデザインで、並べたときに微妙にトーンが違って見えて頭を抱えたことは？
その原因、実はツールやコードのバグじゃない。「カラープロファイル（色彩の設計図）」のミスマッチがすべての元凶なんだ。
今回は、Macの広色域（Display P3）環境とSketchを完全に手なずけ、デザインの意図通りの色彩をWebとアプリの双方で正確に爆速で再現するための「極限の知見」を授けよう。これをマスターすれば、エンジニアとの色に関する不毛なやり取りは二度と起きなくなる。約束するよ。
—
1. カラープロファイルってそもそも何者？（なぜ色が変わるのか）
まず前提として、Mac（特に近年のMacBook ProやiMac、Studio Display）のディスプレイは、「Display P3」という、sRGBよりも圧倒的に表現力の広い「広色域」を持っている。夕日の鮮やかなオレンジや、深いネオンのシアンなど、従来のsRGBでは表現しきれなかった「現実世界の豊かな色彩」をデバイスが再現できるんだ。
ここで問題になるのが、Sketchなどのデザインツールが「その色をどう解釈し、どう書き出すか」という点だ。
- sRGB: Webの共通言語。世界中のほとんどのモニターが最低限再現できる標準色空間。
- Display P3: Appleエコシステムが標準採用する、よりビビッドでリッチな広色域。
Mac上でP3の鮮やかなディスプレイを見ながらSketchでデザインしているとき、もし設定を誤っていると、「自分には鮮やかに見えているが、データとしてはくすんだsRGBとして出力されている」という罠にハマる。これが「色がくすむ」正体だ。
—
2. 基礎セットアップ：Sketchのカラー設定を正しくキメる
百聞は一見にしかず。まずはSketchの環境設定（Preferences）を開いて、色まわりの心臓部を正しくセットアップしよう。これを間違えると、どんなにイケてるデザインを作っても一発アウトだ。
① ドキュメントごとのカラープロファイルの確認
Sketchでは、ファイル（アートボードではなくドキュメント単位）ごとにカラープロファイルを内包できる。
1. メニューバーの File > Document Settings… を開く。
2. Color Profile の項目を確認する。
ここでの選択基準は、「そのプロダクトがどこにデプロイされるか」で決まる。
| 開発ターゲット | 推奨するカラープロファイル | 理由 |
| :— | :— | :— |
| 一般的なWebサイト（BtoC, コーポレート等） | sRGB IEC61966-2.1 | まだ非対応のモニターやブラウザが多く、色化けを防ぐため安全第一。 |
| iOSネイティブアプリ / Apple特化型Webサービス | Display P3 | Appleデバイスの美しさを極限まで引き出すため。 |
> 先輩の裏技アドバイス：
> 「迷ったらsRGB」というのが長年のWeb業界の鉄則だった。しかし、今のiPhone/Macユーザー比率が高いプロダクトなら、最初からDisplay P3をベースにしつつ、Web展開時は適切にsRGBへフォールバックさせるデザインシステムを組むのが最先端のトレンドだ。
—
3. 「Hello World」的動作確認：色のズレを検証するミニワークフロー
理論だけ聞いてもピンとこないかもしれない。実際に、Sketch上で「色が正しく出力されているか」を検証するテスト（私たちの業界のHello Worldだ）をやってみよう。
ステップ1：原色のビビッドな正方形を作る
1. Sketchで新規ドキュメントを作成。Document Settingsで Display P3 を指定する。
2. 100x100pxの正方形を置き、塗りに `#FF0000`（純粋なレッド）を指定する。
3. アートボードを選択し、右サイドバーの Export から PNG を「1x」で書き出す。
ステップ2：ファインダーやブラウザで比較する
書き出したPNG画像をMacの「プレビュー」アプリや、ブラウザ（ChromeやSafari）で開いて、Sketch上の見た目と見比べてほしい。
- 正しく設定できている場合: Sketch上と書き出した画像の色味に「一切の差異」がない。
- 設定が狂っている場合: 書き出した画像が、なぜか少し白っぽく（またはくすんで）見える。
この検証がクリアできれば、君の環境構築はパーフェクトだ。
—
4. 現場で役立つ！色がくすむ現象を防ぐ実践的ワークフロー
ここからが本番だ。デザイナーが頭を悩ませる「エンジニアに渡したあとに色がくすむ問題」を根絶するための、実践的なワークフローを3つ伝授しよう。
A. CSSでのP3カラーの宣言をエンジニアと共有する
もし君がDisplay P3でリッチなUIを作ったなら、CSSでもその広色域をブラウザに伝えなければ意味がない。近代CSSでは、`color(display-p3 …)` という関数が使える。
エンジニアにデザインを渡すときは、単なるHEX値だけでなく、以下のようなP3用のフォールバックコードを添えてあげよう。
/ 例：鮮やかなブランドレッドを正確にブラウザで再現するCSS設計 /
.brand-button {
/ 従来のsRGB対応ブラウザ向けのフォールバック（保険） /
background-color: #FF2D55;
/ Display P3対応の最新Mac/iPhone等のブラウザで真の鮮やかさを発揮 /
background-color: color(display-p3 1 0.176 0.333);
}
このコードをデザイナー側からサクッと提示できるようになると、エンジニアからの信頼が爆上がりするぞ。
B. 画像アセット（PNG/JPG）は「sRGB」で書き出す鉄則
イラストや写真、複雑なグラデーションなど、ラスタライズされた画像アセットをWeb用に書き出すときは要注意だ。
Sketchのエクスポート設定で、余計なプロファイルが含まれていたり、P3のまま書き出されると、sRGBしか解釈しないWindows環境や古いAndroid端末で「色が変色する」という致命的なバグを生む。
- Web用アセットの鉄則: SketchのExport設定、または書き出し時に 「Embed Color Profile（カラープロファイルを埋め込む）」のチェックを外し、標準的なsRGBとして書き出す こと。これにより、どの環境で見ても意図した（許容範囲内の）色味を担保できる。
—
まとめ：細部へのこだわりがプロダクトの品格を決める
お疲れ様！今回はSketchのColor Profiles（sRGBとDisplay P3）の基本から、現場で絶対に役立つ実践ワークフローまで解説した。
- ターゲット環境（WebかAppか）に合わせてドキュメントのプロファイルを最初に必ず決める。
- 書き出し時の挙動をテスト（Hello World）し、色化けの芽を摘む。
- コード側（CSS）やアセット書き出しの仕様をエンジニアと共通言語化する。
色というものは非常にデリケートで、プロダクトの「高級感」や「信頼感」を無意識のうちに左右する極めて重要なUI要素だ。「なんとなく綺麗だからいいや」ではなく、裏側の仕組みまで完全にコントロールできるようになると、君のデザインの説得力は桁違いに跳ね上がる。
これをマスターすれば、毎日の作業やエンジニアとの連携が劇的に楽になりますよ。
さあ、次の画面を開いて、正しい色彩の世界をデザインしにいこう！