無料で登録
UX PilotからHubSpotへ

UX Pilotから​HubSpotへ。​AIが作った画面から​編集できる​モジュールへ。

UX Pilotは画面を生成しますが、HubSpotのサイトにはテーマが必要です。そのテーマはtransjtが作ります。UX PilotのデザインをFigmaに読み込んでtransjtプラグインを実行すれば、マーケティングチームがドラッグ＆ドロップエディターで編集できる、ネイティブなHubLモジュールができあがります。

無料で始めるデモを予約

プレビュー後にお支払い

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

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

変換すべきとき

UX Pilotの​デザインを​HubSpotへ​移すべきとき

UX Pilotの画面を引き継ぎに回さず、HubSpotのサイトにすべき6つの場面。

  • 画面は承認済み。サイトはまだできていない。

    UX Pilotなら、プロンプトから精度の高い画面やフロー全体まで、すばやくたどり着けます。プロジェクトが止まりがちなのは承認の後、画面を、編集できるフィールドを備えたテンプレートとモジュールにしなければならない段階です。

  • 引き継ぎの落とし穴がない

    デザインを開発者に渡して作り直してもらうと、細部が失われ、何週間も過ぎていきます。transjtはFigmaから直接テーマを作るので、公開されるサイトは、承認したデザインそのものです。

  • デザインが何度も変わる

    セクションを変えるときは、UX Pilotで再生成してFigmaで更新し、変換をもう一度実行します。修正のたびにセクションを手作業で作り直す必要は、もうありません。

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

    HubSpotのテンプレート言語はほかでは使われておらず、1つのサイトのためだけに覚えるのは割に合いません。transjtがHubLを書くので、変換にHubSpotの開発者は必要ありません。

  • 訪問者に合わせてページを変えたい

    HubSpotは、ライフサイクルステージ、リストのメンバーシップ、任意のコンタクトプロパティに応じてコンテンツを出し分けますが、対象はネイティブなコンテンツだけです。このデザインのページでパーソナライズを使うには、まず変換が必要です。

  • マーケティングがチケットなしで編集

    文章、画像、リンクは、HubSpotのエディターのフィールドになります。見出しを変えたいときは、チームがそこで編集するだけで、コードを管理している人に頼む必要はありません。

計算してみる

UX Pilotは​いくつの​セクションを​デザインしましたか？

transjtでサイトを公開

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

*手作業でFigmaからHubSpotへ構築する場合の時間をもとにした概算です。1コンポーネントあたり約4.5時間、時給$100、1日8時間で計算しています。transjtなら約1.5〜3時間でテーマを構築します。

お客様の声

お客様の声。

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

UX Pilotの​デザインを​4ステップで​HubSpotへ。

Figmaを経由して、UX PilotのデザインからネイティブなHubSpotテーマへ。

  1. UX Pilotでデザイン

    UX PilotのAIジェネレーターでページの内容を説明し、レイアウトと階層が決まるまで、チャットで結果を調整します。

  2. Figmaに読み込む

    UX PilotのFigmaプラグインを使い、画面を、レイヤー構造を持つ編集可能なフレームとしてキャンバスに配置します。transjtはオートレイアウトの設定を読み取ってテーマをレスポンシブにするので、セクションをまとめ、オートレイアウトを確認してください。詳しくはFigmaファイルの準備をご覧ください。

  3. transjtプラグインを実行

    フレームを選択してtransjtに送ります。transjtは各セクションを、編集できるフィールドを備えたHubSpotモジュールにし、エクスポートの前にライブプレビューを表示します。

  4. HubSpotにエクスポート

    ポータルを一度接続して、エクスポートします。transjtがデザインマネージャーにネイティブテーマを書き込み、チームはそのモジュールを使って、ドラッグ＆ドロップエディターでページを作ります。

無料で始めるデモを予約
UX Pilot以外にも

AIビルダーで​作った​場合は？

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

得られるもの

UX Pilotの​デザインを​HubSpotテーマに​しませんか？

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

UX Pilot自体のエクスポートは、HTML、CSS、Reactによる静的なフロントエンドまでです。マーケターが何かを編集できるようにするには、まずHubSpotに、フィールドを宣言したテンプレートとモジュールが必要です。transjtは、そのテンプレートとモジュールをFigmaファイルから作ります。各セクションは、文章、画像、リンクをフィールドに持つ1つのモジュールになり、色と文字はテーマの設定に入ります。

ワークフロー全体を順を追って解説しています：UX Pilotでデザインし、HubSpotへエクスポート。WordPress向けに作る場合は、UX PilotからWordPressへをご覧ください。

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

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

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

UX Pilotから​HubSpotへの​FAQ。

UX PilotのデザインをHubSpotテーマにする前に知っておきたいこと。

デモを予約

  • いいえ。UX Pilotのエクスポート先はFigmaか、HTML、CSS、Reactのコードで、いずれもHubSpotテーマではありません。transjtはFigmaにあるデザインを引き継ぎ、HubLのテンプレートとモジュールにします。

  • 静的なフロントエンドです。コードから進めたい場合は、そのエクスポートをReactとViteのプロジェクトとしてGitHubリポジトリに入れ、リポジトリをtransjtに接続してください。AIビルダーの場合と同じ手順です。ただし、ほとんどのデザインでは、Figmaを経由するほうが近道です。

  • 少しだけ必要です。セクションをフレームにまとめ、オートレイアウトを確認してください。テーマをレスポンシブにするのは、このオートレイアウトです。整理されたファイルほど速く変換でき、後の仕上げも少なくて済みます。

  • はい。文章、画像、セクションの順序はすべて、デザインにもコードにも触れずに、HubSpotのドラッグ＆ドロップエディターで変更できます。

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

  • デザインがFigmaに入っていれば、セクション数にもよりますが、transjtは通常数時間でHubSpotテーマを用意します。

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

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

無料で始めるデモを予約