メインコンテンツにスキップ
お客さまへの大切なお知らせ:膨大なサポート情報を少しでも早くお客さまにお届けするため、本コンテンツの日本語版は人間の翻訳者を介さない自動翻訳で提供されております。正確な最新情報については本コンテンツの英語版をご覧ください。

HubSpotの既定のモジュール

更新日時 2024年 12月 5日

以下の 製品でご利用いただけます(別途記載されている場合を除きます)。

Marketing Hub   Professional , Enterprise
Content Hub   Professional , Enterprise
Marketing Hub Basic(旧製品)

コンテンツエディターとデザインマネージャーでは、ほとんどのタイプのコンテンツで特定の既定モジュールを使用できます。

HubLスニペットを使用することで、これらの既定のモジュールをHTMLテンプレートに追加することもできます。カスタムテンプレートでの既定モジュールの使用について詳しくは、 開発者ドキュメントをご確認ください。 

ドラッグ&ドロップテンプレートにモジュールを追加する

デザインマネージャーでは、レイアウトエディターを使用して既定モジュールをドラッグ&ドロップテンプレートに追加できます。 

  • HubSpotアカウントにて、[コンテンツ]>[デザインマネージャー]の順に進みます。
  • 左側の列で、テンプレートの名前をクリックします。 
  • 右側の列で、[+追加]をクリックします。 
  • 検索バーに既定モジュールまたはカスタムモジュールの名前を入力します。 
  • モジュール名をクリックして、テンプレートにドラッグします。 
  • [スタイルオプション]セクションで、モジュールのカスタムスタイルを設定します。 

module-default-styling

  • [既定のコンテンツ]セクションで、コンテンツエディターにモジュールを追加したときに表示されるコンテンツをカスタマイズします。 

set-default-content-for-a-module

  • 他のユーザーがコンテンツエディターでモジュールの既定コンテンツを編集できないようにするには、[エディターのオプション]セクションで、[コンテンツエディターでの編集を禁止する]スイッチをオンに切り替えます。 

既定モジュールをカスタマイズする

Marketing Hub ProfessionalおよびEnterpriseContent Hub ProfessionalおよびEnterpriseの全てアカウントでは、デザインマネージャーに「@hubspot」フォルダーが用意されています。

このフォルダーには、テーマと、ドラッグ&ドロップEメールモジュールを含むデフォルトモジュールが全て含まれています。これらのテーマやモジュールは読み取り専用ですが、編集する場合は複製できます。

デザインマネージャーのhubspotフォルダー

  • HubSpotアカウントにて、[コンテンツ]>[デザインマネージャー]の順に進みます。
  • ファインダーで、[@hubspot]フォルダーをクリックします。
  • 既定モジュールを右クリックし、[モジュールを複製]を選択します。

    design-manager-clone-module
  • 複製したモジュールで、モジュールのソースコードを編集します。
  • 右上の[変更を公開]をクリックします。

モジュールのバージョンを管理

HubSpotは定期的に既存の既定モジュールの新しいバージョンをリリースすることがあります。これにより、HubSpotは既存のコンテンツに影響を与えることなく大幅な更新を行うことができます。例えば、新しいバージョンのモジュールでは、フィールドの構成やスタイル設定のオプションが強化されるほか、機能も追加されることがあります。モジュールのバージョン管理のバックグラウンドについて詳しくは、 HubSpotの開発者向けドキュメントをご覧ください。

アカウントの[テーマ & モジュール ]設定ページでは、バージョンの更新、以前のバージョンへの復元、全ての既定のモジュールの現在のバージョンの表示など、モジュールのバージョンを管理できます。

モジュールのバージョンを更新する

