static-page-stack

静的ページスタック（SOTA、2026年）

自己進化型スキル：このスキルは使用を通じて改善されます。指示に誤りがある、パラメーターがずれている、回避策が必要になった場合は、先延ばしにせず、すぐにこのファイルを修正してください。実際に再現できる問題がある場合にのみ更新してください。

このスキルを使う場面

ユーザーが、次の3つの美的要素を組み合わせた静的HTMLページを作成したい場合に使います。

• 雑誌／データジャーナリズム（The Pudding、NYT Upshot）
• 技術ドキュメント（Material／Docusaurus／Starlight）
• 計算ノートブック（Quarto／Observable／Jupyter Book）

さらに、次の3種類のSVGを埋め込みます。

• プログラムによるチャート（Vega-Lite／Observable Plot／D3）
• 手書きのインラインSVG（図解用）
• ホワイトボード風（Excalidraw／tldraw）

「静的ページを作成して」「ダッシュボードを構築して」「事後検証を設計して」「技術ドキュメントサイトをセットアップして」「どのHTML／CSSスタックを使えばよいか」「このTailwindのコードの寄せ集めは保守できない」などがきっかけになります。

おすすめのスタック（要約）

レイヤー	選択肢	代替案	理由
執筆環境	Quarto	Quartz、Jupyter Book 2／MyST	複数ページに対応し、コード＋文章＋数式＋実行機能を標準搭載。MIT。Bundesbank／BIS／USGSで使用されています
ビジュアルシステム	Open Props + ネイティブのモダンCSS	Pico.css	Tailwindのユーティリティーの寄せ集めを、セマンティックなトークン（Brotli圧縮で4 KB）に置き換えます。OKLCH＋コンテナークエリー＋light-dark()は2026年時点で本番利用可能です
タイポグラフィ	Inter + Crimson Pro + Fira Code	IBM Plexファミリー	すべてFOSSです。NYT／The Pudding級の組み合わせとして検証済みです
プログラムによるチャート	Observable Plot	Vega-Lite、ECharts	Vega-Liteよりもデフォルト設定がすっきりしており、D3に移行しなくてもニーズの約95％をカバーします。ISC。Bostockが主導しています
ホワイトボード	Excalidraw + excalidraw_export CLI	tldraw（注：商用ライセンスは年額$6k）	MIT。成熟しており、ビルド時のSVGレンダリングが機能します
プログラムによる手描き風	rough.js（控えめに使用）	roughViz、chart.xkcd	「これは探索的な内容／不確実性を示唆している」という表現に限って使います
手書きのインラインSVG	SVG内でCSS変数を使うパターン	共有アイコンには<symbol><use>	var(--token)がインラインSVG内にも適用されるため、デザイントークンを一元化できます
スクロール連動型ストーリーテリング	Closeread（Quarto標準）	Scrollama	ClosereadはQuarto向けに専用設計されています。Quartoを使わない場合はScrollama（約7 KB）が使えます

重要な補足（必ず確認してください）

2026年の「XHTML」は厳密なXHTMLではなく、セマンティックHTML5を意味します

今ではapplication/xhtml+xmlを文字どおり記述する人はいません。現代の用法における「エレガントなXHTML」とは、ビルドツールで適切な構造を保証したセマンティックHTML5を意味します。Quartoは<article>、<aside>、<figure>を使ったHTMLをそのまま出力するため、山括弧を一つひとつ手書きする必要はありません。ユーザーが「XHTML」と言った場合は、おそらく構造を厳格に保ったセマンティックHTML5を意味すると説明してください。

Tailwind 自体が問題なのではありません

問題なのは、Tailwind CDN と、その場しのぎのユーティリティクラスの寄せ集め、デザインシステムの不在、そして毎回再生成されることです。Open Props も、あらゆる要素に使えるトークンをすぐに導入できるという同じ利便性を備えていますが、インライン SVG にも引き継がれるセマンティックな CSS 変数として提供されます。スタックに一貫性をもたらすのは、この最後の特性です。

Distill は終了、Idyll は休眠状態です。推奨しないでください

• Distill.pub は 2021 年に公開を停止しました。distillpub/template リポジトリは活発に見えます（スター 972 個）が、資金調達の見通しはありません。
• Idyll-lang の意味のある最終更新は 2023 年 2 月でした。
• 2026 年における実質的な後継は Quarto の記事レイアウト + Closeread であり、Distill のフォークではありません。

tldraw には FOSS ではない商用利用条項があります

tldraw 2.x 以降は、二重ライセンスによるソース公開です。趣味用途（透かし入り、非商用）か、商用利用向けの 年間 $6,000 です。tldraw の特定の機能（インタラクティブな埋め込み、洗練された手描き風の美しさ）がコストに見合う場合を除き、デフォルトでは Excalidraw（MIT）を選んでください。

判断フロー

User wants a static page →
  ├─ Single document, code-heavy, math? → Quarto (single-file render)
  ├─ Multi-page investigation/dashboard? → Quarto with sidebar nav OR Quartz (digital garden) if cross-linking dominates
  ├─ "Pure data dashboard, no narrative"? → Observable Framework (caveat: Observable Inc layoff risk)
  ├─ "I want sidebar nav, search, code blocks"? → Astro Starlight + MDX (functional docs aesthetic)
  └─ "I want maximum flexibility, willing to design"? → Astro + custom theme + Open Props

