モバイルセーフデザイン

1）モバイルセーフ原則

1.親指-最初：アクションのゾーン-親指内（下のナビゲーション、右下からFAB/プライマリ）。
2.接触に優しい：分野とのターゲット≥ 40-48 px；距離≥ 8-12 px。
3.設計による安全領域：カットアウト/ジェスチャーゾーン（'env （safe-area-inset-'））を考慮しています。
4.スピードは「美」よりも重要です：LCP ≤ 2。5s、 INP ≤ 200ms、 CLS ≤ 0。1 （p75）。
5.拘束：最小モーダル、最小フォーム、最大オートコンプリート。
6.ネットワークとバッテリー：経済的なトラフィック、オフラインモード、有能なリトレイ。

2）格子、ブレークポイントおよび安全区域

ブレークポイント：≤ 480（モバイル）、481-768（垂直タブレット）、769-1024（水平タブレット）。
最大幅、フレキシブルカード1〜2列のコンテナ。
下のパネル≥ 56 px、ジェスチャーナビゲーションのための在庫。

css
:root { --inset-b: env(safe-area-inset-bottom); --inset-t: env(safe-area-inset-top); }
.app { padding-bottom: calc(16px + var(--inset-b)); padding-top: calc(8px + var(--inset-t)); }

3）テキスト、ボタン、インタラクション

テキスト：16-18 pxベース、行間1。4–1.6のライン長さ40-70の特性。
ボタン：高さ44-52 pxの明確な焦点/asset/disabled；アイコン+テキスト、アイコンだけではありません。
ジェスチャーは常に代替（ボタン/メニュー/ホットスポット）を持っています。
アニメーションは'transform/opacity'と'prefers-reduced-motion'にあります。

4）形態、キーボードおよびオートコンプリート

html
<input type="email" inputmode="email" autocomplete="email">
<input type="tel" inputmode="tel" autocomplete="tel">
<input type="number" inputmode="numeric" pattern="[0-9]">
<input type="text" autocomplete="one-time-code" />

マスクは柔らかいです（フォーマットを示しますが、入力を壊さないでください）。

5）ナビゲーションとスクリーンアーキテクチャ

ボトムナビゲーション（最大5ポイント）+「バック」ジェスチャー。
ターゲットアクションに最大3-5タップ。
重要なセクションのための「ハンバーガー」を避けてください。/segmentedタブを使用します。
UIステート：'loading/empty/error/success'-明示的に、アクションと説明付き。

6）性能および節約

コード分割と怠惰なウィジェット；チャート/カードはオンデマンドで読み込まれます。
重要なリソース-'preload'、残り-'defer'/'lazy'。
AVIF/WebP images+'srcset/sizes'、 'loading=」lazy」'。
フォント：1変数WOFF2、 'font-display： swap'、 preload only basic。
Service Worker （PWA）によるキャッシュとオフライン、'stale-while-revalidate'。

7）ネットワーク、オフラインおよびリトレイ

3G/high latency friendliness：リクエストリミット、butching、 jittered backoff。
重要なデータキャッシュと同期キューを備えたオフライン画面。
データ経済を尊重して下さい：顧客のヒント/保存データ→軽いイメージ、自動ビデオ無し。

js const saveData = navigator.connection?.saveData;
const slow = ['slow-2g','2g'].includes(navigator.connection?.effectiveType);
if (saveData          slow) enableLiteMode(); // менее тяжелые ресурсы

8）可用性（A11y）モバイルで

完全なキーボード/スイッチ制御および読解可能な焦点。
コントラスト≥ WCAG AA、代替テキスト（'alt'、 'aria-label'）。
大きなターゲットと一時停止アニメーション；ジェスチャーはボタンで複製されます。
ダイアグラムの場合-短いテキストの要約とデータテーブル。

9）暗い主題、明るさおよびhaptics

暗いテーマは、単なる反転ではありません。コントラストと色のアクセントをチェックしてください。
システムテーマ（'prefers-color-scheme'）を尊重します。
ハプティクス-投与（成功/エラー）、無効にする能力。

10）プライバシー、許可、セキュリティ

値の瞬間にのみアクセス権（カメラ→ドキュメントスキャン）。
「なぜ」の説明と許可なしのフォールバック。
パスワードの代わりにWebAuthn/biometrics；パスワードマネージャがサポートされています。
折るとき敏感な分野を隠して下さい；警告タイムアウト。

11）プッシュ通知とバックグラウンドタスク