新しいバージョンのモジュールをオプトインするには、次の手順に従います。

  • HubSpotアカウントにて、上部のナビゲーションバーに表示される設定アイコンsettingsをクリックします。
  • 左のサイドバーメニューで、[コンテンツ] >[テーマ] & [モジュール]に移動します。 
  • [アラート]タブに、既定のモジュールの最新の更新が[利用可能な更新]タグ付きで表示されます。更新の詳細を表示するには、モジュールの横にある[更新を表示 ]をクリックします。

    module-versioning-alerts-tab (モジュールのバージョン管理アラートタブ)
  • 右側のサイドバーで、変更内容を確認します。サイドバーには、アップデートの概要と、変更の詳細な内訳、および影響を受けるアセットが含まれます。

    module-versioning-details-sidebar (モジュールのバージョン管理の詳細)
  • モジュールを更新するには、[更新をインストール]をクリックします。表示されるダイアログボックスで、[更新を確認]をクリックします。ページやテンプレートに更新されたモジュールが反映されるまでに最大10分かかる場合があります。

モジュールを更新すると、[テーマ]&[モジュール]設定ページの[モジュール]タブが表示されます。このページでは、最近更新されたモジュール、利用可能な更新があるモジュール、およびアカウントの全ての既定モジュールのバージョン情報を確認できます。

モジュールバージョン管理モジュールタブ

更新済みのモジュールを元に戻す

設定ページの [モジュール ]タブでは、必要に応じて過去30日以内に更新されたモジュールを過去のバージョンに戻すことができます。

  • HubSpotアカウントにて、上部のナビゲーションバーに表示される設定アイコンsettingsをクリックします。
  • 左のサイドバーメニューで、[コンテンツ] >[テーマ] & [モジュール]に移動します。 
  • [モジュール ]タブをクリックし、元に戻すモジュールを見つけて、[ 最近の更新をロールバック]をクリックします。

    ロールバック-最近-更新-テーブル行
  • 右側のサイドバーで、モジュールのバージョン履歴を確認し、[この更新をロールバック]をクリックします。

    モジュールのバージョン管理-ロールバック-更新ボタン
  • 右側のサイドバーの情報を確認して更新をロールバックすることを確認し、[ロールバック]をクリックします。 
  • ダイアログボックスで[確認]をクリックします。 

更新を元に戻した後、元に戻したモジュールがテンプレートやページに反映されるまでに時間がかかる場合があります。上記の更新手順により、いつでもモジュールを再度更新できます。

既定のモジュールタイプ

配信停止バックアップ

backup unsubscribe templateは、HubSpotがEメールアドレスを特定できない場合に、配信停止リンクをクリックしたEメール受信者に表示されます。このモジュールの[既定のコンテンツ]セクションで、(代替)配信停止ページに表示されるヘルプテキストをカスタマイズできます。 

バックアップ配信停止

ブログコメント

:ブログ コメント モジュールはページまたはEメールテンプレートでは使用できません。 

ブログ コメント モジュールにより、ブログ記事テンプレートにコメントセクションが追加されます。フォームツールでブログコメントフォームをカスタマイズすることができます。フォームには、ブログのタイトルに基づいて名前が付けられます。 


既定のブログ コメント フォーム

ブログコンテンツ

:ブログ コンテンツ モジュールはページやEメールテンプレートでは利用できません。 

ブログ コンテンツ モジュールは、ブログ記事とブログ リスト ページのHTML/HubLマークアップを格納します。記事のマークアップを編集するには[記事テンプレートを編集]をクリックし、リストページのマークアップを編集するには[リストテンプレートを編集]をクリックします。ブログコンテンツモジュールのマークアップについて詳細をご確認ください。

blog-content-1.png

ブログのEメール配信登録

: ブログのEメール配信登録モジュールはEメールテンプレートではご利用いただけません。 

ブログEメール配信登録モジュールは、訪問者がフォームに記入することで、ブログのダイジェストEメールを配信登録することができます。このモジュールにはブログ配信登録者フォームが入力されます。このフォームはフォームツールでカスタマイズできます。

「表示するブログを選択」ドロップダウンメニューをクリックし、訪問者が配信登録しているblogを選択します。[上記のフォームを表示するタイトル]テキストボックスを使用して、フォームの上のタイトルに表示されるテキストをカスタマイズできます。既存のインライン応答の上にマウスポインターを置き、expand展開アイコンをクリックして訪問者がフォームを送信した後に表示されるテキストをカスタマイズします。

ブログのEメール配信登録

CTA

CTAモジュールにより、レイアウト内の独自のモジュールにCTAが配置されます。リッチテキストモジュールにCTAを挿入することもできます。

