すべてのドキュメント

ドキュメントHubSpotHubSpotでテーマを使う

HubSpotでテーマを使う

最初のエクスポートが終わると、transjtのテーマがHubSpotアカウントに入ります。そのテーマでページを作成する方法を説明します。

始める前に

  • transjtで接続済みのHubSpotアカウント。接続はSettings > Integrations、またはプロジェクトのDeployステップで行います(Super Admin権限が必要です)。詳しくはHubSpotの接続をご覧ください。
  • 無料プランを含め、どのHubSpotプランでも使えます。

テーマを見つける

  1. HubSpotで、新しいWebサイトページ(または新しいWebサイトプロジェクト)を作成します。
  2. transjtのテーマを選びます。テーマには、transjtで設定したプロジェクト名とカバー画像が表示されます。

テーマは、最初のエクスポートの後に表示されます。

HubSpot Themes page, Themes in your portal: exported transjt themes with their project name and cover image next to HubSpot themes, each with Set as active theme and Preview
HubSpot > Themes:transjtのテーマが、プロジェクト名とカバー画像とともに表示されます。

テーマを手動でアップロード

transjtに接続していないHubSpotアカウントなどに、テーマを自分でインストールしたい場合は、テーマをダウンロードしてHubSpotにアップロードします。

  1. transjtでプロジェクトを開き、Deployステップに進みます。
  2. Download Themeをクリックします。テーマがZIPファイルでダウンロードされます。古いバージョンはPrevious Packagesからダウンロードできます。
  3. HubSpotでSettings(歯車アイコン)を開き、Content > Themes & Modulesに移動します。
  4. Upload Themeをクリックし、ZIPファイルを選択します。

テーマがThemesの一覧に表示され、上記の手順でページを作成できるようになります。

ダウンロードには画像が含まれません。ダウンロードしたHubSpotテーマには、お使いの画像は含まれていません。アップロードした後、HubSpotでご自身で画像を追加してください。すべての画像を含めたテーマが必要な場合は、代わりにDeploy Theme to HubSpotを使います。
HubSpot Settings, Content, Themes and Modules: the list of themes in the account and the Upload Theme button at the top right
HubSpotのSettings > Content > Themes & Modules:Upload Themeをクリックし、ZIPファイルを選択します。

ページの作成

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

HubSpot page editor with an exported transjt page: the Add modules panel lists the theme modules such as Hero, Pricing plans, FAQ accordion and Site header, next to the page preview
HubSpotのページエディター:transjtのモジュールはAdd modules > Themeに一覧表示されます。ページにドラッグしてください。

ヘッダーとフッターは、デフォルトでグローバルコンポーネントです。一度編集すれば、変更がすべてのページに反映されます。ナビゲーションはHubSpotのメニューに連動するので、メニューに追加した新しいページは自動的にヘッダーに表示されます。

ほかのコンポーネントもグローバルにできます。transjtアプリでグローバルに設定すれば、好きなだけ多くのページで再利用できます。

フォーム

デザインのフォームはHubSpotのネイティブフォームになり、送信内容はそのままCRMに入ります。デザインしたフォームは、コードを書かずに数分で既存のHubSpotフォームにリンクできます。

動画:カスタムデザインのフォームをHubSpotフォームにリンクする方法

ブログ

ブログの一覧と記事のレイアウトは、HubSpotのブログテンプレートになります。Figmaでは、種類としてBlogとBlog Detailを選んで取り込みます。

動画:ブログ一覧とブログページの作り方

コンポーネントの再エクスポート

再エクスポートするときに、そのコンポーネントがすでにHubSpotにある場合、transjtは既存のコンポーネントを置き換えるか残すかを確認します。この確認はTasksで行います。取り込みが完了したものは、エクスポート準備完了の状態になります。Continueをクリックして先に進みます。

動画:transjtのTasksとは?

既存のサイトはそのまま

transjtは別のテーマを作成し、既存のページには手を加えません。準備ができたら、新しいテーマで新しいページを作成してください。1つのページで、古いテーマと新しいテーマのモジュールを混在させないでください。

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

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