進行中 // NODE6174// 2026-04-29 → 進行中

NODE6174// ができるまで。humbulls Lab を独立したメディアに作り替えた記録

humbulls の中の一区画だった Lab を、NODE6174// という独立したメディアに作り替えました。名前を決め、ブランドの決まりごとを書き、ドメインをつなぎ、Astro（書いた内容をあらかじめ HTML に書き出しておくサイト構築の道具）で組んで Cloudflare Pages（そのまま公開できる置き場）に公開し、区画を 5 本から 6 本へ増やすまでを順に書いています。判断を間違えたところや途中で止まったところも、そのまま残しました。進行中なので今も書き足しています。

Making には、作っている最中の判断と失敗をそのまま置いています。終わってから体裁を整えて書き直すと、いちばん役に立つ部分が抜け落ちると思っているからです。ここで形になった作り方は Recipes、途中の検証だけを切り出したものは Probes に分けてあります。

全 12 章のうち 11 章を公開ずみ

project-node6174AstroCloudflare PagesClaude CodeClaude DesignGPT Image 2CodexBlueprint v4type-making

0. なぜこの記事を書くのか

NODE6174// は、ひとつのサイトで 3 つの役目を同時に負っています。メディアサイトを作るときの型としての Recipe であり、3 つの AI にトップページを作らせて比べた Probe（単発の検証記事）であり、この Making（制作の裏側を進行中のまま書く長文記事）そのものでもあります。

自分で自分を題材にするこの入れ子は、わざとです。NODE6174// が掲げているのは「散らばった試行が最後に 1 点へ収束する」という考え方で、その起点になるサイト自身の作り方を進行中のまま記録する。それがいちばん手っ取り早い証明になると思っています。

立ち上がっていく過程は、検証も判断も失敗も採用も全部そのまま書きます。ここに溜まった一次情報（要約する前の、その場で書いた生の記録）から、あとで型（Recipe）と検証（Probe）が枝分かれしていき、完成した制作物は Time Capsule（進化の年表）に並びます。

1. 作り替えを決めた日

最初は「Humbulls Lab」という名前で企画していました。humbulls という自分のブランドの下にぶら下がる小さなメディアという位置づけで、ドメインも lab.humbulls.com を取るつもりでした。humbulls が AI をどう使っているかを見せる場所として、制作物のアーカイブと Time Capsule（進化の年表）を主軸に置く構想です。

ところが 2026-04-30 に Gemini と話しているうちに、メディア名もタグラインもコンセプトも根本から作り直すことにしました。親ブランドの humbulls には Aged Gold を基調にした色や書体の決まりがありますが、そのルールには従わない独立したメディアとして設計し直す、という方針転換です。

きっかけは単純で、「Lab という名前が当たり障りなさすぎる」という引っかかりでした。もっと記号として目に残る名前がほしい。しかも「完成品の展示場」ではなく「最適解へ収束していく過程」のほうを含んだ名前がいい。そう判断しました。

2. 名前とコンセプトを決める

最終的に落ち着いたのは、3 つの部品を組み合わせた名前です。

NODE は結節点のことです。散らばったツールやノウハウをここで結び直す、という意味を持たせました。あらゆる参照が 1 点に集まる構造を表しています。

6174 は、どんな試行も最後には 1 点へ着地する、という収束のモチーフとして置きました。ロゴのアニメーションでは、数字が数ステップで 6174 に落ち着く動きだけを見せます。背景にある数学の話はあえて説明しません。伝わる人にだけ伝わればいい、という方針にしました。

// には二重の意味を持たせています。ひとつはプログラムのコメント記号で、実行はされないけれど残っている思考、つまりアーカイブを指します。もうひとつはネットワーク上の住所の書き出し（//host/path のような書き方）で、こちらは起点を指します。

タグラインは Archived Edges & Absolute Solutions. に決めました。

見た目は 2 つを参考にしました。ひとつは ElevenLabs のような、装飾を削ったテック系サイトの清潔さです。もうひとつは Fear of God Athletics の初期にあった、建築みたいに骨組みだけで立つ潔さでした。この 2 つを混ぜて、「Brutalist Editorial × Noiseless UI」という一行に考え方をまとめています。