インスペクターで、[CTA]  ドロップダウン  メニューを開き、テンプレートでこのモジュールの既定のCTA選択します。または、同じメニュー[+新規CTAを作成]をクリックして既定のCTAとして新しいCTAを作成します。 

HubSpotのヘルプ記事のスクリーンショット

コンテンツライブラリー

コンテンツ ライブラリー モジュールを使用して、訪問者がアクセスできるリソースのライブラリーを設定できます。ライブラリーでは、リソースのレイアウト、アイコン、フォント、色を設定できます。リソースごとに、名前、説明、リンクまたはファイル、および表示画像を設定できます。

また、コンテンツを特集として設定することで、コンテンツライブラリーの一番上で、行全体に表示されるようにすることもできます。 

individual-resource-content-library

フォーム

:フォームモジュールはEメールテンプレートでは使用できません。 

フォームモジュールでは、ウェブサイト訪問者からコンタクト情報を取得するためのフォームを、ページまたはブログに追加できます。

このモジュールでは、次のようなカスタマイズが可能です。 

  1. フォームタイトル:ページまたはブログに表示されるフォームのタイトルを入力します。
  2. フォーム:ページに表示される既存のHubSpotフォームを選択するか、新しいフォームを追加します。
  3. フォーム送信後に訪問者に何を表示しますか?:フォームを送信する人を別のページにリダイレクトするか、同じページにインライン サンキュー メッセージを表示するかを選択します。
  4. サンキューメッセージ:インライン サンキュー メッセージをカスタマイズします。
  5. フォームの既定設定ではなく、指定されたEメールアドレスにフォーム通知を送信:フォーム通知Eメールを特定のアドレスに送信します。この設定により、フォームツールで設定された通知受信者が上書きされます。 
  6. ワークフローに追加:フォームを送信した訪問者をワークフローに追加します(Marketing Hub ProfessionalまたはEnterpriseのみ)。
  7. フォローアップEメールの送信:フォームを送信した訪問者に最大3通のフォローアップEメールを送信します。

form-module-2

ヘッダーモジュールでは、heading HTMLタグにテキストの行が表示されます。[ヘッダーコンテンツ]ボックスに、既定のヘッダーテキストを入力します。[ヘッダーのタイプ]ドロップダウンメニューをクリックして、見出しタグH1-H4)を選択します。

 

画像

画像モジュールにより、コンテンツに1枚の画像が追加されます。画像モジュールの編集オプションについて詳細をご確認ください。 

画像ギャラリー

画像ギャラリーモジュールは、一連の回転画像を1つのモジュールに追加します。画像ギャラリーモジュールのカスタマイズ可能な設定の詳細

言語切り替え機能

:言語切り替えモジュールは、Eメールテンプレートでは使用できません。 

言語切り替えモジュールを使用して、訪問者がページまたはブログの翻訳版を切り替えられるようにすることができます。[表示モード]ドロップダウンメニューをクリックして、翻訳された言語の名前の表示をカスタマイズします。

  • ページ言語: 各言語名が現在のページの言語で表示されます。例えば、フランス語の翻訳があるページの英語版を表示している場合、言語切り替え機能をクリックすると、EnglishとFrenchが言語名として表示されます。 
  • ローカライズ:各言語の名前がその言語で表示されます。例えば、フランス語の翻訳があるページの英語版を表示している場合、言語切り替え機能をクリックすると、言語名として[English(英語)]と[Français(フランス語)]が表示されます。
  • ハイブリッド:2つの組み合わせ。例えば、フランス語の翻訳があるページの英語版を表示している場合、言語切り替え機能をクリックすると、言語名として[English(英語)]と[French(Français)(フランス語)]が表示されます。

このモジュールは、複数の公開済み翻訳がある公開中のページにのみ表示されます。HubSpotでの多言語コンテンツの操作についてもっと詳しく。


ロゴ

ロゴモジュールは、ウェブサイト設定から会社のロゴを自動的に取り込みます。別のロゴを変更する場合は、[このページの既定のロゴを上書き]スイッチをクリックしてオンに切り替えて、このページ専用の新しい画像をアップロードできます。ウェブサイト設定で全てのコンテンツの既定のロゴを変更するには、[このドメインの既定のロゴを編集]をクリックします。

