kanywst · Nov 8, 2026 · Nov 8, 2026 · Nov 8, 2026 · Nov 8, 2026 · Nov 8, 2026
diff --git a/.github/workflows/freshness.yml b/.github/workflows/freshness.yml
@@ -27,12 +27,20 @@ jobs:
             exit 0
           fi
           gh issue create --repo "$REPO" --title "$title" --body-file - <<'BODY'
-          Re-verify the facts the site pins to a date, then update `src/data/asOf.ts` and the docs.
+          Re-verify the facts the site pins to a date, then update `src/data/asOf.ts` (`AS_OF` for the road map, `DX_AS_OF` for the Direct Connect deep dive and the DX price list) and the docs.
 
+          Road map
           - [ ] Site-to-Site VPN quotas and pricing — https://docs.aws.amazon.com/vpn/latest/s2svpn/vpn-limits.html
-          - [ ] Direct Connect pricing and quotas — https://aws.amazon.com/directconnect/pricing/
           - [ ] Transit Gateway and Cloud WAN pricing — https://aws.amazon.com/transit-gateway/pricing/
           - [ ] PrivateLink, Route 53 Resolver, Client VPN, Verified Access pricing
           - [ ] New launches since the last check — https://aws.amazon.com/about-aws/whats-new/networking_and_content_delivery/
           - [ ] Timeline (`src/features/timeline/data.ts`, `docs/15-timeline.md`)
+
+          Direct Connect (one price list for both pages: `src/data/dxPricing.ts` and `docs/direct-connect/10-pricing.md`)
+          - [ ] Pricing: port-hours, DTO matrix, flat-rate tiers, SiteLink — https://aws.amazon.com/directconnect/pricing/ and https://aws.amazon.com/directconnect/pricing/flat-rate/
+          - [ ] Quotas — https://docs.aws.amazon.com/directconnect/latest/UserGuide/limits.html
+          - [ ] New DX launches — the DX User Guide document history
+          - [ ] Locations and speeds (400G, MACsec) — https://aws.amazon.com/directconnect/locations/
+          - [ ] SLA — https://aws.amazon.com/directconnect/sla/
+          - [ ] DX timeline (`src/features/direct-connect/content/timeline.ts`, `docs/direct-connect/12-timeline.md`)
           BODY
diff --git a/README.ja.md b/README.ja.md
@@ -17,7 +17,7 @@
 | 2 | 交通ルール | CIDR スライダー、最長一致の案内標識、BGP、3 つのレイヤー、暗号化がどこに効くか |
 | 3 | インターネット | パブリックエンドポイントまでの道のり、S3 バケットポリシーのラボ (`aws:SourceIp` と `aws:SourceVpce`) |
 | 4 | VPN | トンネルのフェイルオーバー、VGW / Transit Gateway / Cloud WAN のスループットラボ (ECMP・大容量トンネル) |
