橋本つくる

色彩／ソフトウェアエンジニアリング／動画制作。知覚的な色の見え方を測る色彩分析ツール作りました→

[橋本つくる @hasshi_design]

画像の色彩を分析できるサイトをリリースしました！

https://t.co/O72tREtp2c

6つの切り口で多角的に画像の色彩を分析できます📷

演算にOKLCH色空間を採用することで、人間の知覚に近い形で明度・彩度・色相を可視化できるだけでなく、
色の3Dマッピングや色の支配率をみることができます！

イラスト・写真・UIなどの色彩分析にぜひ！

[橋本つくる @hasshi_design]

Google Cloud AI エージェント事例アワード最優秀賞受賞を受けて、PdMとして携わった身として、振り返り記事を書きました。
https://t.co/AkrsuuSbzv

[川端一広 🕊️ コントレア/CEO @bata_co3]

Google主催のAgentic AI Summitで最優秀賞をいただけました！！🏆️
頼もしいエンジニアの飛龍さん&つくるさんペアがやってくれました！！最高！！嬉しすぎる！

実は表彰以外にもAIプロダクトがいくつか控えています！
エンジニア・デザイナー・PdMも大募集中なので、カジュ面させてください！

[橋本つくる @hasshi_design]

@tomoya_sakusaku やりましたー！

[橋本つくる @hasshi_design]

私がPdMとしてプロダクト開発をリードしている「動画制作AIエージェント」の事例が、 このたび、第6回Google Cloud AI Agent事例アワードにて最優秀賞をいただきました！

#GoogleCloud #gcai_agent

https://t.co/Kkhb8dOpIs

[Google Cloud Japan @googlecloud_jp]

第 6 回 AI エージェント事例アワード
🥇最優秀賞：Contrea株式会社

「医療現場を支える 動画制作 AI エージェント」

栄えある受賞、誠におめでとうございます👏👏👏

#GoogleCloud #gcai_agent
https://t.co/hfuf94WvEF

[Google Cloud Japan @googlecloud_jp]

第 6 回 AI エージェント事例アワード
🥇最優秀賞：Contrea株式会社

「医療現場を支える 動画制作 AI エージェント」

栄えある受賞、誠におめでとうございます👏👏👏

#GoogleCloud #gcai_agent
https://t.co/hfuf94WvEF

[橋本つくる @hasshi_design]

また、支配色の赤、青は高彩度ながらも最高彩度ではなく、少し暗い部分で彩度の極値を取っていて、彩度の限界ではありません。（絵の中の世界ではかなり鮮やかな色のはずなのに。）ここがレトロ感を生む正体のひとつかと思います。
試しに高彩度化・明度引き上げると、画像右側のようになり、一気に現代の絵の感じになります。
これは、昔のテレビと今のPCデジタルとの色表現の範囲の違いと説明できそうです。昔のセルに塗るアクリルやポスターカラーの顔料起点の色表現は、今のsRGB等のデジタル色空間ほど飽和した色を表現できなかったということが、この比較から見てとることができます。

[橋本つくる @hasshi_design]

次に、色の配分比率を見てみますと、画像のような割合感ですね。メインカラーは青・シアン系統で約65パーセントほど。ここはグラデーションありで豊富な色味のセット。約10パーセントがアソートカラーの青系。アクセントカラーとして黄色と黄緑系の高彩度高明度が散りばめられています。典型的な『70：25：5の法則』に近いですね→

[橋本つくる @hasshi_design]

この色立体を上から見ると、情報が彩度と色相に絞られ、ガマットが見えてきます。この場合、添付動画のようにトライアドか、こういう補色のアクセント付きガマットと捉えることもできます→

[橋本つくる @hasshi_design]

さよならララのメインビジュアルの色彩をOKLCHで立体的に可視化して分析してみます。まず、3Dガマット全体を回転させて見えてくるのは、色の配分の全体感。シアン〜青や赤が支配的で、青と赤は連続的に色が使われている＝大きくグラデーションが使用されていることがわかります。黄色や緑も見られますが、マゼンタ方面はスカスカで、全く使われていません。→続く
#さよならララ

[橋本つくる @hasshi_design]

次にバリューの確認です。
OKLCHのLightnessで正規化すると、画像右のようになります。明確に画面中央の「さよならララ」の題字が目立っていて、視線を真っ先にタイトルに誘導する作りです（明度差が最大）。髪色やグローブの赤、画面下部の草原の黄緑などはかなり鮮やかで際立っているよう印象ですが、実際にLighnessで正規化すると意外と平坦です。
高彩度帯のバリューを揃えることで、画面中央のタイトル部分の最大明度差を際立たせているのかな？と思います。
画面右側の「出会った。まだ知らない。〜〜」のキャッチコピーも、真っ白にしようと思えばできると思うのですが、あえてバリューは背景と揃えたコーラルピンクに近い色にしていて、彩度で差別化しているのだと思います。→

[橋本つくる @hasshi_design]

さよならララのメインビジュアルの色彩をOKLCHで立体的に可視化して分析してみます。まず、3Dガマット全体を回転させて見えてくるのは、色の配分の全体感。シアン〜青や赤が支配的で、青と赤は連続的に色が使われている＝大きくグラデーションが使用されていることがわかります。黄色や緑も見られますが、マゼンタ方面はスカスカで、全く使われていません。→続く
#さよならララ

[橋本つくる @hasshi_design]

