HTMLファーストサイト構築でユーザー倍増の実例
React製フォームの失敗から学び、AstroによるHTMLファーストサイトでユーザー数を倍増させた公益事業会社の事例を紹介する。
React製のシングルページアプリケーションが公開からわずか3日で撤去される事態に追い込まれた公益事業会社が、Astroを用いたHTMLファーストのサイトに全面刷新した結果、ユーザー数を一夜で倍増させた事例が報告された。この事例は、過度なJavaScript依存の危険性と、堅牢なHTMLベースの設計が持つ実用的価値を如実に示している。
問題の背景
クライアントは規制対象の公益事業会社であり、顧客満足度が96%を下回れば巨額の罰金が科される仕組みだった。サービス申し込み手段として、古いASPフォームか、よりコストのかかる手続きをユーザーに強いていた。デジタル化の改善は急務であり、過去に2度の高額な刷新プロジェクトが失敗していた。
直近の試みとして、海外の請負業者がReactアプリケーションを構築した。このアプリは公開後3日で顧客からの苦情が殺到し、即座に撤回された。問題の本質は、アプリケーションの設計そのものにあった。
Reactアプリの問題点
著者が引き継ぎを検討したReactアプリは、多くの技術的欠陥を抱えていた。ローディングスピナーやグローバルなJavaScript状態管理が乱用され、アクセシビリティは考慮されていなかった。特に致命的だったのは、画像アップロードが必須であるフォームにおいて、すべてのフォームデータと画像をlocalStorageに保存しようとした点だ。localStorageの容量上限は5MBであり、画像データを含む実用的なフォームでは即座に限界に達する。
この設計では、ユーザーのブラウザ環境やネットワーク状態が悪化した場合、データの喪失や操作不能が発生するのは明らかだった。
HTMLファーストへの転換
著者は、Astroを採用し、HTMLファーストのサイトをゼロから構築する決断を下した。JavaScriptは存在するが、それはWeb Componentsの形で、JavaScriptなしでも完全に機能するサイトをプログレッシブエンハンスメントするためだけに使われた。
設計の根底には、以下の原則があった。このサービスは公共サービスであること、あらゆるマシンで動作する必要があること、接続が貧弱でも機能すること、一度入力されたフォームデータが絶対に失われないこと。これらの要件を満たすには、HTMLを基本とした堅牢な設計が不可欠だった。
公共サービスの思想
著者は、Terence Edenが語るロンドンの住宅給付事務所での逸話に強く影響を受けたと述べている。待合室でPlayStation Portableを手にした女性が、ゲームではなくGOV.UKの住宅給付ページを閲覧していたというエピソードだ。PSPのWebブラウザは極めて貧弱だが、GOV.UKがシンプルなHTMLで作られていたため、情報にアクセスできた。
この「誰にとっても使えること」という公共サービスの理念は、本プロジェクトの設計思想を決定づけた。フォームは、最新のスマートフォンから10年前の低スペック端末、不安定なモバイル回線まで、あらゆる環境で動作しなければならない。
導き出された要件
具体的な要件として、各セッションにユニークIDを割り当て、フォームの各ステップでデータが確実に保存される仕組みが実装された。HTMLファーストのアプローチにより、JavaScriptが無効でもフォームの進行とデータ永続化が可能になった。
結果として、サイト刷新後、ユーザー数は一夜で倍増した。Reactアプリが引き起こしていた操作不能やデータ消失による離脱が解消され、あらゆる環境のユーザーがストレスなく手続きを完了できるようになったことが、この急成長を支えたと考えられる。
編集部の見解
短期的影響：本ケースは、フロントエンドフレームワークの過度な採用がもたらすリスクを改めて浮き彫りにした。特に公共性の高いサービスや、多様なユーザー環境を想定すべきプロダクトにおいて、SPA至上主義の見直しが進むだろう。既存のReact/Angular/Vueプロジェクトでも、HTMLファーストの原則への段階的な移行や、SSR/SSGの活用が加速すると編集部は見る。
長期的視点：Web ComponentsやAstroのような軽量ツールの普及は、プログレッシブエンハンスメントの再評価につながる。1〜3年のスパンでは、フレームワークに依存しないHTMLの堅牢性が、ユーザー獲得コストや維持費に直結するという認識が広がる可能性がある。また、アクセシビリティやパフォーマンスが規制要件として厳格化される流れとも整合する。
編集部からの問い：Reactアプリがわずか3日で撤回された事実は、技術選定の段階でユーザー環境の多様性をどれだけ考慮できているかという根本的な問いを突きつける。自社のプロダクトは「PSPでも使えるか」というテストをクリアできるだろうか。HTMLファーストのアプローチは、単なるトレンドではなく、持続可能なWebの基盤として再評価されるべき時期に来ていると言えそうだ。
参考
よくある質問
- HTMLファーストとは具体的にどのようなアプローチか
- HTMLを基本とし、JavaScriptは追加の機能強化としてのみ使う設計手法。JavaScriptがなくてもフォームの送信やデータの永続化など、コア機能が完全に動作する状態を維持する。AstroやWeb Componentsを用いた実装が代表的だ。
- 本ケースでReactが失敗した主な原因は何か
- 画像アップロードを含むフォームデータをlocalStorage（5MB制限）に保存しようとした点、ローディングスピナーやグローバルな状態管理による複雑さ、アクセシビリティの欠如などが挙げられる。ユーザーの多様なブラウザ環境やネットワーク状態を考慮していなかったことが致命的だった。
- ユーザー数が倍増した理由として考えられる要因は
- フォームの操作不能やデータ消失による離脱が解消されたことに加え、低スペック端末や貧弱な回線でも確実に動作するようになったため、従来はアクセスできなかったユーザー層を取り込めたと考えられる。公共サービスにおけるHTMLファースト設計の有効性を示している。
コメント