【検証・テスト】ユーザーの「使いやすさ」を支えるUIテストとは？

2026.10.6 第三者検証・ソフトウェアテスト

朝晩は少しずつ涼しくなり、秋の気配を感じる季節になってきましたね。
こんにちは！品質管理（QA）チームのメンバーです。

今回は、Webサイトやアプリの「使いやすさ」を支える、UIテスト（ユーザーインターフェーステスト）についてご紹介します。Webサイトやアプリを利用していると、「ボタンが押しにくい」「文字が見づらい」「思ったように操作できない」と感じることはありませんか？

どれだけシステムの裏側が正しく動いていても、ユーザーが実際に触れる画面に問題があれば、使いにくさや不具合につながってしまいます。では、UIテストでは実際にどのようなところを確認しているのでしょうか？今回は、UIテストとは何か、具体的にどのような視点で確認しているのか、そして実際の検証事例まで紹介します。

そもそも「UIテスト」とは？

UIテストとは、Webサイトやスマートフォンアプリなど、ユーザーが直接触れる画面について、見た目や操作、表示内容が仕様・設計どおりになっているかを確認するテストです。

ユーザーが実際に画面を操作する場面を想定しながら、単に画面が正しく表示されているかだけでなく、「表示されているか」「操作できるか」「操作した結果、期待した状態になるか」という視点で確認します。

例えば、画面上に［登録］ボタンがある場合、

・［登録］ボタンが正しい位置に表示されているか
・［登録］ボタンを押下できるか
・押下後に登録処理が行われ、登録完了画面が表示されるか

といったように、ユーザーが画面を操作する流れに沿って確認します。このように、UIテストでは「画面そのもの」だけを見るのではなく、ユーザーがその画面で何をするのか、そして操作した結果どうなるのかまで含めて確認していきます。

システム開発におけるテストには、プログラムの最小単位を検証する「単体テスト」や、システム全体をつなぎ合わせる「結合テスト」など、さまざまなフェーズがあります。その中でもUIテストは、ユーザーが実際に触れる画面や操作を直接確認するため、ユーザーとの接点に近いテストの一つです。また、UIテストは「機能テスト」や「E2Eテスト」と確認する範囲が重なる部分があります。

例えば、先ほどの［登録］ボタンの例では、

「ボタンが表示されているか」、「押下できるか」だけでなく
「押下後に登録処理が正しく行われるか」まで確認しています。

この「登録処理が正しく行われるか」という部分は、機能テストでも確認する内容と重なる場合があります。つまり、UIテストと機能テストを完全に別のものとして考えるのではなく、UIテストではユーザーが触れる画面を起点として確認していくため、その確認の中で機能テストと重なる部分が出てくると考えると分かりやすいでしょう。

「機能テスト」については、以下の記事で詳しく紹介しています。気になる方は、ぜひ併せてチェックしてみてください。

【検証・テスト】機能テストについて
https://www.i-move.co.jp/third_party_verification/news/1604/

■UIテストでチェックする主なポイント

では、ここからはUIテストでよく確認するポイントを見ていきましょう。UIテストでは、画面の見た目だけでなく、ユーザーが実際に行う操作を想定しながら、表示・操作・画面遷移・入力などに問題がないかを確認します。ここでは、UIテストでよく確認するポイントをいくつかご紹介します。

・レイアウト・デザインの崩れ

まず確認したいのが、画面の見た目です。Webサイトやアプリを開いたときに、テキストや画像などの各要素が、本来配置されるべき位置に表示されているでしょうか？

他の要素と重なっていたり、画面からはみ出していたりすると、ユーザーが情報を正しく確認できなかったり、操作しづらくなったりする場合があります。そのため、テキストや画像などが正しい位置に表示されているか、他の要素と重なっていないか、指定された枠内に収まっているかなどを確認します。

例えば、以下のような状態です。

「テキストや画像が他の要素と重ならず、指定された枠内に収まって表示されている。」

また、画面サイズやブラウザによって表示が崩れることもあるため、対象となる環境ごとに確認することも重要です。

・操作性（インタラクション）

画面がきれいに表示されていても、実際に操作してみたら思ったように動かない……ということもあります。そこで次に確認するのが、ユーザーが実際に画面を操作したときの動きです。

