フィルムトランジション

コンテンツ間のコンテキスト変更のためのシネマティックトランジション効果

フィルムトランジション

フィルムトランジションは、関連のない、または離れたコンテンツ間のナビゲーション時に使用されるシネマティックトランジションパターンです。フェードと同様に、完全に新しいエリアに入ることを伝えますが、より特別な視覚体験を提供します。

デモ

UXの原則

いつ使用するか？

フィルムトランジションはコンテキストの変更に使用されます。

コンテンツ関係による適合性

콘텐츠 관계	적합성	설명
無関係なコンテンツ	✅	完全に独立したセクション間のナビゲーション（ホーム → 設定）
兄弟関係	❌	同レベルのコンテンツにはスクロールの使用を推奨
階層関係	❌	親子構造にはヒーローのような拡張トランジションの使用を推奨

主な使用例

トップレベルナビゲーション：ボトムタブやサイドバーメニューでのセクション間の移動
コンテキスト切り替え：接続点のない画面間の遷移
新しいタスクの開始：完全に異なるタスクフローへの進入
特別な瞬間の演出：重要な画面遷移時に視覚的な強調が必要な場合

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

クリーンな分離：フェードのように前の画面と新しい画面の間に明確な境界を作成
視覚的な興味：単純なフェードよりも動的なトランジションでユーザーの注意を引く
プレミアム体験：特別なトランジション効果でアプリの品質と洗練度を向上

モーションデザイン

フィルムトランジションは、プロジェクターを通過するフィルムのメカニズムから着想を得ています。

出ていく画面の動き 現在の画面が縮小しながら上に移動します。フィルムフレームがプロジェクターレンズを通過して上に移動するように、画面が小さくなり、視界から離れていく感じを与えます。この過程で、ページの周りに黒い余白が現れ、フレームの境界が明確になります。

フレーム間隔の演出 2つの画面の間に短い間隔が露出します。これは実際のフィルムストリップのフレーム間の黒いギャップを表現したもので、1つのシーンが終わり、次が始まることを視覚的に伝えます。

入ってくる画面の登場 新しい画面は下から小さなサイズで現れ、上に移動しながら徐々に拡大します。フィルムフレームがプロジェクターレンズに到達し、スクリーンサイズに拡大されるプロセスを想起させます。最終的に画面に完全にフォーカスされ、トランジションが完了します。

このシーケンスは、アナログ映画のロマンチックな感性とともに、「新しいシーンに移る」という明確な視覚的メタファーをユーザーに提供します。

基本的な使い方

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

const config = {
  defaultTransition: film()
};

export default function App() {
  return (
    <Ssgoi config={config}>
      {/* アプリのコンテンツ */}
    </Ssgoi>
  );
}

実践例

1. タブナビゲーション

ボトムタブバーやトップタブでのメインセクション間のナビゲーション：

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

アクセシビリティ

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

ベストプラクティス

✅ すべきこと

トップレベルナビゲーションにデフォルトで使用
コンテンツが完全に変わる時に使用
特別なブランド体験が必要な時に使用

❌ してはいけないこと

関連コンテンツ間のナビゲーションには使用しない（スライドやスクロールを使用）
過度に複雑なアニメーションは避ける（ユーザーがめまいを感じる）
部分的なUI変更には使用しない

フィルム トランジション

フィルムトランジション