# Design Mode (/ja/docs/verdent-cloud/create/design-mode)

> まずテキストブリーフでビジュアルの方向性を選び、その承認済みの方向性から動作するアプリを構築します。



Design Mode は、目に見えるインターフェースを持つ新規アプリ向けの、Verdent Cloud のデザインファーストな作成パスです。言葉によるアイデアはあるものの、完成したデザイン、スクリーンショット、スタイルガイド、ページ計画がまだない場合に使用します。

いきなりコードに飛び込むのではなく、Design Mode はまず製品の見た目と雰囲気をどうするかを決めるのを助け、その後、承認済みの方向性を動作するアプリへと変換します。

## Design Mode を使うべきとき [#design-mode-を使うべきとき]

テキストブリーフから新しい製品 UI を作成したいときに Design Mode を使用します。たとえば次のようなケースです。

* フルスタックアプリ
* Web フロントエンドやランディングページ
* モバイルアプリ
* マルチスクリーンのゲームやインタラクティブ体験
* ビジュアルの方向性がまだ決まっていない、0 から 1 の製品アイデア

## 使わなくてよいとき [#使わなくてよいとき]

次の場合は Design Mode をスキップします。

* 基本的なフォームやごく小さなおもちゃアプリなど、単一画面の単純なユーティリティである
* 具体的なスタイルの方向性、カラーパレット、タイポグラフィシステム、ページや画面のリストを含む、完成したデザインブリーフがすでにある
* そのまま従うべきデザインファイル、モックアップ、スクリーンショット、スタイルガイドがすでにある
* デザインを省略してコードに直行したいと明確に考えている

<Note>
  ブリーフがすでに十分に具体的であれば、Verdent Cloud はそれを選択済みの方向性として使い、ページ計画と構築作業へ直接進めます。
</Note>

## Design Mode の仕組み [#design-mode-の仕組み]

<Steps>
  <Step title="製品を説明する">
    まずは平易な言葉によるブリーフから始めます。何を作りたいか、誰のためのものか、何をすべきか、すでにあるムードやスタイルの参考情報などを記述します。
  </Step>

  <Step title="ビジュアルの方向性を選ぶ">
    Verdent Cloud が複数の異なるデザインの方向性を探索するため、コードを書く前に見た目と雰囲気を選べます。
  </Step>

  <Step title="ページや画面を計画する">
    複数ページ、フルスタック、より複雑な製品では、Verdent Cloud が選択した方向性を、ページや画面の計画と平易な言葉による製品仕様へと変換します。
  </Step>

  <Step title="承認済みの方向性から構築する">
    方向性が明確になった後、Verdent Cloud はデザインを動作するアプリへと復元し、その後の判断も承認済みのデザインと仕様に紐づけ続けます。
  </Step>

  <Step title="プレビューして続行する">
    プレビューでアプリを確認し、必要に応じてバックエンド作業、テスト、アナリティクス、デプロイへと続けます。
  </Step>
</Steps>

## Verdent Cloud で Design Mode を使う方法 [#verdent-cloud-で-design-mode-を使う方法]

Cloud の作成フローでは、テンプレートを選ぶ代わりに、構築したいアプリを説明します。具体的なデザインの方向性がまだない場合、Verdent Cloud は Design Mode を使い、構築前に方向性を選ぶのを助けられます。

ブリーフはシンプルでかまいませんが、デザインの判断を導けるだけの具体性を持たせましょう。

* 製品が何か
* 誰が使うのか
* ユーザーが達成したい主なこと
* すでに必要だとわかっているページ、画面、状態
* editorial、playful、functional、premium、minimalist、bold など、トーンやスタイルの参考
* 汎用的なグラデーション、ストック画像のような見た目、特定のビジュアルスタイルなど、避けたいもの

## ブリーフの例 [#ブリーフの例]

<CardGroup cols="2">
  <Card title="ランディングページ">
    フリーランス向けの個人向け家計管理アプリのランディングページを作成してください。落ち着いていて信頼でき、エディトリアルな雰囲気にし、ヒーロー、機能セクション、料金、FAQ を含めてください。
  </Card>

  <Card title="マルチスクリーンアプリ">
    燃え尽きから回復中の人向けの、モバイルファーストの習慣トラッカーを作成してください。やさしく手触り感のある雰囲気にし、オンボーディング、デイリーチェックイン、進捗ビュー、設定を含めてください。
  </Card>
</CardGroup>

## より良い結果を得るためのヒント [#より良い結果を得るためのヒント]

* 製品が誰のためのものかを伝えましょう。
* 機能リストだけでなく、求める雰囲気を説明しましょう。
* 既知のページや画面があれば触れておきましょう。
* 重要な参考情報や制約があれば早めに共有しましょう。
* 違和感があるとわかっているものがあれば、避けたいことを伝えましょう。
* 複雑な製品では、フルビルドが続行される前にページリストと製品仕様の確認を求められることを想定しておきましょう。