> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowstep.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Flowstepデザインをインタラクティブプロトタイプとしてプレビューする

> 任意のFlowstepファイルをクリッカブルプロトタイプとして開く — Flowstepが画面を自動的にリンクし、要素ごとにナビゲーションを手動で設定またはロックできます。

Flowstepはファイル内の画面をクリッカブルプロトタイプに変換できます。エディタツールバーで**Preview**をクリックすると、Flowstepはフルページのプロトタイププレイヤーを開き、フローをクリックして移動できます。ユーザージャーニーをテストしたり、ステークホルダーに提示したりする場合に便利です。

## プロトタイプを開く

<Steps>
  <Step title="Preview をクリック">
    エディタツールバーで**Preview**をクリックします。プロトタイププレイヤーがエディタから独立したフルページビューとして開きます。
  </Step>

  <Step title="Flowstepに画面をリンクさせる">
    ファイルに2つ以上の画面がある場合、プレビューを開くときに、Flowstepはボタン、カード、メニュー項目などのインタラクティブ要素をターゲット画面に自動的にリンクします（"Bringing your screens to life"というメッセージが表示されます）。リンクは前回の実行以降に画面が変更された場合にのみ再生成されます。
  </Step>

  <Step title="フローをクリックして移動">
    ボタン、カード、メニュー項目などのリンク済み要素をクリックして、その対象画面に移動します。サイドバーにはファイル内のすべての画面がリストされているため、任意の画面に直接ジャンプでき、**Back to editor**をクリックするとファイルに戻ります。
  </Step>
</Steps>

<Note>
  自動リンク生成にはファイルに少なくとも2つの画面が必要です。リンク生成に失敗した場合は、プレイヤーの**Retry**ボタンを使用してください。
</Note>

## ナビゲーションを手動で設定する

要素がどこにナビゲートするかを正確に制御できます：

1. エディタで要素（たとえばボタン）を選択します。
2. 右側のプロパティパネルで**Navigation**パネルを開きます。
3. ドロップダウンからターゲット画面を選択するか、**No navigation**を選択してリンクを削除します。

Flowstepの自動リンク機能が自分で設定したリンクを上書きするのを防ぐには、**Navigation**パネルで**Lock link**をクリックしてください。ロックされたリンクはリンクが再生成される場合でも変更されません。

## インタラクティブコントロール

プロトタイプはクリッカブルなナビゲーションだけではなく、プレビュー中に画面上のコントロールが応答します。スイッチを切り替え、チェックボックスにチェックを入れ、ラジオオプションを選択し、ドロップダウンから選択し、タブを切り替え、フィールドに入力するか、カウンターをインクリメントするとき、画面はリアルタイムで新しい状態を反映するように更新されます。

ファイル内の画面はプレビューセッション中に1つのプロトタイプ状態を共有するため、1つの画面で行う変更は他の画面をクリックして移動する際に引き継がれます。また、画面をライト及びダーク外観の間で切り替えて、それがどのように応答するかを確認することもできます。

<Note>
  インタラクティブな動作は画面から自動的に生成されます — 配線するものはありません。ファイルをプレビューして試してください。
</Note>