フェードトランジション

コンテンツ間のコンテキスト変更のための滑らかなトランジション効果

フェードトランジション

フェードトランジションは、互いに関連のない、または離れたコンテンツ間の移動時に使用される基本的なトランジションパターンです。画面が完全に消えた後、新しい画面が現れ、ユーザーが1つの領域を離れて完全に新しい領域に入ることを明確に伝えます。

デモ

UXの原則

いつ使用するか？

フェードトランジションは**コンテキストの変更（Context Change）**時に使用されます。

コンテンツの関係別適合性

主な使用ケース

• トップレベルナビゲーション: 下部タブやサイドバーメニューでセクション間を移動
• コンテキストの切り替え: 接続点のない画面間の遷移
• 新しいタスクの開始: 完全に異なる作業フローへの進入

なぜこのように動作するのか？

1. 明確な区切り: 前の画面が完全に消えた後、新しい画面が現れて明確な境界を作ります
2. 認知負荷の削減: 突然の画面遷移よりも滑らかなフェードで視覚的衝撃を減らします
3. 汎用性: 方向性がなく、どのナビゲーションパターンにも自然に適用できます

モーションデザイン

出ていく画面: 100% → 0% opacity (素早いフェードアウト)
短い空白: 完全なコンテキスト分離
入ってくる画面: 0% → 100% opacity (滑らかなフェードイン)

このシーケンスは、ユーザーに「以前の空間を離れて新しい空間に入る」というメンタルモデルを提供します。

基本的な使い方

import { Ssgoi } from '@ssgoi/react';
import { fade } from '@ssgoi/react/view-transitions';

const config = {
  defaultTransition: fade()
};

export default function App() {
  return (
    <Ssgoi config={config}>
      {/* アプリの内容 */}
    </Ssgoi>
  );
}

実践的な活用例

1. タブナビゲーション

下部タブバーや上部タブでの主要セクション間の移動:

const config = {
  transitions: [
    {
      from: '/home',
      to: '/profile',
      transition: fade(),
      symmetric: true
    },
    {
      from: '/home',
      to: '/settings',
      transition: fade(),
      symmetric: true
    }
  ]
};

2. 高速トランジション（即座の応答）

ユーザーアクションに素早く反応する必要がある場合:

const config = {
  defaultTransition: fade({
    spring: {
      stiffness: 400,  // 高速トランジション
      damping: 35      // 滑らかな仕上がり
    }
  })
};

3. エレガントなトランジション（プレミアム感）

ブランド体験が重要なページ:

const config = {
  defaultTransition: fade({
    spring: {
      stiffness: 150,  // ゆっくりとしたトランジション
      damping: 25      // 滑らかな減速
    }
  })
};

アクセシビリティ

• prefers-reduced-motion設定時に自動的にアニメーションを無効化
• スクリーンリーダーはトランジション中でもコンテンツ変更を正しく認識
• キーボードナビゲーションと完全互換

ベストプラクティス

✅ DO

• トップレベルナビゲーションにデフォルトで使用
• コンテンツが完全に変わる時に使用
• モバイルアプリと類似した体験を提供する時

❌ DON'T

• 関連コンテンツ間の移動には使用しない（スライドやスクロールを使用）
• 遅すぎるフェードは避ける（ユーザーがイライラする）
• 部分的なUI変更には使用しない