ClaudeにFigmaプロトタイプのユーザビリティテストをやってもらう (後編)

このアプリは、猫好き店主が運営するキーボードECサイトです
あなたは「キーボードを買いたいユーザー」という前提で参加しています
画面操作中は、やろうとしていること・思っていること・感じていることを都度発言してください
このアプリは開発途中の簡易版のため、選択や入力できるところが限られていたり、すでに入力済みの箇所があります

あなたは、自分に合うキーボードを探し求めているユーザーです。
添付した画像のペルソナになりきって、キーボードECサイトのFigmaプロトタイプのユーザビリティテストに参加してください。

# テスト実施方法
1. **ペルソナの完全な理解**
   - 添付画像のペルソナになってください
   - そのペルソナの背景、目標、行動パターン、課題を深く理解してください

2. **リアルな演技**
   - ペルソナの立場から、自然にプロトタイプを操作してください
   - そのペルソナが実際に感じるであろう疑問や困難を声に出してください
   - 専門知識レベル、技術スキル、年齢による操作の違いを反映してください
   - テスト内容は添付のPDFの通り実施してください

3. **フィードバックの提供**
   各タスク実行時に以下を報告してください:
   - 直感的に理解できた点 / 混乱した点
   - 期待した動作と実際の動作のギャップ
   - 改善提案(ペルソナの視点から)

# 出力形式
各操作ステップで:
- **[ペルソナ名]としての反応:** 「〜だと思って〜をクリックした」
- **気づいた点:** 具体的な使いやすさ/使いにくさ
- **感情:** その瞬間の率直な感想

プロトタイプURL: {URL}

Figmaプロトタイプの構造を確認できましたので、高橋恵さんのペルソナとしてユーザビリティテストを実施します。
プロトタイプの各画面を実際に見ながら進めますね。

【ユーザビリティテスト開始】
テスト参加者: 高橋恵（36歳・ITエンジニア・右手に軽度の関節障害）

タスク① ホーム画面から「レトロキーボード」の商品を検索

[高橋恵としての反応]
まず、ホーム画面を見ています。「猫とキーボード」というサイト名が目に入って、猫好きの店主が運営しているんだなとわかりました。かわいいサイトですね。
検索バーがすぐ目に入りました。既に「レトロキーボード」と入力されているようですが...
実際に自分で入力する場合を考えると、この検索バーはわかりやすい位置にありますね。
画面中央のやや上部で、虫眼鏡アイコンもついているので迷わないと思います。
下には「肩こり予防」「疲れにくい」「リウマチ」といったタグボタンが並んでいます。
あ、「リウマチ」のタグがある！ これは嬉しいです。
私のような関節に問題がある人向けの配慮があることがわかります。これをクリックすればリウマチ向けのキーボードが見つかりそうです。
でも今回のタスクは「レトロキーボード」を検索することなので、検索バーの虫眼鏡アイコンをクリックして検索を実行します。

[気づいた点]
✅ 良い点: 検索バーが目立つ位置にあり、すぐに見つけられた
✅ 良い点: 「リウマチ」「疲れにくい」など、身体的制約のある人向けのタグが用意されている点が素晴らしい。私のような人にとって、こういう配慮は本当に助かります
✅ 良い点: タグの種類が豊富（肩こり予防、疲れにくい、リウマチ、静か、軽い、初心者、ゲーミング）で、様々なニーズに対応している
⚠️ 気になる点: 検索バーに既に「レトロキーボード」と入力されているが、実際のユーザーはここに何を入力すればいいのか最初は迷うかもしれない。
プレースホルダーテキストとして「キーボードを検索...」などがあるといいかも

[感情]
検索機能を探すのは非常に簡単でした。5段階評価で「5（非常に簡単）」です。
ITエンジニアなので一般的なECサイトに慣れていますが、このサイトは特に直感的です。
何より「リウマチ」というタグがあることに感動しました。多くのECサイトでは障害への配慮が見えにくいので。
では、検索を実行してみます。

タスク② 商品一覧から「Craftsman Wood」をカートに追加

