콘텐츠 관계	적합성	설명
関連のないコンテンツ	❌	独立したセクションはフェード使用を推奨
兄弟関係	✅	同一レベルのシーケンシャルコンテンツに最適
階層関係	❌	親子構造はヒーローやPinterest使用を推奨

主な使用ケース

チャプターナビゲーション: ドキュメントやガイドのセクション間移動
オンボーディングフロー: ステップバイステップのチュートリアルや設定プロセス
タイムライン: 時系列順に配置されたコンテンツ
ストーリーテリング: 物語形式のシーケンシャルコンテンツ

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

自然な読書フロー: 上から下へ読む自然なパターンと一致
スクロールジェスチャーとの一貫性: ユーザーが慣れ親しんだスクロール動作の延長線
順序認識: コンテンツの前後関係を直感的に理解

モーションデザイン

UP方向（次へ）:
出ていく画面: 上へ押し上げられる（前のコンテンツが上へ）
入ってくる画面: 下から上昇（次のコンテンツが登場）

DOWN方向（前へ）:
出ていく画面: 下へ降りる（現在のコンテンツが下へ）
入ってくる画面: 上から降りてくる（前のコンテンツが復帰）

基本的な使い方

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

const config = {
  defaultTransition: scroll()
};

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

実践的な活用例

1. ドキュメントナビゲーション

チャプターやセクション間の移動:

const config = {
  transitions: [
    {
      from: '/docs/intro',
      to: '/docs/getting-started',
      transition: scroll({ direction: 'up' }),
      symmetric: true  // 戻る時は自動的にdown
    },
    {
      from: '/docs/getting-started',
      to: '/docs/api',
      transition: scroll({ direction: 'up' }),
      symmetric: true
    }
  ]
};

2. オンボーディングフロー

ステップバイステップのチュートリアル:

const config = {
  transitions: [
    {
      from: '/onboarding/step-*',
      to: '/onboarding/step-*',
      transition: scroll({ 
        direction: 'up',
        spring: { stiffness: 300, damping: 30 }
      })
    }
  ]
};

3. ミドルウェアによる動的方向

ナビゲーション順序に応じて方向を自動決定:

const createMiddleware = (routes) => {
  return (from, to) => {
    const fromIndex = routes.indexOf(from);
    const toIndex = routes.indexOf(to);
    
    if (fromIndex < toIndex) {
      return { from: "/nav/prev", to: "/nav/next" };
    } else {
      return { from: "/nav/next", to: "/nav/prev" };
    }
  };
};

const config = {
  transitions: [
    {
      from: "/nav/prev",
      to: "/nav/next",
      transition: scroll({ direction: "up" })
    },
    {
      from: "/nav/next",
      to: "/nav/prev",
      transition: scroll({ direction: "down" })
    }
  ],
  middleware: createMiddleware(routeOrder)
};

パフォーマンス最適化

transform: translateY()のみを使用してGPUアクセラレーションを活用
レイアウト再計算なしで滑らかな60fpsを維持
スクロール位置の自動保存により追加計算は不要

アクセシビリティ

prefers-reduced-motion設定時にトランジションを無効化
キーボードナビゲーション完全サポート
スクリーンリーダーで階層構造を正しく伝達

ベストプラクティス

✅ DO

ドキュメントやガイドのシーケンシャルセクション移動に使用
オンボーディングやチュートリアルステップに適用
タイムラインベースのコンテンツに活用
symmetricオプションで双方向の一貫性を維持
モバイルの自然なスクロールジェスチャーと連携

❌ DON'T

関連のないセクション間の移動には使用しない（フェードを使用）
階層構造のナビゲーションには使用しない（ヒーローやPinterestを使用）
左右スワイプと混在させない（一貫性を維持）