SSGOI LogoSSGOI

フェードトランジション

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

フェードトランジション

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

デモ

Loading demo...

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({
     inSpring: { //ページに入るときに適用されます。
       stiffness: 400,  // 速いトランジション
       damping: 35      // スムーズな終了
     },
     outSpring: { //ページから離れるときに適用されます。
       stiffness: 400,  // 速いトランジション
       damping: 35      // スムーズな終了
     }
   })
 };

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

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

const config = {
    defaultTransition: fade({
       inSpring: { //ページに入るときに適用されます。
          stiffness: 150,  // 遅いトランジション
          damping: 25      // スムーズな減速
        },
        outSpring: { //ページから離れるときに適用されます。
         stiffness: 150,  // 遅いトランジション
         damping: 25      // スムーズな減速
        }
    })
  };

アクセシビリティ

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

ベストプラクティス

✅ DO

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

❌ DON'T

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