プロトタイプとインタラクション

プロトタイプ — インタラクションを設計してリアルな体験を届ける

デザインカンプ（静止画）だけでは伝えられない「操作感」「動き」「画面遷移の流れ」をクライアントやエンジニアに共有するために、プロトタイプは不可欠なツールです。Figmaのプロトタイプ機能は、コードを一切書かずにアプリに近い操作体験を作れる強力な機能です。

このレッスンでは、基本的なフロー作成から5種類のトリガー設定、Smart Animateを使った滑らかなアニメーション、そしてクライアントへの共有方法まで完全解説します。

プロトタイプ — フロー・トリガー・Smart Animate

---

プロトタイプモードの基本

プロトタイプタブへの切り替え

Figmaの右パネル上部には「Design」「Prototype」の2つのタブがあります（以前の「Inspect」タブの機能はDev Modeに移っています）。プロトタイプの設定はすべて「Prototype」タブで行います。

Prototypeタブで設定できること:

• ◆画面間の遷移（フロー）
• ◆トリガー（何をしたら遷移するか）
• ◆アニメーション（どのように遷移するか）
• ◆オーバーレイ（モーダル・ドロワーなど）
• ◆スクロール動作（縦・横スクロール）

💡 プロトタイプを作るために新しいフレームを作る必要はありません。デザインで作成済みのフレームをそのまま使います。プロトタイプはデザインの「つながり」を設定するだけです。

---

フローの作成

フロー（Flow）とは

フローとは、プロトタイプの「出発点」から「終着点」までの一連の画面遷移の連鎖です。一つのFigmaファイルに複数のフローを作成できます。

フロー例:

• ◆ログインフロー: ログイン画面 → ダッシュボード
• ◆購入フロー: 商品一覧 → 商品詳細 → カート → 決済 → 完了
• ◆オンボーディングフロー: スプラッシュ → ウォークスルー1〜3 → 登録画面

フローの起点（Starting Point）設定

手順:

1. ◆フローの最初のフレームを選択
2. ◆Prototypeタブの「Flow starting point」で「+」をクリック
3. ◆フロー名を入力（例: 「ログインフロー」）
4. ◆フレーム左上に「▶」アイコンが表示されたら設定完了

⚠️ 起点を設定しないとプレビュー再生時にどの画面から始めるかFigmaが判断できません。複数のフローがある場合は、それぞれの起点を必ず設定してください。

接続（Connection）の作成

手順:

1. ◆遷移元のフレームまたは要素（ボタンなど）を選択
2. ◆Prototypeタブに切り替えると要素の右辺に「◯」が表示される
3. ◆「◯」をドラッグして遷移先のフレームに接続
4. ◆青い矢印線が表示されたら接続完了
5. ◆矢印線をクリックするとトリガーとアニメーションの設定パネルが開く

---

5種のトリガー

On Click（クリック時）

最も一般的なトリガーです。ボタン・リンク・カードなど、クリックで画面遷移するほぼすべての要素に使います。

設定例:

• ◆「詳細を見る」ボタン → 詳細画面
• ◆ナビゲーションのメニュー項目 → 各ページ
• ◆カード全体 → 商品詳細

On Hover（ホバー時）

マウスカーソルを重ねた際に発火するトリガーです。デスクトップ用UIのツールチップ・ドロップダウンメニュー・カードホバーエフェクトに使います。

⚠️ On Hoverはスマートフォンのプロトタイプでは機能しません。モバイル向けデザインでは使用しないようにしてください。モバイルでの同様の体験はOn Clickで代替します。

After Delay（一定時間後）

指定した時間（ミリ秒）が経過した後に自動で遷移するトリガーです。

主な用途:

• ◆スプラッシュスクリーン（2000msでホーム画面へ）
• ◆オンボーディングの自動スライド
• ◆Toast通知の自動消去
• ◆ローディング画面からコンテンツへ

設定方法: トリガーを「After Delay」に設定後、遅延時間（ms）を入力します。

On Drag（ドラッグ時）

ドラッグ操作でアニメーションが進行するトリガーです。スワイプUIの実装に使います。

主な用途:

• ◆カルーセル・スライダー（左右スワイプ）
• ◆モーダルの下スワイプ閉じる
• ◆スワイプ削除（リストアイテム）

Key / Gamepad（キー操作）

特定のキーを押したときに発火するトリガーです。キーボード操作対応のアクセシビリティデモや、ゲームのプロトタイプで使います。

---

アニメーション設定

アニメーションの種類

接続を作成した後、トリガー設定パネルでアニメーションの種類を選択します。

イージング（Easing）の設定

アニメーションの加速・減速カーブを設定します。自然に見えるイージングを選ぶと、プロらしい動きになります。

推奨デュレーション（所要時間）:

• ◆マイクロインタラクション（ホバー・フォーカス）: 100〜150ms
• ◆要素の登場・退場: 200〜300ms
• ◆ページ遷移: 300〜400ms
• ◆複雑なアニメーション: 500ms以下（それ以上は遅く感じる）

---

Smart Animate

Smart Animateとは

Smart Animateは、Figmaのプロトタイプ機能の中で最も強力なアニメーション機能です。2つのフレーム間で同じ名前のレイヤーを自動的に検出し、位置・サイズ・色・角丸・不透明度などのプロパティを滑らかに補間（トゥイーン）します。

コードでいえば、CSSのtransitionやWeb Animations APIを自動生成するようなものです。

Smart Animateが補間できるプロパティ

Smart Animateの設定手順

ステップ1: 2つのフレームを準備

1. ◆「Before」状態のフレームを作成（例: 折りたたまれたカード）
2. ◆Ctrl/Cmd + D で複製して「After」フレームを作成
3. ◆Afterフレームでアニメーション後の状態に変更（例: 展開されたカード）

