概要
- HTMLファースト開発 でユーザー数が一夜で倍増した事例紹介
- 公共サービス のため、どんな環境でも動作することが重視された
- フォームデータの損失防止 やアクセシビリティ対応を徹底
- バリデーション強化 と軽量なWebコンポーネント導入
- 結果として、 利用完了率が劇的に向上 し、長期的な信頼性も確保
HTMLファースト開発でユーザー数倍増の実話
- クライアントは 公共ユーティリティ企業、顧客満足度が96%以下で巨額の罰金リスク
- 2度の高額な失敗後、 Reactアプリ も顧客苦情で3日で撤去
- 既存のフォームは ローカルストレージ5MB制限 やアクセシビリティ欠如など問題山積
- Astro を用い、HTMLファーストで再構築
- JavaScript はWebコンポーネントでプログレッシブエンハンスメント
- JavaScript未対応でも全機能が利用可能
- 開発方針
- 誰でも使える公共サービス を目指す
- 低速回線や古いブラウザ でも動作保証
- フォームデータの損失防止 を徹底
- GOV.UKのような 軽量HTML設計 から着想
- PSPなど旧世代端末でも情報取得可能な設計思想
要件と実装戦略
- 各フォームセッションに ユニークID 付与
- 各ステップごとに バックエンドへデータ保存 （アップロード含む）
- JavaScript不要 でフォーム完了可能
- 古い・低機能ブラウザ 対応
- WCAG AAレベル のアクセシビリティ基準を厳守
- モダンCSS・JavaScript は体験向上のため限定利用
- 各フォームステップを 個別ページ 化
- フォーム送信→APIバリデーション→リダイレクト のシンプルな構成
- クライアントサイドでの過剰なロジック・リソース配布を排除
バリデーションとユーザー体験
- Reactバリデーションの複雑さ を回避
- HTML標準のバリデーション を活用
- 独自Webコンポーネント（ validation-enhancer）で
- HTMLフォームをラップし、モダンなUIとアクセシビリティを両立
- バリデーションエラーは aria-errormessage 等で視覚的に明示
- 1KB未満の軽量実装
- JavaScript失敗時は ブラウザ標準バリデーション へフォールバック
- さらに失敗時は バックエンド側で最終バリデーション
- 早期かつ多重のエラーハンドリングで ユーザー離脱を最小化
- validation-enhancer は一般利用向けにも公開
効果と反響
- リリース直後、フォーム完了者数が2倍に増加
- JavaScript障害で離脱していたユーザー層を獲得
- セッション管理によるデータ保持 で、1ヶ月後にフォーム完了した事例も
- 後任エンジニアから「工数が増える」との懸念もあったが
- 全ユーザー対応の重要性 を強調
- 公共サービス として、古い環境や支援技術利用者も排除しない設計を徹底
技術的・文化的提言
- モノポリー的公共サービス は全ユーザーに平等な体験を提供すべき
- Webアプリは30年後も動作する堅牢性 が重要
- ソフトウェア開発の「ワイルドウェスト」的な拡張志向を見直し
- PlayStation Portable＋3G回線 でも動作する設計こそ普遍的価値
- HTMLファースト＋プログレッシブエンハンスメント の再評価を推奨