これまでのモジュールでは、フォームを作成する方法、ユーザーがデータを再入力しないようにする方法、フォームデータを検証する方法を学習しました。フォームが使用可能であることを確認するにはどうすればよいですか。 フォームをテストして分析することで、この質問に答えることができます。
フォームは他のデバイスでも機能しますか？
まず、フォームがご自身のデバイスで機能することを確認します。 ただし、ユーザーが使用するデバイスには多くの種類があります。フォームが他のデバイスで機能するかどうかをテストするには、どうすればよいですか？
まず、デスクトップ デバイスでフォームをテストします。 次に、キーボードのみを使用してみます。 次に、スマートフォンでテストします。 さまざまな入力方法（キーボード、タップ、マウス）、さまざまな画面サイズ、ブラウザ、オペレーティング システムを使用して、フォームをテストしました。
他にテストできるデバイスはありますか？それらすべてでフォームをテストします。 テストに使用するデバイス、ブラウザ、ブラウザのバージョン、オペレーティング システムの種類が多いほど、テストの精度が向上します。
テストサービスを使用すると、さまざまなブラウザ、ブラウザのバージョン、デバイス、オペレーティング システムでフォームをテストすることもできます。BrowserStack は、さまざまなブラウザ、デバイス、オペレーティング システムでテストできるように、オープンソース プロジェクト用の無料のテスト アカウントを提供しています。
フォームが他のユーザーにも機能するかどうかをテストするには、どうすればよいですか？
最初のフォームの準備が整いました。うまく機能するように、多くの時間を費やしています。フォームが他のユーザーに使用可能であることを確認するにはどうすればよいですか。 最初のステップとして、友人や同僚にフォームへの記入を依頼します。
横に並ぶか、画面を共有します。 これにより、フォームでユーザーが行った操作を確認できます。フォームへの記入を確認します。 何をしていて、何が問題なのかを声に出して言ってもらいます。 タスクを完了したら、参加者に質問します。 入力すべき内容は明確でしたか。 フォームの入力で何か問題は発生しましたか？ 不明な点はありましたか。 これらの質問は、より優れたフォームの作成に役立ちます。
フォームのパフォーマンスはどのように測定できますか。
フォームを他のユーザーが使用できることを確認しました。 次のステップとして、フォームのパフォーマンスを測定します。そのために利用できる無料ツールがあります。いくつか見ていきましょう。
PageSpeed Insights（PSI）
PSI はサイトのパフォーマンスを測定し、改善方法のヒントを提供します。
試してみる: PageSpeed には、ラボデータとフィールド データを使用したパフォーマンス レポートが用意されています。サイトの表示が速いということは、フォームが使用可能であることを示す最初の兆候です。 サイトの読み込み速度が上がっていない場合は、PSI は、パフォーマンスを向上させるための最適化案を表示します。
PSI で以前にテストしたサイトのレポートを再度確認します。 Core Web Vitals に関する情報をご覧ください。 これは、サイトが Core Web Vitals の条件を満たしている場合の概要です。 Core Web Vitals は、ウェブページでのユーザー エクスペリエンスの把握に役立ちます。
灯台
Lighthouse を使用すると、パフォーマンス、検索エンジン最適化（SEO）、おすすめの方法、ユーザー補助の問題を特定できます。
Lighthouse の使用方法はいくつかあります。1 つの方法は、DevTools で直接実行することです。Chrome でフォームの URL を開き、DevTools を開いて、[Lighthouse] タブに切り替えて、監査を実行します。
PSI のパフォーマンス指標が表示されます。さらに、サイトが SEO、ベスト プラクティス、ユーザー補助の問題に照らしてチェックされます。 フォーム コントロールにラベルを接続するのを忘れた場合 Lighthouse で警告が表示され、問題を解決するためのガイドが提供されます。
一般的な問題を特定するためのツール
一般的な問題を特定するためのツールは多数あります。一つは、フォームのトラブルシューティング拡張機能を使用する方法です。autocomplete 属性の欠落、標準以外の属性、ラベルの欠落または空のなどの警告が表示されます。
WAVE や axe などのユーザー補助評価ツールを使用することもできます。これらのツールにより、ラベルの欠落、ラベルとフォーム コントロール間の接続の欠落、色のコントラストが不十分、その他多くのユーザー補助の問題が通知されます。
フォームの利便性をどのようにモニタリングしますか？
フォームの実際のユーザー エクスペリエンスをモニタリングすると、新しい問題をすばやく特定できます。フォームをモニタリングする方法を見てみましょう。
PSI
エクスペリエンスをモニタリングする方法の一つは、PSI を再び使用することです。PSI API を使用して独自のモニタリング ツールを構築できます。その方法については、PageSpeed Insights API をご覧ください。
指定された URL で利用可能な場合、PSI には Chrome ユーザー エクスペリエンス レポート（CrUX）データセットのデータが含まれます。この方法では、レポートでフィールド データを直接確認することもできます。
灯台
Lighthouse は、コマンドライン ツール、ノード モジュール、Lighthouse CI ツールと組み合わせて使用できます。Lighthouse CI を使用したパフォーマンス モニタリングでは、GitHub Actions などの継続的インテグレーション システムに Lighthouse を追加する方法について説明します。
サイトを測定およびモニタリングするためのtoolsは、他にも多数あります。ウェブツールとして利用できるもの、コマンドラインで監査を実行できるもの、ツールに統合するための API を提供するものもあります。
フォームを分析する方法
実際のユーザーでフォームをテストし、フォームを測定およびモニタリングする方法を学習しました。 ユーザーに関する統計情報と、フォームでのユーザー操作に関する統計情報は、どのように収集できますか。 分析ツールを使用できる。そのうちの 1 つを見ていきましょう。その仕組みは、
分析
使用できるツールの一つに、Google アナリティクス（GA）があります。設定が完了すると、サイトの各ページに挿入する JavaScript スニペットを取得できます。ここから、サイトがどのように利用されているかを把握できます。
フォームが表示されたページにアクセスしたユーザーの数 何人がフォームに入力し、次のページに進んだか。 これらの質問に対する答えは、分析ツールを使用して得られます。
また、より高度な分析レポートを設定することもできます。 [送信] ボタンをクリックしたユーザーの数をトラッキングする イベントを定義して統合することで、これを分析できます。
さまざまな分析ツールが利用できます。ミニマルなものもありますが、個別化の多くのオプションを提供しているものもあります。さまざまなツールを試して、ニーズに最適なものを見つけてください。
理解度をチェックする
フォームのテストに関する知識をテストする
フィールド データとは
RUM は以下から指標を収集します。