Design & Computation Studio · Tokyo × Sydney

ケーススタディ

HIKARI CLINIC · ケタミン支援療法

描かれるたびに姿を変える曼荼羅を、岡山の精神科クリニックに。

コンセプト、アートディレクション、生成ビジュアル、フロントエンド、日英エディトリアル。すべて一人で、最初から最後まで。

kap.hikariclinic.jp

HIKARI CLINIC KAP: 日本語ヒーローと生成曼荼羅
訪れるたびに曼荼羅は描き直される。

普通なら両立しないこと

遠迫憲英医師は、25年以上精神科の現場に立ってきました。2009年、日本で初めて院内にフローティングタンクを持つクリニックを開き、トランスパーソナル療法のワークショップを長く主催。ペルー・アマゾンではアヤワスカの儀式に、オレゴンではシロシビンのセッションに、自ら身を置いてきました。

その人が、ケタミン支援療法を始めようとしていた。日本ではまだ適応外、自由診療、世間にはほとんど知られていない治療です。

このサイトには、普通なら両立しない二つの仕事がありました。

すでに治療の場であること。 ケタミン支援療法は処方ではありません。整えられた場があり、セラピストに伴われた体験があり、その後に長い統合が続く。薬局のようなサイトでは、この仕事を取り違えて伝えることになります。

規制の枠を、一度も外さないこと。 日本の医療広告規制は厳格です。適応外使用、自由診療、根拠のない効能。すべてが対象になります。たった一文の誇張が、クリニックを危うくします。

多くの場合、片方を立てれば、片方が崩れます。

ビジュアル:こころが、自分を描き直す

ヒーローは画像ではありません。ブラウザの中で、その場で曼荼羅を描くシステムです。訪れるたびに、違う姿になります。

ケタミンは、投与のあとしばらく、脳が新しい結びつきをつくりやすい状態を開くと考えられています。神経可塑性の窓。治療の本体は、その窓を使うことです。凝り固まった自己像をゆるめ、新しい配置へ落ち着かせていく。

だからこれは、曼荼羅の絵ではありません。その過程が、いま動いています。

数千の粒子がフローフィールドを辿り、対称軸で折り返され、90フレームほどインクを重ねる。やがて形が立ち上がる。育ち、落ち着き、止まる。

そして隅に、小さなボタンがひとつ。描き直す

院長は、変性意識を内側から知るために、フローティングタンクに数百回入っています。説明する前に、このシステムが何をしているかを見抜きました。

毎回違う、同じ顔。

JA · lavender bloom
JA · soft violet
JA · dense violet
JA · gold diamond
JA · deep bloom

最後の一画面まで、体験を手放さない

送信完了は、多くのサイトで最も無機質な瞬間です。定型のサンキュー画面、チェックマーク、そこで世界観は途切れます。このサイトでは、送信が成功したその瞬間に、ブランドの芯である生成曼荼羅がその場で一つ描かれます。

ヒーローで出会った視覚言語が、行動の終わりで静かに応えます。UIとしての「完了」ではなく、体験としての「受け取りました」を、苦しみを抱えて一歩を踏み出した人に返しています。

現れる曼荼羅は一点ものです。二度と同じ形にはならない。その一歩に、固有の記憶を残します。

送信完了画面。成功の瞬間に生成される曼荼羅
送信の先に、システムメッセージではなく曼荼羅を。

抑制が、設計だった

この領域には分かりやすい誘惑があります。派手なフラクタル、神聖幾何学、第三の目、彩度の高い色。

そのすべてが、間違いでした。

このサイトは、娯楽としてサイケデリックな体験を求める人のためのものではありません。たどり着くのは、何年も抗うつ薬を試して、それでも報われなかった人たち。疲れ、慎重で、家族が隣に座っています。

静かで、臨床的で、それでいて温かい。そのトーンを探しました。和文見出しに明朝。英文の副題に Cormorant Garamond のイタリック。セージと温かいグレー。たっぷりの余白。曼荼羅は低い不透明度で、片側に寄せて、文字と決して競わせない。

1ページに生成要素はひとつ。ほかは何も動かない。

言語:翻訳ではなく、二つの原稿

日本語の見出しは「もう一度、こころに光を。」

英語版は、その訳ではありません。

Where light finds you again.

主語が反転しています。日本語は光を届け、英語では光の方があなたを見つける。共通しているのは構造だけ。「光」と light の一語だけが別の色を持ち、あとはそれぞれの読者に向けて、その言語で書かれています。

これはUIの文言まで及びます。各言語で自然な語を選んでいます。ボタンは日本語で「描き直す」、英語で "Redraw"。

English hero: Where light finds you again
EN · Where light finds you again.
Japanese hero: もう一度、こころに光を。
JA · もう一度、こころに光を。

約束できない治療について書く

コピーは、効果を約束しません。

分かっていること、証拠がどこで途切れるか、クリニックが実際に何をするか。費用、リスク、副作用、救済制度の範囲。必要なことは専用ページに置いてあります。

誇張が溢れる領域では、抑えたほうがかえって強く届きます。

長い解説も載せました。儀礼から臨床試験までの歴史、セット・アンド・セッティング、統合、いまの研究状況、よくある誤解への答え。予備知識のない人が、家族に勧めるべきかを決めるために書いています。

