【2026年最新版】Figmaのプロトタイプ作成完全ガイド

公開日：2026/03/11　更新日：2026/03/11　

※本ページにはプロモーション(広告)が含まれています

【2026年最新版】Figmaのプロトタイプ作成完全ガイド

「Figmaでプロトタイプを作りたいけど何から始めればいいかわからない」「ボタンをクリックしたら次の画面に遷移するインタラクションを設定したい」――そんな悩みを持つデザイナーや開発者の方に向けて、本記事ではFigmaのプロトタイプ機能を基礎から徹底解説します。

Figmaのプロトタイプ機能を使えば、実際にクリック・スワイプ・スクロールができるインタラクティブなモックアップを作成できます。デザインを静止画として見せるだけでなく、実際の操作感をステークホルダーやユーザーに体験してもらうことで、開発前の段階でフィードバックを得ることができます。

本記事では、フレーム間のリンク設定・インタラクション・アニメーション・モバイルテスト・共有方法まで、順を追って丁寧に説明します。

この記事でわかること

Figmaプロトタイプの概要と用途
基本的なプロトタイプの作り方（フレーム間リンク）
インタラクション・アニメーションの設定方法
スクロール・オーバーレイなどの高度な設定
プレビューとプレゼンテーションの方法
ユーザーテスト用の共有方法
モバイル向けプロトタイプのテクニック
よくある問題の解決方法

Figmaプロトタイプとは

プロトタイプの概要と役割

プロトタイプとは、実際のアプリやWebサイトが完成する前に、デザイン段階でインタラクティブな動作を模擬したものです。ユーザーが実際にクリック・タップ・スワイプして操作できるため、単なる静止画のデザインより多くのフィードバックを収集できます。

Figmaのプロトタイプ機能が特に優れているのは、以下の点です。

デザインデータと一体化: 別ツールを使わずにFigma内でプロトタイプを作成できる
リアルタイム更新: デザインを変更すると即座にプロトタイプにも反映される
共有が簡単: URLを共有するだけでブラウザ上でプロトタイプを体験できる
コメント機能: プロトタイプを見ながらその場でフィードバックを残せる

プロトタイプを使う主なシーン

シーン	目的	プロトタイプの精度
アイデア検証	ざっくりとした概念を伝える	ローファイ（低精度）
ステークホルダーへのプレゼン	UI/UXの提案・承認取得	ハイファイ（高精度）
ユーザーテスト	実際のユーザーに操作してもらいフィードバック収集	ハイファイ（高精度）
開発チームへの仕様説明	動作仕様をエンジニアに伝える	ハイファイ（高精度）
デザインレビュー	チーム内でのフィードバック収集	中程度

Figmaプロトタイプの基本的な作り方

Step 1: プロトタイプモードに切り替える

Figmaの右側パネル（プロパティパネル）には、上部に「デザイン」「プロトタイプ」「インスペクト」の3つのタブがあります。

Figmaでデザインファイルを開く
右側パネルの「プロトタイプ」タブをクリック
プロトタイプ設定パネルに切り替わる

プロトタイプモードでは、フレームをつなぐ矢印（コネクション）を可視化でき、インタラクションの設定画面が表示されます。

Step 2: フレームを準備する

プロトタイプは「フレーム」間を遷移させる形で作ります。各フレームが1つの「画面」に相当します。

フレームの作り方:

ツールバーの「F」キーを押してフレームツールを選択
キャンバスにドラッグしてフレームを作成
右パネルでデバイスプリセット（iPhone 15、Web 1440、など）を選択するとその端末サイズに自動調整される

複数画面の管理のコツ:

各フレームに「ホーム画面」「ログイン画面」「設定画面」など分かりやすい名前を付ける
画面を左から右に並べると遷移フローが把握しやすい
Figmaのページ機能を使って「プロトタイプ用」「UIデザイン用」でページを分けると整理しやすい

Step 3: フレーム間のリンク（コネクション）を設定する

プロトタイプの核心は「フレームとフレームをつなぐコネクション（リンク）」の設定です。

プロトタイプモードで、リンク元となる要素（ボタンなど）をクリック
要素の右端に「＋」アイコン（青い丸）が表示される
その「＋」アイコンをドラッグして、遷移先のフレームにドロップ
青い矢印（コネクション）でフレーム間がつながる
コネクションをクリックするとインタラクションの詳細設定画面が開く

Step 4: インタラクションの詳細を設定する

コネクションをクリックすると表示されるインタラクション設定では以下を指定できます。

トリガー（何をしたら遷移するか）:

クリック（On Click）: 最もよく使う。マウスクリックまたはタップ
ホバー（While Hovering）: マウスを乗せたとき
ドラッグ（On Drag）: ドラッグ操作
キー入力（Key / Gamepad）: 特定のキーを押したとき
マウスエンター（Mouse Enter）/ マウスリーブ（Mouse Leave）

