PCCSトーン図の完全攻略！仕組みと覚え方＆配色テクニック徹底解説

Webデザインやイラスト制作、UI設計の現場において、「色選びにまとまりが出ない」「画面全体のトーンが濁ってしまう」といった悩みに直面するクリエイターは後を絶ちません。感覚やセンスだけに頼ったカラーコーディネートはブレが生じやすく、意図した世界観を正確に伝えるのが難しくなりがちです。

そうした色彩の迷いを論理的に解消してくれる強力なフレームワークが、一般財団法人日本色彩研究所によって開発された「日本色研配色体系（PCCS）」のトーン図です。色の三属性のうち「明度」と「彩度」を直感的に分かりやすく整理したこの図面は、色彩検定の受験対策はもちろん、プロの現場で一貫性のある色彩設計を構築するための必須ツールとして重宝されています。

📌 【この記事の重要ポイントまとめ】

• 要点1：PCCSトーン図は、色の三属性から「明度」と「彩度」を統合し、有彩色12種類と無彩色5段階で直感的に整理した配色システム。
• 要点2：色彩検定3級をはじめとする検定試験の頻出テーマであり、縦軸（明度）と横軸（彩度）の座標関係を押さえることが最短の覚え方。
• 要点3：トーンオントーンやトーンインジトーンなどの基本配色技法をトーン図上で視覚化することで、調和のとれた配色が誰でも迷わず再現可能になる。

【基礎知識】PCCSトーン図とは何か？日本色研配色体系の基本と仕組み

PCCS（Practical Color Co-ordinate System：日本色研配色体系）は、1964年に日本色彩研究所が開発した、配色調和を目的とする表色系です。一般的なカラーモデルであるマンセル表色系などが「色相・明度・彩度」の3属性を独立して扱うのに対し、PCCS最大の強みは明度と彩度の関係をひとまとめにした概念「トーン（色調）」を導入している点にあります。

PCCSの全体像は、心理四原色（赤・黄・緑・青）を基準に整えられた24色相環と、各色相における色の調子を表すトーンによって構成されています。通常、色をコントロールしようとすると3つの数値を同時に微調整しなければならず、頭の中でイメージが発散しがちです。

そこでPCCSでは、「明るい・暗い（明度）」と「鮮やか・穏やか（彩度）」をひとつの平面座標に落とし込み、人間の感性に近い印象グループとして分類しました。このマッピングを視覚的に表したものがPCCSトーン図です。トーン図を見れば、「どの位置にある色がどんな印象を与えるのか」が一目で理解できるようになっています。

【全分類】PCCSトーン一覧表と各グループの配色イメージ詳細まとめ

PCCSのトーンは、有彩色を構成する12種類のトーンと、無彩色トーン（5段階）で成り立っています。それぞれのトーンには固有の記号、明度・彩度の位置づけ、心理的なイメージが定義されています。

有彩色トーンは大きく「純色」「明清色」「暗清色」「中間色（濁色）」の4つの領域に分類されます。以下に、現場での活用に役立つ配色イメージ詳細まとめを一覧表形式で整理しました。

分類	トーン名	記号	明度 / 彩度	主なイメージ・心理効果
純色系	ビビッドトーン	v	中明度 / 最高彩度	冴えた、鮮やかな、派手な、活動的な
明清色系 （純色＋白）	ブライトトーン	b	高明度 / 高彩度	明るい、華やかな、健康的な
	ストロングトーン	s	中明度 / 高彩度	強い、情熱的な、動的な
	ペールトーン	p	最高明度 / 低彩度	淡い、優しい、透明感のある、可憐な
暗清色系 （純色＋黒）	ディープトーン	dp	低明度 / 高彩度	深い、濃い、充実した、伝統的な
	ダークトーン	dk	低明度 / 中彩度	暗い、大人びた、重厚な
