NODE6174// の起源 — Lab から独立メディアブランド誕生まで

0. なぜ書くか

NODE6174// のサイト構造は、 それ自体が ひとつの Recipe (メディアサイト構築の最適解) であり、 同時に 最初の Probe (3 AI 比較の検証) であり、 そして 最初の Making (制作の裏側) 記事でもあります。

この Self-reference (自己参照) 構造は意図的なものです。 NODE6174// の核心は「すべての道筋が 1 点に収束する絶対的起点」。 その絶対的起点となるサイト自体の制作プロセスを実時間で記録することは、 ブランド哲学を最も強く体現する方法です。

本記事は NODE6174// が立ち上がっていく過程を、 検証 / 判断 / 失敗 / 採用すべて含めて生々しく記録します。 ここで蓄積された一次情報から、 後続の Recipe (結晶) と Probe (リーフ) が派生し、 完成物は Time Capsule の Archive に並びます。

1. リブランドの発端

最初は「Humbulls Lab」 という個人ブランド (humbulls) 配下のサブメディアとして企画していました (lab.humbulls.com 予定)。 humbulls の AI 活用ショーケースとして、 制作物アーカイブと Time Capsule (進化年表) を主軸にする構想。

しかし 2026-04-30 に Gemini との対話を通じて、 メディア名 / タグライン / コンセプトを根本から再定義することを決定しました。 humbulls 親 brand の Aged Gold 系トンマナのルールに縛られない、 独立メディアブランドとして設計し直す方針に切り替え。

きっかけは「Lab という名前が中庸すぎる」 という違和感でした。 もっと記号的でアイコニックな、 かつ「完成物のショーケース」 ではなく「最適解への収束のメタファー」 を含むネーミングが必要だと判断。

2. ネーミングとコンセプト

最終的に到達したのは 3 つの構成要素を持つ名前です:

• NODE: 散在するツールやノウハウを結合する Hub。 すべての参照が 1 点に集まる構造の象徴
• 6174: 数学定数「カプレカ数」。 任意の 4 桁を並び替え引き算で繰り返すと 最大 7 step で必ず 6174 に収束します。 究極の最適解の象徴。 ただしサイト本文では明示せず、 ロゴアニメ (数字が回転して 6174 に着地する演出) で暗示するのみ。 「伝わる人にだけ伝わる」 という方針
• //: プログラミングのコメントアウト (思考のアーカイブ) と、 ネットワークパスの起点 (例: //host/path) のダブルミーニング

タグラインは Archived Edges & Absolute Solutions.。

インスピレーション源は ElevenLabs (clean tech) と Fear of God Athletics 初期 (architectural minimalism) の融合。 哲学は Brutalist Editorial × Noiseless UI に集約しました。

3. ブランドガイドライン v0.1

正本: lab/docs/brand-node6174.md に集約。

• カラー: --node-ink #0A0A0A / --node-paper #FFFFFF / --node-cream #F4F2EE / --node-ash-50 #6B6B6B / --node-ash-20 #C8C6C2 + アクセント --node-spectrum #48EFA8 (// 記号と active 状態のみに最小限使用)
• フォント: Display は Space Grotesk (700-800)、 Body は Inter (400-500)、 Mono は JetBrains Mono (400-700、 数字は必ず monospace で tabular-nums)、 和文は Noto Sans JP
• 角丸 0、 hairline 1px border、 shadow 禁止 (深さは色の変化と border のみで表現)
• アニメは Vanilla JS + CSS keyframes に限定 (Framer Motion / GSAP は導入しない)
• 「第二の脳」 という表現はサイト本文では使わない — 中立記述「AI memory layer」 等で。 引用文脈のみ kepano/obsidian-skills を出典明記

4. ドメイン戦略

既存ドメイン状況の確認から始めました:

• kuritakazuki.com: Xserver registrar、 NS レコード空、 未使用
• humbulls.com: Squarespace registrar (旧 Google Domains 由来)、 Google Cloud DNS、 HubSpot CMS hosting

