Generative Agents（ジェネラティブエージェンツ）

1. 01

   ヘッダー

   左にロゴ、中央に Service / Insights / Interview / News / Media / Company / Recruit、右に黒い「Download」ボタン。

2. 02

   ヒーロー

   画面幅いっぱいの「Generative Agents」とカナ表記、「AIエージェントと協働する世界をつくる」のメッセージと説明文、「AIエージェントとは」ボタン。背景に光の粒子。

3. 03

   News

   日付・件名・タグを並べた2カラムのカード。

4. 04

   Publications

   社員が執筆・共著した技術書を書影付きのカードで3列に並べ、出版社・Amazon へのボタンを添える。

5. 05

   Guide

   「AI活用を進めたいが、判断材料が足りない」など6つの悩みを、対象者ラベル付きのカードにして関連ページへのリンクを並べる。

6. 06

   Services

   黒背景に切り替え、スケールアップ／スケールアウト／初手AI のサービスマップと、Phase 別に講座・支援を並べた一覧表、サービスの詳細カード。

7. 07

   Insights / Interview

   解説記事と、導入企業へのインタビュー記事のカード。

8. 08

   資料請求・フッター

   サービス資料の請求導線と、お知らせ、フッター。

• FVの社名は、文字が横線状に崩れてから組み上がる演出（全画面キャプチャに分解途中の状態が写っている）。Three.js のパーティクルかシェーダーで再現可能と思われる
• ヘッダーは固定表示。黒いボタンには光沢のあるグラデーションを敷いている
• Services の背景では板状の3Dオブジェクトが重なって見え、WebGL で描画していると思われる
• Astro 製で、Lottie による図解やアイコンのアニメーションを組み込んでいる

スクロールのコマ撮り150–500ms

検出された技術:Three.jsAstroGoogle FontsLottieWebGL

• 01英字は Marcellus、和文は Zen Kaku Gothic New。どちらも Google Fonts で揃う
• 02社名は background-clip: text で銀〜黒のグラデーションを流し込み、金属のような質感を出す
• 03色は #ffffff〜#292929 のグレースケールだけにし、カードは #e7e7e7 系の淡いグレーに角丸
• 04小見出しは「( 検討テーマから探す )」のように丸括弧で包み、英字の大見出しと2段で組む

1---
2title: "Generative Agents（ジェネラティブエージェンツ） 再現用デザイン仕様書"
3source: https://www.generative-agents.co.jp/
4katapick: https://katapick.com/sites/generative-agents
5category: コーポレート
6region: 国内 (JP)
7tags: [モノクロ, 大胆なタイポ, セリフ体, 3D/WebGL, グリッド, 角丸]
8launched: 2025-12
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 4/5
12estimated_hours: 40
13generator: Katapick
14---
15 
16# Generative Agents（ジェネラティブエージェンツ） — 再現用デザイン仕様書
17 
18> FVいっぱいに社名を組んで、それがもう看板になってる。AIエージェント企業ジェネラティブエージェンツのコーポレートサイトは、銀色の階調をまとったセリフ体の社名と無彩色の画面で、先端技術を静かな品格で見せている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22