3. ブランドの決まりごと v0.1

決まりごとの正本は lab/docs/brand-node6174.md にまとめました。色も書体もここを見れば分かる、という状態にしてあります。

色は 6 つに絞りました。基準になる黒が --node-ink #0A0A0A、主背景の白が --node-paper #FFFFFF、少し温かみのある副背景が --node-cream #F4F2EE、補助的な文字が --node-ash-50 #6B6B6B、罫線が --node-ash-20 #C8C6C2 です。差し色の --node-spectrum #48EFA8 だけは緑ですが、これは // の記号と、いま選ばれている項目にしか使いません。

書体は 4 本です。見出しには Space Grotesk を太め（700 から 800）で、本文には Inter を 400 から 500 で使います。数字とコードは JetBrains Mono（400 から 700）で、数字は必ず等幅にします。等幅にすると桁の幅が揃うので、数字が縦に並んだときにガタつきません。和文は Noto Sans JP です。

角は丸めません。枠線は髪の毛のような 1px だけ引きます。影は禁止です。奥行きは色の差と枠線だけで出します。

動きは素の JavaScript と CSS のアニメーション機能だけで書きます。Framer Motion や GSAP といった、動きを付けるための外部ライブラリは入れません。

言葉づかいの決まりもひとつ置きました。「第二の脳」という表現はサイト本文では使いません。代わりに「AI memory layer」のような中立的な言い方をします。引用として持ち出すときだけ、kepano と obsidian-skills を出典として明記します。

4. ドメインをどうつなぐか

まず手元のドメインがどうなっているかを確認しました。kuritakazuki.com は Xserver で登録していて、DNS（ドメイン名を実際のサーバーに結びつける設定）のレコードが空のまま使っていません。humbulls.com は Squarespace で登録していて（もとは Google Domains でした）、DNS は Google Cloud DNS、サイト本体は HubSpot CMS に置いてあります。

最初は Cloudflare Registrar に移管しようと考えました。ところが値段を調べたら、Squarespace の年 1,400 円（約 9.5 ドル）は Cloudflare の 10.44 ドルよりむしろ安い。得がありません。移管の手続きに 5 日から 7 日かかるのも無駄です。移管はやめて、Squarespace のまま維持することにしました。

代わりにやったのは 1 手だけです。Squarespace の DNS 管理画面で、node6174.humbulls.com の CNAME を node6174.pages.dev に向けました。CNAME は「この名前で来たら、実際はこちらを見に行ってください」と転送先を書いておく種類のレコードです。これで配信はつながります。humbulls.com にもとからある HubSpot 関連のレコード（トップに当たる apex の A レコード、メール認証用の DKIM の CNAME、メール配送用の MX）には一切触っていません。

ここで思わぬところを踏みました。HubSpot のアクセス解析タグは、埋め込んだ portal ID（HubSpot 側のアカウント番号）を見て動きます。つまり、サブドメインを HubSpot 側に登録していてもいなくても関係なく発火します。おかげで開発中の画面にまでチャットの吹き出しが出てきてしまいました。

対策は 3 段構えです。まず import.meta.env.PROD（本番かどうかを判定する値）で分岐して、開発中はタグ自体を書き出さないようにしました。次に window.hsConversationsSettings = { loadImmediately: false } をタグより先に置いて、チャットを勝手に読み込ませないようにします。最後に、CSS で #hubspot-messages-iframe-container 系の要素を強制的に隠しました。

これで、開発中は HubSpot への通信がゼロ、本番はアクセス解析だけ生かしてチャットの吹き出しは出ない、という清潔な状態になりました。

5. 仮ロゴと、数字が 6174 に落ちるアニメ

正式なロゴは GPT Image 2（画像を生成する AI）で作る予定でしたが、確定を待っていると他が何も進みません。そこで、文字を組んだだけの仮ロゴで先に進めると決めました。

NODE の部分は Space Grotesk の 800 で白。6174 の部分は JetBrains Mono の 700 で、桁の幅が揃う等幅数字にしています。// は 30 度に傾けたスラッシュ 2 本で、色は差し色の緑。末尾の / だけはカーソルのように点滅させました。

