TL;DR （この記事はなに）

• GPT-4Vの画像認識機能をプロダクトデザイナーがどのようにプロダクト開発の業務に取りれているか試行錯誤を紹介している記事です。

• どのようにUXリサーチ実施しているかを実際の作業ステップと一緒にプロンプトを紹介しています。

• 本記事で扱うUXリサーチとしてヒューリスティック評価分析と簡易ユーザビリティテストです。

• コピペしてすぐ使えそうな部分は【🔗コピペOK】と明記しています。

• プロンプト実行をうまく導くためのTipsを最後に紹介しています。

ChatGPTに「目ができた」 GPT-4Vとは

デザイナー界隈でも「ChatGPTをどう駆使するのか」のような思考錯誤は2023年初期から様々行われています。ビジュアルデザインなど意匠的な「作る」デザインは生成AIとしてMidjorneyやDALLE-EそしてAdobeFireflyなどがありますが、ChatGPTは「考える」デザイン、つまり体験設計（UXデザイン）のリサーチ文脈で活用されてきました。

そのような渦中で、2023年9月25日にOpenAI社は新機能として「GPT-4V」の導入を発表し、世間から注目を集めていました。

GPT-4Vは「マルチモーダルAI」で、2種類以上のデータをもとに情報を集めて、解析・出力可能なAIのことです。たとえば、以下のデータを使用を組み合わせることができます。

• テキスト

• 数値

• 音声

• 画像

• 動画

これまでのChatGPTは、テキストによる対話のみでしたが、GPT-4Vでは画像による対話が可能となりました。ChatGPTに「画像アップロード機能」、言い換えるならばChatGPTに「目の機能」が付いたことにれにより、アップロードした画像内の情報を読み取って、質問に答えたり提案・アドバイスできたりし、さらに活用方法に幅広さがでてきました。

ChatGPTの「目の機能」をどう使うか

GPT-4Vから出てしばらく経っていますが、社内GPT版がGPT-4Vが使えるようになったのが2023年12月でした。（社内稟議を通してようやく使えるようになった）

私が現在所属しているプロダクトカンパニーでは、業務の効率化・生産性の向上に取り組みために社内版GPTモデルを導入し、生成AIの活用を全社的に促進しています。

プロダクトデザイン業務において、実際のUXリサーチを確度を向上させるために、画像アップロード機能、つまり「ChatGPTの目の機能」を駆使してデモとしてのヒューリスティック評価とユーザーインタビューを行いました。

なぜGPTでリサーチ業務を行うのか

開発しているものがユーザーファーストになるようにすることはプロダクト開発においては超重要です。そのため、ユーザーからのフィードバックを常に求めていく姿勢はプロダクト開発には欠かせません。

とはいえスケジュールや調整業務などを鑑みると、毎回ユーザーを捕まえて仮説検証をするわけにはいきません。

そのためChatGPTの「目の機能」を使って、簡易的なフィードバックを収集することで最低限の仮説立証をブレストすることができ、その後の実際のユーザービリティテストやユーザーインタビューで際での仮説検証を引き上げることができます。

あくまで実際のユーザーの声を聞く前までの仮説立案の質とスピードを出すためにChatGPTを活用するのであって、実際のユーザーの声を聞かなくて済むために行うものではありません。（それでは仮説検証はできていない）

UXリサーチを実際に行うプロンプト紹介

ここからは実際にどのようなプロンプトを与えてUXリサーチを行っているのかについて、実際の作業ステップと共に紹介します。ここから長くなるので、コピペしてすぐ使えそうな部分は【🔗コピペOK】という風に明記します。
プロンプトに入れる情報は適宜書き換えてください。

1. ヒューリスティック評価を行う

まず一番最初に与えるプロンプト情報としては以下の3点です。

• デザイン画面の周辺情報

• 前提条件のプロンプト

• 実行内容のプロンプト

それを調理するとこんな感じになります。

1-1. ヒューリスティック評価を実施する際の実行プロンプト【🔗コピペOK】