-| 5 | Direct Connect | 区間ごとの持ち主、VIF の種類、閉域 ≠ 暗号化。詳細は [Cross Connect](https://0-draft.github.io/cross-connect/?lang=ja) へ |
+| 5 | Direct Connect | 区間ごとの持ち主、VIF の種類、閉域 ≠ 暗号化。詳細は [Direct Connect 深掘りページ](https://0-draft.github.io/on-ramp/direct-connect/?lang=ja) へ |
 | 6 | ハブ | 規模ラボ (VPC × リージョン × 拠点を 4 つの設計で比較、クォータつき)、アプライアンスモード |
 | 7 | SD-WAN | カプセル化の断面図 (アタッチメントの中の GRE)、Connect の容量ラボ |
 | 8 | 経路選択 | 同じ経路でもハブが違えば答えが違う: VGW・Transit Gateway・Cloud WAN の判定はしご |
@@ -32,20 +32,42 @@
 
 すべての数字の根拠は [`docs/`](docs/README.md) (出典つき、英語) にあります。2026-10-10 時点の AWS 公式ドキュメント・What's New・Price List API で確認済み。
 
-On-ramp は「全部の道の地図」、[Cross Connect](https://github.com/0-draft/cross-connect) はそのうち 1 本 (Direct Connect) を掘り下げたものです。ここの Direct Connect の出口は要約して Cross Connect にリンクしています。
+## Direct Connect 深掘り
+
+地図は「全部の道」、2 ページ目の **[Direct Connect を深掘り](https://0-draft.github.io/on-ramp/direct-connect/?lang=ja)** はそのうち 1 本を部品ごとにたどります。地図の Direct Connect の出口は要約して、そちらにリンクしています。2026-11-08 までは別サイト [0-draft/cross-connect](https://github.com/0-draft/cross-connect) でした。調査ノートは [`docs/direct-connect/`](docs/direct-connect/README.md) にあり、Direct Connect の料金表はサイト全体でここ 1 つだけです (`src/data/dxPricing.ts`、説明は [`docs/direct-connect/10-pricing.md`](docs/direct-connect/10-pricing.md))。
+
+| セクション | インタラクティブ要素 |
+| --- | --- |
+| なぜ難しい? | 4 つの根本原因、用語をタップで解説できるレイヤー図、だれが何を持っているか、つまずきポイントと解説先へのリンク |
+| 概要 | ルーター、キャリア回線、ケージ、クロスコネクト、DX ルーター、VIF、ゲートウェイをクリックで解説 |
+| 接続 | 帯域ラダー、専用 vs ホスト型、LOA-CFA 発注フローのステップ表示 |
+| LAG・MACsec | LAG メンバーを切断して最小リンク数の挙動を確認、`should_encrypt` と `must_encrypt` の違い |
+| VIF | プライベート / パブリック / トランジットを切り替えて到達先を表示 |
+| DX ゲートウェイ | VGW / TGW / Cloud WAN モード、許可プレフィックスラボ、SiteLink の切り替え |
+| BGP | 経路選択ラボ: プレフィックス長、`7224:7x00` コミュニティ、AS_PATH プリペンド、ホームリージョン、VPN バックアップ、行きと帰りが食い違うときの非対称ルーティング警告 |
+| 冗長性 | Maximum / High / Dev-Test / Classic モデルの障害シミュレーター |
+| セキュリティ | MACsec・IPsec・TLS がそれぞれ守る区間 |
+| 運用 | はい / いいえで進むトラブルシューティング、アラームを設定すべきメトリクス |
+| 料金 | 定価ベースの月額シミュレーター、定額料金の損益分岐 |
+| 設計 | 7 つの質問でトポロジーを提案、アンチパターン |
+| クイズ | よくある思い込み 11 問の「ほんと? うそ?」 |
+| 年表 | 2011〜2026 年のリリース |
+| 用語集 | 各用語の英語・日本語の正式名と、混同しやすい用語 |
+
+深掘りページの内容は 2026-10-12 時点の AWS 公式ドキュメントで確認済み。
 
 ## 開発
 
 Node.js 24 が必要です。
 
 ```bash
 npm ci
-npm run dev        # http://localhost:5173/on-ramp/
+npm run dev        # http://localhost:5173/on-ramp/ (深掘り: /on-ramp/direct-connect/)
 npm run check      # 型チェック・lint・整形・markdownlint・テスト・ビルド
 npm run test:e2e   # 実ブラウザでの確認 (要: npx playwright install chromium)
 ```
 
-ソースは機能単位です。`src/features/<セクション>/` にセクション本体・ラボ・その裏の純粋関数 (隣に Vitest のテスト) があり、共通 UI は `src/components/`、経路データとナビは `src/data/`、言語切り替えは `src/i18n/` にあります。
+ソースは機能単位です。`src/features/<セクション>/` にセクション本体・ラボ・その裏の純粋関数 (隣に Vitest のテスト) があり、共通 UI は `src/components/`、経路データとナビは `src/data/`、言語切り替えは `src/i18n/` にあります。深掘りページは 2 つ目の Vite エントリ (`direct-connect/index.html` → `src/direct-connect.tsx` → `src/app/DirectConnectApp.tsx`) で、セクションは `src/features/direct-connect/` にあります。
 
 ## CI
 

diff --git a/README.md b/README.md
@@ -17,7 +17,7 @@ Every way from a corporate network into AWS, drawn as a road map. A bilingual (E
 | 2 | Rules of the road | CIDR slider, longest-prefix gantry signs, BGP, the three layers, where each kind of encryption applies |
 | 3 | Internet | Hop-by-hop walk to a public endpoint; S3 bucket-policy lab (`aws:SourceIp` vs `aws:SourceVpce`) |
 | 4 | VPN | Tunnel failover stepper; throughput lab for VGW, Transit Gateway and Cloud WAN (ECMP, large tunnels) |
-| 5 | Direct Connect | Who owns which stretch, VIF types, 閉域 ≠ 暗号化 — then deep links into [Cross Connect](https://0-draft.github.io/cross-connect/) |
+| 5 | Direct Connect | Who owns which stretch, VIF types, 閉域 ≠ 暗号化 — then deep links into the [Direct Connect deep dive](https://0-draft.github.io/on-ramp/direct-connect/) |
 | 6 | Hubs | Scale lab (VPCs × Regions × sites across four designs, with quotas); appliance-mode stepper |
 | 7 | SD-WAN | Encapsulation cutaway (GRE inside an attachment); Connect capacity lab |
 | 8 | Path selection | Same routes, three hubs, three answers: VGW vs Transit Gateway vs Cloud WAN decision ladder |
@@ -32,20 +32,42 @@ Every way from a corporate network into AWS, drawn as a road map. A bilingual (E
 
 The research behind every number lives in [`docs/`](docs/README.md), with sources. Facts were verified against AWS documentation, What's New posts and the AWS Price List API on 2026-10-10.
 
-On-ramp is the map of every road; [Cross Connect](https://github.com/0-draft/cross-connect) is the deep dive into one of them (Direct Connect: VIFs, BGP communities, resiliency, MACsec, pricing). The Direct Connect exit here summarizes and links there instead of repeating it.
+## Direct Connect deep dive
+
+The map is every road; the second page, **[Direct Connect, up close](https://0-draft.github.io/on-ramp/direct-connect/)** ([日本語](https://0-draft.github.io/on-ramp/direct-connect/?lang=ja)), drives one of them part by part. The Direct Connect exit on the map summarizes and links there instead of repeating it. It was the separate [0-draft/cross-connect](https://github.com/0-draft/cross-connect) site until 2026-11-08; its research notes are in [`docs/direct-connect/`](docs/direct-connect/README.md), and its Direct Connect price list is now the only one on the site (`src/data/dxPricing.ts`, documented in [`docs/direct-connect/10-pricing.md`](docs/direct-connect/10-pricing.md)).
+
+| Section | Interactive part |
+| --- | --- |
+| Why is it hard? | The four root causes, a layer map with tap-to-define terms, who owns what, and the common traps linked to where each is untangled |
+| Overview | Clickable end-to-end path: router, carrier, cage, cross connect, DX router, VIFs, gateways |
+| Connections | Speed ladder, dedicated vs hosted, step-by-step LOA-CFA ordering |
+| LAG and MACsec | Cut LAG members and watch minimum links; `should_encrypt` vs `must_encrypt` |
+| Virtual interfaces | Switch private / public / transit and see what each reaches |
+| Direct Connect gateway | VGW / TGW / Cloud WAN modes, allowed-prefix lab, SiteLink toggle |
+| BGP | Path selection lab: prefix length, `7224:7x00` communities, AS_PATH prepend, home Region, VPN backup, and an asymmetric-routing warning when your outbound choice disagrees with AWS |
+| Resiliency | Failure lab for the Maximum / High / Dev-Test / Classic models |
+| Security | Which segment MACsec, IPsec and TLS protect |
+| Operations | Yes/no troubleshooting tree, metrics worth an alarm |
+| Pricing | Monthly estimate from list prices, flat-rate break-even |
+| Patterns | Seven questions to a topology, anti-patterns |
+| Quiz | Eleven myth-or-fact cards on the most common misconceptions |
+| Timeline | 2011–2026 launches |
+| Glossary | Every term with its official English and Japanese console name and what it is often confused with |
+
+Facts on the deep dive were verified against AWS documentation on 2026-10-12.
 
 ## Development
 
 Requires Node.js 24.
 
 ```bash
 npm ci
-npm run dev        # http://localhost:5173/on-ramp/
+npm run dev        # http://localhost:5173/on-ramp/ (deep dive: /on-ramp/direct-connect/)
 npm run check      # typecheck, lint, format, markdownlint, tests, build
 npm run test:e2e   # real-browser checks (needs: npx playwright install chromium)
 ```
 
-The source is organized by feature: `src/features/<section>/` holds a section, its labs and the pure logic behind them (with Vitest tests next to it). Shared UI lives in `src/components/`, route data and navigation in `src/data/`, and the language switch in `src/i18n/`.
+The source is organized by feature: `src/features/<section>/` holds a section, its labs and the pure logic behind them (with Vitest tests next to it). The deep dive is a second Vite entry (`direct-connect/index.html` → `src/direct-connect.tsx` → `src/app/DirectConnectApp.tsx`) whose sections live in `src/features/direct-connect/`. Shared UI lives in `src/components/`, route data and navigation in `src/data/`, and the language switch in `src/i18n/`.
 
 ## CI
 

diff --git a/direct-connect/index.html b/direct-connect/index.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Direct Connect, up close — On-ramp</title>
+    <meta
+      name="description"
+      content="AWS Direct Connect in depth: connections, LAG and MACsec, virtual interfaces, Direct Connect gateway, BGP, resiliency, security, operations and pricing, each with a lab. Bilingual (EN/JA)."
+    />
+    <meta name="theme-color" content="#006b4f" />
+    <script>
+      // Apply a saved theme before first paint so it never flashes.
+      try {
+        const t = localStorage.getItem("on-ramp:theme");
+        if (t === "light" || t === "dark") document.documentElement.dataset.theme = t;
+      } catch {}
+    </script>
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Overpass:wght@400;600;700;800;900&family=Overpass+Mono:wght@400;600&family=BIZ+UDPGothic:wght@400;700&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/direct-connect.tsx"></script>
+  </body>
+</html>