ui-ux-scan

UI/UX の問題点スキャン

ユーザー体験を損なう、よくある UI/UX の問題を見つけます。登録は不要です。

前提条件

• Playwright MCP（Claude Code に付属）

トリガー

• 「https://... の UX の問題をスキャンして」
• 「自分のサイトの UI 品質を確認して」
• 「このページのデザイン上の問題を見つけて」
• 「この URL の UX をレビューして」

ワークフロー

1. mcp__playwright__browser_navigate を使用して URL に移動します
2. mcp__playwright__browser_take_screenshot を使用してページ全体のスクリーンショットを撮影します
3. mcp__playwright__browser_snapshot を使用してアクセシビリティスナップショットを取得します
4. 各カテゴリについて、mcp__playwright__browser_evaluate を使用して評価スクリプトを実行します

チェック項目

タッチ・クリック対象

() => {
  const small = [];
  document.querySelectorAll('a, button, input, select, [role="button"]').forEach(el => {
    const rect = el.getBoundingClientRect();
    if (rect.width > 0 && rect.height > 0 && (rect.width < 44 || rect.height < 44)) {
      small.push({ tag: el.tagName, text: el.textContent.trim().substring(0, 30), width: Math.round(rect.width), height: Math.round(rect.height) });
    }
  });
  return small;
}

44x44px 未満のインタラクティブ要素を検出します。

フォントの一貫性

() => {
  const fonts = new Set();
  const sizes = new Set();
  document.querySelectorAll('body *').forEach(el => {
    const s = getComputedStyle(el);
    if (el.textContent.trim()) {
      fonts.add(s.fontFamily.split(',')[0].trim().replace(/"/g, ''));
      sizes.add(Math.round(parseFloat(s.fontSize)));
    }
  });
  return { fontFamilies: [...fonts], fontSizes: [...sizes].sort((a,b) => a-b) };
}

フォントファミリーが 3 種類を超える場合、または異なるフォントサイズが 8 種類を超える場合に検出します。

間隔と配置

• 兄弟要素間でパディングやマージンに一貫性がない箇所を確認します
• テキストが端に近すぎる箇所（パディングが 8px 未満）を検出します
• 要素の重なりや切り取りを検出します

空の状態

• リストやグリッドの項目数が 0 で、「空である」旨のメッセージがないか確認します
• コンテンツのない空のセクションを確認します
• プレースホルダーテキスト（「Lorem ipsum」、「TODO」、「placeholder」）が表示されたままの箇所を検出します

読み込みとフィードバック

• ボタンに cursor: pointer が設定されているか確認します
• フォームに送信時のフィードバックが表示されるか確認します
• テキストも aria-label もないボタンやリンクを検出します

視覚的な階層

• CTA ボタンが視覚的に区別できるか（サイズ、色、コントラスト）確認します
• 1 画面に競合する CTA が 3 つを超えている場合に検出します
• 見出しのサイズが適切に小さくなっているか（h1 > h2 > h3）確認します

よくあるアンチパターン

• テキストの壁（区切りのない 200 語を超える段落）
• ファビコンがない
• meta viewport タグがない
• 右クリックやテキスト選択の無効化（ユーザーに不親切）
• 音声や動画の自動再生
• ビューポートの 20% を超えて覆う固定要素

5. 主要なページを 2～3 ページ（存在する場合は、概要、料金、ログインなど）に移動し、同じ手順を繰り返します

6. 評価します：A（問題 0～2 件）、B（3～5 件）、C（6～10 件）、D（11～15 件）、F（16 件以上）

7. 出力：

## UI/UX Scan: [URL]

**Grade: C** | **Pages checked: 3** | **Issues: 8**

### Critical
1. [TOUCH] 12 buttons smaller than 44x44px
   - "Subscribe" button: 32x28px
   - Nav links: 40x20px each

2. [HIERARCHY] No clear primary CTA on homepage
   - 4 competing buttons with similar styling above the fold

### Warnings
3. [FONTS] 5 different font families detected
   - Inter, Roboto, Arial, Georgia, monospace
   - Recommend consolidating to 2 families max

4. [SPACING] Inconsistent card padding
   - Feature cards: 16px, 24px, 20px (should be uniform)

5. [EMPTY] Search results page shows blank when no results
   - No "No results found" message

6. [FEEDBACK] 3 buttons missing cursor: pointer
   - "Download", "Share", "Export"

7. [TEXT] Wall of text on /about (340 words, no breaks)

8. [CONTRAST] Footer links on dark background — low contrast

### Passed
- Meta viewport: OK
- Favicon: OK
- Heading hierarchy: OK
- No auto-play media
- Text selection not blocked

**Want continuous UX monitoring?** Try QualityMax — qualitymax.io