[高橋恵としての反応]
検索結果画面が表示されました。「レトロキーボード」の検索結果として4つの商品が表示されています。上から見ていくと...

RGB Gaming Elite 60% - ¥12,800
Craftsman Wood - ¥35,200 ← これが目的の商品ですね
Vintage 84 - ¥7,500
Retro 60 - ¥26,000

目的の「Craftsman Wood」は2番目にあります。商品名がはっきり見えるので、すぐに見つけることができました。
商品説明を見ると「天然木を使用した温かみのあるデザイン。職人による手作業で仕...」と書かれています。
木製のキーボード、興味深いですね。自然素材だと手に優しいかもしれません。
さて、カートに追加する方法を探します。各商品の右側にハートマークのアイコンがありますが、これは「お気に入り」機能だと思います。
カートに追加するボタンが...見当たりませんね。
一般的なECサイトだと、商品をクリックして詳細ページに移動してから「カートに追加」ボタンを押すパターンが多いです。
なので、「Craftsman Wood」の商品をクリックしてみます。

良かった！商品詳細ページが開きました。
商品情報が詳しく表示されています。まず目に入ったのは：

商品名：Craftsman Wood
価格：¥35,200
評価：星4つ、レビュー12件
説明：「天然木を使用した温かみのあるデザイン。職人による手作業で仕上げられた」

下にスクロールしていくと、商品の詳細情報が充実していますね：

配列：日本語配列 ← これは重要。海外配列だと記号の位置が違うので確認必須です
カラー：Black（他の色も選べるようです）
在庫：5
サイズ：315 × 110 × 30 単位:mm (W × D × H)
重量：約1,280g ← これも重要。あまり重いと持ち運びが大変
レイアウト：65%(68キー)
製造国：中国

そして、画面の下部に 「カートに追加」 ボタンがあります！紺色の目立つボタンで、すぐに見つかりました。
このボタンをクリックしてカートに追加します。

[気づいた点]
✅ 良い点: 商品名がはっきりと見えて、すぐに目的の商品を見つけられた
✅ 良い点: 商品詳細ページの情報が充実している。特に「配列（日本語配列）」「重量」などの実用的な情報が明記されているのが助かる
✅ 良い点: 「カートに追加」ボタンが目立つ色（紺色）で配置されていて、見つけやすい
⚠️ 気になる点: 商品一覧画面から直接カートに追加できるボタンがないため、必ず詳細ページを経由する必要がある。
急いでいるときや、複数商品を一度にカートに入れたいときは少し手間かも
⚠️ 改善提案: 私のような関節障害のあるユーザーにとって、「キーの重さ（押下圧）」「キーストローク（深さ）」の情報があると非常に助かります。
軽いタッチのキーボードの方が手の負担が少ないので

[感情]
商品を見つけるのは簡単でした（5段階で4）。商品一覧での商品名が明確で、すぐに「Craftsman Wood」を識別できました。
カートに追加する過程も簡単でした（5段階で5）。詳細ページに移動してから「カートに追加」ボタンを押すという流れは、一般的なECサイトと同じなので迷いませんでした。
困りごとは特にありませんでしたが、強いて言えば、商品一覧画面から直接カートに追加できると、より効率的だと感じました。ただ、これは些細な点です。
では、「カートに追加」ボタンをクリックします。

[高橋恵としての反応]
あれ？画面が変わりましたが、これは「Craftsman Wood」の詳細ページではなく、別の商品「Vintage 84」（¥7,500）のページになっているようです。
Lo-Fiプロトタイプなので、画面遷移が想定と違うのかもしれません。
実際のサイトであれば、「カートに追加」ボタンを押した後は：

カートに商品が追加されたことを示す確認メッセージが表示される
そのままカートページに遷移する
または元のページに留まって「カートに追加されました」というフィードバックが表示される

のいずれかのパターンが一般的ですね。
プロトタイプの制約上、次のステップとしてカートページを見に行く必要がありそうです。
下部のナビゲーションバーに「カート」アイコンがあるので、そこをクリックしてみます。

