脳をどう光らせるか、で沼にハマった話

技術論や実装の裏側ばかり書いてきたが、今回は少し毛色を変えて、見た目の話をしようと思う。結論から言うと、見た目を決めるのが一番沼だった。

実はデザイン出身だった話 ここで一つ、種明かしをしておこうと思う。私は元々、理系の人間ではない。学生時代は美術デザインを専攻していた。

その後どういう巡り合わせか、ゲームからメインフレーム、プログラムからSEまでコンピュータの世界に流れ着き、気づけば技術畑のオーナーとして40年近くやってきたわけだが、デザインの血みたいなものは、どうも今も体のどこかに残っているらしい。今回のサイト制作で、見た目の部分にやたらと時間と執念を注ぎ込んでしまったのは、たぶんこのせいだ。

自社の肩書きを「AIコーディネーター」としているのも、ITエンジニアという枠だけに収まりたくないという、この辺りの感覚が影響している。

なぜ脳なのか サイトのTechnologyページには、3Dのワイヤーフレームで描かれた脳が、ぬるぬると動いている。あれを最初に見た人は大体「なんで脳?」と聞いてくる。

理由は2つある。1つは、うちの技術論の軸が「集める→届く→考える」という、データがだんだん知性に近づいていく物語だからだ。その最終到達点である「考える」を、抽象的な図形ではなくもっと直感的に表現したかった。

もう1つ、こちらの方が個人的には本質だと思っているのだが、AIのニューラルネットワークというアルゴリズムそのものの源流は、生物の脳の中でニューロンが働く仕組みにある。人が「AI」という言葉を意識したとき、頭に思い浮かべるのは結局のところ人間の脳だ。だったらそれを、こねくり回した抽象デザインではなく、そのままの形で見せてしまおうと思った。ニューロンとシナプスがちかちか光りながら繋がっていく様は、正直かなり気に入っている。

ただし、この脳を画面の上で自然に光らせるまでが長かった。

光らせすぎて読めない問題 最初のバージョンは、脳のワイヤーフレームが本文の真上を堂々と横切っていた。見た目としてはかっこいい。だが致命的な問題があった。文字が読めない。

普通ならここでワイヤーフレームの上にべったり背景色のカードを敷いて隠してしまうところなのだが、それだと装飾を殺してしまう。散々やり取りした結果、たどり着いたのは「本文が乗る中央の帯だけ、グラデーションでワイヤーフレームをすっと薄くする」という力技だった。画面の左右では相変わらず脳がしっかり主張していて、読んでいる場所だけ静かになる。地味な工夫だが、これのおかげでようやく「かっこよさ」と「読みやすさ」を両立できた。

陽極酸化チタンとギヨシェ模様、脳との融合 サイト全体の配色コンセプトは「陽極酸化チタン」にしている。金属を酸化処理したときに浮かぶ、あの独特な虹色のグラデーションだ。背景には、時計の文字盤などでよく使われる幾何学模様、ギヨシェ模様を薄く敷いている。

この背景パターン自体は、脳のワイヤーフレームとは別に、単体でかなり作り込んだ。ところが、いざ脳の3Dワイヤーと重ねてみると、これが思った以上に喧嘩する。ギヨシェの幾何学的な硬さと、脳のワイヤーの有機的な曲線が、互いの良さを消し合ってしまうのだ。

結局、ギヨシェ模様は主張を抑えたごく薄いテクスチャとして背景の奥に沈め、脳のワイヤーだけを前面で際立たせる、という奥行きの整理にたどり着いた。装飾を1つ増やすたびに、それが増えた分だけ何かを引かなければならない。デザインというのは足し算より引き算の方がよっぽど難しいのだと、この作業で改めて実感した。

脳を走る光と、画面遷移の演出 脳のワイヤーの上を、小さな光の粒がいくつも走っている。この光の速さ、軌跡の長さ、消え際のフェードのかけ方には、正直かなり細かく拘った。速すぎると忙しなく安っぽく見え、遅すぎると単に重いだけのサイトに見える。ちょうどいい塩梅を探すのに、何度も数値を微調整する羽目になった。

さらに、この光の演出はページ遷移の瞬間にも連動している。リンクを押すと、脳の中を光が一気に駆け巡ってから、次のページへ切り替わる。ただのローディングアニメーションではなく、「思考が発火して、次の答えにたどり着く」ような体験にしたかった。

この一手間があるかないかで、ただのリンク移動が「サイトの世界観の一部」になるかどうかが変わってくる。地味に一番時間を溶かした部分かもしれない。

ロゴの色で半日溶かした話 会社のシンボルマークも、この過程で新しく作った。「J」と「S」を重ねたモノグラムに、脳のワイヤーと同じニューロン柄をあしらったものだ。

配色はチタンを思わせる淡い紫から濃い青へのグラデーションに落ち着いたのだが、ここに至るまでに何パターン試したか覚えていない。青すぎると冷たい、紫を強くすると急に怪しい占い師感が出る、アクセントの黄色いノードを大きくしすぎるとポップすぎる——そんな調整を繰り返し、気づいたら半日が溶けていた。

たかがロゴの色、されどロゴの色。見た人が一瞬で「ああ、あの会社ね」と分かるようになるまで、地味な時間がかかっている。

光る表現、封印 ちなみに、サイト全体を通じて「発光」を安易にスフィアを膨らませて表現するのは禁止にしている。グラデーションとグレアの技法だけで光を表現する、というルールを自分に課した。

理由は単純で、なんでもかんでも光る球体を置くと、途端に量産型のAI生成っぽい見た目になってしまうからだ。地味な制約だが、この一手間があるかないかで、サイト全体の説得力がだいぶ変わる気がしている。

感性を言葉にする、という一番厄介な作業 ここまで書いてきたやり取りの中で、一番苦労したのは、実はコードでも配色パターンでもない。デザイナーとしての感性、頭の中にある「なんとなくこう」というイメージを、どう言葉にしてAIに伝えるかという部分だった。

ロジカルなアルゴリズムや仕組みを説明するのは、まだいい。手順や条件を積み上げていけば、いずれ伝わる。厄介なのは、そういう理屈の外側にある感覚的な部分だ。「もう少し冷たく」「でも硬すぎない」「品はあるが媚びていない」——このあたりを言葉にしようとすると、途端に手応えがなくなる。

あるとき、ふと気づいた。これはまさに、映画監督が俳優や美術スタッフに、あるシーンのイメージを伝える作業と同じではないかと。AIを美術スタッフだと思えばいい。だとすれば、これは人間にイメージを伝える能力そのものと、イコールなのだ。

ただし1つだけ違う点がある。情熱や、侘び寂びのような感覚的な芯の部分は、こちらが最後まで手放さずに持ち続けなければならないということだ。AIは、こちらが的確にイメージを形にしてぶつけない限り、望んだ答えを返してはくれない。曖昧なまま投げれば、曖昧な答えしか返ってこない。まさにその通りだと、この作業を通じて痛感した。

本来ここに書いたようなことは、ITエンジニアの仕事というより、グラフィックデザイナーの領域だろう。それでも、AIコーディネーターを名乗る以上、ここにまで自分で踏み込んで拘り抜くことに意味があると思っている。技術と見た目、どちらか一方だけでは、このサイトにはならなかった。