NaNi Execution Lab — Claude Code で 2 週間・69 ページの技術サイトを構築

背景

製造業DXの現場で積み上げてきた実行知見が、個人の経験として埋もれたままになっていた。

業務で構築した仕組みや自動化ツールを外部に共有できる場がない
技術力を客観的に示す媒体がない
継続学習を促すアウトプット先がない

これらの課題を一度に解決するため、「サイト自体がDX実行事例」 という思想のもと、個人技術サイトを構築することにした。

要件定義

区分	内容
公開コスト	完全無料（有料サービス使用時は事前確認）
更新頻度	週1回・Markdown編集レベルで非エンジニア作業
デザイン	高級感・ビジネス寄り・企業サイト水準
対応端末	PC + スマートフォン必須
個人情報	極力出さない（公開連絡先はメールのみ）
コンテンツ	製造業DX実行事例・学習ロードマップ・便利ツール

技術スタック（月額 ¥0）

┌─────────────────────────────────────────────┐
│  フロント    Astro v6 (SSG) + Tailwind v4    │
├─────────────────────────────────────────────┤
│  CMS         Content Collections (Markdown)  │
├─────────────────────────────────────────────┤
│  ホスティング GitHub Pages                    │
├─────────────────────────────────────────────┤
│  デプロイ    GitHub Actions（自動）           │
├─────────────────────────────────────────────┤
│  画像        Unsplash CDN（無料商用可）      │
├─────────────────────────────────────────────┤
│  開発        Claude Code（AIペアプロ）        │
└─────────────────────────────────────────────┘

技術	採用理由
Astro v6	SSG + Islands Architecture。SEO完璧・ページ速度最高・Markdownネイティブ
Tailwind v4	設計一貫性・学習コスト小・Astroとの親和性
GitHub Pages	完全無料・カスタムドメイン対応・Actions直結
Unsplash CDN	ローカル保存不要・高品質・商用OK
Claude Code	設計〜実装〜デバッグ〜デプロイを対話一貫で完結

Claude Code との開発プロセス

従来の「要件定義書 → 設計書 → 実装 → テスト」という分断されたフローをやめ、対話型で一気通貫 に進めた。

  自然言語での要求
        │
        ▼
  ┌──────────────────────┐
  │  Claude Code          │
  │  ・設計案の提示       │
  │  ・コード生成         │
  │  ・ビルド検証         │
  │  ・git commit / push  │
  └──────────┬───────────┘
             │
             ▼
  本番環境（GitHub Pages）
             │
             ▼
  ブラウザで動作確認
             │
             ▼
  差分指示 → ループ

典型的な対話例

「ROI計算ツールを追加したい。製造DX向けに」
→ 削減工数・不良件数・クレーム件数・受注増を入力して投資対効果を即時計算する設計でいかがですか？
「いいね、それで」
→ 実装して本番デプロイしました。/roi-calculator で確認できます

この粒度の対話を繰り返しながら、初期版から69ページ構成まで拡張した。

構築した機能・コンテンツ

NaNi Execution Lab（69ページ）
├── TOP / ABOUT
├── 事例（11件）
│   ├── 製造DX実行事例（品質・在庫・OEEなど）
│   ├── AI自動化事例（GAS・n8n・Claude API）
│   ├── ゲーム開発事例（Canvas+JS・3,468行）
│   └── 家計簿PWA（Gemini OCR + GAS）
├── ブログ（10本）
├── LEARNING（製造DX学習ロードマップ・16週4フェーズ）
├── 用語集（42語・クライアントサイド検索）
├── Tools（7ツール・全クライアントサイド動作）
│   ├── 役員提案書ジェネレーター（映画演出付き）
│   ├── Mermaid ⇄ ビジュアルフロー双方向エディタ
│   ├── JSON / CSV 変換
│   ├── QRコード生成
│   ├── 正規表現テスター
│   ├── タイムスタンプ変換
│   └── Cron式ビルダー
├── DX成熟度診断（20問）
├── ROI計算
└── ツール比較（MES / ERP / PLM）

映画級演出システム