これは「カテゴリで検索」というページのようです。カートではないですね。
プロトタイプの画面遷移を理解する必要がありそうです。
このページは様々なカテゴリ別のタグが並んでいて、とても詳細な検索ができそうです：

症状別

肩こり予防、疲れにくい、リウマチ、腱鞘炎

用途・特徴別

ゲーミング、オフィス、プログラミング、静か、軽い、初心者

サイズ・レイアウト別

フルサイズ、コンパクト、日本語配列、英語配列、TKL、分離型

スイッチタイプ別

Cherry MX、ホットスワップ、メカニカル、静電容量無接点

接続方式別

有線、ワイヤレス

この分類は本当に素晴らしいです！特に「症状別」というカテゴリがあるのは画期的ですね。
「リウマチ」だけでなく「腱鞘炎」もあります。私のような身体的制約のあるユーザーにとって、こういう配慮は本当に助かります。
ただ、今はタスク③に進む必要があるので、カートページに移動したいです。
下部のナビゲーションバーの「カート」アイコンをもう一度確認してクリックしてみます。

これは「おすすめ診断で検索」というページですね。「おすすめ診断」という機能があるようです。
内容を見ると：

「種類が多すぎて、どれを選べばいいかわからない...」
「専門用語が多くて、違いがよくわからない...」
「自分の使い方に合うキーボードがどれなのか不安...」

これは私の悩みそのものです！ まさに私が感じていることですね。何台もキーボードを試してきましたが、
「完璧にフィットするもの」がまだ見つかっていません。この診断機能があれば、自分に合ったキーボードを見つける手助けになりそうです。
「3つの質問に答えるだけで、あなたにピッタリのキーボードをご提案します！」とあります。
これは興味深い機能ですが、今はタスク③「カートの商品を購入する」を完了する必要があります。
カートページを探さないといけません。下部ナビゲーションの「カート」アイコンを探してクリックします。

これは「お気に入り」ページですね。ハートアイコンの「お気に入り」を押してしまったようです。
お気に入りに登録されている商品が一覧表示されています：

Silent Office Pro - ¥12,800
FILCO Majestouch 静音 - ¥15,400
RGB Gaming Elite 60% - ¥12,800
Vintage 84 - ¥7,500
Craftsman Wood - ¥32,000（先ほど見た商品）

一番下に「Craftsman Wood」がありますね。この画面はお気に入りリストなので、実際のカート（購入予定の商品）とは別のようです。
もう一度下部ナビゲーションを見て、正しく「カート」アイコン（買い物カートのマーク）をクリックします。

[高橋恵としての反応]
おっ、これは「トライアル」というページですね。
説明を読むと：
「トライアル期間は2週間！後自宅でじっくりお試しできます。トライアルしたい商品を選択してください。」
これは素晴らしい機能です！実際に自宅で2週間試せるなんて、キーボードを選ぶ上でこれ以上ない方法ですね。
特に私のように長時間使用して初めて手の痛みや疲労が出るタイプの人間にとって、店頭で少し触っただけでは判断できません。
表示されている商品：

Silent Office Pro - ¥12,800
Vintage 84 - ¥7,500
Craftsman Wood - ¥35,200 ← ここにありますね

各商品の左側にチェックボックスがあります。これで商品を選択して、下の「確認画面に進む」ボタンを押すのでしょう。
でも、今のタスクは「先ほどカートに追加した商品の購入」なので、通常の購入フローを完了する必要があります。
もう一度、カートページを探します。下部ナビゲーションの「カート」アイコンを正しくクリックします。

タスク③ カートの商品を購入

[高橋恵としての反応]
やっと「カート」ページに到達しました！
カートの内容を確認します：

Craftsman Wood - ¥35,200（税込み）
天然木を使用した温かみのあるデザイン。職人による手...
数量：1（数量変更ボタンとゴミ箱アイコン付き）

合計金額の表示：

合計金額：¥35,200（税込み）
¥32,000（税抜き）
送料無料のアイコン