何でできているか

  • Next.js(App Router)、TypeScript、Tailwind
  • Canvas2D による生成システム(シード制御・約60fps)
  • 日英の完全な国際化+transcreation されたコピー
  • 適応スクリーニングと同意ゲートを持つ多段フォーム
  • 追従型の目次を備えた長文レイアウト
  • 同意ベースのアナリティクス/要配慮個人情報に対応したプライバシーポリシー

開発手記

以下は開発者向けです。ひとつの性能問題と、なぜ「明らかな解決策」が間違いだったかの記録。

曼荼羅が重かった

ある時点の実装では、生成システムの負荷が高すぎました。粒子ごとに、勾配を求めるためノイズ場を中央差分で4回サンプリングしていた。しかも3次元(2次元の空間+時間軸)。線は対称の折り返しで数千本/フレーム。そのすべてが MULTIPLY で合成されていました。

明らかな一手は、WebGLへの移植です。

でも先に、コストがどこにあるかを見当づけました。

ボトルネックは描画ではなく、JavaScriptでした。 粒子ごとのノイズ計算です。描画をGPUに移しても、この計算コストは減りません。

1:フローフィールド化

粒子ごとに勾配を計算するのをやめました。低解像度のグリッド(64×64)に場を焼いておき、粒子はそこをバイリニア補間で読むだけ。場の更新は数フレームに一度で足ります。

粒子のホットループから、ノイズ呼び出しが消えました。 毎フレームの noise() 4回が、キャッシュした場の1読みになった。見た目は変わっていません。

注意点:グリッドには生のスカラーでなく勾配ベクトルを焼く。グリッド解像度はノイズの空間周波数で検算する。配列外アクセス防止に外周へ余白を持たせる。場を差し替えるときは前後を数フレーム線形補間しないと、動きが途切れる。

2:インクシート

次に、プラットフォーム固有の問題が出ました。macOSとUbuntuでは軽い。Windowsだけ極端に重い。

原因は、線ごとに走る MULTIPLY 合成でした。multiply は GPU の固定機能ブレンドでは表現できないモードで、合成のたびに描画先を読み直す必要があります。半透明のストロークひとつひとつがテクスチャの読み書きを要求し、Windows ではその帯域が詰まっていた。

この絵の深みは、時間方向の蓄積から来ています。90フレームほどのインクが重なることで生まれる。1フレーム内での交差の寄与はずっと小さい。

フレームあたり数千回だった `MULTIPLY` 合成が、1回になりました。 各フレームの線はオフスクリーンのシートに source-over で描き、そのシートを1回だけ MULTIPLY で重ねる。時間方向の深みはそのまま残っています。

function bloomStep() {
  inkSheet.clear();                    // 毎ステップ必ずクリア
  inkSheet.blendMode(SOURCE_OVER);     // シート内は合成コストゼロ
  for (const p of particles) {
    drawSymmetric(inkSheet, p);
  }
  paint.blendMode(MULTIPLY);
  paint.image(inkSheet, 0, 0);         // 1ステップにつき1回
}

アルファは再キャリブレーションが必要。線ごとのアルファとシート全体のアルファが二重にかかるため、旧来の値をそのまま移植することはできません。

WebGLに逃げなかった理由

移植していたら速くなった、とは限りません。 「WebGLにすれば速い」は無条件では成り立たない。ボトルネックがどこにあるか、どこまで追うかで決まります。今回は、先に見当をつけたら、直すべき場所が違いました。

もう一つ、WebGLは細い線を確実に描けません。gl.lineWidth は多くの環境で 1.0 に固定されることが知られています(ALIASED_LINE_WIDTH_RANGE[1,1] を返す)。この曼荼羅はほぼ全体が髪の毛のような線でできている。同じ質感を得るには線を一本ずつクアッドに押し出す必要がある。移植ではなく、書き直しです。

AIについて

実装を書いたのはAIです。けれど、曼荼羅が神経可塑性をモデル化すべきだと決めたわけではない。ゴシックでなく明朝を選んだわけでも、MULTIPLY がボトルネックだと知っていたわけでも、日本語と英語の見出しに別の主語が要ると気づいたわけでもない。25年分の実践を読んで、それを貫く一本の線を見つけたのも、AIではありません。

速度は道具。判断は人。

AIが取り除いたのは、この種の仕事を長いあいだ成り立たなくしていた実装コストです。コンセプト、モーション、コード、コピー。分業され、引き継ぎのたびに少しずつ薄れていく理由が、それでした。

私がこの仕事を始めた頃、ウェブはもっと遊べる場所でした。それがコンバージョンの数字に最適化されていくあいだに、手ざわりのあるものは順に消えていった。実装コストが高すぎたからです。

そのコストが消えました。一人が全部を握れる。作りたいものを、そのまま作れる。

ウェブに生きたものを取り戻す。それが、このスタジオです。

スタジオ

Astrum Anima は、東京とシドニーで一人で営むデザイン&コンピュテーション・スタジオです。

同時に抱える仕事は少なくしています。そのぶん、一件一件に向き合える。メールは、私に直接届きます。

お問い合わせ

生きているものを、一緒に。

何を作ろうとしているか、教えてください。パンフレットではなく、計画で返します。

contact@astrumanima.com