frontend-ui-animator

フロントエンド UI アニメーター

ユーザーを圧倒することなく、UX を高める目的に沿った高パフォーマンスのアニメーションを実装します。重要な場面に注力します。ヒーローのイントロ、ホバー時のフィードバック、コンテンツの表示、ナビゲーションのトランジションなどです。

基本理念

「あらゆる場所にアニメーションを使う必要はありません」 — 次の項目を優先します。

優先度	領域	目的
1	ヒーローのイントロ	第一印象、ブランドの個性
2	ホバーインタラクション	フィードバック、見つけやすさ
3	コンテンツの表示	注目を誘導し、認知負荷を軽減
4	背景エフェクト	雰囲気、奥行き
5	ナビゲーショントランジション	空間認識、連続性

ワークフロー

フェーズを順番に実行します。次のフェーズに進む前に、各フェーズを完了してください。

フェーズ 1：分析

1. プロジェクト構成を調べる — app/ 内のすべてのページと components/ 内のコンポーネントを特定します
2. 既存の設定を確認する — tailwind.config.ts で既存のアニメーション／キーフレームを確認します
3. アニメーション候補を特定する — 優先カテゴリ別にコンポーネントを一覧にします
4. 制約を記録する — インストール済みのアニメーションライブラリ（framer-motion など）を記録します

出力：アニメーション監査表。references/component-checklist.md を参照してください。

フェーズ 2：計画

1. アニメーションをコンポーネントに割り当てる — 具体的なアニメーションパターンを割り当てます
2. トリガーを決める — 読み込み、スクロール（インターセクション）、ホバー、クリック
3. 工数を見積もる — 低（CSS のみ）、中（フックが必要）、高（ライブラリが必要）
4. 段階的な導入を提案する — まずはすぐに対応できるものから

出力：コンポーネントとアニメーションの対応を示す実装計画。

フェーズ 3：実装

1. Tailwind の設定を拡張する — キーフレームとアニメーションユーティリティを追加します
2. 動きを抑えた表示への対応を追加する — アクセシビリティを最優先します
3. 再利用可能なフックを作成する — 必要に応じて useScrollReveal、useMousePosition を作成します
4. コンポーネントごとにアニメーションを適用する — references/animation-patterns.md のパターンに従います

パフォーマンスのルール：

// ✅ DO: Use transforms and opacity only
transform: translateY(20px);
opacity: 0.5;
filter: blur(4px);

// ❌ DON'T: Animate layout properties
margin-top: 20px;
height: 100px;
width: 200px;

フェーズ 4：検証

1. ブラウザーでテストする — すべてのアニメーションを目視で確認します
2. 動きを抑えた表示をテストする — prefers-reduced-motion が機能することを確認します
3. CLS を確認する — アニメーションによるレイアウトシフトがないことを確認します
4. パフォーマンスを監査する — スクロールアニメーションでカクつきがないことを確認します

クイックリファレンス

アニメーションのトリガー

トリガー	実装
ページ読み込み	段階的な表示には animation-delay を指定した CSS の animation
ビューポート内へのスクロール	IntersectionObserver または react-intersection-observer
ホバー	Tailwind の hover: ユーティリティまたは CSS の :hover
クリック／タップ	useState による状態駆動

よく使うパターン

子要素を段階的に表示：

{items.map((item, i) => (
  <div 
    key={item.id}
    style={{ animationDelay: `${i * 100}ms` }}
    className="animate-fade-slide-in"
  />
))}

スクロール表示フック：

const useScrollReveal = (threshold = 0.1) => {
  const ref = useRef<HTMLDivElement>(null);
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => entry.isIntersecting && setIsVisible(true),
      { threshold }
    );
    if (ref.current) observer.observe(ref.current);
    return () => observer.disconnect();
  }, [threshold]);

  return { ref, isVisible };
};

使用例：

const { ref, isVisible } = useScrollReveal();
<div ref={ref} className={isVisible ? 'animate-fade-in' : 'opacity-0'} />

リソース

• アニメーションパターン：references/animation-patterns.md を参照してください
• 監査テンプレート：references/component-checklist.md を参照してください
• Tailwind プリセット：references/tailwind-presets.md を参照してください

技術スタック

• CSS アニメーション：シンプルなエフェクトの標準として使用します
• Tailwind ユーティリティ：ホバー状態や基本的なアニメーションに使用します
• Framer Motion：複雑なオーケストレーション、ジェスチャー、レイアウトアニメーションに使用します
• GSAP：タイムラインベースのシーケンスに使用します（すでにインストールされている場合）

アクセシビリティ（必須）

グローバル CSS に必ず含めてください。

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}