+ ボタンから Design view を開きます。
なぜデザインツールを使うのか
主なメリット
- ブランドの一貫性： ブランドイメージを反映した共通テーマを適用できる
- 素早い反復： レイアウトやテキストを視覚的に更新できる—コードもプロンプトも不要
- 誰でも編集可能： 非エンジニアでも安心してデザインを変更できる
- ライブプレビュー： 公開前に、すべてのビジュアルの変更をリアルタイムで確認できる
主なユースケース
- 複数のプロジェクト間でブランドの一貫性を維持したいデザイナー
- ブランドガイドラインから外れずに新しいキャンペーンページを公開したいマーケター
- レイアウトやコピーを直接編集したいプロダクトマネージャー
- 共通のビジュアルスタイルを使ってすばやくプロトタイプやバリエーションを作成したいチーム
テーマ
主な機能
- 適用: Lovable の組み込みテンプレートから選択するか、カスタムテーマを適用する
- 作成: 現在のプロジェクトからテーマを生成する
- インポート: カスタム CSS ファイル（
index.cssやglobals.cssなど）をアップロードしてテーマに変換する - カスタマイズ: UI 上で直接、色やタイポグラフィ、余白を編集する
- 共有: テーマはワークスペース内のすべてのメンバーが利用できるようになる
- プレビュー: 適用前に変更をリアルタイムでテストする
ビジュアル編集
主な機能
⌘ Command(Mac) または⊞ Win(Windows) を押しながら複数の要素を選択して一括編集- 整列や配置のためのレイアウトコントロール
- コンテナごとに各辺のマージンやパディングを調整
- サイドバーから直接テキスト、カラー、フォントを編集
- 改行やインラインスタイルに対応した強化されたテキスト書式設定
- ファイルをアップロードするか画像 URL を指定して画像を差し替え
- プロンプトを使って画像を編集し、AI 画像を生成
クイックスタート
-
プレビューの横にある
+ボタンから デザインビュー を開きます。 -
左側のパネルでプロジェクトのデザインを編集するには、テーマ タブと ビジュアル編集 タブを切り替えます。
- テーマ に移動してテーマを選択するか、独自のテーマを作成し、プロジェクトに適用します。
- ビジュアル編集 に移動してライブプレビュー内の要素を選択し、見た目を編集します。
- 結果に満足したら プレビューと保存 を実行します。