AIでコード生成する時代のUIチェックリスト！Claude Codeで作るWebアプリの品質を上げるガイドライン

Claude CodeやCopilotでWebアプリのUIを生成することが当たり前になった今、「動くけど使いにくい」コードが量産されていませんか？本記事では、Vercelの「Web Interface Guidelines」をベースに、LLMでコードを生成する際に見落としがちなUI/UXのチェックポイントをまとめました。いわゆる「vibe coder」（雰囲気でコーディングする人）でも、このチェックリストを使えば、プロフェッショナルな品質のインターフェースを作れるようになります。

この記事のポイント

• キーボード操作とアクセシビリティは最低限守るべき基準
• ローディング表示には「最小表示時間」を設定すべき
• タッチターゲットはデスクトップ24px以上、モバイル44px以上が推奨
• 「すべての状態」（空、疎、密、エラー）をデザインすることが品質の鍵

なぜUIチェックリストが重要なのか

Claude Codeに「ログインフォームを作って」と頼めば、機能的には動くコードが生成されます。しかし、そのフォームは本当に使いやすいでしょうか？キーボードだけで操作できるでしょうか？エラー時の表示は適切でしょうか？

LLMは「動くコード」を生成するのは得意ですが、「使いやすいコード」を生成することは保証しません。基準やガイドラインを明示的に指示しない限り、アクセシビリティやユーザビリティは「そこそこ」のレベルに留まりがちです。

本記事のチェックリストは、Claude Codeへの指示に組み込んだり、生成されたコードのレビュー時に参照したりすることで、UI品質を一段引き上げるために活用できます。

インタラクション設計のチェックポイント

まず、ユーザーがアプリとどう対話するかに関する基準です。

キーボード操作: WAI-ARIAパターンに基づき、すべての機能がキーボードで操作可能であるべきです。マウスやタッチでしか使えないUIは、アクセシビリティの観点から問題があります。

フォーカス管理: モーダルを開いた時、フォーカスはそのモーダル内に閉じ込められるべきです（フォーカストラップ）。モーダルを閉じた後は、開く前にフォーカスされていた要素に戻るべきです。

タッチターゲット: ボタンやリンクのクリック可能領域には最小サイズがあります。デスクトップでは24px以上、モバイルでは44px以上が推奨されています。小さすぎるボタンは、特にモバイルで操作しにくくなります。

ローディング表示: ローディングインジケーターを表示する前に150-300msの遅延を設け、表示後は最低300-500msは表示し続けるべきです。これにより、一瞬のローディング表示によるちらつきを防げます。

アニメーションのベストプラクティス

アニメーションは適切に使えばUXを向上させますが、不適切に使うとユーザーを不快にさせます。

prefers-reduced-motion対応: ユーザーがOSの設定で「視覚効果を減らす」を選択している場合、アニメーションを控えるべきです。CSSのメディアクエリで検出できます。

GPU加速プロパティの使用: transformやopacityはGPUで処理されるため、widthやheightをアニメーションさせるより滑らかです。

中断可能なアニメーション: ユーザー入力があった場合、進行中のアニメーションは中断可能であるべきです。「アニメーションが終わるまで待たされる」のはストレスの原因になります。

レイアウトとレスポンシブデザイン

レイアウトは、異なるデバイスや画面サイズで適切に機能する必要があります。

光学的整列（Optical Alignment）: 数学的に正確な配置よりも、視覚的にバランスが取れた配置を優先します。例えば、再生ボタンの三角形は、単に中央に配置するだけでなく、視覚的な重心を考慮して調整します。

適切なgrid/flexbox活用: 複雑なレイアウトにはCSS GridやFlexboxを活用し、float や absolute positioning に頼りすぎないようにします。

複数デバイスでのテスト: モバイル、ラップトップ、ウルトラワイドモニターなど、異なる画面サイズで実際にテストすることが重要です。シミュレーターだけでなく、実機でのテストも推奨されます。

コンテンツ管理と状態設計

