はじめに
僕は個人的に「和色（日本の伝統色）」が好きで、自分の個人開発プロジェクトでは好んでよく使っています。
そして、Tailwind CSS v4 が正式リリースされ、色空間の標準が OKLCH になりました。
これまでの HEX ベースの運用だと、v4 の恩恵をフルに受けるには HEX → OKLCH 変換の「ひと手間」が必要になり、「それなら最新仕様に最適化した自分用の和色システムを組んでしまおう」と考えたのが今回のきっかけです。
今回のチャレンジ：アセット配布まで見据えた開発
今回は Web アプリを作るだけでなく、**「実際の制作現場ですぐに使えるアセットの提供」**にもチャレンジしました。
「図鑑を見て終わり」ではなく、開発者が自分のプロジェクトにコピペ一発で導入できるようにしたかったため、Python を使って一つの JSON ソースから以下のファイルを自動生成する仕組みを構築しました。
- Tailwind CSS 用設定: v4 の @theme にそのまま貼れる CSS 変数群。
- Figma Variables 用: デザイナーが Figma でそのまま使える JSON。
- スウォッチ (.ase): 各種デザインツール用。（Adobe、Affinty）
技術スタック
- Frontend: React + TypeScript
- Styling: Tailwind CSS v4
- Infrastructure: AWS Amplify (Hosting)
- Scripting: Python (アセット生成ロジック)
実装のこだわり：数学的な正しさ vs 視覚的な心地よさ
特にこだわったのが、色の並び順です。
最初は単純に $h$（色相）順でソートしていましたが、これだと「鼠色」などのカテゴリーで、明度がバラバラになり、図鑑としての美しさが損なわれてしまいました。
そこで、ソートロジックを $L$（明度）優先 に書き換えています。
# カテゴリー -> 明度(L) -> 色相(h) の順でソート
def get_sort_key(color):
cat_idx = CATEGORY_ORDER.index(color['category'])
l, c, h = parse_oklch(color['oklch'])
return (cat_idx, l, h, c)
この修正により、墨色から白練へと続く、実務でも選びやすい美しいグラデーションを実現できました。
AI との「共作」で爆速開発
今回のプロジェクトでは企画からデプロイまで、AI とのペアプログラミングで進めました。
それぞれの得意分野に合わせて、以下のような役割分担をしています。
-
要件定義の整理：Gemini 3 Pro
「和色を OKLCH で管理したい」「アセット配布まで繋げたい」といった僕のぼんやりとした構想を、具体的な機能要件へと落とし込んでもらいました。 -
デザイン作成：Claude Code (Free)
整理された要件をもとに、UI のベースデザインを構築。言葉での指示をそのままコードに落とし込みつつ、和色の世界観を崩さないデザイン案を提示してくれたのが心強かったです。
正直、デザインのゼロイチ作成に関しては自分で作るより早くて上手でしたね。 -
コーディングサポート：Gemini 3 Pro
実際の React コンポーネント実装や、Python での複雑なソートロジック（明度優先への書き換えなど）のデバッグを担当。 詰まった時の壁打ち相手として、開発スピードを大幅に引き上げてくれました。
「作りたいもの」の核となるロジックや色の選定に僕自身が集中し、それ以外の実装や構成を AI にサポートしてもらう。この 「AI ネイティブな開発フロー」 こそが、趣味の時間を最大化してくれた一番の功労者かもしれません。
今後の展望
現在はサブドメインのwairo.oklch.jpで運用していますが、空いているルートドメイン（oklch.jp）には今後、**「HEX→OKLCH に変換ツール」**を作成して配置する予定です。
おわりに
もし Tailwind v4 での和色設定に悩んでいる方がいれば、ぜひ一度触ってみてください。
Webアプリ: 和色 OKLCH 図鑑
アセット配布: BOOTH (Luca Design & Tech)