HubSpotでテーマを使う
最初のエクスポートが終わると、transjtのテーマがHubSpotアカウントに入ります。そのテーマでページを作成する方法を説明します。
始める前に
- transjtで接続済みのHubSpotアカウント。接続はSettings > Integrations、またはプロジェクトのDeployステップで行います(Super Admin権限が必要です)。詳しくはHubSpotの接続をご覧ください。
- 無料プランを含め、どのHubSpotプランでも使えます。
テーマを見つける
- HubSpotで、新しいWebサイトページ(または新しいWebサイトプロジェクト)を作成します。
- transjtのテーマを選びます。テーマには、transjtで設定したプロジェクト名とカバー画像が表示されます。
テーマは、最初のエクスポートの後に表示されます。

テーマを手動でアップロード
transjtに接続していないHubSpotアカウントなどに、テーマを自分でインストールしたい場合は、テーマをダウンロードしてHubSpotにアップロードします。
- transjtでプロジェクトを開き、Deployステップに進みます。
- Download Themeをクリックします。テーマがZIPファイルでダウンロードされます。古いバージョンはPrevious Packagesからダウンロードできます。
- HubSpotでSettings(歯車アイコン)を開き、Content > Themes & Modulesに移動します。
- Upload Themeをクリックし、ZIPファイルを選択します。
テーマがThemesの一覧に表示され、上記の手順でページを作成できるようになります。

ページの作成
コンポーネントは、HubSpotのネイティブモジュールとして届きます。HubSpotのドラッグ&ドロップエディターでページに追加して並べ替え、モジュールのフィールドでテキストや画像を変更します。開発者は必要ありません。

ヘッダー、フッター、グローバルコンポーネント
ヘッダーとフッターは、デフォルトでグローバルコンポーネントです。一度編集すれば、変更がすべてのページに反映されます。ナビゲーションはHubSpotのメニューに連動するので、メニューに追加した新しいページは自動的にヘッダーに表示されます。
ほかのコンポーネントもグローバルにできます。transjtアプリでグローバルに設定すれば、好きなだけ多くのページで再利用できます。
フォーム
デザインのフォームはHubSpotのネイティブフォームになり、送信内容はそのままCRMに入ります。デザインしたフォームは、コードを書かずに数分で既存のHubSpotフォームにリンクできます。
ブログ
ブログの一覧と記事のレイアウトは、HubSpotのブログテンプレートになります。Figmaでは、種類としてBlogとBlog Detailを選んで取り込みます。
コンポーネントの再エクスポート
再エクスポートするときに、そのコンポーネントがすでにHubSpotにある場合、transjtは既存のコンポーネントを置き換えるか残すかを確認します。この確認はTasksで行います。取り込みが完了したものは、エクスポート準備完了の状態になります。Continueをクリックして先に進みます。
既存のサイトはそのまま
transjtは別のテーマを作成し、既存のページには手を加えません。準備ができたら、新しいテーマで新しいページを作成してください。1つのページで、古いテーマと新しいテーマのモジュールを混在させないでください。