数字が収束していくアニメは、素の TypeScript（JavaScript にデータの型の指定を足した書き方）と setTimeout（指定した時間だけ待ってから処理を動かす仕組み）で書いています。ライブラリは使っていません。

function convergeStep(n: number): number {
  const d = String(n).padStart(4, '0').split('');
  const asc = parseInt([...d].sort().join(''), 10);
  const desc = parseInt([...d].sort().reverse().join(''), 10);
  return desc - asc;
}

ランダムな 4 桁から始めて、220 ミリ秒おきに次の数へ進みます。6174 にたどり着いたら止まります。同じ滞在中に何度も走ると鬱陶しいので、sessionStorage（ブラウザのタブを閉じるまで残る一時的な保存場所）に印を付けて、初回の読み込みでだけ動くようにしました。

気をつけたのは、数学的な背景を画面の HTML に一切残さないことです。HTML の属性は data-converge、sessionStorage の鍵は node-converge-seen、関数名は convergeStep と buildSequence。どれも「収束する」としか言っていません。

おかげで、ブラウザの開発者ツールでソースを覗かれても種明かしにはならず、「伝わる人にだけ伝わる」設計が保てました。

6. Channel（区画）の構造を設計する

最初は 3 つの区画（Recipes、Resources、Case Studies）で足りると思っていました。自分が作ったものを保存したくなる場面を 7 通り、訪問者がこのサイトを使う場面を 7 通り書き出して並べてみたら、3 つではまるで受け止めきれない。結果として 5 つに増えました。

/01 Recipes はこのサイトの主役で、ジャンルごとの最適解を置く場所です。/02 Time Capsule は進化の年表で、自分の制作物と AI 側の更新を並べて走らせます。/03 Blueprint は、AI を使った仕事の進め方そのものの設計図で、v1、v2 と版を重ねていきます。/04 Probes は単発の検証記事で、SNS で共有しやすい短めの読み物です。/05 Library はプロンプトやテンプレート、PDF を置く予定の場所で、まだ準備中です。

この記事を書き始める段階で、Making を足して 6 つに増やすと決めました（この経緯は章 9 のラウンド 3 に書きます）。Making が /05 に入り、Library は /06 に下がります。

区画どうしの関係は、役割が重ならないようにはっきり分けました。Making が制作日誌で、要約する前の記録がまずここに全部溜まります。そこから他の 4 つが派生します。

Making（制作日誌。生の記録が最初に溜まる場所）
  ├ 抽象化して Recipe に切り出す
  ├ 単発の検証として Probe に切り出す
  ├ 環境の変化として Blueprint に記録する
  └ 完成物として Time Capsule の Archive に登録する

7. Phase 1 を実装して公開する

使う道具はすぐ決まりました。

土台は Astro 5 です。Astro は、書いた内容をあらかじめ HTML に書き出しておく作りのフレームワークで、閲覧が速くなります。記事の管理には Content Collections という機能を使います。記事は Markdown ファイルのまま置きつつ、「この項目は必須」「ここは日付の形式」といった型を先に決めておける仕組みです。型に合わないファイルがあると書き出しの時点で止まってくれるので、書き間違いを公開前に潰せます。

置き場所は Cloudflare Pages（書き出した HTML を置いて、そのまま公開できるサービス）にしました。無料の枠で足りますし、別で運用している SwimHub と同じ構成なので迷いません。使うライブラリの管理は pnpm に任せ、corepack（Node.js に同梱されていて、この種の管理ツールの版を揃えてくれる仕組み）経由で入れました。

実際の手順はこうです。まず pnpm install で必要なライブラリを入れます。次に zod（データの形を検査するライブラリで、Content Collections の型はこれで書きます）で各コレクションの型を設計し、humbulls.com にあった Time Capsule から 18 件を移しました（workflow が 6 件、archive が 8 件、milestone が 4 件）。それからロゴ、ヘッダー、フッター、Recipe のカードといった部品を実装していきます。

