【結論】解決策 / 実行コマンド
Claude CodeはHTMLとCSSの生成、既存ページの改善、アクセシビリティ監査、リンク確認に利用できます。
見た目だけでなく、セマンティクス、キーボード操作、ラベル、エラー表示、レスポンシブ、CSPまで完了条件へ含めます。
# ターミナルで実行：変更前のブランチを作成
git switch -c feature/contact-page
# ターミナルで実行：Claude Codeを起動
claude
# 別ターミナルで実行：プレビューサーバーを起動
python -m http.server 8000具体的な手順・設定方法
既存のデザインシステム、ブラウザ対象、画面幅、フォーム仕様を提示します。
最初にDOM構造を確認し、CSSとJavaScriptの変更範囲を合意します。
ブラウザでリンク、Tab順、ラベル、コントラスト、コンソールを確認します。
実践プロンプト / 活用テクニック
# 起動後のセッション内で入力
contact.htmlとstyle.cssだけを対象に改善してください。
フォームのlabel、必須表示、エラーメッセージ、フォーカスリングを追加してください。
最初に問題一覧を提示し、承認後に最小差分で修正してください。
画像パスと既存フォーム送信先は変更しないでください。注意点・よくあるエラーと対処法
aria-labelを全要素へ機械的に付けるのは誤りで、ネイティブHTMLとlabelを優先します。
相対パスを変更した場合は画像、CSS、JavaScript、canonicalのリンク切れを確認してください。
AIが見た目を改善してもブランド承認や法定表記の確認は人間が行います。