フレームワーク活用ガイド
押さえておきたい用語
- プログレッシブ・エンハンスメント: まず基本的なコンテンツと機能を確実に提供し、環境に応じて段階的に体験を向上させる設計戦略
- グレースフル・デグラデーション: 高機能環境を前提に設計し、低機能環境では機能を落として対応する（プログレッシブ・エンハンスメントの逆のアプローチ）
- フォールバック: 特定の機能がサポートされない環境で代替手段を提供する仕組み
- コアエクスペリエンス: JavaScript無効・低速回線でも最低限利用可能な基盤体験
1
コア体験の定義
HTML+基本機能だけで完了すべきタスクを特定 → セマンティックHTML実装
こんな悩みに効く#
- 「JavaScript読み込み失敗時にページが真っ白になる」
- 「低速回線や旧端末のユーザーから使えないと報告が来る」
- 「SPAにしたら検索エンジンにインデックスされなくなった」
使い方#
コアタスクを定義する
「ユーザーがJavaScriptなし・CSS最小限の環境でも完了できるべきタスクは何か」を明確にする。ECなら「商品を見て注文する」、メディアなら「記事を読む」が該当する。このコアタスクが Layer 1（HTML基盤）で動く状態を設計の出発点とする。
セマンティックHTMLで基盤を構築する
見出し、段落、リスト、フォーム、リンクなど、HTMLの意味構造だけでコンテンツを表現する。この段階でスクリーンリーダーや検索エンジンにも正しく伝わる基盤が完成する。
CSSでプレゼンテーション層を追加する
CSSが読み込まれた環境ではレイアウト、レスポンシブデザイン、タイポグラフィ、色が適用される。CSSが読み込まれなくても、コンテンツは読める状態を維持する。
JavaScriptでエンハンスメント層を追加する
アニメーション、非同期フォーム送信、リッチなインタラクション、オフライン対応をJavaScriptで実装する。JSが無効でもフォームはsubmitで動作し、リンクは遷移するフォールバックを確保する。
具体例#
ニュースメディア — 低速回線でも読めるサイト設計
状況: 海外展開を始めたニュースサイトで、東南アジアの読者から「ページが読み込めない」との報告が急増。3G回線が主流の地域でSPAが重すぎた。
適用プロセス:
- コアタスク「記事を読む」をHTMLだけで成立させるSSR（サーバーサイドレンダリング）に移行
- CSSは記事表示に必要な最小セットをインラインで埋め込み、残りは非同期で読み込み
- コメント機能やSNSシェアのリッチUIはJS読み込み完了後にハイドレーション
成果: 東南アジアでのページ完全表示率が38%→92%に改善。記事閲覧数が月間3.2倍に増加し、広告収入も比例して向上した。
ECサイト — JS障害時も購入可能な設計
状況: CDN障害でJavaScriptの配信が1時間停止した際、SPAベースのECサイトが完全に利用不能に。約800万円の売上機会損失が発生。
適用プロセス:
- 購入フロー（商品選択→カート→決済）をプログレッシブ・エンハンスメントで再設計
- Layer 1：HTMLフォームのsubmitでサーバー側処理による購入フローを構築
- Layer 2：CSSでレスポンシブ対応とビジュアル整備
- Layer 3：JSが利用可能な環境ではSPA的なリッチUIでフォーム送信をAjax化
成果: 次回CDN障害時（45分）にも購入フローが停止せず、売上損失ゼロ。通常時のパフォーマンスもLCP（最大コンテンツ表示時間）が2.1秒→1.3秒に改善した。
社内ツール — 旧端末対応と最新機能の両立
状況: 全社で使う勤怠管理ツールだが、工場の端末が古いブラウザ（IE11互換モード）で動作しており、最新UIフレームワークが使えなかった。
適用プロセス:
- 打刻・休暇申請のコアタスクをHTML+最小限CSSで構築（Layer 1-2）
- 旧ブラウザでも打刻と申請が問題なく動作することを確認
- 最新ブラウザ向けにはLayer 3としてダッシュボード、グラフ表示、ドラッグ&ドロップでのシフト編集を追加
成果: 旧端末の工場スタッフも新システムに即日移行でき、ブラウザ更新を待たずに全社展開が完了。最新環境のオフィススタッフは生産性向上を実感し、両者の満足度が向上した。
うまくいかないパターン#
| パターン | 問題点 | 対処法 |
|---|---|---|
| JS前提の設計 | JSが読み込まれないと何も表示されない | コア機能はHTMLフォーム+サーバー処理で動かす |
| 全機能をLayer 1に | 基盤層が重くなり段階的改善の意味がなくなる | コアタスクだけをLayer 1に限定する |
| フォールバックのテスト不足 | 本番障害時に初めてフォールバックが壊れていると気づく | CI/CDにJS無効テストを組み込む |
| 「古い手法」と軽視 | SPAが主流でも回線品質や端末性能は均一ではない | ターゲットユーザーの環境データで判断する |
まとめ#
プログレッシブ・エンハンスメントは 「最低限の環境でもコア体験が動く」 ことを保証した上で、環境に応じて段階的にリッチな体験を積み上げる戦略だ。SPAやリッチUIが当たり前になった現在でも、CDN障害・低速回線・旧端末の存在は無視できない。基盤を堅実に作り込むことが、結果的にパフォーマンス・アクセシビリティ・耐障害性のすべてを底上げする。