製品1
適応的な説明
€19.99
パフォーマンス
動きの削減、ズーム、適応性
動きの設定の尊重
悪い例
デフォルトのアニメーション
バウンスするカード
このアニメーションは常にトリガーされます
良い例
配慮されたアニメーション
配慮されたカード
ホバー時のみの軽いアニメーション
説明： ユーザーは、アニメーションを減らすためにシステムを構成できます。吐き気や気を散らすことを避けるために、この設定を尊重する必要があります。
ズームと大きなフォントサイズのサポート
悪い例
固定インターフェース
製品1
短い説明
€19.99
製品2
短い説明
€24.99
良い例
📏 テキストサイズ： 100%
適応型インターフェース
製品2
適応的な説明
€24.99
説明： インターフェースは、最大200％のズームまで機能的で読みやすい状態を維持する必要があります。テキストは、ユーザーのフォントサイズの設定に適応する必要があります。
適応型およびレスポンシブデザイン
悪い例
固定デスクトップインターフェース
ロゴ
お問い合わせ
お問い合わせ先
123 Peace Street
75001 パリ
+33 1 23 45 67 89
良い例
適応型インターフェース
ロゴ
お問い合わせ
説明： インターフェースは、すべてのデバイスと向きで動作し、タッチに適切なサイズのコントロールを持つ必要があります。
Lazy Loading：可視リソースのみを読み込む
悪い例
❌ 一度にすべてを読み込む（Eager Loading）
具体例：50製品のeコマースサイトは、ユーザーが見ない可能性のあるページの下部にある画像も含めて、すべての画像をすぐに読み込みます。
📚 技術用語：Eager Loading = すべてのリソースの即座の読み込み
- 📥 問題1：50画像 × 200 KB = 10 MBをすぐにダウンロード
- ⏱️ 問題2：ページを見る前に8〜15秒の待ち時間
- 📱 問題3：不必要にモバイルデータ容量を消費
- 🔋 問題4：プロセッサにストレスをかけ、バッテリーを消耗
📄 HTML（20 KB）
🎨 CSS（50 KB）
⚙️ JavaScript（200 KB）
🖼️ 画像1可視（200 KB）
🖼️ 画像2可視（200 KB）
🖼️ ページ下部の画像3（200 KB）
🖼️ ページ下部の画像4（200 KB）
🖼️ ページ下部の画像5（200 KB）
⏱️ 合計読み込み時間：8秒
📊 消費データ：1.27 MB（600 KBが不要を含む）
良い例
✅ 段階的読み込み（Lazy Loading + Cache）
具体例：同じeコマースサイトは、最初に可視コンテンツを読み込み、その後の画像はユーザーがスクロールしたときにのみ読み込みます。
📚 技術用語：Lazy Loading = 遅延読み込み • HTTP Cache = ブラウザの一時メモリ
最適化をテスト：
📄 HTML（20 KB）- 読み込み済み
🎨 CSS（50 KB）- 読み込み済み
⚙️ JavaScript（200 KB）- 読み込み済み
🖼️ 画像1可視（200 KB）- 読み込み済み
🖼️ 画像2可視（200 KB）- 読み込み済み
🖼️ 画像3 （スクロール時に読み込み）
🖼️ 画像4 （スクロール時に読み込み）
🖼️ 既に表示された画像 （キャッシュ済み、0 KB）
⏱️ 初期読み込み時間： 2秒
📊 節約されたデータ： 600 KB（47％）
💡 アクセシビリティへの影響：
速度（FCP）
より速いFirst Contentful Paint = ページがすぐに可視
モバイルデータ
限られたデータプランまたは低速ネットワーク（3G）のユーザーに不可欠
バッテリー
ネットワーク転送が少ない = 大幅なエネルギー節約
古いデバイス
処理するリソースが少ない = 古いハードウェアで動作
説明： Lazy loading（遅延読み込み）を使用すると、ページの読み込み時にすべてをダウンロードするのではなく、ユーザーが必要とするときにのみ画像とリソースを読み込むことができます。