pnpm build で HTML に書き出し、wrangler pages deploy dist で Cloudflare Pages に送ります。wrangler は Cloudflare を手元のターミナルから操作するためのコマンドです。Cloudflare Pages の管理画面で独自ドメイン node6174.humbulls.com を追加すると、向け先の CNAME を指示されるので、それを Squarespace の DNS に登録しました。あとは SSL 証明書が自動で発行され、そのまま公開に至ります。

公開したのは 2026-04-29。実際にかかった時間は 5 時間から 6 時間ほどでした。

8. Phase 1.5 で骨組みを増やす

公開した直後に、Recipe と Blueprint と Probes の枠を先に立ち上げてしまおうと決めて、そのまま Phase 1.5 の拡張に入りました。

まず recipes、blueprints、probes の 3 つのコレクションを追加しました。次に、それぞれの一覧ページと詳細ページを実装します。Blueprint だけは専用のレイアウトを用意して、スクロールしても横に貼り付いたままの目次と、4 つの節（Frame＝層の構造という考え方の骨組み、My implementation＝自分は実際にどう組んだか、How to adapt＝読んだ人が自分用に作り替えるには、Migration log＝前の版から何を変えたかの記録）、それに層構造の図を置きました。トップページも組み直して、上から順に Hero、Channels、Now playing、Latest Recipes、Latest Probes、AI Milestone を並べています。

最初に入れた記事は次のとおりです。

Recipe は 3 本で、ロゴ制作、メディアサイト構築、営業提案書。このうちメディアサイト構築は NODE6174// 自身のことなので、サイトが自分自身を題材にする形になります。

Probe は 1 本で、N01「Adobe MCP で GPT Image 2 の出力を精密に SVG 化する」です。SVG は拡大しても粗くならない図形の形式で、MCP は AI から外部ツールを呼び出すための共通の口。これがあると Claude から Adobe の機能を直接呼び出せます。DNA FACTOR の LP を作っている最中に試したものを、そのまま記事にしました。

Blueprint は 2 本で、いま実際に回している v3 と、これから書く下書きの v4（記憶の層を AI 専用に切り分ける案）です。

9. 使い勝手を 3 ラウンドで磨く

公開したあと、訪問者の目線で見直す作業を 3 回に分けてやりました。

ラウンド 1: 日本語にする、Channels を上げる、Recipe に階層を入れる

カードの見出し、ヒーローの大見出し、各セクションの説明文を日本語に直しました。タグラインと英語のロゴ、// の小見出しだけは英語のまま残しています。

トップページの Channels をヒーローのすぐ下に移動しました。このサイトは入口として使われるので、どこに何があるかを先に見せたほうがいい。

Recipe の category は、それまで自由に文字列を書ける形でした。これを、決まった値しか受け付けない形（enum）に変えました。creative、development、ops-marketing、ops-backoffice、other の 5 つです。値を固定しておくと、表記のゆれで記事がフィルターから漏れる事故が起きません。

業務効率化の下位カテゴリは、必要なときだけ出す形にしました。ここで CSS の優先順位に引っかかっています。要素に hidden 属性を付けても、CSS 側に display: flex が書いてあるとそちらが勝ってしまい、消えてくれません。.filter-block[hidden] { display: none } と書いて優先順位を上げることで、ようやく隠れました。

ラウンド 2: 「営業」を足して、タグを日本語にする

ユーザーからの指示を受けて ops-sales を追加しました。これで業務効率化の内訳が、マーケティング、営業、バックオフィスの 3 つになります。

タグの表示も、内部の ID そのままではなく日本語のラベルに切り替えました。対応表は src/lib/tag-labels.ts に集めてあります。たとえば tool-claude-code は「Claude Code」と表示されます。画面の文言も直して、「filter by tag」は「キーワードで絞り込む」に、「all」は「すべて」にしました。type-* で始まるタグは内部の目印なので、絞り込みのボタン一覧からは外しています。

ラウンド 3（この記事）: Making を足して、Time Capsule とつなぐ

いま進めているのがこのラウンド 3 で、この記事を書きながら同時に手を入れています。

まず Channel の /05 に Making を新設しました。ここが一次情報の置き場になります。Library は /06 に下がり、中身は準備中のままです。

