> ## 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. # Replit Designとは > Replit Designは、プロンプトからデザインフレームを生成し、AIの提案を探り、デザインシステムですべてをブランドに沿った状態に保つデザインスイートです。 Replit Designは、ソフトウェアの見た目と操作感を形作る場所です。欲しいものを説明すると、Replit Designが探索・改良できるインタラクティブなモックアップを生成します。良いものができたら、それは同じプロジェクト内で動作するアプリになります。 Start with a template、Start with a prompt、Sketchのカードと、メディアの生成、URLのインポート、Figmaからのインポート、スクリーンショットの再現といったオプションが並んだReplit Designのホーム ## ゼロから始めるか、既存のデザインをインポートする [Replit Design](https://replit.com/design) から始めるか、ワークスペースホームの作成用入力欄の下にある **Design** を選択します。始め方は4通りあります。 * **[プロンプト](/ja/design/design-your-first-screen)**: 欲しいものを説明して最初のフレームを生成します。 * **[テンプレート](/ja/design/start-from-a-template)**: 既成のランディングページ、ポスター、ソーシャル投稿、モバイル画面、プロトタイプから始めて、それをリミックスします。 * **[インポート](/ja/design/import-figma-designs-into-replit-design)**: Figmaや [Claude](/ja/design/import-claude-designs-into-replit-design) からデザインを持ち込むか、サイトを[そのURLから](/ja/design/import-a-website-into-replit-design)、あるいはスクリーンショットから再現します。 * **[デザインシステム](/ja/design/design-systems-explained)**: 保存済みのシステムから始めて、最初のフレームから既にブランドに沿った状態にします。 プロンプトボックス、Import URL、Import Figma、Recreate screenshot、Start with a design systemのオプションと、その下にテンプレートギャラリーが並んだreplit.com/designのランディングページ ## バリエーションを探る 決める前に幅広く試しましょう。すべての結果は新しいフレームとして配置されるため、どの方向性も失われません。 * **[提案](/ja/design/explore-suggestions)**: フレームを選択すると、Replit Designが次に試すべきことをワンクリックで提案します。 * **[別のモデル](/ja/design/explore-with-different-models)**: Designの背後にあるモデルを切り替え、同じブリーフを送って本当に異なる方向性を得ます。 APEX X1スーパーカーのヒーロー画像を表示する選択済みのWebsiteフレームと、その隣にあるSuggested next stepsパネル。Explore different approaches、Try different layouts、Explore different vibes、Surprise meといった提案チップが並んでいる ## 改良する 自分にとって自然なやり方で、勝ち残ったデザインを仕上げましょう。 * **[チャット](/ja/design/chat-about-your-design)**: 自分の言葉でAgentにブリーフします — ボード全体でも、一度に1つのフレームでも構いません。 * **[ビジュアルエディター](/ja/design/visual-editor)**: 任意の要素をクリックして、テキスト、色、スペース、画像を直接調整します。シンプルな編集はクレジットを消費せず、即座にソースコードへ反映されます。 * **[描画](/ja/design/toolbar#draw)**: 問題箇所を丸で囲んだり、意図する要素を矢印で示したり、付箋を残したりします。Agentはそのマークアップを読み取ります。 * **[アセットを生成する](/ja/design/toolbar#generate)**: デザインに必要な画像、動画クリップ、ベクターグラフィックを、プロジェクトの見た目に合うようリファレンスを添付しながら作成します。 スーパーカーレンタルのウェブサイトでEditツールが有効になり、div要素が選択されている。ビジュアルエディターパネルにはText、Layout、Color、Borderのコントロールと、DiscardおよびSave editsボタンが表示されている ## 構築する フレームが仕上がったら、それをAgentに渡します。ここでのデザインは単なる絵ではなく、実際のソフトウェアの仕様です。 * **[デザインを構築する](/ja/design/build-your-design)**: フレームを新しい動作するアプリに変換します。 * **[既存のアプリを作り直す](/ja/design/frames#build)**: すでに持っているアプリに、そのフレームの見た目を適用します。 選択したフレームのアクションバー。BuildとFocusのアクションが表示されている デザインフレームから新しいアプリを構築するにはCoreまたはProプランが必要です。それ以外のDesignの機能はすべてのプランで利用できます。プランの詳細は[料金](/ja/billing/ai-billing)を参照してください。 ## 拡張する 次のデザインを、前回よりも速く作りましょう。 * **[デザインシステムを作成する](/ja/design/create-a-design-system)**: 気に入ったデザインから色、タイポグラフィ、トークン、コンポーネントを抽出するか、ゼロからプロンプトで作成します。 * **そこから新しい作業を始める**: 新しいアーティファクトは最初のフレームからブランドに沿った状態で生成されます。 * **[既存のアプリをシステム配下に取り込む](/ja/design/apply-design-system)**: 既に持っているアプリのスタイリングを作り直し、すべてを一致させます。 * **システムを切り替える**: プロジェクトごとにシステムを選択・変更できます。 ここから旅は再び **Start** に戻り、以降のすべてのデザインがブランドに沿った状態で始まります。 フォーカスモードで生きたスタイルガイドとしてレンダリングされたAPEX X1 Design System。色、フォント、レイアウト、コンポーネントのサイドバー、コアパレット、タイプスケール、コンポーネントの例が表示されている ## DesignとBuildのどちらから始めるべきか DesignとBuildは、同じプロジェクトへの2つの入口です。BuildはAgentがソフトウェアを実際に動かす場所であり、Designはその見た目を形作る場所です。デザインしたものがデザインツールの中に取り残されることはありません。 * 見た目が難しい部分であるときは **Design** から始めましょう: まず方向性を探り、勝ち残ったものを構築します。 * 動作が難しい部分であるときは **Build** から始めましょう: まず動くようにしてから、Replit Designでスタイルを作り直します。 ## 次のステップ デザインの経験がなくても、プロンプトから最初のデザインフレームを生成しましょう。