ai-website-cloner-template でイレブンラボのサイトを分解し、言葉にできない差を取り出す
Probes は、レシピにまとめるには細かすぎる検証を 1 本ずつ置いておく場所です。 何を試して、どれが駄目で、最後にどう落ち着いたか。ここまで読めば判断はつくはず、というところで切り上げています。
NODE6174//（このサイト）のトップページを作るとき、elevenlabs.io のヒーロー、カードの並べ方、動きの付け方を手本にしていました。ところが「イレブンラボっぽくしたい」は、言葉では伝えきれません。実際に出てきたのは「カード部分ちょっと参考のデザインの動き方と違うのよ」という一言だけで、どこがどう違うのかは言った本人も説明できない。見れば分かるのに言葉にならないこの手の違いを、ここでは「言語化されない差分」と呼んでいます。 そこで JCodesMore/ai-website-cloner-template を試しました。Next.js 16（React でサイトを作るための土台。その 16 版）、shadcn（自分の手元にコピーして使う UI 部品集）、Tailwind v4（クラス名を書くだけで見た目が決まる CSS の道具。その 4 版）が最初から組んであります。そこに clone-website という skill（Claude Code に手順書を覚えさせておく仕組み。呼び出すと毎回同じ段取りで動く）が同梱されています。これを `cloner-test/` に丸ごと落として、elevenlabs.io/ja をリバースエンジニアリング（できあがったものを分解して、作り方を推測すること）にかけ、言語化されない差分が本当に取り出せるのか確かめました。
試した順に並べました。駄目だったものを消すと、なぜこの結論になったのか分からなくなるので残してあります。
ADOPTED = 採用 / REJECTED = 不採用 / PARTIAL = 条件つきで使える / UNVERIFIED = まだ試していない
Playwright（ブラウザを自動で動かして、ページの中身を測ったり画面を撮ったりする道具）で elevenlabs.io/ja を開き、DOM（ページの部品がどう組み立てられているかという骨組み）と CSS（色・字の大きさ・余白などの見た目の指定）の実際の値を、目ではなく数字で読み取りました。結果は DESIGN_TOKENS.md、PAGE_TOPOLOGY.md、BEHAVIORS.md の 3 本のメモに書き出しています。 いちばん効いた発見は動きの作り方でした。ElevenLabs には @keyframes（決められた動きを勝手に再生し続ける仕掛け）が 1 つもありません。使っているのは transition（何かが起きたときだけ、変化前から変化後へ滑らかにつなぐ指定）だけです。しかも `cubic-bezier(0.31, 0.325, 0, 0.92)`（変化の速さの緩急を 4 つの数字で表したもの）を 0.3 秒で、押せる要素すべてに同じだけ当てていました。動きの決め方がサイト全体で 1 本しかない。 文字も想像と違いました。H1 は Waldenburg-ML の 48px ですが、太さは 300、つまり細字です。H2 と H3 は 16px で、本文の 18px より小さい。見出しというより、見出しの前に置く小さな添え書きとして使っています。H4 は 14px の温かみのある灰色。ページの左右の余白は 64px、中身の最大幅は 1280 / 1144 / 672 の 3 種類でした。ヒーローには 256×256 の `<canvas>`（プログラムで絵を描くための四角い領域）が 1 つ置かれていて、WebGL（ブラウザで立体や質感のある描画をする仕組み）で何か動かしている可能性が高い。グラフ用の canvas が別に 2 つ、SVG（拡大しても粗くならない図形の形式）が 83 個、取引先ロゴが 19 個ありました。
Inter と Geist Mono の 2 書体を Next.js の font/google 経由で読み込みました。色は oklch（色を「明るさ・鮮やかさ・色み」の 3 つで指定する書き方）で `:root`（サイト全体の初期値をまとめて置く場所）に流し込みます。背景に #FDFCFC、文字に純黒、補助の温かい灰色に #777169 を当てました。 そのうえで `--ease-elevenlabs` という名前で `cubic-bezier(0.31, 0.325, 0, 0.92)` を定義し、リンク、ボタン、タブの役割を持つ要素すべてに同じ transition を配りました。ここまでで見た目の骨格はできます。
SiteHeader、HeroBlock、VoiceCardGrid、LogoBand、PlatformDuo、ApiSection（中に CodeSampleBlock）、Timeline、SafetyPillars、LatestPosts、FinalCTA、SiteFooter を、React の部品として 1 つずつ作りました。それを page.tsx で組み上げ、`npm run build` が通ることを確認します。ビルドは Turbopack（Next.js に組み込まれた、部品をまとめて配るための速い仕組み）で 46 秒、型の検査（TypeScript strict）が 6 秒でした。
`npm run dev` で localhost:3001 を立ち上げ、Playwright でページ全体のスクリーンショットを撮りました。それを同じ撮り方で撮った elevenlabs.io/ja の画像と横に並べます。構造は 11 個の部品すべてが 1 対 1 で一致しました。残ったのは、まねしただけでは越えられない 5 種類の差です。中身は本文の表に書き出しました。
NODE6174 の本体は Astro（書いた内容をあらかじめ HTML に書き出しておくサイト構築の道具）で作っています。そちらへ、別作業で Codex（OpenAI 側のコーディング AI。Claude Code と同じ役割の別ブランド）に作り直してもらった `src/components/ChannelCard.astro` を持ち込みました。中身は 3 層です。素の JavaScript で canvas に 1 コマずつ描き（画面の更新に合わせて次のコマを描く requestAnimationFrame という仕組みを使います）、その上に CSS のグラデーションを重ね、さらに SVG の feTurbulence（ざらつきやもやを計算で作る機能）を 2 層、soft-light（下の色となじませながら重ねる合成方法）で質感として乗せています。白い線画は消しました。 各チャンネルに元からある `--grad-recipes` から `--grad-library` までの色指定をそのまま材料にして、カードの外形は動かさず、内側の色だけがガスのようにゆっくり流れる見え方に変えています。あわせて一覧カードと詳細ページに「これはどの Making から出てきたのか」を示す出所の表示を足し、`pnpm typecheck`（Content Collections = 記事を Markdown ファイルで置き、決めた項目が揃っているか検査する Astro のしくみ。その型が壊れていないかの確認）が通るところまで見ました。
skill を 1 本まわしただけで、言語化されない差分が 5 つ言葉になりました。かけた手間に見合っています。 Voice card は真円（`border-radius: 50%`）で、表面にざらつきが乗っている。Platform Duo のグラデーションの面は彩度を落として沈ませてある。ヒーローの中央には 256×256 の canvas が置いてある。ロゴ帯は SVG のブランドマークで組んである。Latest Posts の表紙は実写の写真。この 5 つは、Phase 1 の計測と Phase 4 の見比べを通って初めて言葉になりました。 NODE6174 の ChannelCard には、真円化とざらつきの 2 つをそのまま当てられます。今はまだ角丸の四角のままです。
この検証で実際に出てきたファイルです。クリックすると別のタブで原寸のまま開くので、そのまま保存して中身を見られます。
検証しながら書いていたメモです。手順も、途中で気づいたことも、あとから整えずに置いてあります。
何を確かめたかったのか
NODE6174// のトップページのデザインを詰めていて、「イレブンラボっぽくしたい」を言葉で伝える限界に当たりました。出てきた指摘はこれだけです。
「カード部分ちょっと参考のデザインの動き方と違うのよ。」
Playwright MCP（MCP は AI から外部ツールを呼び出すための共通の口。Playwright はブラウザを自動で動かしてページの中身を測る道具なので、これを Claude Code から直接呼び出せるようにしたもの）で elevenlabs.io を覗き、「@keyframes は 0 個、hover（マウスを重ねた状態）のときに要素を動かす指定もない」と数値で確かめるところまではできました。ただ、ページ全体の部品を 1 つずつ突き合わせる作業を毎回その場の手作業でやるのは無理があります。
JCodesMore/ai-website-cloner-template は、この作業を 5 つの段階に切って skill として書き固めてあります。下調べ、土台づくり、部品の仕様出し、部品の並行作成、組み立てと確認の 5 段階です。言葉で伝えるより正確になるなら試す価値がある。そう思って、途中で手を入れず全工程をそのまま走らせました。
実際の進め方
git clone JCodesMore/ai-website-cloner-template cloner-test/で土台を手元に落とします。npm installを打つと、Next.js 16、shadcn/ui、Tailwind v4 の一式が入ります。- Phase 1 の下調べでは、Playwright で elevenlabs.io/ja を測り、
docs/research/elevenlabs.io/の下に DESIGN_TOKENS.md、PAGE_TOPOLOGY.md、BEHAVIORS.md の 3 本を書き出します。 - Phase 2 の土台づくりでは、
globals.cssを測った値どおりに書き換えます。色は oklch、動きの緩急は cubic-bezier で入れます。 - Phase 3 では SiteHeader、Hero、VoiceCardGrid など 11 個の部品を作ります。
- Phase 4 では
npm run buildを通し（46 秒）、npm run devで localhost:3001 に出します。 - Phase 5 では Playwright でスクリーンショットを撮り、本物と並べて見比べます。
出てきた 5 つの「言語化されない差分」
| # | NODE6174 の今 | ElevenLabs の実物 | 言葉にすると |
|---|---|---|---|
| 1 | ChannelCard は rounded-[20px] の角丸四角 | Voice card は border-radius: 50% の真円 | 球で、角がない |
| 2 | グラデーションは澄んだ多色（#48EFA8 など） | グラデーションは土っぽく沈んだ色で、その上にざらつきを重ねている | 霞んでいて、手触りがある |
| 3 | ヒーローは SVG のざらつきと見出しだけ | ヒーロー中央に 256×256 の <canvas> があり、WebGL で静かに動いている | 奥で何かが微かに動いている |
| 4 | ロゴ帯はブランドマークを直接書いている | ロゴ帯は SVG のブランドマーク部品で、マウスを重ねると fill（塗りの色）だけが変わる | 色は動くが、形は動かない |
| 5 | Latest Posts はグラデーションの仮置き | Latest Posts は実写の表紙写真（640×370 の webp。写真を軽く保存できる画像形式） | 写真が乗る |
かけた手間に見合ったか
見合いました。採用します（5 段階で 4 つ星）。1 セッション 2 時間で、elevenlabs.io の言葉にならない 5 つの差を全部文章にできました。人の言葉でやり取りすると、デザイナーと半日かけて往復するような違いです。それが機械的な比べ方で一度に出てくる。
ただし、副産物として残る Next.js のプロジェクト（cloner-test/）は NODE6174 本体には混ぜません。lab/ は Astro と Cloudflare Pages（作ったサイトを置いて公開する場所）で動いているので、Next.js のプロジェクトはサブディレクトリのまま tsconfig.json の exclude に足して、型検査の対象から外します。別の案件で他社サイトの組み方を調べたくなったら、ここから使い回します。
NODE6174 にどう当てるか
5 つのうち 1・2・4 は ChannelCard にそのまま落とし込めます。3 と 5 は置き場所が違うので、ヒーローと Latest Posts（Time Capsule の Latest Workflows にあたる部分）に別々にあてる。細かい手順は、次に作る「Web Site Clone」レシピにまとめます。
- 「Web Site Clone」レシピを新しく作り、確かめ済みの手段として ai-website-cloner-template を採用扱いで登録します。評価は 4 つ星。手本のサイトを分解する用途なら、これで足ります。 - NODE6174 の ChannelCard は、直す箇所が 5 件はっきりしました。角丸をやめて真円にする。feTurbulence でざらつきを強める。グラデーションの色をもっとくすませる。マウスを重ねたときに要素を動かす指定は全部やめる。変化の緩急は `--ease-elevenlabs` に統一する。 - `cloner-test/` は捨てません。別の案件で「あのサイトはどう組まれているのか」を調べたくなったとき、そのまま使い回せます。README にその位置づけを書き足しておきます。
そのままコピーして X に貼れる文です。好きに書き換えて使ってください。
「AI に Web サイトを分解させて、言葉にできないデザインの差を取り出す」を試しました。 使ったのは ai-website-cloner-template。clone-website という手順書つきで、Next.js 16 と shadcn の土台がそのまま入っています。ここに elevenlabs.io を食わせました。 Playwright でページの骨組みと見た目の数値を測り、3 本のメモにまとめ、11 個の部品を 30 分で組み直し、本物と並べて見比べる。出てきたのは「カードの形」「表面のざらつき」「奥で動いている canvas」など、こちらが言葉にできていなかった 5 つの差でした。神。
この検証は、下の Making 記事から切り出しました。Making は制作の裏側を進行中のまま書き足していく記事なので、前後で何をやっていたかまで追えます。
// NODE6174//NODE6174// ができるまで。humbulls Lab を独立したメディアに作り替えた記録
humbulls の中の一区画だった Lab を、NODE6174// という独立したメディアに作り替えました。名前を決め、ブランドの決まりごとを書き、ドメインをつなぎ、Astro（書いた内容をあらかじめ HTML に書き出しておくサイト構築の道具）で組んで Cloudflare Pages（そのまま公開できる置き場）に公開し、区画を 5 本から 6 本へ増やすまでを順に書いています。判断を間違えたところや途中で止まったところも、そのまま残しました。進行中なので今も書き足しています。