Designとは？
DesignではCanvasが表示され、プロンプトからデザインフレームを生成し、バリエーションを探索し、コードに落とし込む前に勝者を磨き上げることができます。 Designは次のような場合に最適です:- アイデアをすばやく試す: 機能を構築する前にアプリのデザインを可視化する
- 洗練されたウェブサイトを作成する: ランディングページ、ポートフォリオ、レストランのメニュー、イベントページ
- デザインを細かく調整する: 色、レイアウト、コンテンツを即座に調整
デザインモックアップは本物のページのような見た目と操作感がありますが、まだデータを保存したり外部サービスに接続したりはしません。見た目が気に入ったら、ワンクリックでデザインを完全なアプリに変換できます。以下のステップでその方法を説明します。
Buildとは？
Buildはあなたの作品が、データを保存したり、ユーザーのサインインを許可したり、他のサービスに接続したりできる、リアルな動作するアプリケーションとして実行される場所です。 Buildを使うべき場面:- ユーザーアカウント: ユーザーがアカウントを作成してログインできるようにする
- 情報の保存: 注文、メッセージ、ユーザー設定などのデータを保存する
- 他のサービスへの接続: 支払いを処理し、メールを送信し、他のアプリからデータを取り込む
- 複雑なタスク: オンラインストアの運営、予約の管理、ダッシュボードの提供
DesignとBuildを組み合わせて使う
DesignとBuildは同じプロジェクト上で動作するので、どちらか一方を選ぶ必要はありません。見た目から始めて、完全なアプリへと発展させましょう。1
まずDesignで
Designから始めて、アイデアをすばやく可視化します。アプリの見た目と操作感 — レイアウト、色、ボタン、ユーザー体験 — に集中しましょう。
2
改良と反復
提案に従って、選択したフレームの新しい方向性を探索するか、Editツールを選択して要素をクリックし、ビジュアルエディターで調整します。Agentとチャットして、欲しい変更を説明することもできます。
3
デザインをBuildする
デザインに満足し、実際の機能を追加する準備ができたら、フレームの**Build…**を選択します。新しいアーティファクトを作成するか、既存のものにデザインを適用しましょう。Agentがデザインをそのまま保ちながら、データの保存、ユーザーアカウントの処理、サービスへの接続機能を追加します。
モックアップにデータベースや高度な機能を追加しようとすると、Agentが変換を促します。
4
公開して共有する
アプリがビルドされたら、誰でもオンラインでアクセスできるように公開しましょう。Replitがすべての技術的なインフラを処理するので、アプリはあなたのオーディエンスに対して確実に機能します。
それぞれをいつ使い始めるべきか
Designから始める
- 見た目が一番の課題
- アイデアをすばやく確認したい
- 複数の方向性を探索して比較したい
- 速さを優先したい
Buildから始める
- 挙動が一番の課題
- アプリが最初からデータを保存する必要がある
- ユーザーがログインする必要がある
- 他のサービスに接続する
主な違い
次のステップ
Replit Designとは
プロンプトからブランドに合ったアプリまでの全体的な流れ
Canvas
フレームが並ぶボード
デザインをBuildする
フレームから動作するアプリへのガイド付きフロー
Agent
Agentがあなたのために構築できるものを探る