ボタンやリンクを押下したときに、「正しい処理が行われるか」、「操作した結果が画面に正しく反映されるか」など、「操作したら、期待した結果になるか」という視点で確認します。

例えば、「［登録］ボタンを押下すると、ボタンが正しく反応し、登録完了画面が表示される。」といった確認です。

・レスポンシブ対応

WebサイトはPCだけでなくスマートフォンやタブレットなど、さまざまな画面サイズで利用されることがあります。PCでは問題なく表示されていたのに、スマートフォンで見てみると、文字が見切れていたり、ボタンが重なっていたりすることもあります。そのため、画面の幅が変わっても、コンテンツが見切れたり、ボタンや入力欄が重なったりしないかなどを確認します。

例えば、「スマートフォンの画面幅でも横スクロールが発生せず、ボタンや入力欄が画面内に収まって表示される。」といった状態です。「PCでは問題なかったのに、スマートフォンでは画面が崩れている」といった問題を防ぐためにも、重要な確認ポイントです。

・ブラウザ・OS

同じWebサイトでも、使用するブラウザやOSによって、表示や動作に違いが出る場合があります。「Chromeでは問題なかったのに、別のブラウザでは表示が崩れている」といったケースも考えられます。そのため、サービスでサポートしているブラウザやOSなど、対象となる環境で画面が仕様どおりに表示・操作できるかを確認します。

例えば、「Google Chrome、Safariなど対象ブラウザにおいて、ボタン・入力欄・画面レイアウトが仕様どおり表示され、正常に操作できる。」といった確認です。特定の環境だけで発生する表示崩れや操作不具合を見つけるためにも、環境ごとの確認が重要になります。

・入力フォームの挙動

会員登録や予約、問い合わせなど、Webサービスでは入力フォームを利用する場面が多くあります。
入力フォームでは、単に文字を入力できるかだけでなく、必須項目や入力内容に応じて、適切なエラー表示や処理が行われるかを確認します。

例えば、「必須項目を入力せずに登録しようとした場合」や、「入力できる文字数を超えて入力した場合」など、さまざまな入力パターンを確認します。

例）必須項目を空欄のまま登録すると、対象項目の近くに「○○を入力してください」などのエラーメッセージが表示され、登録処理が実行されない。

このように、UIテストでは「画面が表示されているか」だけを確認するわけではありません。ユーザーが実際に画面を操作したときに、「操作できるか」「操作した結果、期待した状態になるか」まで確認することが大切です。

QA担当者が解説！UIテストでよくある「落とし穴」と対策

UIテストは、画面を見たり実際に操作したりするだけに見えるかもしれません。しかし、実際には「ここまで確認しておけば大丈夫」と思っていても、思わぬところで不具合が発生することがあります。ここでは、UIテストで特に気を付けたい「落とし穴」と、その対策についてご紹介します。

落とし穴1：検証する端末・OS・ブラウザが多すぎる！

Webサイトやアプリは、さまざまな端末やブラウザから利用されます。「すべてのスマートフォンで確認しよう！」と思っても、世の中には非常に多くの端末やOS、ブラウザの組み合わせがあります。すべての組み合わせを確認するのは、時間やコストを考えると現実的ではありません。

一方で、対象を減らしすぎてしまうと、「PCでは問題ないのに、スマートフォンでは表示が崩れている」といった環境依存の不具合を見逃してしまう可能性があります。では、どうすればよいのでしょうか？

利用状況だけでなく、サポート対象となっているOS・ブラウザ、顧客から指定されている環境、過去に不具合が発生した環境なども考慮して、優先的に確認する環境を決めることが重要です。例えば、利用者の多くがGoogle Chromeを使用していたとしても、製品としてMicrosoft Edgeをサポートしているのであれば、Edgeも確認する必要があります。

また、過去に特定のiOSバージョンで表示崩れが発生していた場合は、その環境や類似する環境を重点的に確認するといった判断もできます。限られた時間の中で、「どの環境を必ず確認するのか」「どの環境を優先するのか」をあらかじめ整理しておくことが大切です。

落とし穴2：通常とは異なる表示設定を見落としてしまう！

