HTMLファーストのサイト構築がユーザー数を一夜にして倍増させた経緯
本記事は、ある公益事業体（ユーティリティ会社）のウェブサイト改善事例を通じて、技術的なアプローチの重要性を論じています。クライアントは、サービス申し込みプロセスにおいて、古いASPフォームか手動手続きという二つの選択肢を持っており、後者は企業にとってコストが高く、さらに規制された独占市場であるため、顧客満足度（96%以下の場合、数百万ポンドの罰金リスク）の維持が極めて重要でした。過去には、Reactアプリによる再構築が試みられましたが、顧客からのクレームや技術的な問題（ローディングスピナー過多、グローバルJavaScriptステートの複雑さ、アクセシビリティの欠如など）により失敗し、撤回されました。
筆者はこの状況を受け、大胆な判断としてAstroを用いた「HTMLファースト」のアプローチを採用しました。これは、ウェブコンポーネントに限定してJavaScriptを使用するものの、基本的にはJSなしでも完璧に機能する構造です。その設計思想は、「公共サービスであるためあらゆる機器で動作すること」「接続環境が悪い場合にも対応できること」「フォーム入力データが失われることがないこと」という点に基づいています。
特に重要な改善点として、各ステップを独立したページとし、進捗ごとにデータをバックエンドに保存する仕組み（セッション維持）を採用しました。また、フォームバリデーションの処理は、HTML標準の検証機能を利用しつつ、カスタムWebコンポーネント（validation-enhancer）で視覚的な改善を行いました。これにより、JavaScriptが失敗した場合でもブラウザのネイティブな検証にフォールバックし、最終的にAPI側で検証を行うという多層的な堅牢性を実現しました。
この改修の結果、サイトローンチ後、フォームを完了するユーザー数が倍増するという目覚ましい成果を上げました。筆者は、現代のウェブ開発が抱える「過剰なJavaScript依存」の問題点を指摘し、PlayStation Portableや3G接続といった極限環境でも動作する堅牢なHTMLファーストのアプローチこそが、真にすべてのユーザーにとって必要だと主張しています。
背景
本記事は、現代のウェブ開発における「過剰なクライアントサイドJavaScript依存」の問題点を指摘し、公共性の高いサービスサイトにおいて求められる堅牢性（ローコンディションでの動作保証）を主張しています。特に規制産業のシステム改修という文脈が、技術選定の厳格な基準となっています。
重要用語解説
- HTMLファースト: ウェブページの骨格となるHTMLを最優先し、JavaScriptに依存しない構造を指します。これにより、古いブラウザや低速環境でも基本的な機能が保証されます。
-
Webコンポーネント: カスタム要素（例：`
`）として定義され、既存のHTML要素をラップして再利用可能なUI部品を作成する技術です。JavaScriptによる複雑な処理を最小限に抑えます。 - WCAG (Web Content Accessibility Guidelines): ウェブコンテンツが障害を持つ人々を含むすべての人々によってアクセス可能であることを保証するための国際的なガイドラインです。AAレベルは、実用的なアクセシビリティ基準とされています。
今後の影響
本事例は、単なる技術選定の議論に留まらず、公共サービスや重要インフラに関わるシステム開発における「堅牢性」の再定義を促します。過度なモダン技術への傾倒が、かえってユーザー体験やアクセシビリティを損なうリスクがあるという警鐘となっています。