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

HubSpotの既定のモジュール

更新日時 2024年 3月 28日

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

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

この記事では、テンプレートやページで使用できるHubSpotの既定のモジュールについて説明します。各タイプのモジュールは、インスペクターのスタイルオプションとコンテンツオプションでカスタマイズできる。HubLスニペットを使用して、HTMLテンプレートに既定のモジュールを追加することもできます。HubSpotの開発者ドキュメントで既定のモジュールを使用した開発の詳細をご確認ください。

モジュールをテンプレートに追加する

ドラッグ&ドロップテンプレートにモジュールを追加するには、エディターの右上にあるインスペクターで[+追加]をクリックします。すべての既定のモジュールと保存されたカスタムモジュールまたはグループがここに表示されます。特定のモジュールを見つけるには、検索バーに名前を入力します。[カテゴリーまたはタグによる絞り込み]ドロップダウンメニューをクリックし、1つ以上のフィルターを選択することもできます。

モジュールのスタイル、設定、コンテンツは、エディターでモジュールを選択するときに、インスペクターで変更できます。[ラッピングHTML]をセクションで[展開]クリックして、コードエディターでさらにカスタムスタイルを追加します。

インスペクターの下部に、ブログ、Eメール、またはページを編集するときに既定のコンテンツを変更できないようにモジュールをロックするオプションがあります。この設定を有効にするには、[コンテンツエディターでの編集を禁止する]をクリックしてオンに切り替えます。

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

全てのMarketing Hub Professional and Enterprise and CMS Hub Professional and Enterpriseアカウントには、デフォルトでデザインツールに@hubspotフォルダーがあります。このフォルダーには、テーマと、ドラッグ&ドロップEメールモジュールを含むデフォルトモジュールが全て含まれています。これらのテーマやモジュールは読み取り専用ですが、編集する場合は複製できます。

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

  • HubSpotアカウントにて、[マーケティング]>[ファイルとテンプレート]>[デザインツール]の順に進みます。
  • ファインダーで、[@hubspot]フォルダーをクリックします。
  • 複製したいデフォルトモジュールを右クリックし、複製モジュールを選択します。

    design-manager-clone-module
  • 複製したモジュールで、中央の編集パネルでモジュールのソースコードを編集します。
  • 変更内容を保存するには、右上の[変更を公開]をクリックします。これでテンプレート作成時に変更後のモジュールを使用できるようになります。

既定のモジュールタイプ

配信停止バックアップ

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

バックアップ配信停止

ブログコメント

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

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


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

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

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

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

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

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

CTA

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

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

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

コンテンツライブラリー

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

個別リソース・コンテンツ・ライブラリ

Follow Me

注:フォローミーモジュールはEメールテンプレートではご利用いただけません。 

Follow Meを使用できます モジュール  して、訪問者がソーシャルメディアで貴社に連絡できるようにします。ソーシャル シェアリング モジュールとは異なり、Follow Meモジュールは、あなたのサイトからあなたの各ソーシャルメディアのページにユーザーを転送します。

Follow Meモジュールを追加するときに、ソーシャルアイコンの上に表示されるモジュールヘッダーをカスタマイズできます。

どのソーシャルネットワークがこのモジュールに表示されるかは、ソーシャル設定の私のフォローセクションで指定できます。

フォーム

注:フォームモジュールは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年、すべての期間における最新記事または最も人気のある記事を表示するように、このモジュールを設定できます。 

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

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

製品

製品モジュールを使用すると、製品ライブラリーの製品をページや投稿に表示することができます。製品のデフォルト情報が表示されますが、ページごとに変更することもできます。 

製品モジュール

リッチテキスト

リッチ テキスト モジュールは、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メール受信者が配信(サブスクリプション)設定を管理したり、Eメール通信を配信登録解除したりするときに表示されるページをカスタマイズできます。

配信設定


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

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

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


ウェブページとして表示

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

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

WhatsAppリンク 

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

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

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

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

whatsapp-link-module

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