Google StitchからHubSpotへ

Google Stitchから​HubSpotへ。​プロンプトから​編集できる​モジュールへ。

Google Stitchは、プロンプトから数秒で精度の高い画面を作ります。transjtは、その画面をネイティブなHubSpotテーマにします。デザインをFigmaにコピーしてtransjtプラグインを実行すれば、マーケティングチームはWebサイトの絵を眺めるのではなく、本物のHubLモジュールを編集できるようになります。

プレビュー後にお支払い

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

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

変換すべきとき

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.”
KevinThinkFuel
  • 95–99%完成コードの割合(構成の整ったファイルの場合)
  • ∞取り込めるAIビルダー(Figmaにも対応)
  • 2ネイティブ対応のCMS:HubSpotとWordPress
  • 1クリックでエクスポート。数分後にはテーマがアカウントに届きます
仕組み

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

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

  1. Google Stitchでデザイン

    ページの内容を説明するか、見た目が気に入ったサイトを出発点にして、Stitchに画面を生成させます。最初の結果は下書きと考え、レイアウトが決まるまで繰り返し調整してください。

  2. Figmaへコピー

    デザインを、編集できるレイヤーとしてFigmaに送ります。transjtはオートレイアウトの設定を読み取ってテーマをレスポンシブにするので、セクションをフレームにまとめ、オートレイアウトを確認してください。詳しくはFigmaファイルの準備をご覧ください。

  3. transjtプラグインを実行

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

  4. HubSpotにエクスポート

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

得られるもの

Stitchの​デザインを​HubSpotテーマに​しませんか?

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

マーケターがStitchのデザインの文言を1語でも変えるには、まずHubSpotに、フィールドを宣言したテンプレートとモジュールが必要です。transjtは、そのテンプレートとモジュールをFigmaファイルから作ります。各セクションは、文章、画像、リンクをフィールドに持つ1つのモジュールになり、色と文字はテーマの設定に入ります。できあがるのは、中身を読んで確認できるテーマです。

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

FAQ

Google Stitchから​HubSpotへの​FAQ。

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

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

  • コードのエクスポートはHTMLとCSSでできた静的なフロントエンドで、マーケターが編集できる部分はありません。Figmaのレイヤーにはデザインの構造が残っており、transjtが編集できるフィールドを備えたモジュールを作るには、その構造が必要です。

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

  • はい。それこそが、デザインを埋め込まずに変換する理由です。文章、画像、セクションの順序はすべて、デザインに触れることなく、HubSpotのドラッグ&ドロップエディターで変更できます。

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

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

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

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