<!-- 実際には最初に画像を5枚アップロードします。Note記事上では割愛しています -->

あなたは人間中心設計の専門家で、SaaSサービスのプロダクトデザインのエキスパートです。
以下に与える情報をベースに、ヒューリスティック評価分析を行なってください。

# 前提
（プロダクト名）という（実際にできる機能）ができるSaaSプロダクトを開発しています。
今回は（開発している機能名）をという新機能をリリースする予定です。

# 検証したいこと：ユーザーのゴール
（今回の新機能で提供する価値）という業務がユーザー自身で行えるようになること

# ページ情報：ページ名とページ構造
（aaa一覧）  > （bbb詳細） > （ccc編集）

# 画像情報：アップロードしたUI画面に対しての補足情報
<!-- ここでアップロードした画像情報と補足情報をマッピングする -->
1. （aaa一覧）
- （機能について等）を説明している画面です。（x枚目の画像）
- （オブジェクト１）を登録・複製・削除することができる画面です。（x枚目の画像）

1. （bbb詳細）
- （機能について等）を行うための最初の説明画面です。（x枚目の画像）
- （オブジェクト1）の公開設定（公開・非公開）ができる画面です。（x枚目の画像）
- （オブジェクト１）には、複数の（オブジェクト２）を登録・複製・削除することができます。

1. （ccc編集）
- 作成した（オブジェクト２）の設定を編集することができる画面です。（x枚目の画像）

# ユーザー：利用状況
<!-- ユーザー属性情報について指定する -->
- サービスを新規で利用することになったユーザーからのフィードバック
- サービスを普段から頻繁に利用しているユーザーからのフィードバック
- 高齢者からのフィードバック

# 評価観点：採点項目
<!-- ヤコブ・ニールセンの評価項目などを参考に独自の指標で評価するか指定する -->
1. ユーザーのニーズに合っているか
2. 機能面の観点
3. 構造上の観点
4. レイアウトの観点
5. ビジュアルの観点
6. コンテンツの内容
7. 使われる言葉
8. 初見のユーザーの観点

# 最終的な出力イメージ
<!-- 最終的に欲しい出力イメージを指定する -->
各ページ名に対して、以下の３点を出力してください。
- 評価観点の8項目の項目ごとで5点満点採点と採点理由
- 満点に近づける上で改善したほうが良い点
- 各ユーザーからのフィードバック

そうすると以下がResponseとして返ってきました。

こちらのUI画面に対する評価を行うにあたり、以下の各画面について指摘していきます。
日本語のUIであるため、ユーザーのニーズに合わせた言葉遣いや文化的配慮も重要だと考えます。
評価する上で模擬的なスコアを用い、ユーザーの利用状況や属性に基づくフィードバックの考慮も行います。

# aaa一覧（x枚目の画像）
## 評価について
- ユーザーのニーズに合っているか：4/5
  - シンプルで理解しやすいが、もっと目立つCTAがあると良い。
- 機能面の観点：3/5
  - 新規ユーザーが（オブジェクト名１）の登録という行動を次にすべきかを直感的に理解できるか不明確。
- 構造上の観点：4/5
  - 分かりやすいナビゲーションだが、追加の説明やヒントがあれば理解が深まる。
- レイアウトの観点：5/5
  - クリアで使いやすいレイアウト。
- ビジュアルの観点：4/5
  - 見た目は洗練されているが、もう少し視覚的誘導があると良い。
- コンテンツの内容：4/5
  - 足りない部分もあるが、基本的な説明はされている。
- 使われる言葉：4/5
  - 新規ユーザーにはもう少しガイドが必要かもしれない。
- 初見のユーザーの観点：3/5
  - もう少し直接的な説明や例があると理解しやすくなる。
改善点について
- 初めてのユーザーを考慮して、もっと分かりやすいガイダンスを提供する。
- CTAをもう少し目立たせるデザインに変える。
- 操作に関するヒントや説明を追加する。