ロゴモジュールは、ブランドキットで指定されたURLに自動的にリンクされます。この既定値を上書きして別のページにリンクするには、固有のリンクURLを入力してください。

edit-logo-module

ロゴグリッド

ロゴ グリッド モジュールを使用すると、さまざまな寸法の複数のロゴを一貫性のあるグリッドに配置できます。背景色、アスペクト比、グリッドのサイズ、スペースの広さ、ロゴの最大の高さをカスタマイズできます。 

Eメール本文

Eメール本文モジュールは、既定で全てのEメールテンプレートに含まれている標準のリッチ テキスト モジュールです。、特定のテンプレートでEメール本文の既定のコンテンツをカスタマイズすることができます。

標準のスタイルオプションに加えて、このモジュールは既定の色、境界線、間隔をカスタマイズできます。カラーバブルをクリックし、カラーパレットからカラーを選択するか、16進値をテキストフィールドに入力してデフォルトカラーを設定します。既定の間隔を設定するには、[境界線の幅]と[内側の間隔]テキストフィールドにピクセル値を入力してください。 

Eメール本文

メニュー

メニューモジュールにより、コンテンツとテンプレートにナビゲーションが追加されます。メニューはウェブサイト設定で直接作成・管理できます。 

デザインツール内で、メニューモジュールの次の機能をカスタマイズできます。

  1. メニュー:私の設定から既存のメニューのいずれかを選択します。
  2. 詳細メニュータイプ:メニュー項目がサイトでどのように表示されるかを選択します。
    • 静的 - 常にメニューの最上位ページが表示  されます: すべてのページでメニューの一貫性を維持します。
    • セクションごとに動的 - のページを表示する。  menu  関連するメニューの  ページが表示されます  :表示されているトップレベルメニュー項目に対するメニュー項目が表示されます。 
    • Dynamic by page - 以下のページを表示。  menu  関連するメニューの  ページが表示されます  表示中:表示中のページに関連するメニュー項目を表示します。
    • パンくず形式のパスメニュー(横フローを使用)サイト上部の相対パスにメニュー項目が水平方向に表示されます。
  3. 最大レベル:子メニュー表示できる最大数を選択します。
  4. 方向:メニュー項目を水平方向と垂直方向のいずれで表示するかを選択します。
  5. フライアウトを有効にする:親メニューの上にマウスポインターを置いたときに子メニューを表示するには、このチェックボックスをオンにします。このチェックボックスをオフにすると、常に子メニュー項目が表示されます。
詳細メニューオプション


モジュール

コードエディターで作成されたモジュールは、HTML、CSS、Javascript、および HubL を使用してテンプレートに高度な機能を追加することができ、同時にユーザーをコードを変更せずにコンテンツエディターでモジュールのコンテンツを編集することができます。これらのコンポーネントでは、ファインダーとインスペクターにcustomModulesモジュールのアイコンがラベル付けされます。カスタム コード モジュールの使い方について詳しくは、 開発者ドキュメントをご確認ください。

オフィス所在地情報

オフィス所在地モジュールには、必須トークンが含まれています。これは、合法的にマーケティングEメールを送信するために、Eメールテンプレートに含める必要があります。このモジュールのスタイルは編集できますがEメール、オフィス所在地情報モジュールまたは必須の  HubL  タグ。  

標準のスタイルオプションに加えて、このモジュールは既定の色、境界線、間隔をカスタマイズできます。カラーバブルをクリックし、カラーパレットからカラーを選択するか、16進値をテキストフィールドに入力してデフォルトカラーを設定します。既定の間隔を設定するには、[境界線の幅]と[内側の間隔]テキストフィールドにピクセル値を入力してください。 

HubSpotのヘルプ記事のスクリーンショット


1行テキスト

1行テキストモジュールを使用すると、ユーザーはコンテンツエディターで1行のテキストを編集できます。 

ページ フッター モジュールには、現在の年や会社名と一緒に著作権情報が表示されます。会社名はEメール設定フッターセクションから自動的に取り込まれます。