また、支配色の赤、青は高彩度ながらも最高彩度ではなく、少し暗い部分で彩度の極値を取っていて、彩度の限界ではありません。（絵の中の世界ではかなり鮮やかな色のはずなのに。）ここがレトロ感を生む正体のひとつかと思います。
試しに高彩度化・明度引き上げると、画像右側のようになり、一気に現代の絵の感じになります。
これは、昔のテレビと今のPCデジタルとの色表現の範囲の違いと説明できそうです。昔のセルに塗るアクリルやポスターカラーの顔料起点の色表現は、今のsRGB等のデジタル色空間ほど飽和した色を表現できなかったということが、この比較から見てとることができます。

[橋本つくる @hasshi_design]

@kamome_illust とても参考になり、かつ原作へのリスペクト溢れるよい考察でした！
ありがとうございました😊

[橋本つくる @hasshi_design]

この分析で使った、OKLCH画像から色立体を作れるwebツールはここで使えます！ よかったら使ってみてください
↓
https://t.co/h7GzmOz4DA

[橋本つくる @hasshi_design]

「1カゲの境界線で彩度が上がる」技法、気になったので3D色空間（OKLCH）で可視化してみました。それぞれの観点から考察してみます。

■ 3D色空間から見える幾何学的事実

明度の単調増加は両者とも満たしていて、ここでは差がつかない。差は2つ。

第一に、灰色軸への接触。左は途中で彩度がほぼゼロまで落ち、色立体の中心軸（灰色）に接触している。右は近づきすぎない距離を保ち、接触していない。

第二に、色相回転の置き場所。濃紺からクリームへ行くには、色相環上で大きな回転が必要です。左はその回転の大部分を、彩度がゼロに近い区間で行っている。右は、色味が見える彩度を保ったまま、青→水色→シアンと回転している。

■ 光学物理の観点

実は左の経路（灰色を経由する）は、物理的な光の混合としては自然です。濃紺とクリームは色度図上でほぼ補色的な位置にあり、実際に2つの光を混ぜれば中間は灰色になる。

一方、右の経路（シアンを経由する弧）は、別の物理と整合します。レイリー散乱下の実際の空は、天頂の青から地平のクリームへ、彩度を保った水色の帯を経由して遷移する。

つまり「灰色経由が物理的に誤り」という話ではなく、どの物理過程を参照するかで正解の経路が変わる。空を描くなら、参照すべきは大気散乱の物理であり、2光源の単純混合ではない。

■ 知覚の観点

左がグラデーションとして微妙に見える正体は、彩度が低くなることとも言えますが、より考察を掘り下げると「色相の連続性が切断されている」ことです。

人間の視覚は、連続した色相の遷移を「一続きの変化」として追えますが、彩度がゼロを横切ると色相の情報が消えます。左は「青→無→クリーム」という「消失と再出現」、右は「青→水色→シアン→クリーム」という「連続した回転」。後者は2色の間に知覚的な橋が架かっている。

■ 創作実用の観点（1カゲ境界線で彩度が上がるということの妥当性）

元ツイートの「光が強いと彩度が落ち、弱くても落ち、ちょうどいい光量のところで固有色が見える」という話を、3Dガマットの言葉に翻訳すると、まさに「色立体の紡錘形」の話になります。

色立体は、明度が0（黒）と明度が1（白）で一点に収束し、中間明度で最も横に膨らむ紡錘形をしている。これは「その明度で表現できる彩度の上限」が、中間明度で最大になるということです。これはまさに「光が強すぎても弱すぎても色が消え、中間で最も鮮やかに見える」というペインティングの経験則と整合します。

下の絵が綺麗なのは、この紡錘形の輪郭に沿うように、各明度で「その明度なりの彩度」を保っているから。左は紡錘の中心を貫く直線で突っ切ったから、途中で色が消えた。

グラデーションの綺麗さは、同じ2色でもその間をどう歩くかで結果が変わる、というのが、3D空間で見ると、文字通り「経路の形」として見えますね！

[のじゃおじ@VRChat @kemomimi_oukoku]

イラストで「１カゲの境界線の彩度が明るくなるやつ」あるじゃん？
一緒にお仕事してる藝大卒のにーちゃんに説明してもらって

・光が当たりすぎると明度が上がって彩度も落ちる
・光が弱くなると明度が落ちて彩度も落ちる
→物体の固有色を識別するのにちょうどいい光量が影の切り替わりの所になる

みたいな説明を聞いて（なるほどな～）と思った。
（うろ覚えなのでディティール違うかも）
このグラデーションはちゃんとしたシュミレーションじゃなくて疑似的な表現だけど。

[橋本つくる @hasshi_design]

バリューの解説動画を投稿しました！

「黒平面を被せて合成モード(色相)」が実はズレた見方！？
あまり知られていない明度の確認方法をまとめているので、ぜひみてみてください

【色彩解説】バリュー・色価とは？ 正確に測る方法を徹底解説！ https://t.co/pBux576vRX @YouTubeより

[橋本つくる @hasshi_design]

色相分布を使ってバリューの確認方法をまとめ直してみました！

イラストや写真の「バリュー」を確認する際の参考にしてみてください！

一番下の、OKLCHでグレースケール正規化するにはこちらのwebツールを使ってみてください
↓
https://t.co/fHuP9fviDa

[橋本つくる @hasshi_design]

同じグレースケールでも結果が違う

OKLCH正規化がもっとも知覚的な明度に近いグレースケールにでき、バリューを正しく確認できます よく知られている、黒平面を被せて合成モード(色相)で被せる手法は、正確に近いのですが、実は高彩度になるほどブレが出てきてしまいます。