最初は Cloudflare Registrar への移管を検討しました。 しかし Squarespace の年 ¥1,400 (約 $9.5) は Cloudflare の $10.44 より むしろ安く、 価格メリットなし。 移管手続きの 5-7 日も無駄。 → 移管見送り、 Squarespace のまま維持。

代わりに Squarespace の DNS 管理画面で node6174.humbulls.com の CNAME を node6174.pages.dev に向ける、 という最小手順で完結。 既存の HubSpot 関連レコード (apex A、 DKIM CNAME、 MX) には一切干渉せず。

副次的な発見: HubSpot tracking script は portal ID で発火するため、 サブドメイン登録の有無に関係なく chat widget が表示されてしまう問題に直面しました。 解決は 3 重防御:

1. import.meta.env.PROD で dev では script 自体を emit しない
2. window.hsConversationsSettings = { loadImmediately: false } を tracking より先に設置
3. CSS で #hubspot-messages-iframe-container 系を強制非表示

これで dev は HubSpot へのリクエスト 0、 production は analytics 維持で chat widget だけ抑制、 という清潔な状態になりました。

5. 仮ロゴと Kaprekar アニメ

正規ロゴ (GPT Image 2 で生成予定) が確定するまで、 テキスト lockup の仮実装で進めることに決定。

• NODE: Space Grotesk 800、 white
• 6174: JetBrains Mono 700、 tabular-nums
• //: 30 度の forward slash 2 本、 spectrum green、 末尾の / がカーソル点滅

Kaprekar アニメは Vanilla TypeScript + 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 桁 (1000-9999、 全桁同じは除外) からスタートし、 220ms 間隔で 7 step まで実行。 必ず 6174 に到達して停止。 sessionStorage で初回ロード時のみ実行制御。

「カプレカ」 という文字列は DOM に一切出さないことに留意:

• HTML attribute は data-converge
• sessionStorage key は node-converge-seen
• 関数名は convergeStep / buildSequence

これで DevTools で見ても「カプレカ」 を直接示す痕跡が無く、 「伝わる人だけに伝わる」 設計が成立。

6. Channel 構造の設計

最初は 3 channel 構成 (Recipes / Resources / Case Studies) を想定。 しかし制作者の保存シチュエーション 7 種と訪問者の使い方 7 種を網羅的に整理した結果、 5 channel に発展:

• /01 Recipes (主役 — ジャンル別の最適解)
• /02 Time Capsule (進化年表 — 制作物 + AI Milestones)
• /03 Blueprint (AI ワークフローの OS 設計図、 v1-vN)
• /04 Probes (単発検証 = リーフ記事、 SNS シェア向け)
• /05 Library (近日 — プロンプト / テンプレ / PDF)

そして本記事を書き始める段階で、 さらに /05 に Making を追加して 6 channel に拡張することを決定 (詳細は章 9 ラウンド 3)。 Library は /06 に。

各 channel の関係は明確に直交させました:

Making (一次情報の坩堝、 制作日誌)
  ├──→ 抽象化して Recipe に切り出し
  ├──→ 単発検証として Probe に切り出し
  ├──→ 環境変化として Blueprint に記録
  └──→ 完成物として Time Capsule Archive に登録

7. Phase 1 実装と公開

技術選定は短時間で決定:

• Astro 5 (静的優先、 Content Collections の型安全)
• Cloudflare Pages (無料 tier、 SwimHub と同じスタック)
• Content Collections (workflows / archive / milestones の 3 collection で開始)
• pnpm をパッケージマネージャに、 corepack 経由で導入

実装フロー:

1. pnpm install で依存導入
2. zod schema 設計、 既存の humbulls.com Time Capsule から 18 entry を移植 (workflow 6 + archive 8 + milestone 4)
3. NodeLogo / Header / Footer / Recipe etc. の component 実装
4. pnpm build → wrangler pages deploy dist
5. Cloudflare Pages 側で Custom Domain node6174.humbulls.com を追加 → CNAME 指示
6. Squarespace DNS で CNAME を追加
7. SSL 自動発行 → 公開

公開: 2026-04-29 (実時間で約 5-6 時間)。

8. Phase 1.5 拡張

