モバイルウェブ アプリに最適な UX パターン
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
上位 1, 000 のサイトのモバイル フレンドリー性を分析したところ、53% はまだパソコン専用の操作性しか提供しておらず、82% のサイトではモバイル デバイスでのインタラクティビティに問題があり、64% のサイトにはユーザーが読みにくいテキストが含まれていることがわかりました。
次の方法では、モバイルウェブの操作性を大幅に改善できます。
- 常にビューポートを定義する
- コンテンツをビューポート内に収める
- フォントサイズを読みやすくする
- ウェブフォントの使用を制限する
- タップ ターゲットのサイズと間隔を適切に配置する
- 入力要素にセマンティック型を使用する
このたび、PageSpeed Insights でサイトのモバイル対応状況を判断するユーザー エクスペリエンス分析の提供が開始されました。この分析は、サイトのモバイル ユーザー エクスペリエンスに関する一般的な問題を確認する際に役立ちます。ぜひお試しください。
スライド: モバイルウェブ アプリに最適な UX パターン
特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用許諾されます。コードサンプルは Apache 2.0 ライセンスにより使用許諾されます。詳しくは、Google Developers サイトのポリシーをご覧ください。Java は Oracle および関連会社の登録商標です。
最終更新日 2025-07-25 UTC。
[[["わかりやすい","easyToUnderstand","thumb-up"],["問題の解決に役立った","solvedMyProblem","thumb-up"],["その他","otherUp","thumb-up"]],[["必要な情報がない","missingTheInformationINeed","thumb-down"],["複雑すぎる / 手順が多すぎる","tooComplicatedTooManySteps","thumb-down"],["最新ではない","outOfDate","thumb-down"],["翻訳に関する問題","translationIssue","thumb-down"],["サンプル / コードに問題がある","samplesCodeIssue","thumb-down"],["その他","otherDown","thumb-down"]],["最終更新日 2025-07-25 UTC。"],[],["Mobile site analysis reveals that over half (53%) are desktop-only, 82% have interactivity issues, and 64% have readability problems. Key improvements include defining a viewport, fitting content within it, maintaining readable font sizes, limiting web fonts, spacing tap targets, and using semantic input types. PageSpeed Insights offers UX analysis to identify these issues. Additional resources for UX patterns can also be found in the slides.\n"]]