パスワードプロンプト

パスワードプロンプトモジュールは、パスワードプロンプトシステムテンプレートで利用できる。ページがパスワードで保護されている場合、ユーザーがページにアクセスする前にパスワード プロンプト ページが表示されます。送信ボタンのテキストと、誤ったパスワードが入力された場合に表示するテキストは、カスタマイズできます。

 

記事フィルター

注:ブログメール配信登録モジュールはEメールテンプレートではご利用いただけません。 

投稿フィルターモジュールは、特定のトピック、月、または執筆者のブログ記事のリストを表示します。 

[既定のコンテンツ]セクションで、このモジュールの次の設定をカスタマイズできます。 

  • 表示するブログを選択:使用するブログ記事を選択します。
  • フィルターリンクの値リスト:モジュールがタグ、月、または執筆者のいずれで絞り込みされるかを選択します。
  • フィルターリンクの値の順位付け:値をアルファベット順または記事数のいずれで並べ替えるかを選択します。
  • 表示するタイトルをリストする:記事の上に表示するタイトルを入力します。
  • 表示するフィルター値の最大数:特定のフィルターの記事の最大を入力します。すべての記事を表示するには、このフィールドを空白のままにします。 
  • 記事数が表示可能な数を超える場合に表示するテキストリンク:カテゴリーに多くの記事がある場合に表示するテキストを入力します。既定のテキストは「すべて表示」です。


記事一覧

注:ブログメール配信登録モジュールはEメールテンプレートではご利用いただけません。 

記事一覧モジュールは、HubSpotブログの記事のリストを表示するために使用します。過去1か月間、過去6か月間、過去1年、すべての期間における最新記事または最も人気のある記事を表示するように、このモジュールを設定できます。 

インスペクターは、以下のコンテンツの既定をカスタマイズできます。

  • 表示するブログを選択:記事のタイトルを表示するブログを選択します。
  • ブログ記事を次の基準でリストする:記事の編成方法を選択します。
  • 表示するタイトルをリストする:記事の上に表示するタイトルを入力します。
  • リストするブログ記事の最大数:このモジュールで表示する記事の最大を入力します。 
記事一覧

製品

製品モジュールを使用すると、製品ライブラリーの製品をページや投稿に表示できます。製品の既定の情報が表示されますが、必要に応じて、ページごとに情報を上書きできます。 

product-module

リッチテキスト

リッチ テキスト モジュールは、HubSpotコンテンツツールの中で最もよく使用されているコンテンツモジュールです。テキスト、画像、CTAなどのさまざまなコンポーネントの編集オプションがサポートされます。

このモジュールのデフォルトコンテンツを追加するには、Expandをクリックするか、preview contentをクリックしてリッチテキストエディターを開きます。

HubSpotのヘルプ記事のスクリーンショット


RSSリスティング

注: RSSリストモジュールはEメールテンプレートではご利用いただけません。代わりにRSSメール。 

RSSリストモジュールを使用して、HubSpotブログや外部RSSフィードの記事の要約を表示できます。

RSSリストモジュールでは、特定のブログまたはタグを表示できます。対応するスイッチをクリックしてオンに切り替え、キービジュアル、執筆者名、概要、公開日を各投稿で表示するかどうかを指定します。

これらの設定を有効にした後に、次の詳細をカスタマイズできます。 

  • 投稿者名を表示:各作成者名の上に表示する投稿者属性テキストを入力します。既定では、このモジュールには属性テキストとして「作成者:」が含まれます。
  • サマリーを表示:各ブログサマリーのサマリーの長さ(文字数)を入力します。サマリー クリックスルー テキストをカスタマイズすることもできます。これは、ブログの訪問者が完全な記事を読むためにクリックするリンクです。既定では、このテキストには「続きを読む」というラベルが付けられます。
  • 公開日を表示 - [公開日の形式]を選択して、各記事の日付と時刻の形式をカスタマイズします。公開日インジケーターテキストをカスタマイズすることもできます。既定では、このテキストは「投稿日時」となります。
HubSpotのヘルプ記事のスクリーンショット


セクションの見出し