BaseLayout.astro に 11層の視覚エフェクト を組み込み、全ページに自動適用。

#	効果	実装手法
1	初回訪問スタジオロゴ演出	sessionStorage + CSS keyframes
2	オープニング黒カーテン	固定オーバーレイ + 透過アニメ
3	上下レターボックス黒帯	fixed height:38vh + transform
4	フィルムグレイン	SVG Turbulence + mix-blend-mode:overlay
5	周辺減光ヴィネット	radial-gradient
6	マウス追従スポットライト	pointermove + RAF + lerp(0.12)
7	浮遊ダスト粒子	Canvas + 40粒子 + twinkle位相差
8	オーロラ背景	3層 radial-gradient + 30秒ループ
9	フィルムストリップ進捗バー	scroll% + 8px tick pattern
10	文字バラ撒きアニメ	TreeWalker + spanラップ + IO連動
11	画像スキャンラインreveal	IO + gold streak transform

サーバーレス・完全静的サイトでも Canvas + CSS + IntersectionObserver だけで映画水準のUXを実現できることを証明した。

工数とAI活用の効果

フェーズ	推定工数（人間のみ）	実際の工数（AI活用）	短縮率
技術選定・環境構築	16時間	2時間	88%
ベースレイアウト設計・実装	24時間	4時間	83%
コンテンツ69ページ作成	80時間	12時間	85%
映画演出・インタラクション	40時間	6時間	85%
7ツール実装	30時間	5時間	83%
デバッグ・品質向上	20時間	4時間	80%
合計	210時間	33時間	84%

従来なら数ヶ月かかる規模の成果を、実質2週間・33時間相当で実現。

ハマりポイントと解決

Astro v6 の破壊的変更

- src/content/config.ts
+ src/content.config.ts           # ファイル位置変更

- entry.slug
+ entry.id.replace(/\.md$/, '')   # API変更

- entry.render()
+ import { render } from 'astro:content'; render(entry)

base URL の内部リンク問題

GitHub Pages の base: '/nani-execution-lab' 設定時、Markdown内では ${base} が解釈されない。
→ [リンク](/nani-execution-lab/path/) のようにbase接頭辞をハードコード必須。

GitHub Actions の Node バージョン

# 失敗: Astro v6 は >=22.12.0 必須
node-version: '20'

# 成功
node-version: '22'

QRコード CDN の読込不安定

qrcode@1.5.4 の jsdelivr CDN が不安定だったため、qrcode-generator@1.4.4（純ES5・依存ゼロ）に切り替えて解決。

最終メトリクス

指標	値
総ページ数	69ページ
本番公開までの日数	初期版まで 2日
全体構築期間	約 2週間
事例コンテンツ	11件
インタラクティブツール	7個（全クライアントサイド）
学習ロードマップ	16週×4フェーズ・19ファイル
Lighthouse Performance	95+
Lighthouse Accessibility	100
Lighthouse SEO	100
月額運用費	¥0
ビルド時間	約 6〜8秒（全69ページ）

学んだこと

1. AIペアプロは「設計」から始める

「コードを書いて」より「この構成でどう思う？」から入ることで、より良いアーキテクチャが生まれる。
AIは実装者でなく 設計パートナー として最も力を発揮する。

2. 静的サイトでも映画水準は実現できる

重要なのはライブラリの多さではなく 演出の設計。Canvas・CSS・IntersectionObserverだけで高級感あるUXは実現できる。

3. 失敗も発信資産になる

Streamlit Cloud のデフォルト Python バージョン問題
GAS URL の公開漏洩リスク
Node.js バージョン起因のビルド失敗

これらの「ハマりポイント」こそが、次の誰かに最も役立つコンテンツになる。

4. サイト自体を「実行事例」にする

このサイトで紹介しているDXの思想——動かしてから磨く・仕組みを継続改善する・失敗も記録として外部化する——をサイト自体の構築で実践した。

製造業DXと個人サイト構築は、思ったより共通点が多い。

このサイトを見る

このサイト自体が、この事例の成果物です。

→ NaNi Execution Lab を見る

背景