コンテンツの表示方法も、UXに大きく影響します。

すべての状態をデザインする: 空の状態（データがない）、疎の状態（データが少ない）、密の状態（データが多い）、エラーの状態。これらすべてに対応したUIを設計する必要があります。Claude Codeに「リスト表示を作って」と頼む際には、「空の場合のメッセージも含めて」と指示しましょう。

適切な引用符の使用: プログラミングで使う直線的な引用符（”）ではなく、タイポグラフィ的に正しい引用符（”” や ”）を表示に使用します。

widows/orphans回避: 段落の最後の行が1語だけになる（widow）、最初の行がページの最後に残る（orphan）といった組版上の問題を避けます。

アクセシブルな名前: すべてのインタラクティブ要素には、スクリーンリーダーが読み上げられる名前が必要です。

フォーム設計の重要ポイント

フォームは多くのWebアプリの中核機能です。ここでの使いやすさは、アプリ全体の評価に直結します。

Enterキーで送信: フォーム内でEnterキーを押したら送信されるべきです。これは最も基本的なユーザビリティ要件の一つです。

すべてのコントロールにlabel関連付け: 入力フィールドには必ず <label> を関連付けます。placeholderだけでは不十分です。

パスワードマネージャー互換性: autocomplete属性を適切に設定し、パスワードマネージャーがログイン情報を自動入力できるようにします。

パフォーマンス基準

遅いアプリは使われなくなります。パフォーマンスは機能の一部です。

API応答時間: POST/PATCH/DELETEなどの変更操作は500ms以内に完了すべきです。

大規模リストの仮想化: 数百〜数千件のアイテムを表示する場合、仮想スクロール（表示領域のアイテムだけをレンダリング）を使用します。

画像とフォントのプリロード: クリティカルな画像やフォントは事前に読み込み、表示のちらつきを防ぎます。

デザインシステムの原則

一貫したデザインは、ユーザーの学習コストを下げ、信頼感を高めます。

レイヤードシャドウ: 影は1層ではなく、複数層を重ねることで自然な立体感を出せます。

カラーブラインドフレンドリー: 色だけで情報を伝えず、形やテキストも併用します。赤と緑だけで状態を区別すると、色覚異常のユーザーには判別できません。

APCA対比推奨: 従来のWCAGコントラスト比より精密なAPCA（Accessible Perceptual Contrast Algorithm）に基づく対比を検討します。

ネストされた角丸: 親要素に角丸がある場合、子要素の角丸は親より小さくするか、なくします（child ≤ parent）。

知っておくと便利なTips

• Claude Codeへの指示にチェックリストを含める: 「フォームを作って。Enterで送信可能、すべての入力にlabel付き、パスワードマネージャー対応で」のように具体的に指示しましょう。

• 生成後にアクセシビリティツールでチェック: axe DevTools、Lighthouseなどのツールで、生成されたコードのアクセシビリティをチェックする習慣をつけましょう。

• 異なるデバイスでテスト: 開発中にモバイルでの表示も確認しましょう。Claude Codeはデスクトップ前提のコードを生成しがちです。

• 状態のバリエーションを指示する: 「このコンポーネントの空状態、ローディング状態、エラー状態も作って」と明示的に依頼しましょう。

まとめ

Claude CodeやCopilotでUIを生成する時代だからこそ、「何が良いUIなのか」を知っておくことの価値は高まっています。AIは指示されたことは実行しますが、指示されていないことは省略します。本記事のチェックリストを活用することで、「動くけど使いにくい」から「動いて使いやすい」へとUI品質を引き上げることができます。

キーボード操作、アクセシビリティ、適切なローディング表示、すべての状態のデザイン。これらは「あればいい」ではなく「なければならない」基準です。AIでコードを生成する際も、この基準を満たしているかをレビューする習慣をつけましょう。

📎 元記事: https://dev.to/sivarampg/web-interface-guidelines-checklist-for-llms-vibe-coders-19j9