UIデザインで画面遷移の動きがスムーズだと、操作感や体験の印象が大きく向上します。Figmaでプロトタイプを作るとき、「遷移の作り方」をマスターすると、UXがワンランク上がります。ここでは、遷移の基本概念から種類、具体的な設定手順、コツ、そしてトラブル対策までが含まれます。これを読めば、「Figma プロトタイプ 遷移 作り方」における全ステップが分かり、すぐに実践できるようになります。
目次
Figma プロトタイプ 遷移 作り方 の基本構造と準備
Figmaでプロトタイプの遷移を作るとき、まず知っておきたいのは「どこを、どのように、何を動かすか」の構造です。準備段階で画面（フレーム）、要素（レイヤー）、コンポーネントやバリアントの設計を整えておくと、遷移動作を設定した後の手戻りが少なくなります。Smart Animate を使うかどうか、変化のある要素に名前を揃えるかなども重要なポイントです。
画面フレームとレイヤーの設計
まずはフレームをきちんと構成することが重要です。各画面を表すフレームを用意し、共通のUI要素（ナビバーやステータスバーなど）は階層や名称を統一しておきます。変更する要素のみを差分として設計し、Smart Animate に対応させると滑らかな遷移になります。不要な要素を移動させるとアニメーションが重くなるため注意が必要です。
コンポーネントとバリアントの活用
ボタンやカードなど、状態変化（通常・ホバー・押下など）のある要素はコンポーネントで設計し、バリアントを使って状態ごとに見た目を変えます。プロトタイプ設定時には、バリアント間を「Change To」アクションで繋ぎ、トリガーを「While Hovering」「On Click」などで設定することで、操作感のあるUIを実現できます。バリアントを使うことで同じコンポーネントをどこでも使える設計になります。
Smart Animate に必要な共通レイヤーと命名規則
Smart Animate 機能を活用するには、遷移前後のフレームで一致するレイヤーがあることが前提になります。レイヤー名や階層が一致していると、Figmaはそれらの変化（位置・大きさ・透明度・回転など）を補間して滑らかに動かします。命名規則を守り、レイヤー構造を似せることが品質の高いアニメーションにつながります。共通レイヤーがないと自動でフェード（Dissolve）遷移になります。
Figma プロトタイプ 遷移 作り方 のトリガーとアクションを理解する
画面遷移を動かす仕組みは「トリガー」と「アクション」です。どういう操作をユーザーが行ったら遷移するか（トリガー）、それに対して画面やバリアントをどのように動かすか（アクション）を理解することで、思い通りの遷移を設計できます。最新のFigmaでは多様なトリガーとアクションを組み合わせることが可能です。
主なトリガーの種類
トリガーはユーザーの操作をきっかけとして遷移を発生させるものです。主なものは以下です。
- On Click / On Tap：ボタンなどをクリックまたはタップしたとき
- On Drag：画面や要素をドラッグまたはスワイプしたとき
- While Hovering：カーソルが要素上にある間
- Mouse Enter / Mouse Leave：カーソルが要素領域に入る／出るとき
- While Pressing：押し続けたとき（長押し相当）
- After Delay：一定時間経過後
- When Video Hits / When Video Ends：動画の特定タイミングや動画終了時
これらを使い分けると、操作感やコンテンツの流れを直感的に設計できます。
アクション・遷移タイプの種類
トリガーの先で起こる遷移のタイプも複数あります。適切なアクションを選ぶことで、ユーザーに自然な画面遷移を提供できます。代表的なアクションは以下です：
- Navigate to（別のフレームへの遷移）
- Open Overlay／Close Overlay（オーバーレイを出す／閉じる）
- Change To（バリアント切り替え）
- Back（前の画面に戻る）
これに加えてアニメーションを付けることで、「Instant」「Dissolve」「Move In」「Move Out」「Push」「Slide」「Smart Animate Matching Layers」などの遷移効果が使えます。これにより遷移の動きに緩急や方向性を与えられます。
イージングと所要時間の調整
アニメーションの自然な動きを作るためには、イージングと所要時間（Duration）の設定が欠かせません。イージングは「Linear」「Ease In」「Ease Out」「Ease In Out」「Spring」などがあり、動きの始まり・終わりに変化をつけます。所要時間が短すぎると動きが急すぎ、長すぎると遅くて重く感じることがあります。スライドやフェードは一般的に100〜300ミリ秒が目安ですが、画面の種類や目的に応じて調整するのが良いです。
具体的な遷移の作り方手順
準備とトリガー・アクションの理解ができたら、実際に Figma で遷移を作成する手順を順番に追っていきます。各ステップでエディター操作や設定項目に触れ、初心者でも失敗しにくい流れを示します。
フレームを用意して共通要素を整える
まず、新しいファイルを作成し、遷移先と遷移元となるフレームを用意します。各画面に共通する要素（ナビゲーションバーやヘッダーなど）はコピーしてレイヤー名や階層構造を揃えます。テキストやアイコンは同じ名称にしておくと Smart Animate が正しく働くようになります。共通部分の見た目や配置を固定したいときは「Fixed position when scrolling」を利用します。
プロトタイプモードに切り替えて接続を作成
フレーム同士の接続を作るには、デザインモードからプロトタイプモードに切り替え、要素（ボタンなど）から青いノードをドラッグして遷移先フレームへ接続します。この時点でトリガー（例：On Click）とアクション（Navigate to や Change To）を設定します。プロトタイプパネルに表示される設定項目で操作が可能です。
遷移タイプとアニメーションを設定する
接続後は、遷移タイプ（Transition）を選びます。Instant や Dissolve、Move In／Out、Push、Slide、Smart Animate などから選択し、イージングおよび Duration を調整します。また、Smart Animate Matching Layers をチェックすると、共通レイヤーは滑らかにアニメーションし、残りがメインの遷移動作として動くようになります。これにより動きが分かりやすく、かつ軽く感じる仕上がりになります。
バリアントを使ったマイクロインタラクションの作成
ボタンなどのマイクロインタラクションを表現したい場合は、コンポーネント作成後にバリアントで “Default”“Hover”“Pressed”等の状態を作ります。Prototype モードで各バリアント間を Change To とし、トリガーを設定（例：While Hovering／Mouse Down／On Click など）。この設計により、状態変化のある遷移が滑らかに表現できます。見た目の微調整は Smart Animate を使うと良い効果が得られます。
UIを直感的にする遷移アニメーションを実装するコツとベストプラクティス
遷移がただ動けば良いわけではなく、操作感が直感的であることが重要です。ユーザーがどこで何が起こるか想像しやすく、流れが見える設計にするためのコツをいくつか紹介します。細部の違いが使いやすさを左右します。
遷移の方向性と一貫性を保つ
画面遷移の方向（左から右、上から下など）をデザイン全体で統一することで、ユーザーは遷移パターンを理解しやすくなります。例えばモーダルやサイドメニューは「Move In」で画面端から入ってくるようにし、通常のページ遷移では「Push」や「Slide」で行き来するなど、コンテキストに応じた使い分けが望ましいです。一貫性があると安心感が生まれます。
不要なアニメーションを減らす・必要な部分に強調を入れる
全ての要素を動かすと視覚ノイズになりがちです。遷移で必要な要素のみを動かし、他は静的にしておくことでユーザーの注意が向くポイントが明確になります。例えば共通ヘッダーは動かさず、主体となるカード・コンテンツのみを Smart Animate で動かすなどの工夫が有効です。
パフォーマンスとプレビュー確認の重要性
画面数やアニメーション量が多くなるとプロトタイプの動きが重くなることがあります。プレビューで動作を確認し、滑らかであるかをチェックしてください。特にスマホ表示でスクロールやジェスチャーが多いレイアウトでは処理が重くなりやすいため、実際のデバイスで確認することをおすすめします。
ユーザビリティテストを意識した遷移設計
遷移が直感的かどうかを確かめるために、実際のユーザーに操作してもらいフィードバックを得ることが大切です。特にモーダルやメニューの開閉、カルーセルのスワイプ部分などは誤操作が起きやすいので、トリガーの対象範囲やタイミングを調整してわかりやすくすることが成功につながります。
よくある遷移設計の悩みとトラブルシューティング
遷移を実装してみると、思ったようにならないことが多々あります。ここでは代表的な悩みに対しての対処法を紹介します。問題を意識しておくことで試行錯誤が減ります。
Smart Animate が期待通り働かない
Smart Animate が動かない原因の一つはレイヤー名や階層が一致していないことです。名称が違う、階層の位置が異なる、共通レイヤーでないと判定されない場合にフェード効果に置き換えられます。共通部分の構造を見直し、命名を統一することで解決します。またプロパティ（位置・サイズ・透明度など）が変化していない要素は動かないという仕様も覚えておきましょう。
トリガーが反応しない・動かない
設定したトリガーが働かない場合は、選択している要素の種類やバリアントの設定、接続先フレームが正しいかを確認します。例えば「After Delay」はフレーム遷移またはバリアント切り替えが起点として使えるかの条件が揃っていないと設定できないことがあります。Hover や Mouse Enter/Leave の設定では、要素がホットスポットとして正しく認識されているかも見直してください。
オーバーレイやモーダル遷移で位置が思い通りにならない
オーバーレイを使うときに、「Slide In」など動かしたい方向からではなく画面端からしか入ってこない仕様の場合があります。また、部分的なオーバーレイや指定の位置から動かすような挙動はやや工夫が必要で、複数フレームを作成して Smart Animate を使って強制的に動かす設計をすることがあります。絶対位置指定や隠した要素を活用するなどで対応できます。
プロが使っている遷移設計の応用例とアイデア
基本ができたら、より魅力的な遷移を実装する応用例に挑戦してみましょう。最新のデザイン現場で使われているアイデアを取り入れることで、見栄えだけでなく理解性・心地よさが向上します。
カルーセルやスワイプ可能なスライドショー
画像やカードを左右にスワイプするカルーセルは、On Drag トリガーとバリアントの組み合わせで実装できます。各スライドをバリアントやフレームにし、それぞれに On Drag + Change To で次のスライドへ繋げます。方向性を明示するためにアニメーションタイプを Slide or Move In にすると自然です。複数方向で戻る動きを持たせる場合には、フレーム構成や変数を活用する方法が有効です。
モーダルの開閉とオーバーレイ演出
モーダルやサイドバーなどを画面上に重ねて表示する場面では、Open Overlay をアクションとして使い、Move In や Slide In のアニメーションを使うと効果的です。背景をフェードさせたりオーバーレイのスクリーン全体を暗くすることで、開閉の動きとコンテキストの変化を視覚的に明確にできます。
スクロール位置の維持と固定要素の活用
長いページやリストをスクロールさせるような画面遷移では、スクロール位置のリセットや固定要素の設定が重要です。共通ヘッダーやフッターを固定状態にすると、なめらかな体験になります。遷移先フレームでスクロール位置をリセットする設定もFigmaで行えますので、ユーザーがどの位置から見始めるかを調整できます。
まとめ
Figmaで「Figma プロトタイプ 遷移 作り方」をマスターするためには、構造の準備、トリガーとアクションの理解、遷移タイプの選択、細かなアニメーション調整、そしてユーザビリティ重視の設計が鍵になります。共通レイヤーの命名統一やバリアントの活用で Smart Animate を活かし、一貫性のある方向性と動きで操作感を高めてください。小さな遷移の積み重ねが、UIの印象を左右します。これらのノウハウを活用して、直感的で魅力的なプロトタイプを構築していってください。
コメント