このサイトの歩き方
光と色を学ぶ総合サイトを目指し、遊びながら学べるコンテンツを公開しています。
- 身近な 色彩を学びたい人へ
- 光と色をコンピュータで生み出す CG・画像処理を学びたい人へ
サイトのコンセプト
サイト名の由来
Prism（プリズム）は、光を分解して虹色のスペクトルを作り出すものです。
このプリズムを使った実験で、光にはさまざまな色の成分が混ざり合っていることが解明されました。
色のしくみは、さまざまな学問領域が絡み合って成り立っています。
そんな色の理論も、細かく分解して学ぶことで、少しずつ見方が変わっていく…
色の学びに対する、プリズムのようなはたらきができたらと考えています。
なぜ、CG・画像処理も？
CGや画像処理では、光や色について科学的に掘り下げ、計算することで視覚やカメラを模倣します。
私は、CGの教科書に載っている光や色の計算式をいきなり理解することはできず、光と色の基本を学ぶにはどうしたらいいのだろう？と探し歩いた末に、色彩検定にたどり着きました。
CGや画像処理を学ぶとき、光や色についても基礎から学んでおきたかった、という自身の経験から、色の理論の延長線上として、CGと画像処理についても扱っています。
色彩を学びたい人へ
各ページには触って動かせるデモをたくさん組み込んでいるので、ぜひいろいろな箇所をクリックしながら探索してみてください。
まずは理論を学んでみよう
コンテンツは、色彩検定 のすべての級（3級・2級・1級・UC級）に対応しています。
色の理論
光・色・視覚（色覚）について、基礎から学びます。
色の活用分野
デザイン・ビジネス・マーケティング・ファッション・インテリア・景観（街の風景づくり）の分野において、色がどのように活用されているかを学びます。
次のタグを目印にして、自分に必要な範囲を自由に組み合わせて学んでみましょう。
- 3級：色彩検定3級で学ぶ内容
- 2級：色彩検定2級で学ぶ内容
- 1級：色彩検定1級で学ぶ内容
- UC級：色彩検定UC級 で学ぶ内容
級に縛られず、全体を体系的に学べるよう構成しているので、級を超えて興味のある内容をどんどんつまみ食いすることもできます。
慣用色名を覚えよう
色彩検定に登場する慣用色名は、似た色を比べながら、少しずつ区別できる色を増やしていくと覚えやすいです。
慣用色名マップ
色相と明度の位置関係で配置した独自の図で、「この色の方が明るい」「この色の方が赤みが強い」といった関係をひと目で捉えることができます。
すべての慣用色名一覧
色相の変化の流れに沿って慣用色を学習できます。慣用色名の由来やPCCS近似値も掲載しており、色彩検定1級を見据えた学習にも有効です。
暗記モードを活用しよう
ページの右上のボタンで「解説」モードと「暗記」モードを切り替えることができます。
穴埋め問題集
暗記モードにすると重要な語やヒントとなる見出しなどが隠れます。
コンテンツや慣用色名マップが穴埋め問題集に早替わり！
色の感覚を身につけよう
色彩検定では、色を見分ける感覚を磨くことが求められます。ゲームで練習してみましょう！
明度比較クイズ
彩度の印象に惑わされず、同じ明度のカードを選びましょう。
清色・濁色の見極め
白・黒・灰色、どれが混ざった色でしょうか？
トーン当てクイズ
似た色相に絞って難易度を上げたり、特訓したいトーンを選んで練習することもできます。
配色を試してみよう
色を組み合わせてできる模様を楽しみながら、配色のつくり方を学べるシミュレータもあります。
お気に入りの配色ができたら、画像として保存することもできます。
配色シミュレータ
色彩検定2級で学ぶイメージ別の配色を実際に作ってみることができます。
色を分析してみよう
Webでの色指定に慣れている人向けに、「この色をPCCSで表すと…？」を調べるツールを作りました。
準拠しているテキスト
色彩に関するコンテンツは、次の色彩検定公式テキスト の範囲に基づいて制作しています。
- 1・2・3級：2020年改訂版
- UC級：2022年改訂版
色彩検定の試験対策では、あくまでも公式テキストをメインに、このサイトは参考としてご活用ください。
正確性についての注意
PCCS記号やマンセル値に対応する色、慣用色などを掲載していますが、これらはすべて近似色です。公式テキストを参照して正確な色を確認するようにお願いします。
慣用色のPCCS近似値はコンピュータで算出しています。色彩検定1級を目指す方は、実際に新配色カードと公式テキストを見比べて、自分なりの近似値を見つけてみましょう。
コンテンツで掲載しているグラフ、見え方の再現画像なども、大まかな近似であることをご了承ください。
CG・画像処理を学びたい人へ
CGや画像処理は、紙面で学ぶだけではなかなかイメージが掴みづらい分野です。
このサイトでは、デモを実際に触ったり・動かしたりすることで、理論を実感できます。
デモを動かして体感しよう
「図解」タグがついたページには、主に3Dのデモがたくさん組み込まれています。
- 図解：図解やデモで視覚的に学べるページ
触って動かせるデモ
キャンバスの上部にあるUIで、パラメータを動かしてみましょう。
「この値を大きくしたら、表示はこうなるのか！」など、実際の体験で得られた気づきは根強い土台になってくれます。
WebでのCG制作を目指す人向けに、各デモにはThree.js による実装コードの概略も掲載しています。
準拠しているテキスト
CGと画像処理に関するコンテンツは、CG-ARTS 検定を見据えたものです。
- CGエンジニア検定 エキスパート
- 画像処理エンジニア検定 エキスパート
それぞれ、次の公式テキストの範囲を参考に、コンテンツを構成しています。
著者について
tomixy
SVG、WebGL、WebGPUなど、Webに備わるグラフィックス技術が好きなフロントエンドエンジニアです。
画面上の点ごとに色を計算するシェーダを使った、画像加工やジェネラティブアートに魅了されています。創作のボトルネックとなる光と色の知識不足を克服するため、日々学んでいます。