Lovable はHTML+Tailwindで出力される——v0との違いとLP活用法

先日の記事で、v0、Figma Make、PencilといったAIデザインサービスについて触れました。

LP制作において、これらReactベースのツールはSEOや軽量性の観点で不向きだという話でした。

しかし、ふと思い出したのがLovableというサービス。

これまで存在をすっかり忘れていましたが、改めて使ってみると — HTMLベースで出力されるため、LP制作に活用できそうです。

Lovableの特徴

Lovableは、少なくとも私が試した限りでは、Reactベースではなく、HTMLベースで出力されます。

適切にセクションタグやリストタグが使われており、単にDIVで組み立てられているわけではありません。

先の記事で話したように、SEO的にHTMLのシンプルさが求められるLP制作において、これは大きなポイントです。

グリッドデザイン的なシンプルなレイアウトのLPを作るには、十分実用的な印象です。

一点注意点として、CSSに関しては独自のスタイルシートを作るわけではなく、基本的に全てTailwind CSSで装飾されています。

独自にCSSを書きたい場合には、向いていないかもしれません。

ただ、グリッドデザイン的なシンプルなレイアウトであれば、AIがHTMLを書く際はTailwind CSSの方がちゃんとしたものが仕上がってくる印象があります。

技術的な選定として、良い割り切りになっているのではないでしょうか。

元記事で触れた「Design as Code」の文脈で言えば、LovableはHTML + Tailwindという組み合わせで、グリッドデザイン系のLPに対して実用的な選択肢と言えそうです。

LP制作を検討している方は、Lovableも選択肢に入れてみてはいかがでしょうか。

良いLPライフを。