無料で登録
Claude CodeからHubSpotへ

Claude Codeから​HubSpotへ：​リポジトリを​HubLモジュールに。

Claude Codeでフロントエンドを作りましたか？transjtはClaude CodeからHubSpotへの変換を自動で行います。リポジトリにすでにあるReactがネイティブなHubLモジュールになり、一度しか使わないテンプレート言語を学ぶ必要はありません。

無料で始めるデモを予約

プレビュー後にお支払い

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

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

変換すべきとき

Claude Codeの​出力を​HubSpotへ​変換すべき​とき

テーマを手作業で書くよりも、リポジトリ内のReactをHubLモジュールに変換するほうが理にかなう6つの状況。

  • コードはすでにgitにある。エクスポートするものはない。

    Claude Codeはリポジトリで直接作業するので、ほかのツールで必要な引き渡しがありません。すでにコミットしているリポジトリをtransjtに指定すれば、現在の状態から変換が始まります。

  • HubLは、一度書いたら二度と使わない言語

    1つのプロジェクトのためにHubSpotのテンプレート構文を学ぶのは、二度と使わないものに時間を費やすことです。transjtがその層を書くので、HubSpotの専門家が必要だという理由で仕事を断ることはもうありません。

  • クライアントはHubSpotを購入し、使うつもりでいる

    マーケティング部門がContent Hubに料金を払っているのに、外部でホストされたReactアプリを渡せば、払った分の機能を使えません。モジュールに変換すれば、購入時に約束されたドラッグ＆ドロップでの編集が手に入ります。

  • サポート対応のループから抜け出したい

    Reactで作ったサイトでは、文章の変更がすべてあなたに戻ってきます。編集可能なフィールドを持つモジュールなら、クライアントが自分で変更できるので、納品後もサイトの保守を続けることにはなりません。

  • マーケティングが、あなたがデザインしていないページを作る必要がある

    よく定義されたモジュールを渡せば、マーケティングチームは何年にもわたって自分たちでキャンペーンページを組み立てます。それが成り立つのは、コンポーネントが固定のReactバンドルではなく、ネイティブなHubSpotモジュールである場合だけです。

  • リテイナー契約にHubSpotテーマの制作が含まれていない

    認定パートナーは、カスタムテーマの制作を別の案件として見積もります。変換を自動化すれば、デザインの見積もり時に決めた予算の範囲内で納品できます。

計算してみる

Claude Codeで​いくつの​コンポーネントを​作りましたか？

transjtでサイトを公開

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

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

仕組み

Claude Codeの​出力を​HubSpotへ、​4つの​ステップで​変換。

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

  1. Claude Codeでフロントエンドを作る

    いつもどおりターミナルで作業します。HubSpotはHubLを自社のサーバーでレンダリングするため、フロントエンドはReactとVite（またはNext.jsの静的エクスポート）のままにし、サーバーサイドレンダリングは避けてください。最初にそう伝えておけば、Claude Codeはそれを守ります。

  2. いつもどおりコミットしてプッシュ

    エクスポートの手順はありません。作業はすでにgitリポジトリにあるので、変換に必要な準備はGitHubへのプッシュだけです。

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

    transjtのプロジェクトでGitHubを認証し、リポジトリとブランチを選びます。transjtはコンポーネントツリーを読み取り、どの部分をHubLテンプレートにし、どの部分を編集可能なモジュールフィールドにするかを判断します。

  4. HubSpotにエクスポート

    HubSpotを選び、プレビューを確認します。確定すると、transjtが、デザインマネージャーからアップロードできるネイティブテーマを作成します。そこに含まれるHubLテンプレートとモジュールは、クライアントに渡す前に読んでレビューできます。

無料で始めるデモを予約
Claude Code以外にも

ほかの​コーディングツールも​接続できます。

すべてのAIビルダーを1ページにまとめています：AIからHubSpotへ。

お客様の声

お客様の声。

アーティストのアトリエで机に向かう男性お客様
“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クリックでエクスポート。数分後にはテーマがアカウントに届きます
得られるもの

リポジトリを​HubSpotテーマに​しませんか？

Claude Codeから作ったHubSpotテーマに実際に含まれるもの

HubSpotのCMSは、マーケターがコードを開かずに並べ替えたり、CRMデータに合わせてパーソナライズしたりできるモジュールを中心に作られています。この設計のため、Reactフロントエンドをそのまま入れることはできません。まずコンポーネントを、編集可能なフィールドが宣言されたHubLモジュールにする必要があります。transjtはその変換を自動化し、読みやすいテンプレートファイルを書くので、結果をほかのコードと同じようにレビューできます。

無料で始めるデモを予約
対象

企業、​代理店、​フリーランスの​ために。

明るいオフィスのロビーでタブレットを持って微笑むビジネスウーマン企業社内チームでWebサイトのリニューアルを進められます。長い木のテーブルを囲んで打ち合わせをするチーム代理店チームを増やさずに、クライアントのサイトを完璧に仕上げます。共有スタジオでノートパソコンに向かう、眼鏡に赤いニット帽のデザイナーフリーランスtransjtがプロジェクトを作っている間、チャイラテでもどうぞ。
FAQ

Claude Codeから​HubSpotへの​よくある質問。

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

デモを予約

  • Claude Codeは、ローカルのリポジトリで直接Reactを書き、編集します。リポジトリをGitHubにプッシュすれば、transjtがフロントエンドをネイティブなHubLモジュールに変換します。コードはすでにバージョン管理されているので、別のエクスポート手順はありません。

  • 最初に、ReactとVite、またはNext.jsの静的エクスポートを使い、サーバーサイドレンダリングは使わないようClaude Codeに伝えてください。HubSpotはHubLをサーバーサイドでレンダリングするため、きれいに変換できるのはクライアントレンダリングのフロントエンドです。Claude Codeは、こうした明示的な指示に確実に従います。

  • はい。だからこそ、プロジェクトを埋め込むのではなく変換します。transjtは編集可能なフィールドを持つモジュールを出力するので、文章、画像、セクションの順序はすべて、ソースに触れずにHubSpotのドラッグ＆ドロップエディターで変更できます。

  • HubLテンプレートとモジュール定義でできた、通常のテーマです。開いてレビューでき、バージョン管理にも置けます。これは、後で別の人を入れるかもしれないクライアントに成果物を渡すときに重要です。

  • カスタムテーマのアップロードには、カスタムコードファイルを使えるContent Hubのエディションが必要で、Starterエディションでは制限があります。これが唯一の必須条件なので、作業範囲を決める前に確認しておくとよいでしょう。

  • リポジトリをGitHubにプッシュすれば、ページ数にもよりますが、transjtは通常数時間で、公開できるHubSpotテーマを用意します。

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

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

無料で始めるデモを予約