> ## 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画面を作成するためにデザインの背景知識は必要ありません。欲しいものを説明する方法を学び、残りはFlowstepに任せましょう。

書体とフォントの違いを知る必要もなく、グリッドシステムを理解する必要もなく、デザインツールを開いた経験がなくても大丈夫です。Flowstepはレイアウト、タイポグラフィ、色、スペーシング、視覚的階層を自動的に処理します。あなたの仕事は、欲しいものを説明するだけです。

## デザインスキルなしでの動作方法

プロンプトを入力すると、Flowstepはあなたの説明を解釈し、デザイナーが通常行うすべての視覚的決定を行います。画面上にどのように要素を配置するか、どのフォントを使用するか、どのくらいの空白を追加するか、そして視線を導く視覚的階層をどのように確立するか。あなたは目的とコンテンツを説明し、Flowstepはプロがデザインしたように見える画面を生成します。

<Tip>
  Flowstepへのプロンプトをデザイナーにブリーフするのと同じ方法で考えてください。デザイナーにどのフォントサイズを使うかは言わず、画面が何のためにあるのか、何を伝える必要があるのかを伝えます。Flowstepも同じ方法で機能します。
</Tip>

## 良いプロンプトを書くためのコツ

3つのことに焦点を当ててください。画面の目的、それが表示すべき重要な情報、および製品またはオーディエンスのタイプです。

**画面の目的を最初に述べる**

画面が何をすべきかで始めます。「食事計画アプリのサインアップ画面」はUI要素のリストよりもFlowstepにはるかに多くを伝えます。

**主要なコンテンツまたはアクションを述べる**

ユーザーが見るべきまたは行うべき最も重要なことを含めてください。すべてを列挙する必要はありません。経験にとって最も重要な要素だけです。

**役立つ場合は製品タイプまたはオーディエンスを参照する**

製品の種類を述べること（例：消費者向けモバイルアプリ、B2Bダッシュボード、eコマースチェックアウト）は、Flowstepが正しい視覚的なトーンと慣例を一致させるのに役立ちます。

<Tip>
  最初の結果がちょうど正しくない場合は、やり直さずにフォローアッププロンプトを入力してください。「レイアウトをもっとミニマルにする」または「より暗いカラースキームを使用する」と言うだけで、デザインを新しい方向に導くのに十分です。
</Tip>

## 試すべきプロンプトの例

デザイン用語を使わずにプレーンな英語で書かれた、よく機能するプロンプトをいくつかここに示します。

**フィットネスアプリのオンボーディングフロー**

> 「フィットネストラッキングアプリのオンボーディングフローの最初の画面。ユーザーを歓迎し、アプリが何をするかを簡潔に説明し、開始するためのボタンを備えている必要があります。」

**SaaS製品の設定ページ**

> 「B2Bプロジェクト管理ツールの設定ページ。プロファイル、通知、請求、接続されたアカウントのセクションを含めます。クリーンで専門的な外観を使用してください。」

**モバイルチェックアウト画面**

> 「モバイルショッピングアプリのチェックアウト画面。注文サマリー、プロモコードのフィールド、購入を完了するための目立つボタンを表示します。」

<Note>
  これらのプロンプトが機能するのはデザイン言語を使用しているからではなく、画面の目的、コンテンツ、コンテキストを明確に説明しているからです。それがあなたに必要なすべてです。
</Note>
