> ## 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の構成要素 — Canvas、フレーム、要素、チャット、アンビエントインテリジェンス、ツールバー、ライブラリパネル — と、それらがどう組み合わさるかを紹介します。 その中核において、Replit Designはフレームを表示する無限のCanvasです。このページの残りはすべて、それらのフレームに対して何ができるかについてです： * 無限のボード上でデザインフレームを生成し配置する * チャット、提案、ツールバーで各フレームを反復する * フレームの任意の部分をターゲットにして、その部分だけを変更する * ボードを離れることなく、テンプレートや実在プロダクトのインスピレーションを取り込む ## ボードの全体像 ラベル付きの領域があるCanvas：3つのフレーム（Webサイト、Design System、APEX X1スーパーカーのDesignモックアップ）、Webサイトフレーム内でハイライトされた要素、Chatパネル、次のステップを提案するAmbient intelligence、下部のToolbar、InspirationタブでLibraryパネルが開いている 7つのコンポーネントがReplit Designのワークスペースを構成します： * **[Canvas](/ja/design/canvas)**：Project Editorのデザインビューで、すべてのフレーム、図形、メモを保持する無限のパン・ズームボードです。 * **[フレーム](/ja/design/frames)**：Canvas上のすべてのタイル。フレームはライブのアーティファクト（Webサイト、スライド）、デザインモックアップ、画像、動画、ベクターグラフィックのいずれかです。 * **[要素](/ja/design/elements)**：見出し、ボタン、画像、フォームフィールドなど、フレーム内の個々のパーツです。 * **[チャット](/ja/design/chat-about-your-design)**：CanvasにドッキングされたAgentチャットです。作りたいものを説明するか、フレームを選択して小さな、あるいは大きな編集を依頼できます。最小化すればCanvasを全画面で使えます。 * **[アンビエントインテリジェンス](/ja/design/explore-suggestions)**：選択したフレームの横に表示される次のステップの提案で、クリック一つで新しい方向性を生成できます。仕組みについては[提案を探索する](/ja/design/explore-suggestions)を参照してください。 * **[ツールバー](/ja/design/toolbar)**：Canvas下部のフローティングバーで、Interact、Pan、Chat、Draw、Edit、Generateの各ツールがあります。 * **[ライブラリパネル](/ja/design/library-panel)**：スターターテンプレート、Mobbin厳選のインスピレーション、自分の過去の作品を、そのままCanvasにドロップできる状態でまとめています。 ## それらがどう組み合わさるか 各コンポーネントは前のものが終えたところから引き継ぎ、空のボードからビルド可能なデザインへとつながっていきます。 ### 1. フレームをCanvasに配置する チャットのプロンプト、またはツールバーの**Generate**メニューからフレームを生成します。フレームはデザインモックアップ、Webアプリ、モバイルアプリ、スライド、画像、動画、ベクターグラフィックのいずれかです。 ### 2. フレームを反復する 任意のフレームを選択して個別に作業します。自分の言葉でチャットしたり、[提案](/ja/design/explore-suggestions)に従って新しい方向性を派生させたり、**Focus**して近くで作業したりできます。仕上がったら**Build**してライブのアプリにします。 APEX X1のDesignフレームが選択されたCanvas。上部に種類ラベルとBuild、Focus、その他オプションのアクションを表示するフレームごとのアクションバーがあり、チャットのプロンプトボックスにフレームがチップとして添付されている ### 3. ツールバーで編集、注釈、生成する ツールバーは3つの役割をカバーします：**Edit**はフレーム内の単一要素を選択してVisual Editorを開き、**Draw**はAgentが読み取るスケッチ、矢印、付箋でボードに注釈を付け、**Generate**はデザインに必要な画像、動画、ベクターグラフィックを作成します。 スーパーカーレンタルのWebサイトでdiv要素が選択された状態でEditツールが有効になっている。Visual EditorパネルにText、Layout、Color、Borderのコントロールと、Discard、Save editsのボタンが表示されている ### 4. ライブラリパネルからインスピレーションを取り込む インスピレーションや出発点を探すには、ライブラリパネルを開きます。テンプレートはライブで編集可能なフレームとしてCanvasに配置され、Mobbin厳選のインスピレーションは次の生成を誘導するための静的な参照画像として配置されます。 検索ボックス、カテゴリフィルター、ポスターと2つのランディングページを含むテンプレートカードが表示されたライブラリパネルのTemplatesタブ ## 各コンポーネントを詳しく見る フレームを生成、配置、反復する無限のボード。 フレームの種類、フレームごとのアクションバー、Build、Focus。 フレーム内の個々のパーツを選択して編集する。 ボード、フレーム、単一の要素についてAgentに指示する。 選択したフレームの横に表示される、ワンクリックの次のステップ提案。 ツールの全カタログ、キーボードショートカット、ボードのジェスチャー。 テンプレート、Mobbin厳選のインスピレーション、自分の作品。 ## 次のステップ * [最初の画面をデザインする](/ja/design/design-your-first-screen)：プロンプトから最初のフレームを生成します。 * [Replit Designとは](/ja/design/what-is-replit-design)：プロンプトからオンブランドなアプリまでの完全な流れ。