【新機能】Lovable Aesthetics Update｜タイポ・レイアウト・色を“作る前に決める”

3行まとめ#

• ビルド開始前に『タイポ・レイアウト・カラー』の方向性をAIに先渡しできるようになりました。
• プロジェクト単位の“デザインコンセプト”として保存され、以降の生成すべてに自動適用されます。
• 従来の『作ってから直す』ループが激減し、LP・アプリ・ブログいずれでも初回出力の精度が大幅に向上します。

何が変わったのか#

従来のLovableは『とりあえず作る → 出来たものを見て調整』の往復が前提でした。Aesthetics Updateでは、最初のチャットを送る前にデザインの“好み”を宣言できます。これによりAIは1ターン目から、あなたのブランド方向に近い見た目で出力するようになります。

指定できる3つの軸

• タイポグラフィ：見出し／本文のフォント、ウェイト、字間。Editorial・Geometric・Playful などプリセットも選択可。
• レイアウト：余白の取り方（タイト／ジェネラス）、コンテナ幅、グリッドの粒度、角丸の強さ。
• カラー：プライマリ＋アクセント＋ニュートラルのトーン。ライト／ダーク両対応の自動展開。

実例ケーススタディ：同じ指示で出力がここまで変わる#

1. プロンプト：『SaaSのランディングページを作って』のみ。
2. Aesthetics未指定 → 一般的なTailwindスターター調の青／白／角丸md。
3. Aesthetics指定（Editorialタイポ＋ジェネラス余白＋深緑×クリーム）→ 雑誌的なヒーロー、セリフ見出し、左右非対称のグリッド、写真は大きめにブリード。
4. 結果、その後の修正指示（『もっと余白を』『見出しはセリフで』等）が3〜5往復まるごと不要に。

どこから設定する？#

1. プロジェクトを開く → 左サイドバーの『Design』または右上の歯車から『Aesthetics』を開く。
2. 3軸（タイポ／レイアウト／カラー）をプリセットまたはカスタムで選択。
3. 右側の“Concept Preview”で、選択したスタイルが適用された汎用ヒーロー／カード／フォームを即時確認。
4. 『Apply to project』を押すと、以降の全生成にそのコンセプトが適用される。

効く使いどころ#

• ブランドガイドが既にある → カラーコード／フォント名を入れるだけで全画面が一気に揃う。
• 営業用デモLPを量産 → 業界別にプリセットを保存しておけば1分でトーン違いを出せる。
• ブログ・ドキュメント → Editorial系プリセットで、雑誌的な“読ませる”見た目に振れる。
• デザイン経験が浅い人 → プリセットを切り替えるだけで“ちゃんと見える”出力が得られる。

つまずきポイント集#

• 症状：プレビューでは綺麗なのに本画面に反映されない → 対処：『Apply to project』を押し忘れていないか確認。Concept Previewはプレビュー専用画面。
• 症状：既存ページの色だけ古いまま → 対処：『既存の画面のカラーをAestheticsコンセプトに合わせて全部置き換えて』と1ターン明示で指示。
• 症状：プリセットが好みじゃない → 対処：プリセットを起点にカスタムで微調整。フォント名・HEX・余白サイズで上書きできる。
• 症状：ダークモードで色が破綻 → 対処：プライマリの明度（L値）を上げ、ニュートラルの段階数を増やす。AestheticsはOKLCHでトークン化されるので、L値ベースの調整が効きやすい。

よくある質問（検索意図別）#

[初心者向け] Q. デザインに自信がなくても使える？

むしろ初心者向けの機能です。Editorial／Minimal／Playful／Corporate などプリセットを順番にプレビューして、しっくり来るものを選ぶだけでプロっぽい見た目になります。

[実装手順] Q. 既存のブランドガイド（HEX・フォント名）を移植したい

Aestheticsの『Custom』タブでHEXコード・Google Fonts名・基本余白（4 / 8 / 16px etc）を直接入力。styles.cssにOKLCHトークンとして展開され、以降の生成すべてに自動反映されます。

原典・参考リンク#

• 発表ポスト：@lovable_dev（X / 2026年5月11日）
• 公式：lovable.dev