中間色系 （濁色：純色＋灰色）	ライトトーン	lt	高明度 / 中彩度	浅い、爽やかな、澄んだ
	ソフトトーン	sf	中明度 / 中彩度	柔らかい、穏やかな、控えめな
	ダルトーン	d	中明度 / 中彩度	鈍い、くすんだ、落ち着いた
	ライトグレイッシュ	ltg	高〜中明度 / 低彩度	明るい灰みの、落ち着いた、シックな
	グレイッシュトーン	g	中明度 / 低彩度	灰みの、渋い、濁った
	ダークグレイッシュ	dkg	低明度 / 低彩度	重い、陰気な、硬い、堅実な
無彩色系	無彩色トーン	W, ltGy, mGy, dkGy, Bk	高明度〜低明度 / 彩度なし	無機質、静寂、中立的、洗練された

無彩色トーンは、純白（White：W）、ライトグレイ（ltGy）、ミディアムグレイ（mGy）、ダークグレイ（dkGy）、漆黒（Black：Bk）の5段階で表記されます。有彩色の各トーンと無彩色を掛け合わせることで、無限に近いトーンバリエーションを秩序立てて扱うことが可能になります。

【色彩検定3級対策】試験に一発合格するためのトーンの覚え方

色彩検定3級の試験対策において、トーン図の配置問題は毎年必ずと言っていいほど出題される超重要項目です。丸暗記しようとすると混乱しやすいため、座標軸の構造を論理的に理解することが最短のトーンの覚え方となります。

試験用紙の余白に自力でトーン図を再現できるように、以下の3ステップで記憶を定着させましょう。

ステップ1：外枠とアンカーを決める
まず、縦軸に「明度（上が白、下が黒）」、横軸に「彩度（右に行くほど高彩度）」を取ります。一番右端の頂点に位置するのが純色のビビッドトーン（v）です。ここを起点とします。

ステップ2：清色系のカーブを描く
ビビッドから左上の白（W）に向かって伸びるラインが「明清色（白混じり）」です。vから上に向かって「b（ブライト）」「lt（ライト）」「p（ペール）」と並びます。一方、vから左下の黒（Bk）へ向かうラインが「暗清色（黒混じり）」で、「dp（ディープ）」「dk（ダーク）」と繋がります。

ステップ3：内側の中間色（濁色）を埋める
トーン図の中央部に広がるのが、灰色が混ざった中間色です。 高明度寄りには「sf（ソフト）」と「ltg（ライトグレイッシュ）」、低明度寄りには「d（ダル）」「g（グレイッシュ）」「dkg（ダークグレイッシュ）」が位置します。名称の頭文字（Light, Soft, Dull, Grayish）と明度・彩度のニュアンスを結びつけてイメージすると、記号の取り違えを完全に防ぐことができます。

【プロの実践技法】トーンオントーン＆トーンインジトーンなど即戦力の配色テクニック

PCCSトーン図の真価は、単なる暗記ではなく、実務における配色技法を組み立てる際に発揮されます。トーン図の座標を意識するだけで、調和の崩れない配色ルールをシステマチックに展開できます。

代表的な活用技法が「トーンオントーン」と「トーンインジトーン」の2つです。

■ トーンオントーン配色（Tone on Tone）
色相環から同系色相を選び、トーンに明瞭な差をつける技法です。例えば「ネイビー（dkトーンの青）」の背景に「サックスブルー（pトーンの青）」の文字を配置するようなアプローチを指します。トーン図上では垂直方向（明度差）に大きく離れた位置を選ぶため、視認性（コントラスト）が高く、統一感と上品さを兼ね備えたレイアウトが完成します。

■ トーンインジトーン配色（Tone in Tone）
色相環から異なる色相を選びつつ、トーン図上では同一または類似のトーンで揃える技法です。例えば「ペールトーンのピンク」と「ペールトーンのミントグリーン」を組み合わせると、色相が離れていてもトーンの持つ「淡さ・優しさ」が共通しているため、不快な衝突が起きず、まとまりのあるポップな世界観を作り出せます。