セクション ヘッダー モジュールでは、段落のサブタイトルが含まれるh1見出しタグを表示できます。このモジュールは、ページのプライマリーセクションのタイトル設定に最適です。

セクションヘッダー


シンプルメニュー

シンプル メニュー モジュールでは、コンテンツエディターでページ固有のメニューを作成できます。このモジュールでは、特定のテンプレートのシンプルメニューを柔軟に作成できます。インスペクターで、「「メニューを編集」(メニューの編集)」をクリックして、メニュー項目、リンクを追加し、メニューの向きを選択します。メニューの方向設定を編集すると、「hs-menu-flow-horizontal」または「hs-menu-flow-vertical」クラスがメニュー ラッパー コンテナーに追加されます。CSSでのスタイル設定において、それを使用することができます。モジュール設定によって追加されたクラスの詳細については、 開発者ドキュメントをご確認ください。

シンプルメニュー

ソーシャルシェアリング

ソーシャル シェアリング モジュールを使用すると、訪問者がソーシャル メディア チャネルやEメールでコンテンツを簡単に共有できるようになります。特定のソーシャルネットワークをページまたはEメールに組み込むには、そのソーシャルネットワークの横にある[有効になっていますか?]スイッチをクリックしてオンに切り替えます。

コンテンツを共有するために必要なHubLタグが、共有リンクに自動的に入力されます。Eメールでは、モジュールは共有リンクにそのEメールの「ウェブ」バージョンのURLを使用します。

注:ソーシャル共有モジュールは、各ソーシャルネットワークのデフォルトアイコンを使用します。独自のカスタムソーシャルアイコンを使用したい場合は、モジュールのカスタマイズバージョンを作成することができます。

ソーシャルフォロー

ソーシャル フォロー モジュールを使用すると、ソーシャルメディアで自社をフォローするように訪問者を誘導することができます。ソーシャルネットワークごとに、カスタムリンクまたはEメールアドレスを設定できます。デザインマネージャーでは、各ソーシャルネットワークのカスタムアイコンを設定することもできます。 

customize-social-icons

配信設定

サブスクリプション設定モジュールは、サブスクリプション設定システムテンプレートでのみ利用可能です。 

これらのモジュールでは、Eメール受信者が配信(サブスクリプション)設定を管理したり、Eメール通信を配信登録解除したりするときに表示されるページをカスタマイズできます。

配信設定


サブスクリプションの更新確認

購読更新確認モジュールは、購読更新確認システムテンプレートで利用可能なリッチテキストモジュールです。このモジュールを使用すると、Eメール受信者が配信設定を更新したときに表示される内容をカスタマイズできます。

サブスクリプションの更新


ウェブページとして表示

ウェブページとして表示モジュールにより、Eメールの受信者にEメールのウェブ ページ バージョンを開くオプションが提供されます。 

HubSpotのヘルプ記事のスクリーンショット
 

WhatsAppリンク 

注:このモジュールはMarketing HubおよびService Hub ProfessionalおよびEnterpriseアカウントでのみご利用いただけます。

WhatsAppリンクモジュールを使用することにより、ウェブサイト訪問者がWhatsAppで直接あなたに連絡できるようになります。このモジュールは、ウェブサイトページ、ブログ記事、ブログ リスト ページに追加できます。このモジュールを使用するには、WhatsAppチャネルをコミュニケーションの受信トレイに接続する必要があります。

色や間隔などのボタンスタイルは、ページエディターのスタイルタブ内でカスタマイズすることができ、以下の要素を設定することができます:

  • WhatsApp番号:接続したWhatsApp番号を選択します。
  • オプト イン テキスト:オプトインおよびオプトアウトのテキストを選択します。 
  • 表示:ボタンにテキストを表示するか、アイコンを表示するか、またはその両方を表示するかを選択します。
  • アイコンの位置:アイコンがテキストの左側と右側のどちらに表示されるかを選択します。
  • ボタンテキスト:ボタンに表示されるテキストを入力します。
  • WhatsApp アイコンのタイトル:アクセシビリティーのため、スクリーンリーダー用にアイコンの説明を入力してください。

whatsapp-link-module

この記事はお役に立ちましたか?
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。