HTMLコンポーネントのリファクタリング
いつ使用するか
- ユーザーが既存のHTMLを送り、改善を依頼した場合。
- ユーザーがコンポーネントのレスポンシブ対応、アクセシビリティ、パフォーマンスの確認を依頼した場合。
- ユーザーがアニメーションの追加、タイポグラフィの変更、ビジュアルの強化を依頼した場合。
プロセス
- 現在のHTMLコンポーネントを取得する。
- ユーザーから改善点のリストを取得する。リストが指定されていない場合は、以下の優先順位に従って作業する。
- 既存の構造を保持する — ゼロから書き換えない。
- 更新されたHTMLと、必要なCSS/JS（必要な場合）を返す。
改善の優先順位（重要度順）
1. タイポグラフィ
- 見出し:
font-heading font-black tracking-tight、サイズはtext-4xl md:text-6xl - テキスト:
leading-relaxed text-slate-600 - 「ぶら下がり」行を避ける — 必要に応じて
text-balanceを使用する - コントラストを確認する: 明るい背景に暗いテキスト、暗い背景に明るいテキスト
2. マイクロアニメーション
- スクロール時の出現: クラス
section-reveal（テンプレートに既に存在） - カードのホバー:
hover:-translate-y-1 hover:shadow-xl transition-all - ボタンのホバー:
hover:-translate-y-0.5 transition - アイコンのホバー:
group-hover:scale-110 transition-transform
3. レスポンシブ対応
- 360pxでの確認: 水平スクロールがなく、すべての要素が収まること
- 768pxでの確認: グリッドが2列に再構成されること
- 1440pxでの確認: コンテンツが
max-w-7xlを超えて引き伸ばされないこと - 必要に応じて — フォントサイズに
clamp()を使用する
4. アクセシビリティ（a11y）
<div>の代わりにセマンティックタグを使用する- アイコンボタンに
aria-labelを設定する - フォーカススタイル:
focus:ring-2 focus:ring-industrial-orange focus:outline-none - すべての画像に
altを、装飾アイコンにはaria-hidden="true"を設定する
5. パフォーマンス
- 未使用のTailwindクラスを削除する
- すべての画像が
loading="lazy"であることを確認する - 画像に
widthとheightを追加する（CLSを防止） - CSSを重複させない — Tailwindユーティリティを使用する
応答形式
以下の順序で返す:
- HTMLブロック — 更新されたコンポーネントコード（コピーしやすいように ```html で囲む）
- 変更点のリスト — 簡潔に、3～5項目で、何が改善されたかを示す
- 追加のCSS/JS — 追加した場合は、どこに配置するかの注釈とともに別ブロックで示す
呼び出し例
ユーザー:
Heroコンポーネントを改善してください: タイポグラフィを強化、箇条書きの出現アニメーション、360pxでのレスポンシブ対応。コードはこちら: [HTML]
あなた:
<section>...更新されたコード...</section>変更点:
- 見出し:
text-5xl md:text-7xl font-black tracking-tightに強化- 箇条書きに
section-revealを追加し、style="animation-delay: Xms"で遅延を設定- 箇条書きのグリッドを
grid-cols-1 sm:grid-cols-2 md:grid-cols-4に再構成- 360pxで確認 — スクロールなし
- CTAボタンに
aria-labelを追加追加CSS (
src/styles/custom.cssに配置):.hero-bullet { animation: reveal .8s ease-out both; }