文章を読むだけでは理解しづらい色や光の現象を、図解・クイズ・シミュレータ・3Dデモを通して体験できる学習サイトを制作しています。
「見て・触って学ぶ」をコンセプトに、色彩検定やCG-ARTS検定で求められる知識の学習を、Webならではの体験に置き換えることを目指しています。
色を体験する機会が少ない
色彩について学んでいると、文章だけでは理解しづらい場面が多々あります。
自身の学習でも、「どうすれば丸暗記ではなく視覚的に理解できるか」に悩み、このサイトを制作するに至りました。
そこで、特に力を入れているのは、インタラクティブな図解やデモです。
紙面ではイメージしづらいトピックを中心に、現時点で200点以上のSVG図解・Three.jsデモを制作しています。
「知りたいこと」から辿れるコンテンツ構造
たとえば、2級の特定の単元は、3級の特定の単元の発展であることも多くあり、分野ごとの基礎から発展への流れが途切れてしまいます。関連分野を復習しながら進めるには、自ら全体像と分野の切り分けを掴んでおく必要があると感じていました。
そこで、このサイトでは、色彩検定の全カリキュラムを分野ごとに整理し、興味に沿って級を超えて深く学んだり、色彩検定の学習を目的としない人でも楽しめる構成にしました。
テーマごとに学びの流れを構成しながらも、タグとして該当級を表示しているため、試験勉強に使う場合は、自分に必要な級の範囲だけを拾い読みできます。
試験が終わった後や、試験を目指さない場合にも使える、色のリファレンスを目指した設計です。
色を使えることを目指す体験
Color Prismでは、文章を読んで学習するだけでなく、体験しながら理解を深められる機能を備えています。
知識の定着を支える穴埋め問題集
ヘッダーから「暗記モード」に切り替えると、重要語や色名が伏せられ、読んでいる解説ページがそのまま穴埋め問題集になります。
似た色を比較して覚える
色彩検定では、多くの慣用色名が問われます。慣用色名の一覧は、持ち歩いてどこでも復習できると便利です。
そして、名前と色を1色ずつ暗記するだけでなく、
- こちらの方が明るい
- こちらの方が黄みに近い
という相対的な色の違いで捉えられるように、色相と明度の位置関係を表すグリッド上に色を配置した「慣用色名マップ」という独自のコンテンツを盛り込みました。
さらに、特に区別しづらい色はグループとして切り出し、色相・明度・彩度の違いを図示することで、どの属性に大きな違いがあるか？という比較の着眼点まで示しています。
「分かったつもり」をクイズで確かめる
色を見極める目を鍛錬するために、明度比較、清色・濁色、トーン当ての3種類のクイズを用意しています。
たとえば、「明度を見分ける」クイズでは、単に正解を当てるだけではなく、何度もカードをめくり、難しければヒントとしてグレースケール化した色を見て、色相や彩度の印象を取り除いて「明るさだけを見極める」感覚を鍛えていきます。
Webの色を色彩理論の言葉へ変換する
Web制作者向けに、学んだ知識を実際の制作につなげるためのツールも作りました。
「色の近似」ツールでは、HEXカラーを入力すると、近いPCCS記号と慣用色名を表示します。
Webで使われる #4A90E2 のような色の表現を、「PCCSではどの色相・トーンにあたるか」「慣用色の中では何に近いか」など、色彩学で使われる語彙で捉え直すことができます。
そして、PCCSでの色表記を理解すると、狙ったイメージの配色をつくる指針がわかるようになります。
「配色の分析」ツールでは、入力した配色をPCCSのルールから分析します。2〜6色の配色を色相環とトーン図へプロットし、ドミナントカラー、カマイユ、トライアドなど、色彩検定で学ぶ言葉を使って配色の特徴を説明します。
色の組み合わせ方による印象の違いを実験
「配色シミュレータ」ページでは、エレガント、クラシック、モダンなど10テーマから色を選び、ベースカラー・アソートカラー・アクセントカラーを組み合わせて、自由に配色を作ってみることができます。
完成した配色は、SVGで生成されるランダム幾何パターンへとリアルタイムに反映。気に入ったものは画像として保存することもできます。
色や光の基本から、CGや画像処理の世界へ
Color Prism のもう一つのテーマが、色や光の学びを、CG・画像処理の理論へと橋渡しすることです。
これは、色や光について「知る」ところから、色や光を計算して「生み出す」ことへのステップアップといえます。
そもそも、色や光について学ぼうと思ったきっかけは、CGの教科書に出てくる光の計算式や、シェーダーで使われる色変換をうまく理解できなかったことでした。
数式の意味を探る前に、光や色の基本を理解していたら、もっとスムーズに学べたのではないか。
その経験から、色の基礎を学んだ先として、CG-ARTS検定の範囲をベースにした記事を配置しました。
CGの記事では、Three.jsによるデモを操作しながら学ぶことができ、そのThree.jsデモの実装コードも掲載しています。
CGの知識をWeb制作へ持ち帰って、自分でカスタマイズできるところまでを学習体験に含めています。
コンテンツの管理
Color Prism の記事はmdsvexで管理しており、Markdownをベースとしながら、図版などはSvelteコンポーネントとして埋め込む形にしています。
また、独自のremarkプラグインによって、コンテンツ自体の装飾要素（暗記モード対象とする強調表示など）は、import不要なディレクティブとして書けるようにしています。
文書構成や文章自体に関わるコンポーネントはimport不要とし、デモコンポーネントだけをimportして使う、という切り分けにより、AIにも「importがない記事 = 図版やデモがないページ」という解釈をしてもらえるようになり、図版の有無による分岐時のコード検索のコストを削減することにも繋がっています。
<script>
import SVGWrapper from '$lib/demo/SVGWrapper.svelte'
import CIE1931RGBColorMatchingGraph from '$lib/demo/color/xyz-color-system/CIE1931RGBColorMatchingGraph.svelte'
import CIE1931XYZColorMatchingGraph from '$lib/demo/color/xyz-color-system/CIE1931XYZColorMatchingGraph.svelte'
import ConeLuminousEfficiencyGraph from '$lib/demo/color/xyz-color-system/ConeLuminousEfficiencyGraph.svelte'
</script>
実際の色光を基準としている[RGB表色系](/color-theory/rgb-color-system/)は、マイナスの混色量を使わなければ表せない色があり、当時の計算機では扱いづらいものでした。
そこで、混色量が負の数にならずに済むように、数学的に変換してつくられた表色系が:Anki[XYZ表色系]です。
## :WithGradeTag[RGB表色系の等色関数]{grades="1"}
さまざまな波長の単色光を再現しようとする[等色実験](/color-theory/color-matching-and-grassmanns-law/)を繰り返し、それぞれの単色光と等色する $$[R], [G], [B]$$ の:Anki[混色比]（どれくらいずつ混ぜるか）を求めていくことを考えます。
再現したい単色光の波長 $$\lambda$$ によって、$$[R], [G], [B]$$ の混色比は変わるため、$$[R], [G], [B]$$ それぞれを混ぜる量は、単色光の波長 $$\lambda$$ の関数として表すことができます。
- $$[R]$$ を混ぜる量：$$\overline{r}(\lambda)$$
- $$[G]$$ を混ぜる量：$$\overline{g}(\lambda)$$
- $$[B]$$ を混ぜる量：$$\overline{b}(\lambda)$$
これらの関数をRGB表色系の:Anki[等色関数]といい、関数の値は[色の三色性](/color-theory/color-matching-and-grassmanns-law/)で学んだ:Anki[三刺激値]を表しています。次のようにグラフ化すると、再現したい色（波長）ごとの三刺激値（混ぜる量）がわかります。
<SVGWrapper maxW={500}>
<CIE1931RGBColorMatchingGraph />
</SVGWrapper>制作を助ける仕組みづくり
サイト制作を円滑にし、楽しく続けるための仕組みづくりも行っています。
Claude Codeによる効率化
効率化のために作成したClaude Codeのスキル等については、次のシリーズで詳しく紹介しています。
記事間の内部リンクを可視化
記事で貼られている内部リンクを可視化するツールを実装し、リンク切れや、書きかけのページへのリンクを把握できるようにしています。詳しくは次のページをご覧ください。