> ## 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アカウントを作成し、テキストプロンプトから最初のUIデザインを生成し、チームと共有します — すべて1回のセッションで実行できます。

<iframe src="https://www.youtube.com/embed/yrmvaLi6Cto" 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を始めるのは数分で済みます。無料でサインアップし、構築したいものを説明すれば、Flowstepが即座にデザインを生成します。その後、フォローアップのプロンプトを通じて洗練し、チームを招待して協力したり、結果をステークホルダーと共有できます — デザインツールや事前の経験は不要です。

<Steps>
  <Step title="無料アカウントを作成する">
    [flowstep.ai](https://flowstep.ai)にアクセスし、Googleまたはメールアドレスとパスワードでサインアップします。開始するのにクレジットカードは必要ありません。

    <Note>
      メールアドレスとパスワードでサインアップした場合、受信箱で確認メール（「Confirm your Flowstep email」）を確認し、リンクをクリックしてアカウントをアクティベートします — 到着しない場合は「Check your inbox」ページから再送できます。使い捨てメールアドレスは受け付けていません。仕事用または個人用のメールアドレスをご使用ください。
    </Note>

    サインアップ後、短いウェルカム画面に移動します。3つの簡単な質問に答えてから、最初のデザインをそこで描写します — 出発点が必要な場合は、4つのサンプルプロンプト（Dashboard、Landing page、Mobile app、Checkout）が利用可能です。
  </Step>

  <Step title="欲しい画面を説明する">
    頭に思い浮かぶUIを説明するプロンプトを平文で入力します。画面の目的と含める必要があるキー要素について具体的に説明します。

    「プロジェクト管理アプリ用のダッシュボード（タスクリスト、プログレスバー、サイドバーナビゲーション付き）」のようなプロンプトは、Flowstepが焦点を絞った有用なデザインを生成するのに十分なコンテキストを提供します。

    <Tip>
      デザイン語彙は必要ありません。画面の目的と表示する情報に焦点を当てます — Flowstepはレイアウト、タイポグラフィ、スペーシング、色の選択を処理します。
    </Tip>
  </Step>

  <Step title="画面を生成する">
    プロンプトを送信すると、Flowstepが数秒でデザインを生成します。1つのセッションで複数の画面を生成して、異なる方向を探索したり、完全なフローを構築できます。
  </Step>

  <Step title="会話を通じて洗練する">
    ぴったりではありませんか？フォローアップのプロンプトを入力してデザインを調整します — 色スキームを変更し、要素を再配置し、コンテンツを入れ替えるか、完全に異なるレイアウトをリクエストします。要素を手動で編集したり、オプションメニューのワンクリックアクションを使用することもできます。
  </Step>

  <Step title="作業をエクスポートまたは共有する">
    結果に満足したら、共有方法を選択します：

    * **Export**でコードをエクスポート、またはMCP経由で
    * **Download**で画面をJPGまたはPNGファイルとしてダウンロード
    * **Copy to Figma**でキーボードショートカットを使用して既存のFigmaファイルに直接貼り付け
    * **Share a link**でチームメートまたはステークホルダーとリンクを共有 — アカウントを作成せずにデザインを表示できます

    <Note>
      Flowstepファイルで協力するようチームを招待できます。彼らは数分以内に参加して貢献を開始できます。
    </Note>
  </Step>
</Steps>