User wants a chart →
  ├─ Static, magazine-quality default? → Observable Plot (default pick)
  ├─ Need interactivity, dynamic spec generation? → Vega-Lite
  ├─ Need polished interactive dashboards, Canvas OK? → ECharts
  ├─ Want sketchy "this is exploratory" framing? → rough.js / roughViz
  └─ Need bespoke custom path/glyph? → D3 (rare; Plot covers ~95%)

User wants a diagram →
  ├─ Architecture, flow, illustrative? → Excalidraw + excalidraw_export
  ├─ Premium aesthetic, budget for $6k/yr? → tldraw + tldraw-cli
  ├─ Inline SVG with design tokens? → Hand-author with var(--token-*)
  └─ Reused across many pages? → <symbol><use> pattern (caveat: shadow DOM blocks per-instance CSS)

具体的な移行：Tailwind CDN の寄せ集め → Quarto + Open Props

段階的な移行（複数のスポークを持つダッシュボードで合計約 5～6 週間）：

フェーズ 1 — 試験導入（1～2 週間）： 1 つのページ／スポークを Quarto に変換します。既存のパレットを再利用しつつ、Open Props のトークン + OKLCH で表現するカスタム SCSS テーマを作成し、現在の見た目を再現します。別の dashboard-quarto/ ディレクトリとしてリリースします。

フェーズ 2 — 見た目の改善（1 週間）： Inter + Crimson Pro + Fira Code に切り替え、その場しのぎの Tailwind の色を oklch.fyi で生成した OKLCH パレットの色調段階に置き換え、図表コンポーネントを標準化します。

フェーズ 3 — チャート（1 週間）： 手作業で作成したデータを含む SVG を Observable Plot の仕様に変換します。説明用の SVG（アーキテクチャ図、フローチャート）は Excalidraw に移行します。

フェーズ 4 — スクロール連動のストーリーテリング（1 週間）： メカニズムを説明するページを 2～3 個選びます。Closeread のスクロール連動型解説として書き直します。

フェーズ 5 — 展開（残りのページごとに約 1 週間）： フェーズ 1 のテンプレートを使用します。

指摘すべきアンチパターン

ユーザーのコードで以下を見かけたら、スタック内の代替手段を推奨してください。

1. 静的ページにある <script src="https://cdn.tailwindcss.com"> → 代わりに Quarto + Open Props を使用します。Tailwind CDN はツリーシェイキングを行わないため、CSS が肥大化し、デザインシステムもなく、再生成のたびに一貫性が崩れます。
2. インラインの Base64 エンコード SVG <img> → デザインシステムの値を引き継ぐには var(--token) を使ったインラインの <svg> を、共有アイコンには <svg><use href="#sym"> を使用します。
3. チャート内の 手入力した数値（「予測：189K、実績：223K」）→ CSV／parquet を読み込む Observable Plot を使用します。数値が修正された場合、チャートが再描画されます。
4. ページ間で繰り返される style="color: #abc123" → :root に OKLCH パレットを定義し、Open Props のトークン経由で公開して、var(--color-*) で参照します。
5. 編集品質の高い図を求めるプロジェクトで Mermaid／Graphviz を使うこと → Excalidraw または手作業で作成したインライン SVG に切り替えます。（Mermaid は「テキストから生成するボックスと矢印」には最適ですが、編集品質には決して達しません。）

正直に伝えるべきトレードオフ（誇張しないでください）

• Quarto のデフォルトテーマは雑誌品質ではありません。 Bundesbank 品質の出力は可能ですが、カスタム SCSS テーマに約 1～2 週間かかります。デザイン作業なしで、すぐ使える雑誌風の見た目を求めるユーザーにとって、2026 年時点でそれを本当に実現できる FOSS の選択肢はありません。最も近いのは The Pudding の svelte-starter ですが、Svelte + Vite であり（Quarto ではありません）。
• Observable Inc では人員削減後の Observable Framework の存続リスクがあります（2023 年、2025 年にもあった可能性があります）。ISC ライセンスによりフォークは可能ですが、Posit の Quarto への取り組みと比べると、企業による後ろ盾は弱いです。
• Open Props を使うにはトークンの命名規則を学ぶ必要があります。 Tailwind のように「すぐ使える」ものではありません。見返りとして一貫したデザインシステムを得られますが、最初の 1 週間は学習の負担が大きくなります。

このスキルの適用方法

1. ユーザーが実際に求めていることを特定します — 単一ページか複数ページか。コード中心か文章中心か。グラフが必要か、図だけでよいか。純粋な説明か、データ主導か。
2. 上記の判断フローを使って、フレームワーク＋グラフライブラリ＋図表ライブラリの組み合わせを選びます。
3. 特別な理由がない限り、Quarto + Open Props + Observable Plot + Excalidraw をデフォルトとして使います。
4. 比較分析をユーザーが見たい場合は、レイヤーごとのエビデンスの要約について references/full-research-synthesis.md を参照します。
5. 廃止済み、または開発が停止しているツール（Distill、Idyll、plain Tailwind CDN）は推奨しないでください。
6. 新しいプロジェクトのひな形を作成する場合は、references/sota-urls.md の URL からスターターテンプレートを取得します。

実行後の振り返り

実際に使ってみて推奨したものがユーザーのニーズに合わなかった場合（例：規模に対して Quarto のビルドが重すぎた、Observable Plot では求めるビジュアライゼーションを表現できなかったなど）は、このスキルを更新します。該当するケースと、実際にうまくいった代替案を記録してください。「次回に回す」ことはしないでください。