> ## 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 でテキストプロンプトから UI 画面を生成する

> Flowstep を使って、単一のテキストプロンプトから 1 つの画面、または最大 6 つの画面を一度に生成できます。高速な UI アイデア出しと完全なフロー探索に最適です。

<iframe src="https://www.youtube.com/embed/hHNwjKz_264" title="YouTube video player" frameborder="0" className="w-full aspect-video rounded-xl" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen />

Flowstep は自然言語プロンプトから UI 画面を生成し、アイデアからビジュアルデザインへを数秒で実現できます。コンセプト検証用の単一画面が必要な場合でも、ユーザージャーニー全体をカバーする完全な画面セットが必要な場合でも、よく書かれたプロンプトがあれば十分です。

## デザインを生成する

<Steps>
  <Step title="新規プロジェクトを開く">
    Flowstep ダッシュボードから新規プロジェクトを作成するか、画面を追加したい既存のプロジェクトを開きます。
  </Step>

  <Step title="プロンプトを記述する">
    希望する画面の説明を入力します。アプリの種類、ユーザーゴール、予想される内容について具体的に記述してください。
  </Step>

  <Step title="生成する画面数を指定する">
    デフォルトでは、Flowstep は単一画面を生成します。複数画面が必要な場合は、プロンプトで明示的に指定してください。Flowstep は 1 つのプロンプトから最大 6 つの画面を生成できます。
  </Step>

  <Step title="生成">
    プロンプトを送信します。Flowstep が画面を生成し、エディターに表示します。確認または改善の準備ができています。
  </Step>
</Steps>

## 単一画面 vs. 複数画面

単一プロンプトから 1 つの画面または最大 6 つの画面を生成できます。どちらのアプローチもデザイン作業の異なる段階に適しています。

* **1 つの画面** — 特定の UI 状態、コンポーネント、または焦点を絞ったコンセプトを探索するのに最適です。
* **複数画面** — フローのマッピング、レイアウトオプションの比較、またはユーザージャーニー全体を素早くカバーするのに最適です。

複数画面が必要な場合は、プロンプトで明示的に指定してください。Flowstep はプロンプトの表現を使用して生成する画面数を決定するため、曖昧なプロンプトは通常単一画面を返します。生成された画面は **Screen 1**、**Screen 2** などの名前がついており、以後のプロンプトで特定の画面を指す場合はこれらの名前を使用します。

## その他のプロンプト方法

テキスト入力だけではありません。次の方法も使用できます：

* **ファイルを添付** — ドラッグ&ドロップ、ファイルピッカー、またはペーストを使用して、画像 (JPG、PNG、WEBP) またはドキュメント (PDF、MD、TXT) を最大 3 MB ずつプロンプトに追加します。プロンプトで添付画像を参照すると、Flowstep がそれを生成された画面に組み込みます。[リファレンスの使用](/ja/design-references) を参照してください。
* **プロンプトを音声入力** — プロンプトバーのマイクボタンをクリック (または Mac で **Cmd+Shift+V**、Windows で **Ctrl+Shift+V** を押す) して、最大 60 秒間話します。文字起こしが既に入力したテキストに追加されます。
* **Flowstep に Web を検索させる** — プロンプトで必要な場合 (たとえば、「Stripe の料金ページをクローン」) に、Flowstep は Web を検索してページのブランディング (色、フォント、ロゴ、UI コンポーネント) を読み込み、それを生成された画面に使用できます。Flowstep は独自に検索するかどうかを判断するため、すべてのプロンプトで必ずトリガーされるわけではありません。復元された Web サイトは元のものとは異なる画像とナビゲーションを使用することに注意してください。
* **デザインガイドラインを設定** — ファイル内のすべての生成に適用されるスタイルルールを定義します。[デザインガイドライン](/ja/design-guidelines) を参照してください。

## 効果的なプロンプトの書き方

<Tip>
  **単一画面プロンプトの例：** 「フィットネストラッキングアプリのモバイルログイン画面を設計します。メール、パスワードフィールド、サインインボタン、パスワード忘却リンクを含みます。」
</Tip>

<Tip>
  **複数画面プロンプトの例：** 「フードデリバリーアプリのオンボーディングフローの複数画面を生成します。料理の好みの選択、配達住所の入力、最初の注文の確認をカバーします。」
</Tip>

<Tip>
  **完全なジャーニープロンプトの例：** 「経費報告アプリの完全なユーザージャーニーをカバーします。レシート送信からマネージャー承認までです。」
</Tip>

プロンプト記述時には、以下の原則を念頭に置いてください：

* Flowstep が画面を正しくサイズ設定できるように、プラットフォーム (モバイル、デスクトップ、タブレット) を指定します。
* UI 要素だけでなく、ユーザーのゴールを記述します。Flowstep は意図からレイアウトを推測します。
* デザインに重要なラベル、アクション、データなどの主要なコンテンツを含めます。
* 「複数画面を生成」または「完全なユーザージャーニーをカバー」などのフレーズを使用して、複数画面出力をトリガーします。