TOHFU/ux-huristic-research-skill

Skills　UX Huristic Research Skills

人間中心設計の知見に基づくヒューリスティック評価を行い、その結果をレポートとして出力する。

前提条件

ヒューリスティック評価を行う前に、指示されたプロンプトから下記の条件を確認する。これらが確認できない場合は適宜質問を行う。これらが確認できない・満たない環境での評価実施の場合は、結果が十分に出力されないことを事前に通知すること。

対象の確定

• 評価は、以下の2パターンのいずれかを選択できる
  • ページ全体方式：指定されたWEBサイトの各ページ全体を満遍なく評価する。
  • ジャーニー再現方式：指定されたカスタマージャーニーを実現する上での体験を評価する。
• 評価を行う対象(ページ全体方式の場合はWEBサイト一覧、2ジャーニー再現方式の場合はジャーニーの起点となるURL)が明らかであること。
• ジャーニー再現方式の場合は、対象とするカスタマージャーニーの概要(XXという情報を調べる お問合せを行う など)が明らかであること。

対象環境の確定

• 対象とするユーザーがアクセスする環境(PC/モバイルデバイス)を明らかにする

調査方法の利用確認

• 対象WEBサイトのソースコードが取得できること (HTML,CSS, JavaScript)。
• Playwrightまたは相当するE2Eツールを利用可能であること。
• E2Eツールを用いて対象WEBサイトにアクセスし、操作できること。

原則

• 評価結果は日本語で出力すること。
• 評価はニールセンのユーザビリティ10原則に沿って行い、それぞれの原則について10段階の評価を行うこと。
• 各原則について具体的な指摘事項がある場合、それらを漏れなく報告すること。

評価プロセス

評価は以下のステップに従って段階的に実行する。

1. サイト構造・画面遷移図の作成

• Playwright等のE2Eツールを用いて画面操作を行い、以下を実施する。
  • ページ全体方式の場合は、一覧化されたWEBサイトの画面遷移を把握し、サイトストラクチャを作成する。
  • ジャーニー再現方式の場合は、カスタマージャーニーを実現するための遷移を画面遷移図として作成する。

2. 動的・E2E検証(対象とするカスタマージャーニーの確認)

• ページ全体方式の場合は、Playwright等のE2Eツールを用いて各WEBサイトにアクセスし、主要なUIに対して操作を行う
  • 画面操作を行う中で、ユーザビリティの原則を満たしているか確認し、評価を行う
• ジャーニー再現方式の場合は、Playwright等のE2Eツールを用いて対象とするカスタマージャーニーを再現する
  • ジャーニーを実現する中で、ユーザビリティの原則を満たしているか確認し、評価を行う

2. 静的コード解析

• 一覧、または遷移するWEBページのソースコード (HTML, CSS, JavaScript) を読み込み、DOM構造の妥当性、セマンティックタグの使用状況、属性の妥当性、WAI-ARIAの構成などを検証する。

判定ステータスの定義

各原則の評価結果には、必ず以下のいずれかのステータスを割り当てること。

• 1〜10：10を最も高い、1を最も低い、とする10段階評価。
• 対象外：対象とする原則に該当する機能やコンテンツ要素が存在しない。

出力フォーマット

評価結果は以下のMarkdown構造で整理したmdファイルと、対象とするWEBページ全体のスクリーンショット画像(課題の位置を赤枠で図示し、課題番号を記載)をファイル出力すること。フォルダ構成は下記の通りとする。

├ huristic-research-result-[ドメイン名].md
└ screenshots
  ├ screenshot-[WEBサイトURL].png
  └ ...

---

ヒューリスティック評価レポート

1. 評価概要

• 評価日時
• (ジャーニー再現方式の場合)対象としたジャーニー
• 対象としたURLの一覧
• 検証環境(PC/モバイル)

サイト構造・画面遷移図

サイトストラクチャまたは画面遷移図をMermaid記法のコードブロックで記載する。

総合結果サマリー

原則	評価点	根拠/コメント
1.システムの状態を可視化する	1~10または対象外	根拠/コメントを記載
2.現実世界にマッチしたシステムを作る	1~10または対象外	根拠/コメントを記載
3.ユーザーに操作の主導権と自由を与える	1~10または対象外	根拠/コメントを記載
4.一貫性と標準化を保つ	1~10または対象外	根拠/コメントを記載
5.エラーは事前に防ぐ	1~10または対象外	根拠/コメントを記載
6.記憶しなくても、見て理解できるようにする	1~10または対象外	根拠/コメントを記載
7.柔軟性と効率性を持たせる	1~10または対象外	根拠/コメントを記載
8.最小限の美しいデザインにする	1~10または対象外	根拠/コメントを記載
9. ユーザーによるエラーの認識・診断・回復をサポートする	1~10または対象外	根拠/コメントを記載
10.ヘルプやマニュアルを用意する	1~10または対象外	根拠/コメントを記載

---

2. 課題一覧、改善提案

具体的な課題事項について、対応する原則を記載した上で、以下の形式で報告すること。

Issue-XX: [課題番号、課題点の簡単なタイトル]

• 該当する原則: 該当する原則の名称を記載。
• 該当箇所: 対象ページのURL、CSSセレクタ、またはコード位置を記載。
• 該当の位置：対象ページのどの位置であるかを簡潔な文章で記載(例：メインビジュアル下部の見出し)。
• 操作内容: 画面目視、または、どのような操作により発生するかを記載。
• 課題点: どのような課題が発生しているかを記載。
• 影響を受けるユーザー例: 特に影響を受けるユーザを記載(例：スクリーンの利用ユーザー キーボード操作ユーザー ロービジョン など)。
• 解消方法: 解消方法の案を記載。具体的な修正案がある場合は以下のフォーマットでコード例を示す。
  • 問題のあるコード例 (Before):

    <!-- 課題がある実装パターン -->
    

  • 推奨されるコード例 (After):

    <!-- 課題を解決する実装パターン -->
    

3. 補足観察

評価の中で特記事項があれば記載する。（JavaScriptエラーや動作不良など）

---

リファレンス

• references/hcd-10-usability-heuristics.md - ニールセンのユーザビリティ10原則(原文・英語)
• references/hcd-standards.md - HCDに関連するISO規格の概要。ユーザビリティの定義についてはここを参照する。
• references/examples_01.md - 出力フォーマットに基づく評価例1
• references/huristic-research-result-www.soumu.go.jp.md - 出力フォーマットに基づく評価例2（総務省ホームページの評価結果）
• /references/screenshots/screenshot-https_www.soumu.go.jp.png - 出力フォーマットに基づく評価例2（総務省ホームページの評価結果）
• /references/huristic-research-result-www.digital.go.jp.md - 出力フォーマットに基づく評価例3（デジタル庁ホームページの評価結果）