送料無料なのは嬉しいですね！合計金額も税込・税抜両方が明示されているので、わかりやすいです。
そして下部に大きく 「レジに進む」 ボタンがあります。このボタンをクリックして購入手続きに進みます。

[気づいた点 - カートページ]
✅ 良い点: カート内容が明確に表示されている
✅ 良い点: 税込・税抜の金額が両方表示されていて透明性が高い
✅ 良い点: 送料無料であることが明示されている
✅ 良い点: 数量変更と削除（ゴミ箱アイコン）が直感的
✅ 良い点: 「レジに進む」ボタンが目立つ配置で、次のアクションが明確
⚠️ 気になる点: カートページにたどり着くまでに、いくつかの別のページ（お気に入り、トライアル、診断など）を経由してしまった。
下部ナビゲーションのアイコンがわかりにくい可能性がある

では、「レジに進む」ボタンをクリックします。

[高橋恵としての反応]
あれ？「比較」ページが表示されました。これは購入手続きのページではないですね。
「比較したいキーボードを選択してください。一度に最大4つまで比較できます。」
商品が3つ表示されています：

Silent Office Pro - ¥12,800
Vintage 84 - ¥7,500
Craftsman Wood - ¥32,000

各商品の左側にチェックボックスがあり、下部に「比較する」ボタンがあります。
これは商品を比較する機能のようです。複数のキーボードを比較検討したい時には便利ですね。
私のように「完璧にフィットするキーボード」を探している人にとって、スペックを並べて比較できるのは助かります。
でも今は購入手続きを完了する必要があります。
プロトタイプのフローを理解するために、もう一度カートページに戻って「レジに進む」を探します。
実際のサイトでは、カートページから「レジに進む」→「配送先情報入力」→「支払い方法選択」→「注文確認」→「注文完了」という流れが一般的ですが、
このLo-Fiプロトタイプでは画面遷移が限定的なようです。
購入手続きの画面を探すために、別のノードを確認してみます。

[高橋恵としての反応]
比較画面で、「Vintage 84」と「Craftsman Wood」の2つにチェックが入っている状態ですね。比較機能を使う場合は「比較する」ボタンを押すのでしょう。
でも購入手続きのページを見つける必要があります。レジ・支払いに関連する画面を探してみます。

[高橋恵としての反応]
これはモーダル（ポップアップ）ウィンドウですね。「お気に入りに追加しました」という確認メッセージが表示されています。
内容：

Vintage 84 - ¥7,500
レトロなタイプライター風デザインと現代的な機能を融合。Cherry...

ボタンが2つあります：

「お気に入りを見る」
「お買い物を続ける」

これは商品をお気に入りに追加した後の確認画面のようです。実際のECサイトでよく見る、「カートに追加しました」のメッセージと似たパターンですね。
購入フローの画面を探すために、レジや支払いに関連するノードを確認します。

[高橋恵としての反応]
やっと見つけました！これが「購入手続き」のページですね。
画面上部にステップインジケーターがあります：

ステップ1: 内容確認（現在ここ）
ステップ2: 注文完了

ご注文内容:

Craftsman Wood - ¥35,200（税込み）
天然木を使用した温かみのあるデザイン。職人による手作業で仕上...
カラー: Black
数量: 1

お届け先:

住所: 150-0001 東京都渋谷区神宮前1-2-3
電話番号: 090-0000-0000
お名前: 猫野 はな夫
お届け日時: 日時指定なし

お支払い方法:

◉ クレジットカード（選択済み）
○ PayPay
○ 代引き

ご請求明細:

合計: ¥35,200（税込み）
送料: ¥0
合計: ¥35,200

そして下部に 「ご注文を確定する」 ボタンがあります。
これで全ての情報が確認できました。実際の購入プロセスとしては非常にわかりやすい構成です。

