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

PATTERN / STATIC-FIRST ENHANCEMENT

静的な本体に操作だけを重ねる

Astroで本文と検索入口を静的HTMLへ残し、filter、診断、URL stateだけを小さなIslandへ分ける設計を、実装・失敗例・公開前チェックまで整理します。

執筆・検証：cig4r · 確認日：2026-09-07

結論：静的HTMLだけで読者の目的が成立するところまで先に作り、操作は状態が変わる範囲へ閉じ込めます。これが検索、no-JS、直接URL、性能を同じ土台で扱う境界です。実例では、説明・判定・配信物のどれを証拠にするかまで分けて確認します。

どんな問題を解決するか

情報、導線、判断基準をHTMLに残し、検索・状態共有・視覚化だけを軽く拡張する型。

この個別ページは、5つのPatternを比較するDesign Patternsハブから一歩進み、静的な本体に操作だけを重ねるを採用する条件と実装の境界を確認するためのページです。

採用すべき条件

  • 本文、一覧、判断基準をbuild時に確定できる
  • 操作が検索・filter・診断・共有URLなど局所的である
  • JavaScript停止時の代替導線を明示できる
  • 初期HTMLに主題、前提、次の行動を残せる

避けるべき条件

  • ログイン後の非公開データがないと内容が成立しない
  • サーバー側の認証・決済・最新在庫が主目的である
  • 静的fallbackを検証する時間を確保できない
  • 操作結果そのものが唯一の説明で、HTMLへ戻せる判断材料がない

情報構造

  1. ページの目的と結論をHTMLへ出す
  2. 記事・表・FAQ・関連リンクをAstroで生成する
  3. 操作の入力、結果、URL stateを別の小さな責務として切り出す
  4. 操作が止まったときの読み物・一覧・次のリンクをnoscriptまたは本文へ残す
  5. 主張・根拠・更新日・次の行動を、結果画面だけに閉じ込めない

実装構成

  • Astroのページとcontent collectionで初期HTMLを生成する
  • Reactは診断、検索、filterなど状態を持つUIだけへclient directiveを付ける
  • 判定はUIから分離した純粋関数にし、同じ入力へ同じ結果を返す
  • 共有URLは短い設計情報だけをURLSearchParamsへ保存し、個人情報を入れない
  • dist生成後にcanonical、sitemap、OG、uploadの同一性を確認する
<article>
  <h2>静的な結論</h2>
  <p>JavaScriptがなくても、この説明と次のリンクを読めます。</p>
  <div id="filter-root" data-region="enhancement"></div>
</article>

<FilterIsland client:visible />

no-JSの代替

  • 一覧や記事本文を初期HTMLへ出し、filterがなくても全件を読めるようにする
  • 診断の質問と判断観点を本文へ残し、結果計算だけを拡張扱いにする
  • 操作が使えないことと、代わりに読む場所をnoscriptで説明する
  • 無効なURL stateは安全な既定値へ戻し、URLをHTMLとして描画しない

アクセシビリティ

  • 操作はbutton、移動はa、質問群はfieldsetとlegendを使う
  • 結果更新はaria-liveで通知し、色だけで状態を示さない
  • focus visible、見出し順、320pxのreflow、reduced motionを確認する

性能

  • 記事ページへReactを追加せず、静的HTMLのまま配る
  • client:visibleやclient:idleを用途に合わせ、初期JSを増やさない
  • データをHTMLとクライアントへ二重送信しない
  • 外部APIが必要な責務は静的拡張の成功条件に含めず、別の運用境界として記録する

失敗例

  • 検索結果をJavaScriptで描画し、直接URLの初期HTMLが空になる
  • 動くカードを追加した結果、本文の結論とリンクが見えなくなる
  • URL stateへ入力値をそのまま入れ、共有時に個人情報が残る
  • ビルド済みHTMLとuploadの片方だけを更新し、直接URLの確認を省く

採用Project

  • Local AI CompassWindowsでローカルAIを始める人へ、PC条件、導入、GGUF選び、トラブル解決をつなぐ診断入口。
  • BUILD ORBITこのサイト群の制作判断、関係、品質ゲートを探索できるAIサイト制作インタラクティブ・ラボ。
  • 中古PC購入判断ツール | ToolCompass中古PCを買う前に、スペック・価格・用途を照らし合わせ、見送る条件まで確認する初心者向け購入支援。

Local AI Compassの診断・ガイド・静的配信の判断過程は、Local AI Compassのケーススタディで実コードと公開データに照らして確認できます。

関連Note

公開前チェックリスト

  • JS無効時に目的、本文、主要リンク、代替導線が読める
  • 直接URL、戻る・進む、共有URLの復元が成立する
  • 320px、390px、200% zoomで横溢れや固定headerの重なりがない
  • 新しいIsland、依存、画像、bundleが必要最小限である
  • build後のHTMLとuploadの内容が一致する
  • claim、scope、evidence、freshness、next actionをページ内で照合できる

FAQ

静的HTMLに操作を足すとSPAになりますか

なりません。HTMLの本体をルートごとに生成し、必要な範囲だけをIslandとしてhydrateするなら、ページ全体をSPAへ移す必要はありません。

no-JS fallbackはどこまで作りますか

本文、結論、入力条件、判断の観点、主要リンクまでです。再計算や高度なfilterまで同じ体験にするのではなく、読者が次へ進める最低限の意味を残します。

AstroでReactを使う場所はどう決めますか

状態が変わるUIか、キーボード・履歴・共有URLを含む操作かで判断します。見出し、記事、FAQ、パンくずはAstro/HTMLのままにします。