Time Capsule との連携も入れました。年表にはこれまで完成物の点だけが並んでいましたが、そこに Making の期間を表す帯を混ぜて表示します。点だけだと版と版のあいだが空白になりますが、帯があると「その間ずっと作っていた」という線が見えます。

既存のコレクションには、Making を指し返すためのフィールドを足しました。archive.relatedMaking、recipes.extractedFromMaking、probes.extractedFromMaking、blueprints.relatedMaking の 4 つです。

これで「Making が一次情報で、他の区画はそこから派生したもの」という関係を、文章で説明しなくてもデータの型が語ってくれます。

10. 3 つの AI にトップページを作らせて比べる

NODE6174// が自分自身を題材にする最初の検証として、トップページのデザインを 3 つの AI に作らせて並べました。

ひとつ目は Claude Code（Opus 4.7）と Astro の組み合わせで、これはいま動いているサイトそのものです。白を基調にして、差し色の緑を効かせています。ふたつ目は Claude Design（Anthropic の研究用の先行版ツール。指示を渡すとデザインと一式のコードを起こしてくれます）で、ElevenLabs の配色をそのまま踏襲し、ざらつきのあるグラデーションでカードを作る案です（一度は途中で止まってしまい、やり直して完成しました）。3 つ目は GPT Image 2 と Codex 5.5（OpenAI 側のコーディング AI。Claude Code と同じ役割の別ブランドです）の組み合わせで、GPT Image 2 でデザインの見本画像を 2 案、Codex には Next.js で別バージョンを書かせました。

3 つに同じ文面で渡した指示

ElevenLabs の日本語版（elevenlabs.io/ja）が使っている、くすんだ色合いとざらついた質感を、このブランドの主要な装飾として採用する方針を立てました。そのうえで、Channel のカードを次の色でざらついたグラデーションにする、という設計を 3 つの AI に同じ文面で渡しています。

/01 Recipes はピンクからオレンジのグラデーションで、情熱を担当します。
/02 Time Capsule は青から琥珀色にして、上に線画の格子を重ね、時間の軸を出します。
/03 Blueprint は緑からクリーム色で、有機的な構造を思わせる色にしました。
/04 Probes は紫からピンクにして、探索を担わせています。
/05 Making は色を決めきれず、後回しにしました。
/06 Library はまだ準備中なので、くすんだ灰色のままです。

10.1 Claude Code（Opus 4.7）と Astro（いま動いているもの）

このサイトそのもの（https://node6174.humbulls.com）です。Astro 5 と Cloudflare Pages、Content Collections で実装しました。白を基調にして差し色の緑を置く、という「Brutalist Editorial」の解釈になっています。ElevenLabs 風のざらついたグラデーションはまだ入れていません。いまの Phase 1.5 では、Channels は平らな格子のままです。

これを、他の 2 案と比べるときの基準線として置きました。

10.2 GPT Image 2 でデザインの見本を 2 案

ChatGPT の画像生成に、縦長の 1 枚でページ全体が見渡せる見本を出すよう指示しました。返ってきたのが次の 2 案です。

Pattern A

Pattern B

見て分かったこと

くすんだ色合いは、2 案とも指示どおりに再現されました。Channel ごとの色の組み合わせ（ピンクからオレンジ、青から琥珀に線画の格子、緑からクリーム、紫からピンク、くすんだ灰色）も外していません。ロゴ「NODE 6174 //」の // も、画像の中では 30 度に傾いたスラッシュとしてちゃんと成立していました。

限界もはっきり出ました。画像なので、数字が収束していく動きもカーソルの点滅も再現できません。書体の細かい使い分け（見出しの Space Grotesk と本文の Inter をどう配分するか）も、画像生成 AI の解像度ではぼやけます。

使い道は、Figma に貼って参考にするあたりが上限だと思っています。実際に動くものにするには、コードを別に生成することになります。

10.3 Codex 5.5 に Next.js で別バージョンを書かせる

lab/codex-version/ に、Next.js 14 の App Router、React、Tailwind CSS v4、TypeScript の厳格モードで生成させました。Next.js は React でサイトを作るためのフレームワークで、App Router はその中の新しいページの書き方です。Tailwind CSS は、text-sm のような短い名前をクラスに書いて見た目を組み立てる道具です。Codex には既存の Astro 版のコード（lab/src/）を手元で参照させたうえで、ElevenLabs 風の色で作り直させました。