頻繁ではない明確な価値シナリオ；静かな時間だ。
ワンタップで購読解除とプリファレンスセンターをタップします。
背景のあざ-バッテリー/ネットワークの制限がある小さな部分。

12）イメージ、媒体および適応性

サイズ指定のプレースホルダ→0 CLS。
自動再生なしでデフォルトでビデオ、字幕とコントロール付き；アダプティブビットレート。
アイコン-ベクトル（SVG）またはスプライト。1MBセットをロードしないでください。

13）スニペットと設定

html
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="theme-color" content="#11131A">

css
.card { content-visibility: auto; contain-intrinsic-size: 600px 400px; }

css
@media (prefers-reduced-motion: reduce) { { animation: none!important; transition: none!important; } }

14）テストプラン（最低）

デバイス：1 iOS+1 Android（小/中/大画面）、肖像/風景。
ネットワーク：オフライン、3G、 4G（スロットル）；セーブデータを有効にします。
可用性：VoiceOver/TalkBackスクリプト、キーボードパス、コントラスト。
パフォーマンス：Web-Vitals （RUM）、プロファイラ；大きなリスト、入力/スクロール/ジェスチャー。
安定性：回転、折りたたみ/リターン、プロセスを終了→状態を復元します。
セキュリティ：パーミッション、セッションのタイムアウト、プライベートデータの非表示、生体認証。

15）モバイルセーフメトリクス

LCP/INP/CLS （p75、モバイルのみ）。
Time-to-Action（プライマリターゲットクリック前）。
精度をタップ（近接要素の偽タップの共有）。
クラッシュフリーセッション/ANRレート（アプリケーション/webview）。
セッションごとのデータとバッテリの影響。
オプトイン/オプトアウトフラフとエンゲージメント。

16）アンチパターン

ボタン28-32 px、密なリスト、フィールドなしの「カード」-ミス。
薄い灰色の背景のテキスト12-14 px。
モーダル上のモーダル；身振り手振りのみで閉じる。
3G/Save-Dataでビデオ/アニメーションを自動再生します。
ジェスチャーのみの機能で、ボタン/メニューはありません。
セーフエリア→重なり合うコンテンツを「前髪」またはスワイプパネルで使用できます。

17）スクリーンチェックリスト

• ターゲット≥ 48 px、インデント≥ 8-12 px
• セーフエリア（'viewport-fit=cover'、 'env （safe-area-inset-）'）
• テキスト≥ 16 px、 コントラストAA、フォーカス/アセット表示
• フォーム：正しい'type/inputmode/autocomplete'、オートコンプリート動作
• LCP ≤ 2。5s、 INP ≤ 200ms、 CLS ≤ 0。1（モバイル）
• 遅延ロード重いブロック、ダウンサンプリングリスト
• オフライン画面、バックオフ付きリトレイ、セーブデータモード
• フラフと許可-オンデマンドで、説明と拒否
• ダークテーマとリダクションモーション対応
• テスト：iOS/Android、肖像/風景、3G/offline、 SRパス

18）実施計画（3回繰り返し）

• グリッドとセーフエリア、48 pxターゲット、キーボードの種類/オートコンプリート、基本的なWeb-Vitals、怠惰な画像、暗いテーマ。

• コード分割、コンテンツ可視性、オフライン+SW、セーブデータモード、リトレイ/キュー、状態回復、A11y監査。

• RUMボード、トラフィック/バッテリー分析、ハプティクス、パーミッションスクリプト、リストの改善（仮想化）、モバイルネットワークの定期的なゲームの日。

19） ミニFAQ

別の「モバイルメニュー」が必要ですか？
はい、しかし優先順位は3-5ポイントのボトムナビゲーションです。ハンバーガー-二次のために。

ボタンミスを減らすには？
目標を48 pxに増やし、周りにフィールドを追加し、垂直方向に広げ「、成功/エラー」にハプティックを使用します。

オフラインが必要ですか？
重要なシナリオでは、はい：キャッシュ、アクションのキュー、ユーザーへの正直なプロンプト。

［結果］

モバイルセーフデザインは、タッチエルゴノミクス、セーフエリア会計、パフォーマンス、可用性、およびグリッド/バッテリ抵抗の組み合わせです。チェックリストに従って、実際のユーザーとWeb-Vitalsを測定し、プライバシーとシステム設定を尊重します。インターフェースはあらゆるモバイルデバイスで便利で信頼性が高くなります。