---
source_url: https://mohkohn.co.uk/writing/html-first/
source_title: "How building an HTML-first site doubled our users overnight"
hero_image: https://mohkohn.co.uk/_astro/efe-kurnaz-RnCPiXixooY-unsplash.Bp9uDJkY.jpg
tags: html-first,web-accessibility,progressive-enhancement,astro,form-design
generated_at: 2026-06-10T16:01:24.553Z
model: claude-haiku-4-5
---
# HTML ファーストで再構築した公共サービスフォーム、完成率が倍増
公共事業会社が React アプリの失敗から HTML ファースト手法に切り替えた結果、フォームの完成率が倍増した。Astro を使った再構築により、アクセシビリティとバックエンド永続化を優先し、JavaScript なしで機能するフォームが実現した。
イギリスの公共事業会社のフォーム問題は複雑だった。顧客は古い ASP フォームか手作業プロセスのいずれかを選ぶしかなく、2 度の失敗した高額な改修がそれ以前に行われていた。最近の試みでは海外の請負業者が React アプリを構築したが、アクセシビリティの問題と localStorage の 5MB 制限下での画像アップロード失敗により 3 日で本番環境から削除された。このアプリは JavaScript を含めて 20MB のコードをレンダリング前に読み込む予定だった。
## 新しいアプローチ：HTML ファースト
新しいバージョンは Astro を使い、HTML ファースト手法で構築された。フォームはプログレッシブエンハンスメント設計により JavaScript なしで動作し、ウィザード内の各ステップが独立したページとなっていた。ユーザーが「次へ」をクリックすると、フォームが送信され、データが有効な場合は次のステップにリダイレクトされた。フォーム検証用 HTML ウェブコンポーネントは 1KB 以下で実装された。
## 成果と課題
新しいフォームの公開時、完成したフォームの数が倍増した。JavaScript ベースの分析パッケージは JavaScript 失敗によってバウンスしたユーザーを検出しないため、これらのユーザーの流入元を分析チームが把握していなかった。バックエンドセッションを保持し、ユーザーデータを決して失わないアプローチにより、開始から 1 か月後にフォームを完成させたユーザーのケースなど、予期しない利用パターンが観察された。
ただし、既存の請負業者からは「それはわれわれにとってはより多くの作業である」との懸念が表明された。Terence Eden は 20 年の業界経験を背景に、PSP ウェブブラウザで確認した公共サービス施設利用者の実情を引き合いに出し、シンプルな HTML 設計の重要性を強調している。
> 「PSP のウェブブラウザは申し訳ないほど性能が低い。遅く、頻繁にメモリ不足になり、同時に 3 タブしか開けない。しかし GOV.UK ページはシンプルな HTML で書かれている。軽量性を考慮して設計され、性能の低いブラウザでも動作するように作られている。そうしなければならない。これは万人のためのものだからだ。」
> — Terence Eden
## 筆者の見立て
- 「ローディングスピナーとグローバルな JavaScript 状態に満ちていた」と論じている
- 「このアプローチの所有権を取ることはできない」と述べている
- 古いブラウザ、接続の悪いネットワーク、支援技術を使用するユーザーをバウンスさせることは受け入れられないと解釈している
- PlayStation Portable の 3G 接続で動作するウェブアプリケーションを構築すれば、すべてのユーザーに対して動作し、30 年後もなお動作するだろうと示唆している
- form validation ライブラリの「validation-enhancer」を自分が使った中で最高だと評価している
- ソフトウェア業界の拡張段階を継続させるべく、多くの誇大宣伝と雑音が圧力をかけていると解釈している
*この記事は元記事の事実のみに基づいて自動生成されました。*
## 出典
"How building an HTML-first site doubled our users overnight"
https://mohkohn.co.uk/writing/html-first/
2026-06-10