アクション（どんな動作をするか）:

次に移動（Navigate To）: 指定フレームに遷移
戻る（Back）: 前の画面に戻る
オーバーレイを開く（Open Overlay）: モーダルやドロワーを重ねて表示
スクロール先（Scroll To）: 同一フレーム内の特定位置にスクロール

インタラクション・アニメーションの設定

アニメーションタイプの選択

コネクションの設定で「アニメーション」を指定できます。主なアニメーションタイプは以下の通りです。

アニメーション	動作イメージ	適した用途
インスタント	瞬時に切り替わる	高速切り替えのUI
ディゾルブ	フェードイン/アウト	モーダル表示
スマートアニメーション	共通要素を滑らかにモーフィング	共有要素の遷移（画像拡大等）
スライドイン/スライドアウト	左右上下からスライド	モバイルの画面遷移
プッシュ	次の画面が現在の画面を押し出す	アプリの戻る/進む操作
ムーブイン/ムーブアウト	新しい画面が上に重なる/消える	ボトムシート、サイドパネル

スマートアニメーションを活用する

スマートアニメーションはFigmaプロトタイプの強力な機能の一つです。2つのフレームで同じ名前の要素があると、Figmaが自動的にその要素を滑らかにアニメーションさせます。

スマートアニメーションの使い方例（カードが拡大する）:

フレームAに小さいカードコンポーネントを配置（名前:「Card」）
フレームBに大きいカードコンポーネントを配置（名前:「Card」※同じ名前！）
フレームAのCardからフレームBへのコネクションを作成
アニメーションを「スマートアニメーション」に設定
プレビューするとCardが滑らかに拡大する

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

アプリでよく見るモーダルダイアログやボトムシートは「オーバーレイ」機能で実現できます。

オーバーレイとして表示したいフレームを別途作成（例:「確認ダイアログ」）
トリガーとなるボタンからコネクションを引いてオーバーレイフレームに繋ぐ
アクションを「オーバーレイを開く」に設定
表示位置（中央・下端・右端等）を指定
背景のぼかし・暗転なども設定可能

スクロール設定

フレームのコンテンツが画面サイズを超える場合、スクロールを設定できます。

フレームを選択した状態で右パネルの「プロトタイプ」タブを開く
「オーバーフロースクロール」の設定で「垂直スクロール」「水平スクロール」「なし」から選択
フレームの高さ（または幅）をビューポートサイズに設定し、コンテンツをそれより長く（広く）配置

プロトタイプのプレビュー・プレゼン方法

プレビューの起動方法

画面右上の「▶（プレゼンテーション）」ボタンをクリック、またはキーボードショートカット「Ctrl + Alt + Enter」（Mac: Cmd + Option + Enter）
プレビューウィンドウが開き、プロトタイプを操作できる
スタートフレーム（最初に表示する画面）は右パネル「プロトタイプ」→「フローの開始点」で設定

フローの管理

一つのデザインファイルに複数の「フロー」を設定できます。たとえば「ログインフロー」「購入フロー」「設定フロー」を別々に管理できます。

スタートにしたいフレームを選択
右パネル「プロトタイプ」→「フローの開始点」の「＋」をクリック
フロー名を付けて管理（例:「新規登録フロー」）

ユーザーテスト用にシェアする方法

共有リンクの作成と設定

右上の「共有」ボタンをクリック
「プレゼンテーションリンク」を選択（デザインリンクより閲覧のみでシンプル）
リンクの権限設定:
- 「リンクを知っている全員が閲覧可能」: 誰でもアクセス可能
- 「特定のユーザーのみ」: 招待した人のみ
「リンクをコピー」してテスト参加者に共有

Figmaのミラー機能でモバイルテスト

「Figmaミラー」アプリ（iOS/Android）を使うと、スマートフォンの実機でプロトタイプをリアルタイムに確認できます。

スマートフォンに「Figmaミラー」アプリをインストール
Figmaアカウントでログイン
パソコンのFigmaでデザインを開いた状態でミラーアプリを起動
自動的に同期され、スマートフォンでプロトタイプを操作できる

コメント機能でフィードバックを収集する

共有リンクからプロトタイプを開いたレビュワーは、画面上にコメントを残せます。

コメントモードに切り替えてクリックするとピンを立ててコメントを書ける
コメントに返信して議論することも可能
コメントはFigmaのデザインファイルにも反映される

モバイル向けプロトタイプのテクニック

デバイスフレームの設定

フレームを選択した状態で右パネル「プロトタイプ」→「プレビューデバイス」を選択
iPhone・Android・タブレットなどのデバイスフレームを設定可能
プレビュー時にそのデバイスの外観で表示される（プレゼン時に見栄えが良い）

ジェスチャー（スワイプ）の設定

モバイルアプリでよく使うスワイプ操作もプロトタイプで再現できます。

