Canvas でデザインする

Documentation Index

Fetch the complete documentation index at: https://docs.replit.com/llms.txt

Use this file to discover all available pages before exploring further.

​

始める前に

• 初めてのアプリをビルドして公開する を完了して Runwell を開くか、
• 他のプロジェクトを使う — 以下の手順は同様です。

​

デザインのバリエーションを探索する

1

Canvas を開いてフレームを選択する

Project Editor で Canvas タブを開きます。アプリが Canvas 上のフレームとして表示されます。フレームを選択して Reimagine… と Preview コントロールを表示させます。

2

デザインを Reimagine する

Reimagine… をクリックして、Agent が探索できる方向性のメニューを開きます。1つ選んでください — Runwell の場合は Explore different vibes を試してみましょう。Agent がレイアウトを維持しながらビジュアルの雰囲気を変えた3つの審美的バリエーションを生成します。

利用可能な方向性の一覧:

• Explore different approaches（異なるアプローチを探索）
• Try different layouts（異なるレイアウトを試す）
• Explore different vibes（異なる雰囲気を探索）
• More like this, but better（これに似ているが、より良く）
• Optimize for usability（使いやすさを最適化）
• Show me the opposite of this（これの反対を見せて）
• Surprise me（サプライズ）

メニューから選ぶ代わりに、自分の言葉で方向性を説明することもできます — 例えば「ダークテーマ、ミニマルテーマ、カラフルテーマを見せて」など。

3

バリアントを比較する

Canvas 上でパンまたはズームアウトして、バリエーションをオリジナルと並べて確認します。それぞれを比較して、適用したい方向性を決めてください。

コミットする前に1つを改良したい場合は、Agent に依頼できます — 例えば「2番目が好きですが、ヘッダーを大きくしてください」など。

4

アプリにデザインを適用する

好みのバリアントを選択して、フレームの上部にある Build… をクリックします。ダイアログで、新しいコピーを作成するのではなく、新しいデザインをその場で適用するために 既存のアプリ（例: Runwell）を選択します。

Agent が変更を適用するまで待ちます。完了したら、Canvas で更新されたフレームを選択して Preview をクリックして結果を確認します。最初に行ったのと同じ確認を実行してください — Runwell の場合: ランを保存し、合計が更新されることを確認して、Preview を電話サイズの幅にリサイズします。

5

更新されたデザインを公開する（オプション）

新しいルックスに満足しましたか？Agent チャットまたはツール & ファイルパネルの Publishing タイルから公開してください。パブリック URL は同じまま — 訪問者はすぐに更新されたバージョンを見ることができます。公開フローの復習が必要な場合は、初めてのアプリをビルドして公開する の アプリを公開する ステップをご覧ください。

​

次に試すこと