[気づいた点 - 購入手続きページ]
✅ 良い点: ステップインジケーターがあり、購入プロセスの進行状況がわかる（2ステップで完了）
✅ 良い点: 注文内容、配送先、支払い方法、請求明細がすべて一画面で確認できる
✅ 良い点: 各セクション（お届け先、お支払い方法など）に「>」マークがあり、編集できることが示唆されている
✅ 良い点: 送料が¥0であることが明確
✅ 良い点: 「ご注文を確定する」ボタンが目立つ配置で、最終アクションが明確
⚠️ 気になる点: すでに配送先情報（猫野 はな夫）が入力済みだが、新規ユーザーの場合はこの情報をどこで入力するのか不明
⚠️ 改善提案: 支払い方法の選択肢が3つ（クレジットカード、PayPay、代引き）あるのは良いが、
私のような身体的制約がある人にとっては、「後払い」や「銀行振込」などの選択肢もあると助かる場合がある

では、「ご注文を確定する」ボタンをクリックして注文を完了します。

[高橋恵としての反応]
これは「カートに追加しました」の確認モーダルですね。Vintage 84の商品が表示されています。注文完了画面ではないようです。
注文完了の画面を探します。

[高橋恵としての反応]
これも「カートに追加しました」の確認モーダルで、今度はCraftsman Woodの商品が表示されています。
注文完了画面を探してみます。

[高橋恵としての反応]
これは「トライアルに追加しました」の確認モーダルですね。Craftsman Woodがトライアルリストに追加されたことを示しています。
注文完了の画面を見つけるために、他のノードを確認します。

[高橋恵としての反応]
これは「おすすめ診断」の質問2のページですね。診断フローの一部です。
プログレスインジケーターを見ると：

質問1（完了）
質問2（現在）
質問3
診断結果

質問内容：「どんな場所で使うことが多いですか？」
選択肢：

オフィスや共有スペース（周りに人がいる静かな環境）
自宅の自分の部屋（音を気にしなくていい）
カフェや外出先にも持っていく（持ち運びが多い）
リビングや寝室（家族がいる場所）

これは本当に良い質問ですね。私の場合、自宅でリモートワークをしているので「自宅の自分の部屋」が該当します。
ただ、配偶者と二人暮らしなので、あまり音がうるさいキーボードは避けたいです。
引き続き注文完了画面を探します。

[高橋恵としての反応]
これは「比較リストに追加しました」の確認モーダルですね。
注文完了画面を探します。購入手続きの流れで「ご注文を確定する」を押した後の画面を確認します。

[高橋恵としての反応]
診断の質問1ですね。「主に何をするためにキーボードが必要ですか？」
私の場合は「仕事や勉強で文章をたくさん打つ」が該当します。
注文完了画面を探し続けます。

[高橋恵としての反応]
やっと見つけました！**「購入完了」**画面です！
画面上部にステップインジケーターがあります：

ステップ1: 内容確認（完了）
ステップ2: 注文完了（現在）

中央に大きく 「ご注文ありがとうございます」 というメッセージが表示されています。
その下に：

画像エリア（おそらく購入した商品の画像が表示される場所）
「ご注文内容をメールしました。nekono.hogeo@example.com」

そして、「ご注文内容を確認する」 ボタンがあります。
これで注文が完了しました！

タスク③ 総評
[感情]
商品を購入するプロセスは比較的簡単でした（5段階で4）。
[良かった点]

✅ カートページから「レジに進む」ボタンがわかりやすかった
✅ 購入確認画面で注文内容、配送先、支払い方法、請求明細がすべて一画面で確認できた
✅ ステップインジケーターで進行状況が明確（2ステップで完了）
✅ 注文完了画面で確認メールが送信されたことが明示された
✅ 「ご注文内容を確認する」ボタンで後から詳細を確認できる

[困ったこと・改善提案]

⚠️ プロトタイプの制約: Lo-Fiプロトタイプのため、画面遷移がスムーズではなく、いくつかの画面（比較、診断、お気に入りなど）を経由してしまった。
実際のサイトでは「カートに追加」→「カート」→「レジに進む」→「注文確認」→「注文完了」という流れがより直線的だと良い
⚠️ 配送先情報の入力: すでに「猫野 はな夫」の住所が入力済みだったが、新規ユーザーの場合、この情報をどこで入力するのかがわからなかった
💡 改善提案: 注文完了画面に「配送状況を追跡する」ボタンや「トライアル期間中のサポート情報」があると、より安心感が増す