普段使っている表示設定では問題なくても、端末やブラウザの設定を変更すると、レイアウトが崩れてしまうことがあります。例えば、ダークモードに対応しているWebサイトやアプリでは、設定を切り替えたことで文字と背景の色が近くなり、文字が見づらくなる場合があります。

また、ブラウザのズーム倍率や端末の文字サイズを大きくしたときに、文字が見切れたり、ボタンや入力欄が重なったりすることもあります。

そのため、通常の表示設定だけでなく、製品が対応している機能や利用環境に応じて、表示設定を変更した場合の状態も確認することが大切です。例えば、「ダークモード時の視認性」や「ブラウザのズーム、OS・端末側の文字サイズを変更した場合のレイアウト」などを、必要に応じてテスト観点に加えることができます。

落とし穴3：アクセシビリティへの対応を忘れてしまう！

UIテストでは、画面がきれいに表示されているかだけでなく、さまざまなユーザーが利用できる状態になっているかという視点も重要です。例えば、エラーや入力状態を「赤色」だけで表現していると、色の違いを認識しづらいユーザーには情報が伝わりにくい場合があります。

また、マウス操作が難しく、キーボードやスクリーンリーダーなどを利用しているユーザーにとっては、キーボードだけで操作できない画面が使いづらくなることもあります。では、どのような点を確認すればよいのでしょうか？

例えば、

・キーボードだけで主要な操作ができるか
・エラーを色だけでなく、文字でも伝えているか
・文字と背景のコントラストが十分に確保されているか

といった観点が考えられます。

アクセシビリティの確認は、すべての画面で同じように行うというよりも、製品の要件や対象となるユーザーに応じて、必要なテスト項目を取り入れることが大切です。「見た目がきれいだからOK」だけではなく、「さまざまな人が実際に使えるか？」という視点を持つことも、UIテストでは重要なポイントです。

弊社で実施したUIテストの事例

ここまでUIテストについて、さまざまな観点からご紹介してきました。では、実際の検証ではどのようなことを確認しているのでしょうか？ここでは、過去に弊社で実施した案件を例に、UIテストの流れをご紹介します。

■レンタカーサイトに新しい車種が追加されたら、どこを確認する？

ある案件で、Webサイトのドロップダウンメニューに新しい車種を追加する改修がありました。一見すると、「新しい車種が追加されて、画面に表示されればOK」と思ってしまいそうです。

しかし、UIテストでは、単に追加された項目が表示されているかだけを確認するわけではありません。まずは、ドロップダウンメニューを開き、新しく追加された車種が表示されているかを確認します。次に、実際に車種を選択してみて、正しく選択できるか、選択後に対象の詳細ページへ正しく遷移するかを確認します。

詳細ページに遷移した後も確認は続きます。車種名や乗車定員、備考、料金などの情報が仕様どおりに表示されているか、また、車両画像が正しく表示されるか、画像の切り替え操作が正常に行えるかなども確認します。

このように、一つの「車種追加」という改修でも、

「メニューに表示される」
　→「選択できる」
　　→「正しいページへ遷移する」
　　　→「必要な情報が正しく表示される」
　　　　→「ページ内の操作が正常に行える」

というように、ユーザーが実際に操作する流れに沿って確認することができます。

UIテストは「見た目だけ」を確認するものではない。今回の例からも分かるように、UIテストでは画面の見た目を確認するだけではありません。ユーザーが実際に画面を操作することを想定し、「表示されているか」「操作できるか」「操作した結果、期待した状態になるか」まで確認することが重要です。

一つの画面だけを見るのではなく、ユーザーがその画面で何をして、その結果どのような画面や情報にたどり着くのかまで考えることで、より実際の利用に近いUIテストにつながります。

まとめ：UIテストは「画面を見るだけ」のテストではない

UIテストは、画面そのものだけでなく、その画面を使うユーザーの行動まで考えて確認するテストです。「表示されているか」、「操作できるか」、「操作した結果、期待した状態になるか」。この3つの視点を持つことで、画面上の小さな違和感だけでなく、実際の利用につながる不具合にも気づきやすくなります。

この記事が、UIテストについて考えるきっかけになれば幸いです。本記事を最後までお読みいただき、ありがとうございました！