動くもの

node6174-codex.pages.dev で触れます。Next.js を output: 'export' の設定で静的な HTML に書き出し、Cloudflare Pages の別プロジェクトとして公開したものです。比べやすいように、これはずっと公開したままにします。

手元で動かす

cd lab/codex-version
npm install
npm run dev
# http://localhost:3000 で開きます

Astro 版との違い（README.md から）

暗い色を基調に組み直しています。ink #0F1117、surface #15171E、paper-light #F5F5F4 が中心です。
Channel のカードはざらついたグラデーションです。CSS のグラデーションの上に、SvgNoise という共通部品で作ったざらつきを重ねています。ざらつきは SVG のフィルター機能で作っていて、feTurbulence（乱数からムラのある模様を生むフィルター）と feColorMatrix（できた模様の色を調整するフィルター）を組み合わせています。
記事の管理に Content Collections は使わず、App Router のサーバー側で動く部品の中にデータを直接書いています。
角は 12px から 16px で丸めています。Astro 版の直角のカードとは印象が変わりました。
差し色を置いていません。Astro 版の緑を外して、各カードのグラデーションそのものを色の場として扱っています。

残っている NODE6174// らしさ

NODE 6174 // というロゴの組み方、初回の訪問だけ sessionStorage の制御で走る 6174 の収束アニメ、日本語の本文と英数字の見出しを混ぜる組み方、隅にある Powered by humbulls の小さな表示。この 4 つは引き継がれていました。

見て分かったこと

コードの質は、そのまま本番に出せる水準に近いです。TypeScript を厳格モードで書き、部品を分け、Tailwind v4 を使っています。ChannelCard という部品に gradient、noiseSeed、wireframe を値として渡す設計は素直で読みやすい。SvgNoise.tsx を共通化して全部のカードで使い回しているのも無駄がありません。

ただしデータを直接書いているので、Astro 版の Content Collections のように型で守られた記事管理はできません。比較用としては十分ですが、書き続ける場所にするなら Astro 版のほうが楽です。

当初は手元で動かすだけのつもりでした。でも見に行きやすいほうが比べやすいので、node6174-codex.pages.dev として Cloudflare Pages の独立したプロジェクトに切り出し、常時公開に切り替えました。

10.4 Claude Design に 1 枚の HTML で作らせる

Anthropic Labs の Claude Design に、同じ ElevenLabs 風の指示を渡しました。1 回目は生成の途中で通信が切れて止まってしまい、やり直したら完成しました。Codex がファイルを直接書いていくのに対して、Claude Design は「Handoff to Claude Code」という機能で、一式をまとめた圧縮ファイルとして出してきます。

動くもの

node6174-claude-design.pages.dev で触れます。

受け取った一式の中身

tar.gz 形式で届いたものを lab/claude-design-version/node6174-top-elevenlabs-flavor/ に展開しました。

node6174-top-elevenlabs-flavor/
├ README.md              コードを触る AI 向けの指示書
├ chats/                 設計中のやりとりの記録
└ project/
   ├ index.html          1 枚で完結する HTML（53KB）
   └ uploads/            ElevenLabs 日本語版の画面キャプチャ 6 枚（参考用）

実装は 1 枚の HTML で完結していて、CSS も JavaScript も <style> と <script> の中に直接書かれています。フレームワークは使っていません。Astro や Next.js のような書き出しの工程が要らず、そのまま Cloudflare Pages に置けば動きます。

主な特徴（ソースを読んで拾いました）

明るいテーマと暗いテーマの両方を実装しています。既定は暗いほうで、これは ElevenLabs 日本語版に合わせたものです。切り替えた状態は localStorage（ブラウザに残る保存場所で、タブを閉じても消えません）の node6174_theme に覚えさせています。暗いほうは背景が #0A0E1A、面が #15171E、文字が #F5F5F4。明るいほうは背景が #F5F4EE、面が #FBFAF6、文字が #14161C です。
書体は Google Fonts から直接読み込んでいます。Space Grotesk、Inter、JetBrains Mono、Noto Sans JP の 4 本です。Next.js の next/font のような最適化の仕組みは使っておらず、試作寄りの選択になっています。
一式の中に、ElevenLabs 日本語版の画面キャプチャをそのまま抱えています。訪問者には表示されませんが、後からコードを触る AI が参照する前提で置かれているようです。
ロゴ “NODE 6174 //” の組み方は維持されていて、// のグラデーションは CSS で処理しています。
ヘッダーにテーマの切り替えボタンが付いています。これは Astro 版にも Codex 版にもない、この案だけの要素です。