# bbb詳細（x枚目の画像）
## 評価について
- ユーザーのニーズに合っているか：4/5
  - （オブジェクト名３）の選択肢が明確で良い。
- 機能面の観点：4/5
  - どのように（オブジェクト名３）を作成するかが明確である必要がある。
- 構造上の観点：4/5
  - 進行方向が明確だが、詳細へのリンクが見落とされがち。
- レイアウトの観点：5/5
  - レイアウトはクリーンで、オプションが明確。
- ビジュアルの観点：4/5
  - シンプルで直感的だが、追加のビジュアルフィードバックがあると、より視覚的にも満足感がある。
- コンテンツの内容：3/5
  - 二つのオプションについて説明がもっとあるとユーザーが理解しやすい。
- 使われる言葉：3/5
  - （オブジェクト名３）の選択についてより詳しく説明する必要がある。
- 初見のユーザーの観点：3/5
  - （オブジェクト名３）の作成方法が明確でなく、不安を覚える可能性がある。
## 改善点について
- （オブジェクト名３）を作成する過程の説明を追加する。
- 新規ユーザーや高齢者がより理解しやすいようなガイドやヘルプを用意する。
- フィードバックを受けて、直感的なビジュアルキューを増やす。

# ccc詳細（x枚目の画像）
## 評価について
- ユーザーのニーズに合っているか：3/5
  - （オブジェクト名３）の詳細設定はあるが、ガイダンスが不十分かもしれない。
- 機能面の観点：3/5
  - 設定の選択肢が直接的でない場合があり、初心者にとっては難しいかもしれない。
- 構造上の観点：4/5
  - 設定は分かりやすいが、より詳細なヘルプがあれば理解しやすくなる。
- レイアウトの観点：4/5
  - すっきりとして使いやすいが、情報量が多い場合のレイアウトを工夫する必要がある。
- ビジュアルの観点：4/5
  - 機能的だが、視覚的なフィードバックを増やすことでさらに親しみやすくできる。
- コンテンツの内容：3/5
  - 詳細設定のステップバイステップの説明があればいい。
- 使われる言葉：3/5
  - よりわかりやすい言葉で設定の説明をする必要がある。
- 初見のユーザーの観点：2/5
  - 初見のユーザーには不親切で、ガイダンスの不足が見受けられる。
## 改善点について
- 初心者や非技術的なユーザーを対象としたガイダンスやチュートリアルを提供する。
- より直感的で理解しやすいインターフェースの設計。
- ビジュアルエレメントを使用して、プロセスをナビゲートする。
- 上記の点を踏まえた改善が行われれば、（開発している機能名）機能がより使いやすく、ユーザーフレンドリーなものになるだろう。各ユーザー属性や利用状況に基づくフィードバックを取り入れて、より良いプロダクトに進化させていくことが望まれます。

# ユーザーフィードバック
## サービスを新規で利用することになったユーザー想定されるフィードバック
- 「操作方法が分かりにくい。もっと詳しいチュートリアルが欲しい」
- 「用語が専門的で理解しにくい。より一般的な言葉での説明が必要」
- 「何から始めればいいかわからなかった。ステップバイステップのガイダンスがあると助かる」

## サービスを普段から頻繁に利用しているユーザー想定されるフィードバック
- 「一部のxxxxが重複していて時間がかかる。よりショートカットやホットキーがほしい」
- 「同じ操作を何度も繰り返すことが多い。バッチ処理や自動化の機能を追加してほしい」
- 「xxx設定のバリエーションを増やしてほしい。現在の選択肢に限りがある」

## 高齢者ユーザーからの想定されるフィードバック
- 「文字が小さくて読みにくい。拡大機能や大きなフォントサイズのオプションが必要」
- 「画面がごちゃごちゃしていて理解しにくい。もっとシンプルなレイアウトにしてほしい」
- 「ヘルプボタンが見つからなかった。より簡単にアシスタンスを受けられる機能があれば安心できる」

