スキントーン：
多様な美のパレット
科学的に精緻なHEXコードを備えた、ヒトの肌色の網羅的なパレット。人類の美しい多様性を表現する、インクルーシブなデザインのために。
なぜインクルーシブな配色が必要なのか
デザインにおいて「表現（レプリゼンテーション）」はとても重要です。キャラクター制作、アバター開発、コスメ開発、あるいは医学的なイラスト。正確なスキントーンを用意することは、多様なユーザーに作品を届けるうえで欠かせません。
このパレットは、紫外線に対するヒトの皮膚の反応によって分類される皮膚科学の標準、フィッツパトリックの尺度に基づいています。ヒトの肌色の全スペクトルを表現するのに、最も科学的に信頼できる方法です。
デザイン活用事例
メイン・スキントーン・パレット
科学的に裏付けられた6つの肌色スペクトル
ポーセリン / ベリー・フェア
Type I最も明るい肌色。日焼けしやすく、黒くなりにくいタイプ。
フェア / ライト
Type II明るい肌色。日焼けしやすく、定着しにくい。
ライト・ミディアム
Type III明るめから標準的な肌色。徐々に日焼けが定着するタイプ。
ミディアム / オリーブ
Type IV標準からオリーブ系の肌色。日焼けしやすく、黒くなりやすい。
ミディアム・ブラウン
Type V褐色の肌。非常に日焼けしやすく、濃い色素を持つ。
ダーク・ブラウン / ディープ
Type VI深みのある暗褐色の肌。日焼けによる炎症はなく、極めて濃い色素を持つ。
拡張スキントーン・スペクトル
スキントーンを美しく見せる補完色
ウォームブラッシュ
#FFB6A3チークカラー、温かみ
ナチュラルリップ
#C47165唇の色調、自然な美しさ
ソフトハイライト
#FFEFC7ハイライター、輝き
ダークコントゥア
#8B5A3Cシェーディング、奥行き
スキントーン設計のベストプラクティス
表現の多様性
デザインにはできるだけ幅広いスキントーンを含めましょう。キャラクター選択やアバターシステムにフィッツパトリックの6つのタイプを反映させるのが今の基準です。
ステレオタイプを避ける
特定のスキントーンと、特定の役割、職業、性格的特徴を結び付けないようにしましょう。スキントーンはキャラクターのアイデンティティの一部であって、人物を定義する要素ではありません。
コンテキストを超えたテスト
スキントーンは照明、周囲の色、ディスプレイ設定によって見え方が変わります。複数の文脈や環境で、色の選択をテストしましょう。
アンダートーンの考慮
実際の肌にはクール、ウォーム、ニュートラルなアンダートーンがあります。よりリアルに表現するには、ベースの肌色の下にピンク、イエロー、ブルーの微妙な色合いを重ねてみましょう。
CSS スキントーン・グラデーション
インクルーシブなデザインのための、自然な肌色の階調コード
ナチュラルスキントーン・グラデーション (Light to Dark)
background: linear-gradient(90deg, #FFE5D9 0%, #EBC4AF 50%, #8D5524 100%);ミディアム・スキントーン・スペクトル
background: linear-gradient(135deg, #F5D0C5 0%, #EBC4AF 25%, #D4A574 50%, #C68642 75%, #8D5524 100%);クイック・リファレンス
| 名称 | HEX | フィッツパトリック |
|---|---|---|
| ポーセリン / ベリー・フェア | #FFE5D9 | Type I |
| フェア / ライト | #F5D0C5 | Type II |
| ライト・ミディアム | #EBC4AF | Type III |
| ミディアム / オリーブ | #D4A574 | Type IV |
| ミディアム・ブラウン | #C68642 | Type V |
| ダーク・ブラウン / ディープ | #8D5524 | Type VI |
Explore Our Color Library
Discover our complete collection of color guides with HEX codes, palettes, and design inspiration.