LovableからHubSpotへ

Lovableから​HubSpotへ。​アプリを​編集できる​モジュールに。

Lovableで作りましたか? LovableからHubSpotへの変換は、transjtが自動で行います。ReactアプリがネイティブなHubLモジュールになるので、マーケターはコードを開かずに、ドラッグ&ドロップエディターでページを組み直せます。

プレビュー後にお支払い

transjtのテーマで作ったホームページを表示したHubSpotのページエディターと、その横に並ぶモジュール

代理店、フリーランス、マーケティングチームに選ばれています

変換すべきとき

Lovableを​HubSpotに​変換すべきとき

LovableのアプリをHubLで手作業で作り直す代わりに、チームがtransjtを選ぶ6つの場面。

  • マーケティングはすでにHubSpotで動いている

    CRM、メール、フォームがすでにHubSpotで動いているなら、サイトもそこで動かすのが自然です。transjtは、Lovableで作ったサイトをネイティブテーマに変換します。サイトは別のインフラを離れ、チームが普段使っているツールのすぐ隣に置かれます。

  • ランディングページを、あなたの手を借りずに公開したい

    Reactアプリのままでは、新しいキャンペーンページのたびに開発者の作業が発生します。デザインをモジュールに変換すれば、チームはチケットを起票することもデプロイを待つこともなく、すでにデザインしたコンポーネントからページを組み立てられます。

  • CRMデータでパーソナライズしたい

    HubSpotは、ライフサイクルステージ、リストのメンバーシップ、任意のコンタクトプロパティに応じてコンテンツを出し分けられます。ただし、それが機能するのはページがネイティブテーマの場合だけです。transjtがLovableのリポジトリから作るのは、まさにそのネイティブテーマです。

  • チームにHubLを書ける人がいない

    HubSpotのテンプレート言語はHubSpot専用で、1つのプロジェクトのために覚えるのは割に合いません。transjtがその部分を書くので、サイトの変換のためにチームの誰かがHubLを覚える必要はありません。

  • 代理店の見積もりが予想より高かった

    認定パートナーにカスタムテーマを依頼すると、Lovableでデザイン全体を作った費用より高くつくことがよくあります。自動で変換すれば、その予算を、サイト本来の目的であるキャンペーンに回せます。

  • ページに分析機能を結びつけたい

    ページがHubSpotのネイティブなコンテンツになれば、アトリビューション、ページ単位のレポート、A/Bテストが標準で使えます。外部でホストしたReactアプリでは、計測の仕組みを別途組み込まない限り、どれも使えません。

計算してみる

Lovableで​いくつの​コンポーネントを​作りましたか?

transjtでサイトを公開

費用を節約
$8,100*
時間を節約
81時間*手作業で10.1作業日
すぐに結果が出る
1.5〜3時間*テーマ全体で
無料で始める

*ReactからHubSpotへの手作業での移行時間に基づく概算です。コンポーネントあたり約4.5時間、1時間あたり$100、1日8時間で計算しています。transjtは、リポジトリから約1.5〜3時間でテーマを構築します。

仕組み

Lovableを​4ステップで​HubSpotへ​変換。

GitHubを経由して、LovableのプロジェクトからネイティブなHubSpotテーマへ。

  1. Lovableでサイトを作る

    デザインが決まるまで、プロンプトで調整を重ねます。変換向けに作られたWebサイト用プロンプトから始めましょう。Lovableはもともと、transjtが変換するReactとViteの構成で出力します。一部のAIビルダーと違い、先に回避すべき技術スタックの制約はありません。

  2. LovableをGitHubと同期

    Lovableに組み込まれたGitHub連携を使い、プロジェクトをリポジトリにプッシュします。transjtはそこから読み込みます。履歴には、どのデザインからどのバージョンのテーマが作られたかが記録されます。

  3. リポジトリをtransjtに接続

    transjtのプロジェクトでGitHubを認証し、リポジトリを選びます。transjtはコンポーネントの構造を読み取り、どの部分をテンプレートにし、どの部分をマーケターが編集できるモジュールフィールドにするかを判断します。

  4. HubSpotにエクスポート

    HubSpotを選び、プレビューを確認します。確定すると、transjtが、デザインマネージャーからアップロードできるネイティブテーマを作成します。HubLテンプレートとモジュールは、すぐにページエディターに表示されます。

お客様の声。

アーティストのアトリエで机に向かう男性お客様
“We’d seen plenty of tools promise magic for page and theme creation, but they always under-delivered. Transjt proved to be the exception.”
KevinThinkFuel
  • 95–99%完成コードの割合(構成の整ったファイルの場合)
  • ∞取り込めるAIビルダー(Figmaにも対応)
  • 2ネイティブ対応のCMS:HubSpotとWordPress
  • 1クリックでエクスポート。数分後にはテーマがアカウントに届きます
得られるもの

Lovableで​作ったサイトを​HubSpotへ​移しませんか?

Lovableから変換したHubSpotテーマの中身

HubSpotのCMSは、マーケターがコードを開かずに並べ替えたり、CRMのデータに合わせてパーソナライズしたりできるモジュールを中心に設計されています。同じ理由で、Reactアプリをそのまま入れることはできません。コンポーネントを、編集できるフィールドが定義されたHubLモジュールにする必要があります。transjtはこの変換を自動で行うので、Lovableのデザインはネイティブテーマとして届き、アプリをiframeに入れる必要もありません。

FAQ

Lovableから​HubSpotへの​FAQ。

LovableのプロジェクトをHubSpotテーマに変換する前に知っておきたいこと。

デモを予約
  • Lovableは、プロンプトから動作するReactアプリを作り、GitHubに同期します。transjtはそのリポジトリを引き継いでフロントエンドをネイティブなHubLモジュールに変換するので、HubSpotへの引き渡しに開発者を挟む必要はありません。

  • Lovableはもともと、transjtが変換するReactとViteの構成で出力するので、通常は何も変える必要がありません。プロンプトでNext.jsやサーバーサイドレンダリングを追加させた場合は、先にシンプルなReactとViteの構成で作り直すよう依頼してください。HubSpotでは、代わりにHubLがサーバーサイドでレンダリングされるためです。

  • はい。だからこそtransjtは、アプリを埋め込まずに変換します。transjtは編集できるフィールドを備えたモジュールを出力するので、テキスト、画像、セクションの順序はすべて、誰もLovableのソースに触れることなく、HubSpotのドラッグ&ドロップエディターで編集できます。

  • はい。transjtはコンポーネントをHubLテンプレートに変換し、コンパイル済みのスタイルをそのまま引き継ぐので、レイアウト、余白、タイポグラフィはLovableのプレビューと同じように表示されます。

  • カスタムテーマのアップロードには、カスタムコードのファイルを使えるContent Hubのエディションが必要です(Starterエディションでは制限されています)。変換の前にプランを確認してください。テーマ自体は標準的なHubSpotテーマで、それ以外に特別な要件はありません。

  • LovableのプロジェクトをGitHubに同期すれば、ページ数にもよりますが、transjtは通常数時間で、公開できるHubSpotテーマを用意します。

今日​デザインして、​明日​公開。

transjtでは一秒一秒が大切です。だから私たちの使命はシンプル。あなたの時間を節約し、ワークフローの手間をなくすことです。