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
































































Google StitchのデザインをHubSpotへ移すべきとき
Stitchの下書きをプロトタイプのままにせず、HubSpotのサイトにすべき6つの場面。
Stitchの下書きが会議で採用された
Stitchは、アイデアから説得力のある画面へすばやくたどり着くためのツールです。クライアントやチームのOKが出たら、画面をページにしなければなりませんが、プロトタイプツールではそこまで進めません。
画面はある。サイトはまだない。
プロンプト1つで、ランディングページ、料金ページ、ブログのレイアウトが一度にそろいます。それぞれを手作業でテンプレートとモジュールにすると、デザインにかかった時間より長くかかってしまいます。
欲しいのはダウンロードしたコードではなく、デザイン
Stitchでは画面をHTMLとCSSとしてダウンロードできますが、それはマーケターが編集できる部分のない、静的なフロントエンドです。同じデザインでも、レイヤーとしてFigmaにコピーすれば、transjtがテーマを作るための元データになります。
チームにHubLを書ける人がいない
HubSpotのテンプレート言語はほかでは使われておらず、1つのサイトのためだけに覚えるのは割に合いません。transjtがHubLを書くので、変換にHubSpotの開発者は必要ありません。
次のページはマーケティングが自分で作る
Stitchがデザインしたセクションは、編集できるフィールドを備えたHubSpotモジュールになることで、マーケティングチームが新しいページを組み立てるための部品になります。プロンプトに戻る必要はありません。
サイトはCRMと同じ場所に置くべき
コンタクトとメールをHubSpotで管理し、レポートもそこで作っているなら、ネイティブテーマでページもそのデータと同じポータルに置けます。フォーム、リスト、アトリビューションのすぐ隣です。
Stitchはいくつのセクションをデザインしましたか?
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.”
KevinThinkFuelWe’d seen plenty of tools promise magic for page and theme creation, but they always under-delivered. Transjt proved to be the exception.
Transjt made importing designs from third parties effortless. … Their support made a complex process simple and stress-free.
What would have traditionally required weeks of custom development was completed in just a few days with minimal adjustment.
Great tool that can take your designs into Hubspot in matter of minutes! Love it!
This tool is amazing! It saved me hours of manual coding by converting my Figma designs into clean, responsive layouts.
Turning the Figma design of our new website into a HubSpot webpage was extremely smooth and fast. Saved many hours - if not days - of coding time. Easy and rapid iterations.
The Figma to HubSpot conversion is fast and accurate. It saves hours of manual development when creating HubSpot modules and keeps excellent visual fidelity to the original design.
We’re using it to automate all the drag and drop modules. It’s working very well and we’ve been able to create modules with a high degree of customization.
Easy onboarding and has a great UI. Importing is fast, and the AI enhancements are decent. Good price. Easy to integrate as well.
Very precise design export, and really useful because components don’t get exported as images.
Great tool to export fast design to WordPress.
Once you understand how the system works, transjt becomes a very efficient tool that significantly improves both workflow speed and quality scalability. The support team is responsive and helpful.
- 95–99%完成コードの割合(構成の整ったファイルの場合)
- ∞取り込めるAIビルダー(Figmaにも対応)
- 2ネイティブ対応のCMS:HubSpotとWordPress
- 1クリックでエクスポート。数分後にはテーマがアカウントに届きます
Google Stitchのデザインを4ステップでHubSpotへ。
Figmaを経由して、Google StitchのデザインからネイティブなHubSpotテーマへ。
- 01Google Stitch
Google Stitchでデザイン
ページの内容を説明するか、見た目が気に入ったサイトを出発点にして、Stitchに画面を生成させます。最初の結果は下書きと考え、レイアウトが決まるまで繰り返し調整してください。
- 02
Figmaへコピー
デザインを、編集できるレイヤーとしてFigmaに送ります。transjtはオートレイアウトの設定を読み取ってテーマをレスポンシブにするので、セクションをフレームにまとめ、オートレイアウトを確認してください。詳しくはFigmaファイルの準備をご覧ください。
- 03

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

HubSpotにエクスポート
ポータルを一度接続して、エクスポートします。transjtがデザインマネージャーにネイティブテーマを書き込み、チームはそのモジュールを使って、ドラッグ&ドロップエディターでページを作ります。
AIビルダーで作った場合は?
すべてのAIビルダーを1ページにまとめています:AIからHubSpotへ。
StitchのデザインをHubSpotテーマにしませんか?
Google Stitchから変換したHubSpotテーマの中身
マーケターがStitchのデザインの文言を1語でも変えるには、まずHubSpotに、フィールドを宣言したテンプレートとモジュールが必要です。transjtは、そのテンプレートとモジュールをFigmaファイルから作ります。各セクションは、文章、画像、リンクをフィールドに持つ1つのモジュールになり、色と文字はテーマの設定に入ります。できあがるのは、中身を読んで確認できるテーマです。
ワークフロー全体を順を追って解説しています:Google Stitchでデザインし、HubSpotへエクスポート。WordPress向けに作る場合は、Google Stitchでデザインし、WordPressへエクスポートをご覧ください。
いいえ。Stitchのエクスポート先はFigmaか、フロントエンドのコードのどちらかで、いずれもHubSpotテーマではありません。transjtはFigmaにあるデザインを引き継ぎ、HubLのテンプレートとモジュールにします。
コードのエクスポートはHTMLとCSSでできた静的なフロントエンドで、マーケターが編集できる部分はありません。Figmaのレイヤーにはデザインの構造が残っており、transjtが編集できるフィールドを備えたモジュールを作るには、その構造が必要です。
少しだけ必要です。セクションをフレームにまとめ、オートレイアウトを確認してください。テーマをレスポンシブにするのは、このオートレイアウトです。整理されたファイルほど速く変換でき、後の仕上げも少なくて済みます。
はい。それこそが、デザインを埋め込まずに変換する理由です。文章、画像、セクションの順序はすべて、デザインに触れることなく、HubSpotのドラッグ&ドロップエディターで変更できます。
カスタムテーマのアップロードには、カスタムコードファイルを使えるContent Hubのエディションが必要で、Starterエディションでは制限があります。これが唯一の必須条件なので、作業範囲を決める前にエディションを確認してください。
デザインがFigmaに入っていれば、セクション数にもよりますが、transjtは通常数時間でHubSpotテーマを用意します。



