Figmaでページをリンクする方法
Figmaでプロトタイピング機能を使ってページをリンクする方法を学びましょう。このステップバイステップガイドでは、フレームやページ間でインタラクティブなナビゲーションを作成する方法を紹介します。
Figma内で別のページにリンクするには：
要素を選択します：リンクとして機能させたいオブジェクト（テキスト、図形など）を選びます。
Prototypeタブを開きます：右側のサイドバーで、DesignタブからPrototypeタブに切り替えます。
インタラクションを作成します：選択した要素から、目的のページにあるターゲットフレームへ、円形のノード（インタラクションハンドル）をクリックしてドラッグします。
インタラクションの詳細を設定します：小さな設定ボックスで、「クリック時」インタラクションを「移動先」に設定し、対象ページを選択します。
リンクをテストします：「Present」アイコンをクリックしてプロトタイプモードに入り、リンクをテストします。
ステップごとのガイド：Figmaでページにリンクする方法
ステップ 1
左側のメニューで、Pagesオプションが表示されます。その下に、デザイン名が表示されます。
ステップ 2
次にテキストを選択します。
ステップ 3
右側のメニューから、リンクオプションをクリックします。
ステップ 4
次にテキストまたはリンクを入力します。
ステップ 5
完了したら、特定のスライダーテンプレートをタップするだけです。
ステップ 6
これで、テキストがリンクされていることが表示されます。
Figmaでページをリンクするためのプロのヒント
デザインファイルを開く
まずFigmaを起動し、ページやフレームをナビゲーション用にリンクしたいファイルを開きます。フレームを作成するか、既存のフレームを見つける
リンクしたい各画面やページは、それぞれ個別のフレーム内に配置します。リンク時に選びやすいよう、フレームには分かりやすい名前を付けておきましょう。リンクを追加する要素を選択する
リンクのトリガーとして使いたいボタン、テキスト、その他のインタラクティブ要素をクリックします。プロトタイプモードに入る
右上の「デザイン」タブから「プロトタイプ」タブに切り替えます。これでインタラクティブなリンクを作成できます。ノードを対象フレームへドラッグする
選択した要素の右端に円形のノードが表示されます。それをリンク先にしたいフレームへドラッグします。これでコネクタ線が作成されます。
よくある落とし穴とその回避方法
リンクを誤ったレイヤーにドラッグする
グループや図形ではなく、フレームにリンクしていることを確認してください。プロトタイプの遷移先にできるのはフレームのみです。ページ間でリンクできない
Figmaでは、異なるページ間の直接リンクはサポートされていません。いったんフレームを同じページに移動してリンクを作成し、必要であればその後で元の位置に戻します。分かりにくいナビゲーションフロー
重なり合うリンクが多い場合は、矢印、注釈、またはフローチャートを使って、共同作業者がナビゲーションを追いやすくしましょう。エクスポートでプロトタイプ接続が表示されない
プロトタイプのリンクはPDFや画像のエクスポートには表示されません。インタラクティブなプレビューには、Figmaの「プレゼンテーション」モードを使うか、ライブリンクを共有してください。変更が反映されない
プレゼンテーションモードでリンクが機能しない場合は、プレビュータブを更新するか、フレームが誤ってリンク解除されていないか再確認してください。
Figmaでページをリンクすることに関するよくある質問
Figmaで1つのフレームを別のフレームにリンクできますか？
はい。プロトタイプモードを使って、インタラクティブ要素を対象のフレームに接続すると、シームレスに移動できます。Figmaで異なるページ間をリンクするにはどうすればよいですか？
宛先のフレームを一時的に同じページへ移動してリンクし、その後で元のページに戻します。リンクされたページ間にトランジションを追加できますか？
はい。リンクするときに、「Dissolve」「Smart Animate」「Move In」などのアニメーションを選ぶと、滑らかなトランジションを作成できます。リンクをプレビューするにはどうすればよいですか？
右上の「Present」ボタンをクリックして、インタラクティブなデザインを表示し、すべてのナビゲーションリンクをテストします。前のフレームへ戻すことはできますか？
はい。別の要素に別個のインタラクションを作成し、同じプロトタイプツールを使って前のフレームへリンクします。コンポーネント内のテキストでも下線は機能しますか？
はい、コンポーネント内でも下線は同じように機能します。正しいテキストレイヤーを編集中であることを確認してください。Macで画面録画するには？
Macで画面録画するには、Trupeer AIを使用できます。画面全体をキャプチャでき、AIアバターの追加、ボイスオーバーの追加、動画内のズームイン・ズームアウトなどのAI機能を備えています。trupeerのAI動画翻訳機能を使えば、動画を30以上の言語に翻訳できます。画面録画にAIアバターを追加するには？
画面録画にAIアバターを追加するには、AI画面録画ツールを使用する必要があります。Trupeer AIはAI画面録画ツールで、複数のアバターを使った動画作成を支援し、さらに自分専用のアバターを動画用に作成するのにも役立ちます。Windowsで画面録画するには？
Windowsで画面録画するには、内蔵のGame Bar（Windows + G）または、AIアバター、ボイスオーバー、翻訳などのより高度な機能を備えたTrupeer AIのような高度なAIツールを使用できます。動画にボイスオーバーを追加するには？
動画にボイスオーバーを追加するには、trupeer aiのChrome拡張機能をダウンロードしてください。登録後、音声付きの動画をアップロードし、trupeerから希望のボイスオーバーを選択して、編集した動画を書き出します。画面録画をズームインするにはどうすればよいですか？
画面録画中にズームインするには、Trupeer AIのズーム効果を使います。これにより、特定の瞬間にズームイン・ズームアウトでき、動画コンテンツの視覚的インパクトを高められます。
ほかによくある質問
関連チュートリアル
