チームのタスクを、
積み木のように。

Method

TSUMIKIのヒーロー画面に、Perlinノイズの2次元ベクトル場に沿って粒子が線を引くp5.jsのスケッチだけを置く指示にした。背景は毎フレーム塗り直さず、粒子の軌跡を低不透明度のストロークで積み重ねる描き溜め方式にしてあり、ページを開くたびにnoiseSeed()の値が変わるので、同じ構図は二度と出ない。

なぜAI感が消えるのか

1. 01

   テンプレート生成が返すのは1枚の完成画像で、素材を差し替えても構図はほぼそのまま再現できる。ここに置いたのはnoise(x*0.0045, y*0.0045, z)から角度を取り出す関数とalpha 9〜20の低不透明度ストロークという「描画のルール」のほうで、seedが変わるたびにまったく別の絵になる。量産テンプレートが得意とする再現性が、ここでは原理的に成立しない。

2. 02

   スケール値0.0045・角度の可動域4π・粒子数480本(モバイル240本)は、どれもAIのデフォルトが選ぶ値ではなく個別に決めた設計値。この数値の組み合わせ自体が、いわば作者の署名になっている。値を1つ変えるだけで、模様の粗さも密度もまるで違うものになる。

3. 03

   カーソルの半径160px以内では、ノイズ由来のベクトルに接線方向の渦成分と反発成分を混ぜて進行方向を曲げている。閲覧者が触れた場所だけ模様が違う筋を描くこの仕掛けは、静的なLPテンプレートの語彙には存在しない。触れた人が、絵の続きを一緒に描いている。

4. 04

   右下の「REGENERATE」ボタンは、押すたびにseed値を再抽選してbackground()から描き直す。「一点物です」と文章で説明する代わりに、ボタン一つで別の絵が生成される様子をその場で見せている。

5. 05

   見出しはNoto Serif JPの700、罫線は1px、角丸も影も使っていない。同じ紙色系でも、14番の活版ページがにじみや汚し加工で「手仕事の履歴」を演出するのに対し、こちらは丸みも影も足さず、「いま生成されている最中」を見せる方に振っている。

Best suited for

向いているのは、「一点物」「開くたびに違う」という価値そのものをブランドに持たせたいプロダクトや、アート・クリエイター系ツールのローンチページ。通信環境が弱い場面や、同じ見え方を毎回保証したい社内ダッシュボードには不向きで、そこでは静的な1枚絵のほうが説明として正確に働く。