> ## 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.
# Canvas でデザインする
> 既存のアプリのビジュアルバリエーションを Canvas で生成し、並べて比較して、好みのものを適用しましょう — 再ビルドは不要です。
export const YouTubeEmbed = ({videoId, title = "YouTube video", startAt}) => {
if (!videoId) {
return null;
}
let url = "https://www.youtube.com/embed/" + videoId;
if (startAt) {
url = url + "?start=" + startAt;
}
return
;
};
⏰ *所要時間: 約5分* · [初めてのアプリをビルドして公開する](/ja/build/your-first-app) の続き
[Canvas](/learn/design/canvas) は、すでにビルドしたアプリの代替ルックスを Agent に生成させ、並べて比較して、好みのものを適用できるビジュアルワークスペースです。再ビルドにコミットせずにビジュアル方向性を探索する最速の方法です。
このガイドでは [初めてのアプリをビルドして公開する](/ja/build/your-first-app) の Runwell ランニングトラッカーを例として使いますが、同じ流れはどんなプロジェクトにも使えます。
## 始める前に
Replit に既存のアプリが必要です。どちらかを行ってください:
* [初めてのアプリをビルドして公開する](/ja/build/your-first-app) を完了して Runwell を開くか、
* 他のプロジェクトを使う — 以下の手順は同様です。
## デザインのバリエーションを探索する
Project Editor で **Canvas** タブを開きます。アプリが Canvas 上のフレームとして表示されます。フレームを選択して **Reimagine…** と **Preview** コントロールを表示させます。
**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（サプライズ）**
メニューから選ぶ代わりに、自分の言葉で方向性を説明することもできます — 例えば「ダークテーマ、ミニマルテーマ、カラフルテーマを見せて」など。
Canvas 上でパンまたはズームアウトして、バリエーションをオリジナルと並べて確認します。それぞれを比較して、適用したい方向性を決めてください。
コミットする前に1つを改良したい場合は、Agent に依頼できます — 例えば「2番目が好きですが、ヘッダーを大きくしてください」など。
好みのバリアントを選択して、フレームの上部にある **Build…** をクリックします。ダイアログで、新しいコピーを作成するのではなく、新しいデザインをその場で適用するために **既存のアプリ**（例: Runwell）を選択します。
Agent が変更を適用するまで待ちます。完了したら、Canvas で更新されたフレームを選択して **Preview** をクリックして結果を確認します。最初に行ったのと同じ確認を実行してください — Runwell の場合: ランを保存し、合計が更新されることを確認して、Preview を電話サイズの幅にリサイズします。
新しいルックスに満足しましたか？Agent チャットまたはツール & ファイルパネルの **Publishing** タイルから公開してください。パブリック URL は同じまま — 訪問者はすぐに更新されたバージョンを見ることができます。
公開フローの復習が必要な場合は、[初めてのアプリをビルドして公開する](/ja/build/your-first-app) の **アプリを公開する** ステップをご覧ください。
## 次に試すこと
Canvas の機能とワークフローを深く掘り下げましょう。
色、テキスト、レイアウトを細かく調整しましょう。
Agent をアイデアから動作するアプリへと導く方法を学びましょう。