これらのフィードバックは、各ユーザーグループのニーズに合わせたUI改善のヒントになります。新規、頻繁、高齢のユーザーそれぞれの観点からアクセシビリティ、機能性、学習しやすさを考慮したプロダクト設計の方向性を示唆することができます。

そしてフォーカスを当てて聞きたい操作フローなどがあれば、随時以下のようなプロンプトで深掘りしていきました。今回はユーザーが最もつまづくだろうと事前に仮説を立てていた部分について聞いていきます。

1-2. 特定の操作に関してのフィードバックについて【🔗コピペOK】

（ユーザーが画面の中で設定する項目）は、UI上では（実際のUI名や設定方法について）で指定させようと考えています。このUI仕様についてどのようなフィードバックが想定されるか教えてください。

そうすると以下のようなResponseが返ってきました。

（ユーザーが画面の中で設定する項目）に関して、以下のような各ユーザー属性や利用状況に基づいたフィードバックが想定されます。

# サービスを新規で利用することになったユーザー想定されるフィードバック
- 「（実際のUI名や設定方法について）って何？どうやって使うの？」
- 「要素を指定するのが難しい。もっと簡単な方法はないの？」
- 「初心者向けのチュートリアルや例がないと使い方が分からない」

# サービスを普段から頻繁に利用しているユーザー想定されるフィードバック
- 「素早く正確に要素を選択できるから便利だけど、（実際のUI名や設定方法について）を打つのが面倒くさい時もある」
- 「（実際のUI名や設定方法について）の入力支援やオートコンプリート機能があれば、もっとスムーズに作業できる」
- 「（実際のUI名や設定方法について）を一括で選択できるような機能が欲しい」

# 高齢者ユーザーからの想定されるフィードバック
- 「文字コードがちょっと見にくい。要素を指定する時に視覚的なヘルプがほしい」
- 「テクニカルな部分が多くて戸惑う。もっと直感的に要素を選択できる方法は？」
- 「間違えた時の修正がしやすいように、選択をやり直すオプションをもっと分かりやすくしてほしい」

これらのフィードバックから、（ユーザーが画面の中で設定する項目）の教育的なリソースの提供、視覚的な要素選択支援、エラーハンドリングの改善などがプロダクト改善の鍵となると考えられます。また、ユーザーが異なるスキルレベルにあることを考慮し、初心者から上級者まで幅広く活用できる設計が求められるでしょう。

これは実際のユーザビリティテストを実施したとしても、同様のフィードバックが返ってきそうだったので、実際のユーザビリティテストを前にできそうなデザイン改善する際のインターフェイスのヒントを聞き出してみます。

1-3. 特定の操作に関してのインターフェイスヒントについて【🔗コピペOK】

（ユーザーが画面の中で設定する項目）の、インターフェースを設計するヒントを3つ作成してください。

Responseに関しては割愛しますが、実装工数上フェーズから外した機能でしたが、一考の余地がありそうだと判断し開発優先度についての交渉材料などにしました。

2. 簡易ユーザービリティテストを行う

さらに上記の会話内容を継承しつつ、ChatGPTの中でユーザーテストを行っていきます。

2-1.簡易ユーザビリティテストを実施する際の実行プロンプト【🔗コピペOK】

以下で挙げたユーザーたちに対して、（開発している機能名）のユーザビリティテストを行なってください。

# テスト目的
（今回の新機能で提供する価値）という業務がユーザー自身で行えるようになること

# テスト内容
- テスト前にどのような仮説検証を行ったか10個教えてください。
- テスト中のユーザーの思考や発話内容を10個教えてください。
- テスト後にフィードバックを10個回収してください。
- フィードバックを分析し、ユーザーから指摘された問題の中で1番多かったものをを特定してください。

想定ユーザー群
- サービスを新規で利用することになったユーザー
- サービスを普段から頻繁に利用しているユーザー
- 高齢者ユーザー

Responseとして以下が返ってきました。

