Google Stitch で作ったUIを100人にテストしてもらった結果

「AIが作ったUIって、本当にユーザーに使えるのか」——この問いに答えるために、実際にテストをしてみた。

Google Stitch で作ったアプリのUIプロトタイプを、ユーザーテストプラットフォーム経由で100人に使ってもらい、タスク完了率・迷いポイント・主観的な感想を集めた。今回の記事はその結果報告だ。

テストの概要

対象は個人向けの家計管理アプリのUIプロトタイプ。主要5画面(ダッシュボード・支出入力・カテゴリ別グラフ・設定・通知一覧)を Google Stitch で生成し、ブラウザで動くHTMLとして用意した。

参加者100人には3つのタスクを依頼した。「今月の食費を入力する」「先月の外食費を確認する」「通知をオフにする」の3つだ。タスク完了率・所要時間・迷いポイントのレコーディング、そして使用後のNPS(推奨度)スコアを取得した。

タスク完了率の結果

3タスクの完了率は次の通りだった。

  • 「今月の食費を入力する」:完了率88%、平均所要時間47秒
  • 「先月の外食費を確認する」:完了率74%、平均所要時間83秒
  • 「通知をオフにする」:完了率91%、平均所要時間32秒

「通知をオフにする」は設定という明確な場所があるため完了率が高かった。一方「先月の外食費を確認する」は複数の経路が考えられるため、ナビゲーションで迷う人が多かった。

迷いが集中したポイント

テスト映像を分析すると、迷いが集中したポイントが明確だった。

最も多かったのは「グラフ画面へのナビゲーション」だ。ダッシュボードから月別グラフへの導線が直感的でなく、タブとボタンが混在していて「どちらを押せばいいかわからない」という状況が多発した。Google Stitch の生成では「グラフ」と「ダッシュボード」が別タブとして分かれていたが、ユーザーは「ダッシュボードの中にグラフがある」と思い込んでいたようだ。

もう一つの迷いポイントは「入力フォームのカテゴリ選択」だった。ドロップダウンで選ぶ想定だったが、「タップして選ぶ」という操作が直感的に見えず、タップせずに画面を眺めるユーザーが複数いた。

NPSスコアと主観的感想

使用後のNPSスコアは平均+32(-100〜+100のスケール)。SaaSプロダクトの平均的なNPSが+30〜40程度とされることを考えると、「AIが生成したUIのプロトタイプ」としては十分に及第点の結果だった。

主観的感想で多かったのは「シンプルで見やすい」(62人)という肯定的な評価。一方「どこに何があるかわかりにくい」(23人)という課題も出た。「見た目の整合性」は高評価だったが「情報の見つけやすさ」に課題があるという構図だ。

テスト結果をプロンプトに反映した

テスト結果を受けて、改善版のUIを Google Stitch で再生成した。「ダッシュボードとグラフを一つの画面に統合」「カテゴリ選択をチップ型ボタンに変更」という二点を改善の軸にした。

改善版を同じ20人に再テストしてもらうと、「先月の外食費を確認する」タスクの完了率が74%から89%に改善し、所要時間も83秒から51秒に短縮された。

「テスト→フィードバック→再生成」のサイクルが速く回せることが、Google Stitch の価値だと改めて感じた。改善版を作るのに要した時間は、テスト結果を受けてから30分程度だった。

「AI生成」はユーザーに伝わるか

テスト後のアンケートで「このUIはAIが作ったものだと思いますか?」という質問を入れた。「そう思う」と答えたのは100人中11人だった。89%のユーザーはAI生成だとは気づかなかった。

「AI生成かどうか」は、ユーザーにとってあまり重要ではないかもしれない。使いやすいかどうか、目的を達成できるかどうか——それだけがユーザーの関心事だ、という当たり前のことを改めて確認できた。

よくある質問

Q1. ユーザーテストはどのプラットフォームを使いましたか?

今回はリモートユーザーテストのプラットフォームを使用しました。具体的なサービス名は記載しませんが、タスク設計・録画・アンケート収集を一括で行えるツールを選びました。Google Stitch で生成したHTMLをテスト対象URLとして設定する形で利用しました。

Q2. 100人のテストはコストがかかりますか?

一般的なユーザーテストプラットフォームでは、1人あたりの参加費が発生します。今回の100人テストは決して安くない投資でしたが、リリース前に主要な課題を特定できたコスト削減効果は、テスト費用を大きく上回ると判断しました。まず5〜10人の小規模テストから始めることも十分有効です。

Q3. Google Stitch のプロトタイプはインタラクション(画面遷移など)に対応できますか?

基本的な画面遷移はHTMLとJavaScriptで実装することで対応できます。ただし、複雑なインタラクション(アニメーション、状態管理など)は生成だけでは対応が難しく、追加実装が必要なケースがあります。今回のテストでは静的なHTMLに最低限のリンクを手で追加する形で対応しました。

Q4. テスト結果を Google Stitch のプロンプトに反映する際のコツはありますか?

「ユーザーが迷ったポイント」を具体的にプロンプトに記述することが重要です。「カテゴリ選択をチップ型ボタンに変更」のように変更箇所を明示し、その理由(ドロップダウンが直感的でなかった)も添えると、意図に沿った再生成がされやすくなります。

Q5. 小規模テスト(5人程度)でも有意義な改善点は見つかりますか?

はい。ユーザビリティテストの研究では、5人程度でも主要な問題の80%程度は発見できるとされています。予算や時間が限られている場合は、まず5〜10人のテストを繰り返すアジャイルなアプローチが現実的です。

Q6. テスト結果を見て、Google Stitch の生成品質への評価はどう変わりましたか?

「見た目の整合性と清潔感」は十分なレベルで生成できることが確認できました。一方、「ナビゲーション設計」や「情報アーキテクチャ」はプロンプトで細かく指定しないと課題が残ることもわかりました。生成の強みと弱みが、数値として明確になりました。

まとめ

100人のユーザーテストを通じて見えてきたこと。

  • タスク完了率74〜91%、NPS+32——プロトタイプとして十分及第点の結果
  • 「見た目の整合性」は高評価、「情報の見つけやすさ」に課題
  • 迷いポイントをプロンプトに反映した改善版で、完了率が大幅向上
  • 「テスト→再生成」のサイクルが速く回せることがこのツールの強み
  • ユーザーの89%はAI生成だと気づかなかった

数字は「使えるか使えないか」という問いへの、一つの答えを出してくれた。

最新記事
  • カテゴリー
  • 月別
  • Twitter

    ココナラでデザインを依頼する

    7000本の授業が見放題!社会人向けオンライン学習動画【Schoo(スクー)】

    Webデザイン業界特化のレバテック

    定額制で質問し放題【Web食いオンラインスクール】

    関連記事

    最新記事NEW

    CONTACTCONTACT CONTACTCONTACT

    お問い合わせ

    ご意見やお仕事のご依頼などは以下よりご連絡ください。

    情報入力

    内容確認

    完了

      お名前必須

      フリガナ必須

      メールアドレス必須

      お問い合わせ内容