ステップ2: レイヤー名を一致させる

1. ◆BeforeとAfterフレームで、補間したい要素のレイヤー名を完全一致させる
2. ◆名前が違うレイヤーはSmart Animateの対象外になる

ステップ3: 接続を作成してSmart Animateを設定

1. ◆Beforeフレームの要素（または全体）からAfterフレームに接続
2. ◆アニメーション種類を「Smart Animate」に設定
3. ◆イージング「Ease Out」、デュレーション「300ms」で多くのケースで自然に見える

💡 Smart Animateは「フレーム同士の差分」を補間します。コンポーネントのバリアント切り替えにも適用でき、ボタンのHoverエフェクトをSmart Animateで実現するのが定番テクニックです。

---

オーバーレイ（モーダル・ドロワー）

オーバーレイとは

現在の画面の上に別のフレームを重ねて表示するプロトタイプの設定です。モーダルダイアログ・ドロワーメニュー・Toast通知・ツールチップの実装に使います。

設定手順:

1. ◆トリガー（ボタンなど）からの接続を作成
2. ◆接続設定パネルで「Open overlay」を選択
3. ◆オーバーレイフレームを指定
4. ◆位置（中央・右側・下端など）とバックドロップ（背景の暗転）を設定

モーダルの設定例:

• ◆アニメーション: Slide In（下から上）、Ease Out、250ms
• ◆位置: Center（画面中央）
• ◆Background: チェックをONにしてDarkness: 40%
• ◆Close when clicking outside: チェックON

---

プロトタイプの共有

プレビューで確認

1. ◆右上の「▶（Present）」ボタンをクリック
2. ◆新しいタブでプロトタイプが起動
3. ◆設定したトリガーを操作して動作確認

共有リンクの生成

1. ◆Present画面の右上「Share Prototype」をクリック
2. ◆「Anyone with the link can view」を選択
3. ◆リンクをコピーしてクライアントやチームに共有

⚠️ 共有リンクを受け取った人は、Figmaアカウントなしでブラウザ上でプロトタイプを操作できます。ただし、デザインファイルの編集はできないので、閲覧専用として安全に共有できます。

コメント機能での議事録

プロトタイプ共有後、閲覧者はプロトタイプ上に直接コメントを残せます。

• ◆「このボタンのタップエリアが小さい」
• ◆「このアニメーションは速すぎる」
• ◆「ここのコピーを変更してほしい」

デザイナーはFigmaのコメントパネルで確認・返信・解決（Resolve）できます。メールやSlackでのフィードバックのやりとりが不要になり、議論の文脈がデザインファイルに集約されます。

---

実践: カード展開アニメーションの作成

Smart Animateを使ったカード展開インタラクションを作成します。

仕様:

• ◆Before: コンパクトなカード（幅320px × 高さ80px）
• ◆After: 展開されたカード（幅320px × 高さ280px）
• ◆アニメーション: Smart Animate、Ease Out、300ms

ステップ1: Beforeフレームを作成

1. ◆F でフレーム作成（320 × 80px）
2. ◆フレーム名: 「CardBefore」
3. ◆Auto Layout垂直適用、Padding 16px、Gap 8px
4. ◆タイトルテキストを追加（レイヤー名: 「card-title」）
5. ◆「詳細を見る ▼」テキストを追加（レイヤー名: 「card-toggle」）

ステップ2: Afterフレームを作成

1. ◆CardBeforeを複製（Ctrl/Cmd + D）
2. ◆フレーム名: 「CardAfter」
3. ◆フレーム高さを280pxに変更
4. ◆タイトルテキストのレイヤー名: 「card-title」（同一を維持）
5. ◆本文テキストを追加（3〜4行）
6. ◆「閉じる ▲」テキストに変更（レイヤー名: 「card-toggle」）

ステップ3: 接続を設定

1. ◆CardBeforeの「card-toggle」要素を選択
2. ◆Prototypeタブに切り替えて「◯」をCardAfterへドラッグ
3. ◆トリガー: On Click、アニメーション: Smart Animate、Ease Out、300ms
4. ◆CardAfterの「card-toggle」からCardBeforeへ同様に接続
5. ◆▶でプレビューして展開アニメーションを確認

---

🏋️実践ワーク

1. ◆3画面のログインフローを作成してください。
   • ◆画面1（375 × 812px）: ロゴ + メールアドレス入力 + パスワード入力 + 「ログイン」ボタン
   • ◆画面2（375 × 812px）: ローディング画面（スピナーアイコン + 「認証中...」テキスト）
   • ◆画面3（375 × 812px）: ダッシュボード（「ようこそ！」見出し + メニューリスト）
   • ◆接続: 「ログイン」ボタン → 画面2（On Click、Smart Animate）
   • ◆接続: 画面2 → 画面3（After Delay 1500ms、Dissolve）
2. ◆画面1にモーダルを追加してください。
   • ◆「パスワードを忘れた方はこちら」テキストをOn Clickでオーバーレイ表示
   • ◆モーダル: メールアドレス入力 + 「送信」ボタン + 「閉じる」ボタン
   • ◆アニメーション: Slide In（下から上）、250ms
3. ◆完成したプロトタイプの共有リンクを生成し、スマートフォンのブラウザで操作体験を確認してください。

📝まとめ

Figmaのプロトタイプ機能を使えば、コードを書かずにリアルなインタラクションをデザインできます。On Click・On Hover・After Delay・On Drag・Keyの5種のトリガーを使いこなし、Smart Animateで滑らかなアニメーションを実現することで、クライアントやエンジニアに動作イメージを正確に伝えられます。共有リンクでアカウントなしに閲覧・コメントができるため、フィードバックのやりとりが大幅に効率化されます。