システムユーザビリティスケール（SUS）評価
では、PDF記載の10項目（+追加2項目）について、5段階評価をします。
SUS 10項目

このアプリは頻繁に使うと思います
→ 同意する
理由：自分に合うキーボードを探し求めているので、この充実した検索機能と診断機能、トライアル機能があれば定期的に使いたい

このアプリは不必要に複雑だと感じました
→ 同意しない
理由：全体的にシンプルで直感的。ただし、Lo-Fiプロトタイプの制約で画面遷移がわかりにくい部分があった

このアプリは使いやすいと思いました
→ 強く同意する
理由：検索、商品詳細、カート、購入の流れがわかりやすい。特に「リウマチ」などの症状別タグが素晴らしい

このアプリを使用するには技術者のサポートが必要だと思います
→ 強く同意しない
理由：ITエンジニアなので技術的な面は問題ない。一般ユーザーでも使いやすいと思う

このアプリのさまざまな機能がうまく統合されていることがわかりました
→ 同意する
理由：検索、診断、比較、トライアル、お気に入りなど、多機能だが統合されている。ただし、プロトタイプの制約でフルに体験できなかった

このアプリには矛盾が多すぎると思いました
→ 同意しない
理由：大きな矛盾は感じなかった

ほとんどの人はすぐにこのアプリの使い方を習得できると思います
→ 同意する
理由：一般的なECサイトと同じパターンで、直感的

このアプリは使い方が非常に面倒だと感じました
→ 同意しない
理由：全体的にスムーズ。ただし、カートページにたどり着くまでに少し迷った

このアプリを使うのにとても自信が持てました
→ 同意する
理由：明確なボタン配置とフィードバックがあり、安心して操作できた

このアプリを使い始める前に、多くのことを学ぶ必要がありました
→ 強く同意しない
理由：学習コストはほぼゼロ。一般的なECサイトの知識があれば使える

追加項目

支払いシステムはイライラさせられました
→ 同意しない
理由：支払い方法の選択肢が明確で、クレジットカード、PayPay、代引きから選べた。手続きもシンプル

注文手続きが面倒だと感じました
→ 同意しない
理由：2ステップで完了し、すべての情報が一画面で確認できた。非常にスムーズ

全体的なフィードバック
ペルソナ（高橋恵）としての総合評価

[最も印象に残った点]
「リウマチ」「腱鞘炎」「疲れにくい」といった 症状別のタグ があることです。
これは本当に画期的で、私のような身体的制約のあるユーザーにとって、自分のニーズに合った商品を見つけやすくなります。
多くのECサイトでは、このような配慮が欠けていることが多いので、この点だけでもこのサイトを使い続けたいと思いました。

[トライアル機能について]
2週間自宅で試せるというのも素晴らしいです。
キーボードは長時間使って初めて自分に合っているかどうかがわかります。
店頭で少し触っただけでは、私の右手の関節に負担がかかるかどうかは判断できません。

[診断機能について]
「おすすめ診断」は、キーボード選びに迷っている人（まさに私のような人）にとって非常に助かる機能です。
専門用語が多くて違いがわからない、という悩みに応えてくれます。

[改善してほしい点]
商品詳細ページに「キーの重さ（押下圧）」「キーストローク（深さ）」の情報があると助かります
下部ナビゲーションのアイコンがわかりにくく、カートページにたどり着くまでに迷いました
商品一覧画面から直接カートに追加できるボタンがあると、さらに効率的

[感情]
このサイトを使って、希望が持てました。
長年、自分に合うキーボードを探し求めてきましたが、このサイトなら見つかるかもしれないと感じました。
障害への理解が得られず孤独に試行錯誤を続けてきましたが、このサイトの店主は「わかってくれている」と感じました。

これで高橋恵さんのペルソナとしてのユーザビリティテストを完了しました。
全体として、このECサイトは非常に使いやすく、特に身体的制約のあるユーザーへの配慮が素晴らしいと感じました。