インタラクションのトリガーで「ドラッグ」を選択
方向（左・右・上・下）を指定
アニメーションを「プッシュ」や「スライド」に設定するとモバイルらしい動作になる

タッチターゲットの最適化

モバイルでのタップ操作を考慮したプロトタイプを作るためのポイントです。

タップ領域は44px以上: Apple・Googleのガイドラインではタッチターゲットは最低44×44px推奨
透明なオーバーレイを使う: 見た目を変えずにタップ領域だけを広げたい場合は透明フレームをかぶせてリンクを設定
ホバーより「クリック」を使う: モバイルはホバー状態がないため、トリガーは「クリック（タップ）」を使う

よくある問題と解決方法

問題1: リンク（コネクション）が機能しない

原因と解決策:

コネクションが正しいフレームに繋がっていない: プロトタイプモードで矢印の向き先を確認。誤った要素に繋がっていないかチェック
プレビューモードになっていない: プレビューウィンドウ上部のハンドアイコンではなく「▶」アイコン（クリックモード）になっているか確認
グループ内の要素にリンクを設定しようとしている: グループ内の子要素にリンクを設定するにはグループをダブルクリックして子要素を選択してからコネクションを作成

問題2: スマートアニメーションが動かない

原因と解決策:

要素名が一致していない: スマートアニメーションは両フレームで完全に同じ名前の要素がある場合のみ動作。レイヤーパネルで名前を確認
コンポーネントのバリアントを使っていない: バリアント間のアニメーションには専用の設定が必要。コンポーネントの「バリアント」機能を使っているか確認
階層構造が違う: 両フレームで要素の親子関係が異なると正常に動作しない場合がある

問題3: オーバーレイが閉じられない

解決策:

オーバーレイフレーム内に「閉じる」ボタンを作成し、アクションを「オーバーレイを閉じる」に設定
または「閉じる条件」の設定で「オーバーレイ外をクリックで閉じる」を有効にする

問題4: スクロールが機能しない

解決策:

フレームのオーバーフロー設定が「スクロール」になっているか確認
フレームの高さがビューポートより短い場合はスクロールが発生しない。コンテンツをフレームより長くする
「クリップコンテンツ」が有効になっているか確認（フレーム選択→右パネル）

問題5: 共有リンクでプロトタイプが表示されない

解決策:

共有設定が「プレゼンテーションリンク」になっているか確認（デザインリンクとは異なる）
閲覧権限の設定を確認（「リンクを知っている全員が閲覧可能」になっているか）
フローの開始点が設定されているか確認

問題6: プロトタイプが重くてスムーズに動かない

解決策:

フレームに含まれる画像の解像度を下げる
不要なエフェクト（グループのシャドウ等）を削除
フレーム数が多い場合はファイルを分割する
Figmaのデスクトップアプリはブラウザ版より軽快に動作する場合がある

よくある質問（FAQ）

Q1. Figmaの無料プランでもプロトタイプ機能は使えますか？

A. はい、Figmaの無料プランでも基本的なプロトタイプ機能は使えます。フレーム間のリンク・インタラクション・アニメーションの設定はすべて無料で利用できます。ただし無料プランではプロジェクトファイル数に制限があります（2024年以降は変更になる場合があるため公式サイトで確認してください）。

Q2. Figmaのプロトタイプをアプリ（APK/IPA）として書き出せますか？

A. いいえ、Figmaのプロトタイプはあくまでデザインシミュレーションです。実際に動作するアプリとして書き出す機能はありません。プロトタイプをもとに開発者がコーディングして実装します。

Q3. PowerPointやKeynoteと比べてFigmaプロトタイプのメリットは何ですか？

A. Figmaプロトタイプは「デザインデータと一体化している」点が最大のメリットです。デザインを修正すると即座にプロトタイプにも反映されます。PowerPointやKeynoteは別途アニメーションを再設定する必要がありますが、Figmaではそれが不要です。また、開発者がFigmaのインスペクト機能でCSSコードを確認できるため、プロトタイプからそのまま実装に移れます。

Q4. プロトタイプのアニメーション速度はどう調整しますか？

A. コネクションの設定画面で「デュレーション（持続時間）」をミリ秒で指定できます。デフォルトは300msですが、より速い遷移（150ms）やゆっくりした遷移（500ms）に変更できます。また「イージング」（動きの加速・減速カーブ）も「イーズアウト」「イーズイン」「バウンス」などから選択できます。

Q5. Figmaプロトタイプでフォームの入力や条件分岐は再現できますか？

A. 基本的なFigmaプロトタイプではフォームに実際に文字を入力したり、条件によって動作を変えたりすることはできません。ただし「変数（Variables）」機能（Figmaプロフェッショナルプラン以上）を使うと条件分岐やステートの変更が可能です。より複雑なインタラクションが必要な場合は、Framer・ProtoPie・Zeplinなどの専用プロトタイプツールの使用も検討してください。