Design Mode
まずテキストの概要をもとにビジュアルの方向性を選び、承認した方向性から実際に動作するアプリを構築します。
Design Mode は、目に見えるインターフェースを持つ新しいアプリを作るための、Verdent のデザインファーストな作成パスです。アイデアは言葉になっているものの、完成したデザイン、スクリーンショット、スタイルガイド、ページ計画がまだない場合に使用します。
いきなりコードに飛び込むのではなく、Design Mode はまず製品の見た目や雰囲気を決める手助けをし、その後で承認された方向性を実際に動作するアプリへと変換します。
Design Mode を使う場面
Design Mode は、テキストの概要から新しい製品の UI を作りたいときに使用します。たとえば次のような場合です。
- フルスタックアプリ
- Web フロントエンドやランディングページ
- モバイルアプリ
- ビジュアルの方向性がまだ決まっていない 0 から 1 の製品アイデア
使わない場面
次のような場合は Design Mode をスキップします。
- プロジェクトが単純な 1 画面のユーティリティ（基本的なフォームやごく小さなおもちゃアプリなど）である
- 具体的なスタイルの方向性、配色、タイポグラフィシステム、ページや画面のリストを含む、完成したデザイン概要がすでにある
- そのまま従うべきデザインファイル、モックアップ、スクリーンショット、スタイルガイドがすでにある
- デザインを飛ばして、直接コードに進みたいことが明確である
概要がすでに十分に具体的であれば、Verdent はそれを選択した方向性として扱い、ページ計画や構築作業へ直接進めます。
Design Mode の仕組み
製品を説明する
平易な言葉の概要から始めます。何を作りたいか、誰のためか、何をするものか、そしてすでに持っているムードやスタイルの参考があれば記載します。
ビジュアルの方向性を選ぶ
Verdent が異なるデザインの方向性を探り、コードを書く前に見た目や雰囲気を選べるようにします。
ページや画面を計画する
マルチページ、フルスタック、またはより複雑な製品の場合、Verdent は選択した方向性をページや画面の計画と平易な言葉の製品仕様へと落とし込みます。
承認された方向性から構築する
方向性が明確になったら、Verdent はデザインを実際に動作するアプリへと復元し、その後の判断も承認されたデザインと仕様に紐づけ続けます。
プレビューして続ける
プレビューでアプリを確認し、必要に応じてバックエンド作業、テスト、さらなる反復へと進めます。
Verdent Desktop で Design Mode を使う方法
Manager で新しい製品を始めるときは、構築したいアプリを説明します。具体的なデザインの方向性がまだない場合は、Design Mode を開くと、Verdent が構築前にビジュアルの方向性を選ぶ手助けをします。
概要はシンプルで構いませんが、デザインの判断を導けるだけの具体性を持たせてください。
- 製品が何であるか
- 誰が使うか
- それが手助けする主な作業
- すでに必要だとわかっているページ、画面、状態
概要の例
ランディングページ
フリーランサー向けの個人向け家計管理アプリのランディングページを作成してください。落ち着いていて、信頼でき、編集的な雰囲気で、ヒーロー、機能セクション、料金、FAQ を備えていること。
マルチ画面アプリ
燃え尽き症候群から回復中の人向けの、モバイルファーストな習慣トラッカーを作成してください。優しく手触りのある雰囲気で、オンボーディング、毎日のチェックイン、進捗ビュー、設定を備えていること。
より良い結果を得るためのヒント
- 製品が誰のためのものかを述べる。
- 機能リストだけでなく、求める雰囲気を説明する。
- わかっているページや画面があれば言及する。
- 重要な参考資料や制約があれば早めに共有する。
- 避けたいことがすでにわかっているなら、それを述べる。
- 複雑な製品では、本格的な構築を続ける前にページリストと製品仕様を確認することを想定しておく。