Figmaでカーソルに反応するインタラクティブなウェブサイトヒーローを自分で作った。そのプロセスがこれだ。

「AIをデザインワークフローに」というデモのほとんどは、静止画で終わる。これは動く。インタラクティブなウェブサイトヒーロー、カーソルに向かって傾く映画的なSFの風景を、3Dファイルもシェーダーコードも一切使わずFigmaで作った。すべては毎日使っているキャンバスの中、Higgsfieldプラグインから生まれた。

完成したヒーローはこれだ。ローダーが調整され、シーンが現れ、あらゆる方向のカーソルに反応する。

全体は4つのステップで完結し、すべてのプロンプトは以下にコピー可能な状態で用意してある：

1. シーンを1つの映画的な設定ショットとして生成する。
2. 同じシーンを4つのわずかに角度を変えたカメラアングルから生成する。
3. それらのアングルクリップをフラットな画像シーケンスに変換する。
4. シーケンスをカーソルに接続し、実際のページとして仕上げる。

After Effects、3Dアプリ、エンジニアは一切不要。プラグイン1つとビルドプロンプト1つだけだ。

ステップ1：シーンを生成する

Figma内でHiggsfieldプラグインを開き、映画的な設定ショットを1つ生成する。コツは、明確な奥行き、前景、中景、背景を明確なプレーンとして要求することだ。その分離が後でパララックスを機能させる。写真ではなく、絵画的に。

Soft hand-painted sci-fi concept art, cinematic and atmospheric. A lone armored hero on a dark rocky cliff in the near foreground, gazing out over a vast misty valley of floating islands and tall glowing spires fading into an aurora sky. Strong depth built from clearly separated planes: dark foreground cliff and hero, floating rocks in the midground, distant spires far behind, soft atmospheric haze between each layer. Moody purples and teals with warm light. Simple and clean, not busy, painterly brushwork, epic scale.

Copy

ステップ2：カメラアングルを生成する

次に、同じシーンを4つのわずかにずらしたカメラ位置から生成する：上、下、左、右。ここで重要な言葉は「チルト」ではなく「オービット」だ。

チルトはカメラをその場で回転させ、パララックスがほとんど生まれない。オービットはカメラを空間の中で動かすので、近くの崖は大きく動き、遠くの尖塔はほとんど動かない。その差がイリュージョン全体を作る。角度を小さく、約12度に保ち、フレーム間でぶれないようにショットを固定する。

Single-axis camera ORBIT UP only, about 12 degrees, locked-off and gimbal-smooth, no handheld, no camera shake, no wobble. Vertical axis only, no horizontal drift, no diagonal. The scene is completely frozen, nothing in it moves, only the camera. Slow, subtle, seamless. Strong parallax: near foreground shifts more than the distant background.

Copy

ステップ3：クリップを画像シーケンスに変換する

各オービットクリップをフレームとしてエクスポートする。ここでやっているのはビデオの再生ではなく、カーソルでスクラブできるフリップブックの制作だ。成否を分ける唯一のルール：カーソルの位置に最も近い1フレームだけを表示し、2フレームを絶対にブレンドしない。

そのルールは、自分がぶつかって修正した3つの失敗モードから来ている：

• 隣接する2フレームを「スムーズに」するためにブレンドすることが、まさにゴースト、つまり二重像のスミアを生み出す。
• リアルなビデオファイルをライブでシークし、mousemoveでプレイヘッドをジャンプさせることがスタッターを生む。ビデオシークはフレーム精度がないからだ。
• フレーム数が少ないとスライドショーのような安っぽいステップ感になる。

3つすべてへの解決策は同じだ：多くのフレームを、一度に1枚ずつ、カーソルに最も近いものを、ブレンドなしで表示する。方向ごとに十分なフレームをエクスポートすれば、モーションは本物の奥行きとして読める。

ステップ4：シーケンスをカーソルに接続する

最後のステップはインタラクションだ。Figma Makeに5枚のフラットフレーム、上、下、左、右、中央を渡し、以下のプロンプトを使う。カーソルを正しいフレームにマッピングし、滑らかにグライドするようにイーズをかけ、キャリブレーションローダーを追加し、ロゴ、メニュー、見出し、ボタンがすべてシーンと同じ世界に存在するようにフルインターフェースを重ねる。

Build a full-screen interactive hero. I provided the flat frames of a scene captured from up, down, left and right camera angles, plus a center frame. Stack them on a canvas. On mousemove, show the single frame nearest to the cursor's dominant axis (horizontal vs vertical, whichever is larger), eased so it glides. No blending between frames except a brief 100ms dissolve when the axis switches. Start with a calibration loader: a centered crosshair that draws in, counts up, then locks and becomes the live cursor as the scene reveals. Over the scene, lay a full interface in the same minimal monospace HUD style: a wordmark logo top-left, a horizontal nav menu top-right, a centered headline with one line of subtext, and a primary plus a secondary button. Thin rules, small uppercase labels, so the chrome and the scene read as one system. Dark and minimal. Respect prefers-reduced-motion.

Copy

なぜこれが重要なのか

ポイントは宇宙船ではない。デザイナーが、かつて3Dアーティスト、レンダーファーム、WebGLエンジニアを必要としたモーション作品を、すでに毎日使っているツールの中から公開できるようになった、ということだ。

実際に制作したものと購入したものを比べてみよう。シーン、4つのカメラアングル、フルフレームシーケンスはすべて生成した。アセンブリ、フレームをカーソルにマッピングしてページを仕上げる作業は、ビルドプロンプト1つだった。総コストは午後半日とプラグイン1つで、制作予算と3人の外注ではなかった。

これが注目すべき変化だ。「シネマティックでインタラクティブ」のハードルはかつてチームだった。今はプロンプトと細部へのこだわりだ。細部へのこだわりは、デザイナーがもともと得意としていた部分だ。

作ったらBrainyにタグ付けしてほしい。ぜひ見せてほしい。