見て分かったこと

53KB の HTML 1 枚で完結する軽さが目を引きます。Astro 版（Astro に Content Collections、部品も多数）や Codex 版（Next.js に 8 つの部品と Tailwind）と比べると、圧倒的に小さい。

性質としては、試作と本番の中間にいます。そのまま公開できる完成度はあるのに、記事を足すときは HTML を手で編集することになるので、量産には向きません。

テーマの切り替えは効きました。ElevenLabs 日本語版は暗いテーマだけですが、こちらは明暗どちらも用意して訪問者の好みに合わせられます。

「Handoff to Claude Code」の流れは、AI に続きを書かせる引き渡しに最適化されています。だから、この記事で作ったサイトに組み込むよりも、「1 枚の HTML として並べて公開する」使い方のほうが価値が出ます。

副産物として、自分を題材にする構造が一段深まった

3 案は Recipe の /recipes/media-site/ に、検証済みの試行として入れます。そこではジャンルごとの最適解まで削ぎ落とすことになる。同じ内容を Probe N02 として独立した記事にも切り出す予定で、こちらは SNS で共有できる長さに詰めます。全部の過程を生のまま抱えているのは、この Making 記事だけです。

同じ素材が、読む人に合わせて 3 つの形に展開されていく。頭の中にあった仕組みが実際に回った 1 例目で、ここは素直に嬉しかった。

比較のまとめ（4 案）

軸	Astro（いま稼働）	GPT Image 2	Codex の Next.js	Claude Design
形	動くサイト	静止画の見本	動くサイト	動くサイト
土台	Astro 5 と Content Collections	（画像なので無し）	Next.js 14、Tailwind v4、部品 8 個	HTML 1 枚で完結（53KB）
色の解釈	白に差し色の緑	くすんだ色にざらつき	くすんだ色にざらつき	くすんだ色にざらつき、明暗切替あり
テーマ	明るい方のみ	（画像なので無し）	暗い方のみ	明暗の両方を切り替えられる
Channels の見せ方	平らな細線の格子	ざらついたグラデーションと線画の格子	ざらついたグラデーション、値をカードに渡す作り	ざらついたグラデーション、CSS に直書き
動き	収束、カーソル、ホバー	動かない	収束、カーソル、ホバー	収束、カーソル、ホバー、テーマ切替
記事を増やしやすいか	◎ ファイルを足すだけ	×	△ コードに直書き	× HTML を手で編集
使いどころ	本番として稼働	デザインの参考	比較公開とコードの参考	比較公開と試作
公開先	node6174.humbulls.com	（画像なので無し）	node6174-codex.pages.dev	node6174-claude-design.pages.dev

どれを採用するか、各案の良かった発想をどう取り込むかは、章 11 にまとめます。

11. 学んだこと、残った課題、次にやること

（まだ下書きです。章 10 を書き終えてから着手します）

// まだ書き足しています

この記事は まだ終わっていないプロジェクト を、進めながら書いています。章はこれから増えるし、公開した章もあとから直します。共有も引用もご自由にどうぞ。ただ、いま書いてある結論は途中経過です。来月には逆のことを書いているかもしれません。

// 次に書く予定

- 4 案が揃ったので、どれを本番にするか決めます。決めた内容は Recipe の `/recipes/media-site/` に検証済みの試行として残します - Probe N02「トップページ 4 案の比較」を独立した記事に切り出し、SNS で共有できる長さにまとめます - 各案の良かった発想（Claude Design の明暗テーマ切替、Codex のカードにデータを渡す設計など）を Astro 版に取り込みます - 全体を振り返って、章 11 を下書きから完成に上げます