そのほかにも、中明度・中彩度の中間色トーン（sf, d, ltgなど）のみで構成する「トーナル配色」や、明度・彩度差を極小にする「カマイユ配色」など、トーン図の位置関係をベースにした技法を用いることで、感覚に頼らない高精度なカラーディレクションが可能になります。

【2026年最新活用】デジタルデザイン・イラスト制作で見違えるトーン図の応用術

UIコンポーネント設計やキャラクターイラストの彩色において、トーン図の概念はますます重要性を増しています。近年のデザインツール（FigmaやAdobe XDなど）におけるデザイントークン設計でも、トーンに基づくカラーパレットの構築が標準化されてきました。

特にデジタルイラストの現場では、ベースカラーに対して「影色をどう選ぶか」「ハイライトをどの彩度にするか」で悩むケースが頻発します。初心者にありがちな失敗は、ベースカラーの彩度をそのままに明度スライダーだけを下げてしまい、影が濁って絵全体が薄汚れて見えてしまう現象です。

PCCSトーン図の視点を取り入れると、この問題は即座に解決します。例えば、明るい肌色（ペールトーン付近）に対して影を落とす場合、単に黒を足すのではなく、トーン図上で斜め下（明度を下げつつ、彩度を少し維持したライトグレイッシュやソフト、あるいはディープ寄り）へとカーブを描くように色相とトーンを遷移させます。トーン図の構造を頭に浮かべながらカラーピッカーを操作することで、光と影の立体感が格段に向上し、プロクオリティの発色を実現できます。

【pccs トーン 図】に関するよくある質問（FAQ）

Q1：マンセル表色系とPCCSトーン図の根本的な違いは何ですか？
A1：マンセル表色系はすべての色を「色相・明度・彩度」の3つの尺度で正確に数値化・測色することを主目的とした表色系です。一方、PCCSは「人間が心地よいと感じる配色」を簡潔に作り出すために、明度と彩度を統合して「トーン」という感覚的なグループに落とし込んでいる点が根本的に異なります。実務の配色作業や教育分野ではPCCSのほうが直感的に扱いやすい設計になっています。

Q2：色彩検定3級でトーン図の配点はどのくらいありますか？
A2：配点全体の約15〜20％程度がトーン図やPCCSの基本構造に直接・間接に関わる問題で占められています。トーン記号の意味、トーン図上の位置関係、各トーンの形容詞（イメージワード）の一致は毎年繰り返し出題されるため、トーン図の完全理解は合格ラインをクリアするための最重要基盤となります。

Q3：トーン図の「清色」と「濁色（中間色）」を現場で見分けるコツは？
A3：純色に対して「白だけ」または「黒だけ」を混ぜたクリアな色が清色（明清色・暗清色）です。トーン図の外周に位置し、すっきりとした清潔感や力強さがあります。一方、純色に「灰色（白と黒の両方）」を混ぜた色が濁色（中間色）で、トーン図の内側に集まります。くすみ感やニュアンス、落ち着きを感じる色合いであれば濁色と判断できます。

まとめ：PCCSトーン図を味方につけて色彩設計を意図通りに操る

PCCSトーン図は、曖昧になりがちな色彩の感覚を、誰にでも再現可能な共通言語へと変換してくれる優れたツールです。純色を中心とした12の有彩色トーンと無彩色トーンの相関関係を把握しておけば、クライアントへのデザイン提案における論理的な説明力も飛躍的に高まります。

試験対策としての暗記にとどまらず、日々のWeb制作、グラフィック、UIデザインのカラーパレット選定にぜひトーン図を活用してみてください。意図通りの色彩調和を迷いなく操れる感覚が、制作のクオリティを一段上のステージへと引き上げてくれるはずです。 （出典: pccs トーン 図（Yahoo!ニュース））