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