> ## Documentation Index
> Fetch the complete documentation index at: https://lovable.generaltranslation.app/llms.txt
> Use this file to discover all available pages before exploring further.

# デザインツールでプロジェクトをカスタマイズする

> デザインツールを使ってテーマを適用・カスタマイズし、UI 要素を編集しながら、プロジェクト全体で一貫したブランディングを維持できます。

**デザインツール**は、プロジェクトの見た目をカスタマイズするために必要な機能をひとまとめにしたものです。プロジェクト全体の見た目は **Themes** で管理し、細かな見た目の変更は **Visual edits** を使えば、コードを書いたりクレジットを使ったりせずに、素早くピンポイントに変更できます。

デザインツールにアクセスするには、プレビューの横にある `+` ボタンから **Design view** を開きます。

<img src="https://mintcdn.com/generaltranslation-d8a08cd1/At48MABj-G93zw7Y/images/changelog-design-view-11-26-25.png?fit=max&auto=format&n=At48MABj-G93zw7Y&q=85&s=08a6483a1839b8ed34bfb420913293df" alt="Changelog Design View 11 26 25 Pn" width="937" height="277" data-path="images/changelog-design-view-11-26-25.png" />

<div id="why-use-design-tools">
  ## なぜデザインツールを使うのか
</div>

デザインツールを使うと、デザイナー、マーケター、非エンジニアのチームメンバーを問わず、誰でも画面上でデザインを編集し、ブランドらしさを維持しながら、より素早く作業を進められるようになります。

<div id="key-benefits">
  ### 主なメリット
</div>

* **ブランドの一貫性：** ブランドイメージを反映した共通テーマを適用できる
* **素早い反復：** レイアウトやテキストを視覚的に更新できる—コードもプロンプトも不要
* **誰でも編集可能：** 非エンジニアでも安心してデザインを変更できる
* **ライブプレビュー：** 公開前に、すべてのビジュアルの変更をリアルタイムで確認できる

<div id="common-use-cases">
  ### 主なユースケース
</div>

* 複数のプロジェクト間でブランドの一貫性を維持したいデザイナー
* ブランドガイドラインから外れずに新しいキャンペーンページを公開したいマーケター
* レイアウトやコピーを直接編集したいプロダクトマネージャー
* 共通のビジュアルスタイルを使ってすばやくプロトタイプやバリエーションを作成したいチーム

<div id="themes">
  ## テーマ
</div>

**テーマ** は、プロジェクトのコアとなるスタイルシステム（色、フォント、余白、角丸）を定義し、ブランドアイデンティティの土台を形成します。

<div id="key-capabilities">
  ### 主な機能
</div>

* **適用:** Lovable の組み込みテンプレートから選択するか、カスタムテーマを適用する
* **作成:** 現在のプロジェクトからテーマを生成する
* **インポート:** カスタム CSS ファイル（`index.css` や `globals.css` など）をアップロードしてテーマに変換する
* **カスタマイズ:** UI 上で直接、色やタイポグラフィ、余白を編集する
* **共有:** テーマはワークスペース内のすべてのメンバーが利用できるようになる
* **プレビュー:** 適用前に変更をリアルタイムでテストする

<div id="visual-editing">
  ## ビジュアル編集
</div>

**ビジュアル編集**モードでは、ページ上でそのまま、プロジェクトを見た目そのままに変更できます。レイアウトや余白を細かくコントロールしながら、すばやく直感的に調整できるよう設計されています。

<div id="key-capabilities">
  ### 主な機能
</div>

* `⌘ Command`(Mac) または `⊞ Win`(Windows) を押しながら**複数の要素を選択**して一括編集
* 整列や配置のための**レイアウトコントロール**
* コンテナごとに各辺の**マージンやパディングを調整**
* サイドバーから直接**テキスト、カラー、フォントを編集**
* 改行やインラインスタイルに対応した**強化されたテキスト書式設定**
* ファイルをアップロードするか画像 URL を指定して**画像を差し替え**
* プロンプトを使って画像を編集し、**AI 画像を生成**

<div id="quick-start">
  ## クイックスタート
</div>

1. プレビューの横にある `+` ボタンから **デザインビュー** を開きます。
2. 左側のパネルでプロジェクトのデザインを編集するには、**テーマ** タブと **ビジュアル編集** タブを切り替えます。

   * **テーマ** に移動してテーマを選択するか、独自のテーマを作成し、プロジェクトに適用します。
   * **ビジュアル編集** に移動してライブプレビュー内の要素を選択し、見た目を編集します。

   <Tip>
     ビジュアル編集にすばやくアクセスするには、プロンプトボックス内の **Visual edits** ショートカットを使いましょう。
   </Tip>
3. 結果に満足したら **プレビューと保存** を実行します。

<Warning>
  プロジェクトの見た目をカスタマイズしても、次の場合を除きクレジットは消費されません。

  * 動的な要素を変更する場合。
  * Lovable Agent にプロンプトを送ってデザインを変更する場合。その代わりにデザインツールを使用してください。
</Warning>