AI生成インターフェースのユーザー体験を改善する Claude プラグインを作成した

AIは数分でUIを出荷できる。しかし、何が間違っているのかをすべて見るには訓練された目が必要だ。

UXデザイナーとしてインターフェースを10年間レビューしてきました — ヒューリスティック評価を行い、使いやすさテストを実施し、デザインシステムを監査してきました。そして最近、私を本当に憂慮させるパターンを目にするようになりました。

AIのコーディングツールは非常に普及しており、多くの人がそれを使って全体的なユーザーインターフェースを生成します。コードは動作します。レイアウトは合理的に見えます。プルリクエストのスクリーンショットも問題なさそうです。出荷されます。そして、ユーザーはそれに苦労します。

不具合のせいではありません。使いやすさの問題です。

読み込み状態が欠如しています。すべてが注目を浴びるような平坦な視覚的階層。キーボード操作の欠如。色だけに依存するステータス表示。ダッシュボードの間隔は8px、13px、20pxといったように不揃い。プレースホルダーテキストのあるフォームにラベルがない。

これらはエッジケースではありません。AI生成のインターフェースは「十分に良い」ことを最適化しています — 表面的には機能的ですが、ユーザー体験の品質を求めることはほとんどありません。多くのビルダーには、隣にUXデザイナーがいて、何が欠けているかを見つけてもらえるわけではありません。

そこで私は一つ作りました — Frontend Design Audit。

Frontend Design Auditとは？

Frontend Design Audit は、15の厳選された使いやすさの原則に対してフロントエンドコードをレビューし、見つかった問題を直接コードに修正します。

React、Vue、Svelte、プレーンHTML/CSS、または任意のフロントエンドスタックで動作します。ライブURLを指してレポートのみの監査も可能です。コードを読み取り、体系的に評価し、重大度を示すレポートを提示し、修正を実装します。

なぜ既存ツールではこの点を拾えないのか

コード品質には優れたツールがあります — ESLint、Prettier、TypeScript、Lighthouse。しかし、ユーザー体験を見てくれるツールはほとんどありません。

• ビジュアル階層は実際にユーザーの視線を導いているか？
• 間隔のシステムは一貫性があるか、それともランダムか？
• 対話可能な要素は本当に対話可能に見えるか？
• ユーザーがアクションを完了したとき、フィードバックは得られるか？
• パターンはページ間で一貫しているか、それとも各コンポーネントが別人にデザインされたように感じるか？

これがこのプラグインが埋めるギャップです。Senior UXデザイナーが行うようにUIを全体として評価し、デザインと使いやすさを総合的に判断します。

3つのAI生成インターフェースでテストしました。結果は以下のとおり。

プラグインをテストするため、私は3つの一般的なインターフェースタイプで実行しました。コーヒーショップのランディングページ、SaaSの料金ページ、タスク管理ダッシュボードです。いずれもClaudeのフロントエンドデザイン機能を用いて構築されており、機能的で視覚的にはそこそこ、初見では特に際立ってはいません。良い基準です。

しかし、3つすべてに、明らかに重大な使いやすさの問題を抱えていました。

コーヒーショップのランディングページ

図1 — コーヒーショップ（前後）

主な使いやすさの問題:

1. フォームはラベルとしてプレースホルダーテキストを使用していました。ユーザーが入力を始めるとラベルが消えてしまい、フィールドが何のためか見失いやすくなります。スクリーンリーダーはこれらをプレースホルダーとして扱い、ラベルとしては扱われないためアクセシビリティを壊します。 (図1 を参照)
2. ビューのメタタグがピンチ拡大をブロックしており（user-scalable=no）、モバイルの低視力ユーザーにとってサイトを使えなくします。
3. 注文フォームは成功フィードバックにalert()を使用し、その後フォームをクリアします。アラートを誤って閉じた場合、入力データは全て消えます。

SaaSの料金ページ

図2 — SaaSの料金（前後）

主な使いやすさの問題:

1. モバイルではすべてのナビゲーションリンクがdisplay: noneで非表示 — ハンバーガーメニューも代替手段もなし。唯一クリックできるのはCTAボタンだけです。 (図2 を参照)
2. スタートプランはデスクトップで左端のブロックだからモバイルでも先頭になる。最も人気のあるプランを先に出すという目的に反しています。
3. プラン名が見出しではなく<div>要素だったため、文書構造が壊れている。

タスク管理ダッシュボード

図3 — タスクダッシュボード（前後）

主な使いやすさの問題:

1. アクティビティのステータスは色だけで伝えられており、ラベルがなく、カラー視覚障害や低視力のユーザーには意味を成しません。 (図3 を参照)
2. ドロップダウンメニューはキーボード操作が欠如 — 矢印キーでの移動や閉じるEscがない。
3. ボタンにはアクティブ/押下状態がなく、操作が反応していないと感じられる。

使ってみる

このプラグインは表面的なUIの問題を捉えるだけではなく、一度の修正で終わるものでもありません。インターフェースをシステムとして分析し、目に見える問題と見えない問題の双方を浮き彫りにし、直感的で生産性の高いアウトプットを提供します。

これは無料で、オープンソースで、MITライセンスです。

👉 github.com/mistyhx/frontend-design-audit