128KB制約下でのWebアプリケーション開発事例

要約概要

128KB制約下でのWebアプリケーション開発事例

• デザインとアクセシビリティは両立できないという通念への反論
• 極限の制約（128KB、Opera Mini、フィーチャーフォン環境）から革新的な解決策を導出
• Webフォントを廃止し、フレームワークを排除、自作の軽量ライブラリを開発
• 画像最適化（TinyPNG、MozJPEG、SVGのクリーンアップ）および全方位的なミニファイを適用
• 制約がむしろ汎用的な互換性と性能最適化につながる

---

序論: 問題認識と制約の意味

• 一部のデザイナーは、WCAGアクセシビリティと審美性は両立できないと認識している
• 著者は、制約こそが創造的な設計の土台だと主張する
• アフリカの劣悪な通信・端末環境を前提に、極端な制約を設定

---

本論

1. プロジェクトの制約条件

• 128KBのページ予算: HTML・CSS・JS・画像を含む全体の上限
• 極限のレスポンシブ設計: 240pxのフィーチャーフォンから4Kデスクトップまで対応
• 汎用的な互換性: Opera Miniベースで、JS最小化とサーバーレンダリングが必須

2. 技術的選択

• Webフォントを廃止: システムフォントを活用 → 容量節約・FOUT解消・一貫性確保

• フレームワークを排除: Reactなどは不可 → 自作の軽量ライブラリ Whizz を開発

  • 機能: DOMクエリ、イベント処理、AJAX
  • 不要なリロードを防ぎ、部分的なHTML更新方式を適用

3. 画像最適化戦略

• PNG: TinyPNGで最大圧縮
• JPEG: MozJPEGを使用し、解像度を2倍で出力 + 品質0で処理した後に縮小レンダリング
• SVG: 圧縮率と拡張性を活用し、PNGフォールバックも提供
• SVG最適化: 不要なメタデータ、重複グループ、精度過剰な座標を削除

4. 追加の最適化手法

• 全方位的なミニファイ: CSS・JS・HTMLすべてに適用し、gzip非対応ブラウザも考慮
• ブランド要件への対応: 特定書体の効果を画像・SVGの組み合わせで再現
• <defs>・<use> の活用: SVG軽量化とアウトライン効果を実現

5. 成果と検証

• 超低速ネットワークでも即時ロード
• 多様なデバイス互換性を確保: Lynx、PSP、旧型フィーチャーフォン、TVブラウザまで動作
• ユーザー体験を差別化: 最新端末では滑らかに、旧型端末でも安定して利用可能

結論: 制約が生んだ革新

• 制約は創造性を抑圧するのではなく、汎用的で堅牢な設計へと導く
• 最新端末のユーザーも、旧型フィーチャーフォンのユーザーも同じ中核機能を体験可能
• 本質的機能中心の設計哲学を確立 → 「制約は足かせではなく、革新の基盤」
• 現代開発への教訓: 無制限の資源よりも、制約の中での最適化の方がより良い結果を生む

[baeba]

韓国語翻訳サイトです。

https://emewjin.github.io/proud-128-kb

[honglu]

翻訳ありがとうございます..