# テスト前の仮説検証（10個）：
- 新規ユーザーはxxxの使い方を直感的に理解できるか。
- 頻繁なユーザーは新機能を迅速に採用し効率的に使用できるか。
- 高齢者は画面の文字の読みやすさやクリックしやすい要素のサイズに満足するか。
- ユーザーはコンテンツを置換・挿入する際のプレビュー機能を有用と感じるか。
- 新規ユーザーはヘルプ機能やチュートリアルを活用してタスクを完了できるか。
- 頻繁なユーザーは新機能が既存のワークフローを改善すると認識するか。
- 高齢者はセレクターの選択や要素の指定について混乱しないか。
- エラーメッセージが非技術的なユーザーにもわかりやすく提供されるか。
- ユーザーはxxxの確認が簡単にできると感じるか。
- 各ユーザー群はシステムのパフォーマンスに満足するか。

# テスト中のユーザーの思考や発話内容（10個）
- 「これはどうやって使うんだろう？」
- 「すごく簡単に編集できるね！」
- 「この文字、もっと大きくできないの？」
- 「このxxxボタンは本当に便利だ」
- 「何をすればいいのかがよくわからない」
- 「これは前に使っていた方法よりずっと速い」
- 「このxxxはどうやって選ぶの？」
- 「このエラーが出たけど、どうしたらいいの？」
- 「編集した内容がすぐに見れるのはいいね」
- 「動作が少し重いような気がする」

# テスト後のユーザーフィードバック（10個）
- 「使い始めはちょっと戸惑ったけど、すぐに慣れた」
- 「操作がスムーズでストレスがなかった」
- 「ボタンが小さくて押しにくい」
- 「xxx機能があると助かる」
- 「チュートリアルがもっとほしい」
- 「新しい機能が既存の作業スピードを上げてくれる」
- 「要素の選択が分かりにくい」
- 「エラーの解決方法が見つかりにくい」
- 「xxxを見るのが簡単でいい」
- 「システムが少し遅い気がする」

# フィードバック分析に基づく最も多かった問題：
多くのユーザーから「（今回はユーザーが最もつまづくだろうと事前に仮説を立てていた部分）が分かりにくい」というフィードバックが寄せられました。この指摘は特に新規ユーザーと高齢者の間で共通しており、視覚的なガイダンスの不足や操作の学習曲線が理由と推測されます。したがって、インタラクションデザインの改善が必要であり、選択プロセスを直感的に理解しやすくするための対策を講じる必要があります。

というインサイトを得ることができました。（お腹いっぱい）

実際のユーザービリティテストを前に、仮説内容やどう検証をどう磨き込んでいくかのアプローチが明確になったので、上記で得られたインサイトを参考にしながらテスト計画書を書いていきました。

プロンプト実行をうまく導くためのTips

プロンプト実行をうまく導くためのTipsとして以下を意識するとよさそうと感じたので書き残しておきます。

• 一発のプロンプトで引き出すより、対話型で引き出すほうが欲しい答えに辿り着きやすい。

• アップロードした画像に対しては、補足情報をめんどくさがらず付け加えるべし。フィードバックの質が爆上がるぜ。

• 「〇〇についてどう思いますか？」と聞いてもChatGPTは褒め中心でいい気持ちになって終わるぜ。バシバシ言って欲しいなら「〇〇の課題で悩んでいるユーザーからすると、何点中何点ですか？」等と聞くべし。

• 得られたResponseを丸呑みにするべらかず。AIでもバイアスがかかっているので、実際のユーザーに会いにいくための事前準備の参考教材として捉えるべし。

最後に

プロダクトデザイン業務におけるUXリサーチを、ChatGPTの「目の機能」を駆使したことによって、チームとして「リサーチやっぱり重要だよね」「ユーザーの声をどう開発プロセスの中に効果的に入れられそうか？」などチームのUX成熟度の機運が高めることができたことが一番大きいと感じています。
また本記事が「ユーザー体験を守るプロフェッショナル」であるプロダクトデザイナーが、どのようにしてプロダクト開発における生成AIを活用すればよいかの参考の一助として活用していただければ嬉しいです。