Webブラウザで体験できる新しいインタラクティブ・アート作品、「Farb-Anse（ファルブ・アンゼ） — 色の名前が分かる魔法 —」を公開しました。漆黒の空間に漂う「色の霧」を探索し、その名前や由来を解き明かす、静かで没入感のある体験サイトです。

https://farb.isgs-lab.com Farb-Anse を体験する

色を選ぶのではなく「探す」「出会う」

Farb-Anseは、単なる便利なカラーピッカーや色見本帳ではありません。「色そのものが漂う空間」を旅する体験を目指して制作しました。

漆黒の虚無と色の霧

画面を開くと広がるのは、真っ暗な虚無の空間。そこに浮かぶ無数の光の粒は、すべて異なる「色」です。 マウスを操作して空間を見渡すと、鮮やかな赤、深く沈んだ青、淡く儚いピンクなど、色の粒子が霧のように漂っています。

魔法のような解析体験

気になる色に近づくと、その粒子がふわりと発光し、画面上の「魔導書」のようなパネルに詳細が浮かび上がります。 「瓶覗（かめのぞき）」「月白（げっぱく）」「Tyrian Purple（ティリアンパープル）」……。 普段のデザイン業務では16進数のコード（Hex）でしか認識しない色にも、実は美しい名前や、歴史的な由来があることに気づかされます。

静謐で格式高い魔法の世界に迷い込んだような、少し不思議な時間と空間を目指しています。タイトルから推察される通り、世界観としては葬送のフリーレンから着想を得ています。

Lab*色空間の3D可視化

幻想的なビジュアルの実現には、色彩工学とWebグラフィックスの技術を組み合わせています。

色空間の数学的なマッピング

空間内の色の配置はランダムではありません。人間の視覚に近いとされるLab*色空間 を採用し、数学的に正しい座標にマッピングしています。

• 高さ (Y軸)：明度 (L)
• 横・奥行き (X, Z軸)：色味 (a, b)

これにより、「上にいくほど明るく」「中心に近いほど無彩色（グレー）に」といった、色の物理的な関係性を直感的に感じ取れるようになっています。

React Three Fiber によるパーティクル表現

フロントエンドには React と Three.js (React Three Fiber) を採用しました。 数千個におよぶ色のパーティクルをブラウザ上で滑らかに描画するために、シェーダー（GLSL）を活用した最適化を行っています。また、UIのアニメーションやカメラワークの制御には GSAP を使用し、心地よい操作感を追求しました。

Pythonバックエンドでの色定義

色のデータ処理には Python (FastAPI) を使用しています。膨大な色定義データの中から、ユーザーが指し示した座標に最も近い「名前のある色」を検索できるように、データベースはMongoDBを採用してLab*色空間に関して検索インデックスの持たせ方も工夫しています。