アプリケーションのレスポンシブWebデザインをテストすることは、モバイルデバイス全体でユーザーが一貫して優れた体験を得られることを検証するために重要です。mablでは、モバイルWebテストをトレーニングして実行し、複数のデバイスと画面の向きでWebアプリケーションを検証できます。
この記事では、モバイルWebアプリをテストするためのガイドラインをいくつか説明します。
Chromeでテストを実行する際にエミュレートするモバイルデバイスを選択する
モバイルWebテストとモバイルテストの比較
この記事では、モバイルWebテストの戦略について説明します。モバイルWebテストは、モバイルエミュレーションのChromeブラウザ内でレスポンシブWebアプリケーションと対話するブラウザテストの一種です。これらは、モバイル固有のアクションを使用してネイティブのAndroidまたはiOSアプリケーションと対話するモバイルテストとは異なります。
使用パターンを分析する
モバイルウェブのテスト戦略を立てるときは、実際の利用パターンから得られるデータを分析することから始めるのが最適です。たとえば、Google Analytics 4（GA4）では、Reportsセクション内でそのようなデータを確認できます。
User > Tech > Overviewレポートに移動して、ユーザーのデバイスごとの内訳や、最も一般的な画面解像度を確認しましょう。
GA4でデバイス使用状況を確認する
分析できるデータがない場合
既存のプロダクトであれば、プロダクトを管理する部門や、マーケティングチームに相談して、モバイルデバイスからのアクセスデータをCSVやPDFでもらえないか確認しましょう。新しいプロジェクトを開始する場合であれば、そもそも分析するデータがないため、最も人気のあるモバイルデバイスの画面解像度を検索して活用できます。
デバイス間でテストを行うための戦略を選択する
テストする画面解像度を特定したら、デバイス間でアプリケーションをテストする戦略についてチームメイトと調整してください。アプリケーションのレスポンシブデザインの動作に応じて、次のいずれかの戦略を選択できます。
デスクトップとモバイルデバイスで同じテストを実行できます
デスクトップとモバイルの違いがわずかな場合は、すべてのデバイスタイプで実行されるテストをトレーニングし、条件付きロジックを使用して違いに対応できます。たとえば、唯一の違いがメニューナビゲーションである場合、モバイルウェブブラウザで実行する際の変更に対応するために、同じテスト内で条件付きロジックを維持する方が簡単かもしれません。
モバイルデバイスでテストが成功したことに気づくかもしれません。これは、mablがHTMLには存在するものの現在のビューポートには表示されていないターゲット要素をクリックできたためです。この場合は、条件付きロジックを使用してデスクトップとモバイルの違いに対応するか、デスクトップ用とモバイルデバイス用に別々のテストを作成してください。
デスクトップとモバイルデバイス用に個別のテストを作成する
レイアウト、機能、またはユーザーエクスペリエンスがアプリケーションのデスクトップ版とモバイル版で大きく異なる場合は、デスクトップデバイスとモバイルデバイス用に別々のテストを作成する方が簡単な場合があります。
たとえば、アプリの商品フィルタリングや並べ替えのインターフェースがモバイルとデスクトップで完全に異なる場合や、特定の機能が小さい画面では完全に省略または簡略化されている場合、同じテスト内ですべてのモバイルとデスクトップのシナリオをカバーするには、多くの条件ロジックを使用する必要があります。このような場合は、デスクトップとモバイルデバイス用に別々のテストを作成して管理する方が理にかなっています。