BUILD ORBITINTERACTIVE LAB
Menu
↑↓ 選択 · Enter 開く · Esc 閉じる · B Blueprint

LAB / RULE-BASED ARCHITECTURE

作りたいものから、壊れにくい構成へ。

10個の条件をブラウザ内だけで照合し、フレームワーク、JS予算、記事管理、配信、品質ゲートを整理します。正解の自動決定ではなく、入力条件に基づく設計補助です。

RECOMMENDED ORBIT / balanced

Editorial Islands

検索意図の目安：編集と操作の両立（Editorial Islands）

読み物と操作を分離し、同じ情報モデルで接続する構成

Architecture
完全静的出力を基盤に、状態を持つ機能だけをIslandへ分離
Framework
Astro + TypeScript
JS budget
初期80KB gzip以内。本文とナビゲーションはJSなしで成立
Content
小さなMarkdown/MDX collection。過剰なCMSは導入しない
Images
CSS/SVGを優先し、画像は寸法明示・WebP/AVIF・lazy loading
Motion
短い状態遷移のみ。読解を待たせる常時演出は使わない
Tests
schema/unit、direct route、internal link、E2E、axe
Delivery
distとuploadをSHA-256で一致させ、FTP/GitHub Pagesへ

先に作るページ

  1. トップ
  2. 主要体験
  3. コンテンツ一覧
  4. Method
  5. 404

避ける実装

  • 全文をReactで描画するSPA化
  • Canvas/WebGLだけに情報を閉じる
  • 出典・更新日・未確認範囲のないAI生成文をそのまま公開する
  • 小規模なのにCMS/Functionsを先回りで導入

品質ゲート

  • format / lint / strict typecheck
  • content schema / internal link / direct route
  • OG / sitemap / internal anchor
  • keyboard / focus / reduced motion / no-JS
  • distとuploadの同一性
  • 主張・根拠・確認日・未確認範囲の記録
  • FAIL時の公開停止と直前版への復旧手順

判定理由

静的配信ではtrailing slash・直接route・納品物一致を品質ゲートにします。

一人運用では依存数と復旧手順を小さく保ちます。

高いアクセシビリティ優先度はsemantic HTML、keyboard、focus、axeと手動確認へ反映します。

速度優先では初期JS予算と画像・font strategyを厳しくします。

保守性優先ではsingle source of truth、fixture、generator、docsを残します。

代替候補と採用条件

Astro static-first: 速度と配信の制約を優先する場合

Cloudflare/Vercel Functions: 個別のserver要件が確定した場合だけ

この結果から読む

結果をコピー・共有

入力はすべてブラウザ内のみで処理し、外部へ送信しません。条件はこのブラウザに保存され、次回の訪問でも復元できます（消去は「条件を初期値に戻す」）。

Markdownプレビュー
# Build Simulator 結果: Editorial Islands

> 読み物と操作を分離し、同じ情報モデルで接続する構成

**推奨プロファイル**: 編集と操作の両立（Editorial Islands）

## 入力条件

| 項目 | 値 |
| --- | --- |
| 主目的 | 複合型 |
| 更新頻度 | 月数回 |
| 記事量 | 10〜50 |
| インタラクション密度 | 標準 |
| 配信環境 | FTP静的ホスティング |
| 運用者 | 1人 |
| 重要度 (SEO/AX/速度/保守) | 4/5/5/5 |

## 構成

- **Architecture**: 完全静的出力を基盤に、状態を持つ機能だけをIslandへ分離
- **Framework**: Astro + TypeScript
- **JS budget**: 初期80KB gzip以内。本文とナビゲーションはJSなしで成立
- **Content**: 小さなMarkdown/MDX collection。過剰なCMSは導入しない
- **Images**: CSS/SVGを優先し、画像は寸法明示・WebP/AVIF・lazy loading
- **Motion**: 短い状態遷移のみ。読解を待たせる常時演出は使わない
- **Tests**: schema/unit、direct route、internal link、E2E、axe
- **Delivery**: distとuploadをSHA-256で一致させ、FTP/GitHub Pagesへ

## 判定理由

- 静的配信ではtrailing slash・直接route・納品物一致を品質ゲートにします。
- 一人運用では依存数と復旧手順を小さく保ちます。
- 高いアクセシビリティ優先度はsemantic HTML、keyboard、focus、axeと手動確認へ反映します。
- 速度優先では初期JS予算と画像・font strategyを厳しくします。
- 保守性優先ではsingle source of truth、fixture、generator、docsを残します。

## 関連リソース

- 静的な本体に操作だけを重ねる: /patterns/static-first-enhancement/
- 答えを終点にしないコンテンツ導線: /patterns/#content-routing
- 静的ホスティングでも成立するインタラクティブ構成: /notes/interactive-static-hosting/

## 証拠と停止条件

- 主張、対象範囲、根拠、確認日、未確認範囲を分けて記録する。
- ローカルのPASSは、公開サーバー・GSC・利用者指標の確認を意味しない。
- FAILなら公開作業を止め、直前版へ戻せることを確認する。

## 公開前チェックリスト

- [ ] タイトル・description・canonical・OG画像を静的生成物として確認した
- [ ] 本文・主要導線はJavaScriptなしでも読める
- [ ] keyboard・focus・reduced motion を確認した
- [ ] sitemap・RSS・内部リンクを検証した
- [ ] dist と upload の同一性を確認した
- [ ] 重要な主張ごとに根拠・確認日・未確認範囲を記録した
- [ ] FAIL時に公開を止め、直前版へ戻す手順を確認した
- [ ] FTP/GitHub Pages向けに trailing slash と直接URLを確認した
- [ ] axeで自動チェックを通し、見出し順・ラベル・roleを確認した
- [ ] 構造化データ（Article/Breadcrumb）を可視本文と一致させた
- [ ] fixture・generator・docsを残し、復旧手順を小さく保った
- [ ] 採用プロファイル「Editorial Islands（編集と操作の両立（Editorial Islands））」の品質ゲートを通した

---
_BUILD ORBIT Build Simulatorで生成（入力はブラウザ内のみ、外部送信なし）_