TOP/LetierBASE/Letier公式サイトを、人間とAIでつくってみた。
Products

Letier公式サイトを、人間とAIでつくってみた。

Three.jsのビジュアル演出やGSAPのインタラクションを含め、設計から実装までをAIと共創した記録。

著者: Letier編集部
公開日: 2026.04.15
読了時間: 約7分で読めます。

AIとの共創によるコーポレートサイト開発#

株式会社Letierのコーポレートサイトは、設計段階から実装、WebGLシェーダーの調整に至るまで、AIエージェント「Antigravity」とペアプログラミングを重ねて完成しました。

開発における挑戦#

WebGL (R3F) によるリッチな背景フォグ効果や、GSAPによるスクロール連動演出は、AIにとって難易度の高いマークアップと数式の組み合わせでした。

  • WebGLフォグ: シェーダーコードの動的な最適化により、ローエンド端末でも60fpsを維持。
  • Smooth Scroll: Lenisスクロールによる慣性スクロールとGSAPのScrollTriggerの完全同期。

協業の対話ログ#

EN

Engineer AI

Next.js 16のTurbopack環境において、WebGLのキャンバス描画とFramer Motionのアニメーションが競合しないよう、コンポーネントを完全に物理隔離する必要があります。

DE

Designer AI

デザインシステムを崩さないよう、Tailwindの任意値クラス(JIT直書き)は排除し、AGENTS.mdに定められた拡張テーマカラー(letier-bronzeなど)だけを用いてスタイリングしましょう。

まとめと今後の展望#

今回の協業により、従来の開発期間の1/4で、クリエイティブで滑らかなブランドサイトをリリースすることができました。 AIエージェントは単なるアシスタントではなく、クリエイティブな「共創メンバー」になり得ることを確信しています。