公開直後に「Recipe / Blueprint / Probes 構造を立ち上げる」 ことを決定し、 即座に Phase 1.5 として拡張:

• 新 collection 3 種追加: recipes / blueprints / probes
• /recipes /blueprint /probes ページ実装 (一覧 + 詳細)
• Blueprint 専用レイアウト: ToC sticky + 4 セクション (Frame / My implementation / How to adapt / Migration log) + Layer diagram
• Top page を再構成: Hero + Channels + Now playing + Latest Recipes + Latest Probes + AI Milestone

第 1 弾 entry:

• Recipe 3 件: Logo Design / Media Site (= NODE6174// 自身、 self-reference) / Sales Proposal
• Probe 1 件: N01 — Adobe MCP で gpt-image-2 出力の精密 SVG 化 (DNA FACTOR LP 制作中の検証)
• Blueprint 2 件: v4 (現運用 live) / v5 (これから draft、 Memory layer を AI 専用化)

9. UX 磨き込み 3 ラウンド

公開後、 訪問者視点を強化する磨き込みを 3 ラウンドに分けて実施:

ラウンド 1: 日本語化 + Channels 上昇 + Recipe カテゴリ階層

• カードタイトル / Hero H1 / セクション説明を 日本語化 (タグライン / 英語ロゴ / // eyebrow は維持)
• Top page の Channels セクションを Hero 直下に移動 (ポータル UX)
• Recipe schema の category を free string から enum に: creative / development / ops-marketing / ops-backoffice / other
• 業務効率化のサブカテゴリは on-demand 表示 (hidden 属性 + .filter-block[hidden] { display: none } で CSS の display: flex を上書き、 これは specificity の罠を解消した修正)

ラウンド 2: 「営業」 サブカテゴリ + タグ日本語化

• ユーザー指示を受けて ops-sales サブカテゴリ追加 (= マーケティング / 営業 / バックオフィスの 3 つ)
• タグ表示を内部 ID から 日本語ラベルに切替 (src/lib/tag-labels.ts で集約、 例: tool-claude-code → 「Claude Code」)
• 「filter by tag」 → 「キーワードで絞り込む」、 「all」 → 「すべて」
• type-* タグはフィルタ UI から除外 (内部メタ扱い)

ラウンド 3 (本記事): Making 追加 + Time Capsule 連携

そして本記事を書きながら進めているのが現在のラウンド 3:

• Channel /05 Making を新設 (= 一次情報源)
• /06 Library に移動 (Library 自体は近日のまま)
• Time Capsule × Making 連携: 年表に Archive 点だけでなく Making 期間バーを混在表示 (= バージョン間の「線」)
• 既存 collection に逆参照フィールド追加: archive.relatedMaking / recipes.extractedFromMaking / probes.extractedFromMaking / blueprints.relatedMaking

これにより 「Making が一次情報源、 他の channel は派生情報」 という関係性が schema レベルで明示されました。

10. 3 AI Top page 比較イテレーション

NODE6174// の最初の自己参照型検証として、 トップページデザインを 3 つの AI ツールで比較生成することを実施。 比較対象:

• Claude Code (Opus 4.7) + Astro — 現稼働 (白基調 + spectrum green)
• Claude Design — ElevenLabs カラー全踏襲 + ノイズグラデーションカード (中断、 Retry 待ち)
• GPT Image 2 + Codex 5.5 — GPT Image 2 でデザインモック画像 2 案 + Codex で Next.js 別バージョン

共通プロンプト戦略

ElevenLabs 日本語版 (elevenlabs.io/ja) の dusty muted カラー + ノイズ grain texture をブランド主要装飾として採用する方針。 5 Channel カードを次の色組合せのノイズグラデーションで表現する設計を全 AI に共通指示:

• /01 Recipes: pink-orange (情熱)
• /02 Time Capsule: blue-amber + wireframe grid (時間軸)
• /03 Blueprint: green-cream (有機的・構造)
• /04 Probes: purple-pink (探索)
• /05 Making: 別途検討
• /06 Library: neutral gray (coming)

10.1 Claude Code (Opus 4.7) + Astro — 現稼働

このサイトそのもの (https://node6174.humbulls.com)。 Astro 5 + Cloudflare Pages + Content Collections で実装。 白基調 + spectrum green アクセントの Brutalist Editorial 解釈。 ElevenLabs 風ノイズグラデーションは未採用 (現状の Phase 1.5 では Channels がフラットな grid)。

評価軸として、 他 2 案との 設計的なベースラインとして位置づけ。

10.2 GPT Image 2 — デザインモック 2 パターン

ChatGPT の画像生成モードに、 縦長 1 枚で全体 overview を出すプロンプトを投入。 2 パターンを取得:

Pattern A

Pattern B

観察

• ノイズグラデーションの dusty muted トーンは両パターンとも忠実に再現
• 5 Channel ブロックの色組合せ (pink-orange / blue-amber wireframe / green-cream / purple-pink / neutral) も指示通り
• ロゴ「NODE 6174 //」 の // 記号が 画像内では 30 度 slash として visual に成立している
• ただし 画像のため動的 (Kaprekar アニメ / cursor blink) は再現できない、 静的モックの限界
• typography の細部 (Space Grotesk vs Inter の使い分け) は画像生成 AI の解像度では曖昧
• → 「Figma に貼って参考にする」 用途として優秀。 実装には別途コード生成が必要

10.3 Codex 5.5 — Next.js 別バージョン

lab/codex-version/ に Next.js 14 App Router + React + Tailwind CSS v4 + TypeScript strict で生成。 既存の Astro 版コード (lab/src/) を Codex がローカル参照しつつ、 ElevenLabs 風カラーで再実装。

Live demo

node6174-codex.pages.dev で動作確認できます。 これは Next.js を output: 'export' で 静的エクスポート化し、 Cloudflare Pages の独立プロジェクトとしてデプロイしたもの。 比較対象として常時公開し続けます。

ローカル起動

cd lab/codex-version
npm install
npm run dev
# → http://localhost:3000

Astro 版との差分 (README.md より引用)

1. ダーク基調: ink #0F1117 / surface #15171E / paper-light #F5F5F4 を中心に再構成
2. ノイズグラデーション Channels: CSS gradient + 共通 SvgNoise の feTurbulence / feColorMatrix で grain を重ねる実装
3. Next.js / Tailwind v4 採用: Astro Content Collections ではなく App Router の Server Component 中心 + ハードコードデータ
4. 角丸 12-16px: Astro 版の直角カードから 12px / 16px の rounded surface へ
5. 単色アクセントなし: Astro 版の spectrum green は使わず、 各 Channel カードのノイズグラデーションを色の場として扱う

残された NODE6174// らしさ

• NODE 6174 // ロゴ構成
• 初回訪問のみ sessionStorage 制御で走る Kaprekar 6174 収束アニメーション
• 日本語本文と英数字 channel label の混植
• Powered by humbulls のマイクロ表示

観察

• コード品質は production-ready に近い (TypeScript strict、 component 分離、 Tailwind v4)
• ChannelCard component に gradient / noiseSeed / wireframe を data-driven で渡す設計が clean
• SvgNoise.tsx を共通化して全 Channel カードで再利用 → DRY
• ハードコードデータなので、 Astro 版の Content Collections のような型安全な entry 管理は無い (= 比較バージョンとしては妥当、 本番運用には Astro 版が優位)
• 当初はローカル動作のみの想定だったが、 比較を見やすくするため node6174-codex.pages.dev として 独立 Cloudflare Pages プロジェクトで常時公開に切替

10.4 Claude Design — Single HTML self-contained

Anthropic Labs の Claude Design (Research Preview) で ElevenLabs 風プロンプトを投入。 初回はストリーミング切断で停止したが、 Retry で完成。 ChatGPT のような Codex の代わりに、 Claude Design は 「Handoff to Claude Code」 で tar bundle として出力されました。

Live demo

node6174-claude-design.pages.dev で動作確認できます。

Bundle 構成

Handoff bundle は tar.gz 形式で lab/claude-design-version/node6174-top-elevenlabs-flavor/ に展開:

node6174-top-elevenlabs-flavor/
├ README.md                             ← Coding agents 向け instruction
├ chats/                                ← 設計対話の transcript
└ project/
   ├ index.html                         ← 単一 self-contained HTML (53KB)
   └ uploads/                           ← ElevenLabs JP のキャプチャ画像 6 枚 (context)

実装は 完全に self-contained な単一 HTML (CSS / JS が <style> <script> 内に inline)、 フレームワーク無し。 Astro / Next.js のような build 工程不要、 そのまま Cloudflare Pages に置くだけで動く。

主な特徴 (source から抽出)

1. light / dark 両 theme を実装。 デフォルトは dark (ElevenLabs JP に追従)、 localStorage node6174_theme で切替永続化:
   • dark: --bg #0A0E1A / --surface #15171E / --text #F5F5F4
   • light: --bg #F5F4EE / --surface #FBFAF6 / --text #14161C
2. Google Fonts 直接読込: Space Grotesk + Inter + JetBrains Mono + Noto Sans JP (next/font 不要、 prototype 寄りの選択)
3. bundle 内に ElevenLabs JP のキャプチャ画像を保持 (デザイン参照 context として、 訪問者には表示されないが coding agent が follow する想定)
4. ロゴ “NODE 6174 //” の構成は維持、 // のグラデーション処理は CSS gradient
5. Header の theme toggle は Astro 版 / Codex 版にない独自要素

観察

• 53KB の単一 HTML で完結するシンプルさ。 Astro 版 (Astro + Content Collections + 多数 components) や Codex 版 (Next.js + 8 components + Tailwind) と比べて圧倒的にミニマル
• prototype と production の中間性質: そのまま deploy できる完成度だが、 コンテンツ管理 (entry 追加) は手動 HTML 編集になる → 量産には不向き
• theme switcher は強い差別化要素。 ElevenLabs JP は dark only だが、 NODE6174 は light/dark 両対応で訪問者の preference に応じる
• Handoff to Claude Code フローは coding agent への引き渡しに最適化されており、 本記事のように既存サイトに組込むより、 「single HTML として比較公開する」 用途で価値が出る

副産物としての Self-reference 構造

この比較イテレーション自体が NODE6174// のコンテンツ構造を深化させています:

• Recipe /recipes/media-site/ の verifiedAttempts に 3 案を格納 (= ジャンル別最適解として抽象化)
• Probe N02 として独立記事化予定 (= SNS シェア素材化)
• 本 Making 記事 で全プロセスを生々しく記録 (= 一次情報源)

同じ素材が 3 つのコンテンツ形態に異なる読者向けに展開される、 NODE6174// の核心モデルの最初の実例です。

比較サマリ (4 案揃い)

軸	Astro (現稼働)	GPT Image 2	Codex Next.js	Claude Design
配信形態	動く web site	静的画像モック	動く web site	動く web site
実装基盤	Astro 5 + Content Collections	(画像)	Next.js 14 + Tailwind v4 + 8 components	単一 HTML self-contained (53KB)
カラー解釈	白 + spectrum green	dusty muted noise	dusty muted noise	dusty muted noise + light/dark 切替
Theme	light のみ	(画像)	dark のみ	light + dark (toggle)
Channels 表現	flat hairline grid	ノイズ gradient + wireframe	ノイズ gradient (data-driven)	ノイズ gradient (CSS inline)
動的アニメ	Kaprekar / cursor / hover	× 静的	Kaprekar / cursor / hover	Kaprekar / cursor / hover + theme toggle
量産性	◎ Content Collections で entry 追加	×	△ ハードコード	× 手動 HTML 編集
用途	本番稼働	デザイン参考	比較公開 / コード参考	比較公開 / prototype
ライブ URL	node6174.humbulls.com	(画像)	node6174-codex.pages.dev	node6174-claude-design.pages.dev

最終採用判断 + 各案の良かった発想の cherry-pick は章 11 にまとめます。

11. 学び・課題・次の iteration

(下書き、 章 10 完成後に着手)