HubSpotの標準的なモジュールの説明

更新日時 July 1, 2016

必要条件

ソフトウェア: HubSpot マーケティング
サブスクリプション: Basic, Pro, & Enterprise
この記事では、テンプレートのレイアウトに追加できるさまざまなモジュールについて説明します。 各モジュールタイプの用途はそれぞれ異なり、いずれも一定の状況で役立ちます。テンプレートのタイプによっては使用できないモジュールがありますのでご注意ください。

作業しているテンプレートのタイプで使用できるモジュールをすべて表示するには、任意のテンプレートでギアアイコンをクリックし、[Swap module(モジュールを交換)]を選択します。テンプレートのタイプによっては、他よりも多くのモジュールタイプのオプションを使用できます。

HubSpot Help article screenshot

詳細メニュー

詳細メニューコンテンツモジュールを使用すると、コンテンツとテンプレートにナビゲーションを追加できます。 詳細メニュー([Content(コンテンツ)] > [Content Settings(コンテンツの設定)] > [Advanced Menus(詳細メニュー)])に、ナビゲーションが作成されます。メニューの作成方法の詳細については、こちらの記事をご覧ください

Advanced Menu Options
HubSpot Academy

ベストプラクティス

プライマリナビゲーションメニューは、すべての非ランディングページのテンプレートに追加し、ランディングページのテンプレートからは削除する必要があります。プライマリナビゲーションはシンプルなものにしましょう。ナビゲーションメニューが複雑すぎると、ユーザーがサイト内を移動するのが難しくなる可能性があります。

ドロップダウンメニューやサイドバーのナビゲーションメニュー、フッターのナビゲーションメニューをシンプルにすると、ユーザーが情報量の多いウェブサイトでも移動しやすくなります。詳細メニューでは複数のメニューツリーを管理できます。また、複数レベルのナビゲーションを使用している場合、ドロップダウンがモバイルデバイスでも動作するかどうかを忘れずに確認してください。

続きを読む

モジュールのオプションを編集すると、以下の項目をカスタマイズできます。

  • メニューのタイプ
  • 表示するドロップダウン/ポップアップの最大数
  • [Orientation(方向)]では、HTMLマークアップを更新し、それに応じて(横または縦に)メニューのスタイルを設定できます
  • [Enable flyouts(ポップアップを有効化)]では、ドロップダウン/ポップアップの子メニューを有効または無効にします
  • ナビゲーションメニューの基礎として使用する、コンテンツの詳細メニューツリー

購読解除バックアップ

Eメール受信者が購読解除しようとするときに、HubSpotがそのEメールアドレスを確認できない場合は、Eメール受信者に対して購読解除バックアップテンプレートが表示されます。このモジュールでは、購読解除バックアップテンプレートのヘルプテキストをカスタマイズすることができます。

システムテンプレートの作成方法の詳細については、こちらをご覧ください。

Backup Unsubscribe

ブログコメント

ブログコメントモジュールは、個別のブログ記事テンプレートにコメントセクションを追加します。Forms(フォーム)ツール([Contacts(コンタクト)] > [Forms(フォーム)])からブログコメントフォームをカスタマイズできます。このモジュールは、ブログテンプレートレイアウトでのみ使用できます。

Default blog comments form

ブログコンテンツ

ブログコンテンツモジュールは、ブログ記事ブログリストページの両方のHTML/HubLマークアップを格納します。[Edit Post Template(投稿テンプレートを編集)]をクリックして投稿のマークアップを編集したり、[Edit Listing Template(リストテンプレートを編集)]をクリックしてリストのマークアップを編集したりすることができます。

ブログコンテンツモジュールのマークアップの詳細については、このリソースをご覧ください。新しいブログコンテンツモジュールにモジュールを交換すれば、いつでも元のコードにモジュールを戻すことができます。

blog-content-1.png

ブログのEメール購読

ブログのEメール購読モジュールを使用すると、訪問者がフォームに入力することによってブログのダイジェストメールを購読できるようになります。 このモジュールは、Eメールテンプレートでは使用できません。このモジュールには、ブログ購読者フォームのデータが入力されます。なお、ブログ購読者フォームは、Forms(フォーム)ツール([Contacts(コンタクト)] > [Forms(フォーム)])でアクセスでき、カスタマイズにも対応しています。

Blog email subscription

Call-To-Action(CTA)

リッチテキストモジュールにCTAボタンを挿入するか、Call-To-Action(CTA)モジュールを使用することができます。リッチテキストコンテンツモジュールの書式に影響を与えずにCall-To-Action(CTA)を選択または編集する必要がある場合には、Call-To-Action(CTA)モジュールを使用します。CTAの詳細については、Call-To-Action(CTA)ユーザーガイドをご覧ください

HubSpot Help article screenshot

カスタムHTML

ページを編集するときにモジュールのコンテンツの背後にあるHMTLコードを完全に制御したい場合には、カスタムHTMLコンテンツモジュールを使用できます。これらのモジュールは、HTML、CSS、Javascript、およびHubLをサポートしています。カスタムHTMLモジュールは、ビデオ、音楽プレーヤー、ソーシャルフィード、地図などの埋め込みコードを追加するのに最適です。HubLテンプレートモジュールとは異なり、カスタムHTMLモジュールは、ページレベルで編集できます。

HubSpot Help article screenshot

カスタムモジュール

カスタムモジュールはコード化された先進的なモジュールであり、HTML、CSS、Javascript、およびHubLを使用して高度な機能をテンプレートに追加できます。また、マーケターがコードに触れることなくそのコンテンツを変更することもできます。カスタムモジュールは、テンプレートに繰り返し追加できます。 カスタムモジュールの使用方法の詳細については、このガイドの以降のセクションを参照してください

フレキシブルカラム

サイトまたはランディングページにフレキシブルカラムを使用すると、コンテンツ作成者がコンテンツエディターからそのカラムでモジュールを追加または削除できるようになります。このモジュールは、ブログ、システムページ、およびEメールテンプレートでは使用できません。

このオプションは、マーケターが、同じテンプレートで構築された他のページに影響を与えずに、個々のページにモジュールを追加できるようにする場合に最適です。フレキシブルカラムに複数のモジュールから成るグループがあり、そのグループを静的グループに戻す場合は、ギアアイコン> [Revert to Static Group(静的グループに戻す)]の順にクリックします。

Flexible column
コンテンツエディターを使用して特定のページのフレキシブルカラムをカスタマイズすると、テンプレートレベルでのその列への変更は、そのカスタマイズされたページには有効ではなくなります。

Follow Me

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

ソーシャル設定[Social(ソーシャル)] > [Social Settings(ソーシャル設定)] > [Follow me module(Follow Meモジュール)])で、あなたのFollow Meモジュールでどのソーシャルメディアを表示するかを選択できます。

Follow me module

フォーム

フォームモジュールでは、ユーザーがフォームを選択してページに追加することができます。これは、ウェブサイトへの訪問者からコンタクト情報をキャプチャするために使用します。このモジュールは、ランディングページ、サイトページ、およびブログページで作成したコンテンツおよびテンプレートに追加できるモジュールとして利用可能です。

フォームモジュールでは、次のことができます。

  • ページでフォームにタイトルを付ける。
  • どのページにどのHubSpotフォームを表示するかを選択する。
  • フォームを送信するユーザーを別のページにリダイレクトするか、同じページでサンキューメッセージを表示するかを選択する。
  • HubSpot設定からデフォルトのフォーム送信通知オプションをオーバーライドし、訪問者がフォームを送信したときに特定のEメールアドレスに通知メールを送信する。
  • フォームを送信した訪問者にフォローアップメールを送信する。
  • フォームを送信した訪問者をSalesforceキャンペーンに追加する(プロフェッショナル版またはエンタープライズ版のHubSpotのほか、Salesforceとのインテグレーションが必要です)。
Form module options

Google検索

Google検索コンテンツモジュールを使用すると、コンテンツにGoogleサイト内検索を追加できます。この検索は、Google検索結果ページにリダイレクトします。サイトに検索結果を読み込む場合は、Googleカスタム検索エンジンまたはSwiftype検索エンジンを設定し、カスタムHTMLモジュール内の埋め込みコードを使用する必要があります。

Google search

ヘッダー

ヘッダーモジュールを使用すると、見出しのHTMLタグの単行テキストを表示できます。表示する見出しタグ(h1~h4)を選択するには、このモジュールの既定のオプションを編集します

HubSpot Help article screenshot

水平方向スペーサー

水平方向スペーサーコンテンツモジュールをテンプレートに追加すると、コンテンツモジュールのレイアウトをカスタマイズするための空白スペースを追加できます。このモジュールでは、ページ上のスペース要素を補うために使用できる空のdivタグを作成します。

HubSpot Help article screenshot

HubLテンプレート

HubLテンプレートモジュールはコード化されたモジュールで、HTML、CSS、およびJavaScriptに加えてHubSpotマークアップ言語をサポートします。このタイプのモジュールの最も一般的なユースケースとしては、テンプレートのレイアウトでHubLを使用してその他の編集可能なモジュールを作成する必要がある場合が挙げられます。

カスタムHTMLモジュールとは異なり、これらのモジュールはコンテンツエディターで編集できません。HubLテンプレートモジュールはグローバルにすることはできませんが、代わりにカスタムHTMLまたはカスタムモジュールを使用できます。

HubLの詳細については、HubLリファレンスのドキュメントをご覧ください。

HubSpot Help article screenshot

画像

画像モジュールでは、ページやEメールの特定の場所に任意の画像を追加することができます。デフォルトのコンテンツを追加するときやコンテンツエディターで作業しているときに、ファイルマネージャーにアップロード済みの画像を選択するか、新しい画像をアップロードできます。これは、テンプレートに対して画像の書式とスタイルを特定の方法で設定しているときに、書式を変更せずに画像を交換する場合に役に立ちます。

また、以下の項目を変更することもできます。

  • ユーザーが画像をクリックしたときにリダイレクトされるURL
  • 画像のaltテキスト
  • 画像の高さと幅
Image module

画像スライダー

画像スライダーモジュールでは、内部ユーザーが簡単に更新できる回転式の画像ギャラリーを作成することができます。

以下の項目をカスタマイズできます。

  • スライダーが自動送りするかどうか、どれくらいの速さで自動送りするか
  • スライダーがループするかどうか
  • スライダーにページ番号が表示されるかどうか
  • スライダーが最も高い画像のサイズを保持するか、各画像のサイズを調整するか
  • 各画像のキャプションを追加するかどうか
  • キャプションが画像の下に表示されるか、画像の上に重ね合わされるか

画像スライダーはページの見た目をよくすることはできますが、画像が次々に切り替わっていく関係上、静的なCTAよりもスライダーのクリックスルー率が低くなるのが一般的です。

HubSpot Help article screenshot

ロゴのモジュール

ロゴのモジュールは、[Content Settings(コンテンツの設定)] > [Page Publishing(ページの投稿)] > [Logo(ロゴ)]で設定された会社のロゴを読み込みます。

Logo module

Eメール本文

Eメール本文モジュールは、デフォルトですべてのEメールテンプレートに含まれている標準のリッチテキストモジュールです。 マーケターがEメールを下書きするときに使用する主要なリッチテキスト領域を指定します。

Email Body

オフィス所在地情報

このモジュールには、合法的に商用Eメールを送信するために、すべてのEメールテンプレートに含めなければならない多様な必須のトークンが含まれています。このセクションの書式は編集できますが、オフィス所在地情報モジュールを使用しないで、またはHubLタグを含めない状態でEメールテンプレートを保存することはできません

HubSpot Help article screenshot

単行テキスト

単行テキストモジュールでは、コンテンツ作成者がページやEメールの単行テキストを編集することができます。このモジュールは、エンドユーザーが書式を決める必要がない場合に、シンプルなテキストフィールドを作成するのに便利です。

One line text

ページフッター

ページフッターモジュールは、著作権情報を現在の年と会社名と一緒に表示します。会社名は、EメールのCAN-SPAM設定([Content(コンテンツ)] > [Content Settings(コンテンツの設定)] > [Email(Eメール)] > [Email Footer Information(Eメールフッター情報)])から取り込まれます。サイトのフッターに表示される著作権情報の表示方法をさらにカスタマイズしたり、書式を整えたりする場合は、代わりにリッチテキストモジュールを使用することもできます。

Page footer

パスワード入力

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

システムテンプレートの作成方法の詳細については、こちらをご覧ください。

投稿フィルター

投稿フィルターコンテンツモジュールを使用すると、特定のトピック、または著者のブログ記事のリストを表示できます。このモジュールは、Eメールテンプレートでは使用できません。

以下の設定は、モジュールのデフォルト値を編集(ギアアイコン > [Edit Options(編集オプション)])することによってカスタマイズできます。

  • フィルター値を表示するブログ
  • フィルターリンクの値のリスト([Topics(トピック)][Month(月)]、または[Author(著者)]
  • 値の並び順(投稿数または名前)
  • 表示するタイトルのリスト
  • リストするブログ記事の最大数
  • 表示できるよりも多くの投稿がある場合に表示するテキストのリンク
Post filter

投稿リスト

投稿リストコンテンツモジュールを使用すると、HubSpotブログから最近のブログ記事または最も人気のあるブログ記事のリストを表示できます。このモジュールは、Eメールテンプレートでは使用できません。 

Post listing
b

詳細情報

投稿リストモジュールは、最も人気のある投稿や最近の投稿のシンプルなリストを作成する場合に適しています。これに対して、HubL関数を使用すると、より高度なリストを作成できます。

HubL関数を使用すると、最近の記事、特定のトピックについての投稿人気の投稿、または特定の著者による投稿を、設定した数だけ取得できます。もっと詳しくは、こちらをご覧ください

続きを読む

以下の設定は、モジュールのデフォルト値を編集(ギアアイコン > [Edit Options(編集オプション)])することによってカスタマイズできます。

  • 投稿のタイトルを表示するブログ
  • [most recent(最新)]または[most popular(最も人気のある)]のブログのリスト
  • 表示するタイトルのリスト
  • リストするブログ記事の最大数

リッチテキスト

リッチテキストモジュールは、HubSpotコンテンツツール全体で最もよく使用されるコンテンツモジュールです。テキストの書式設定、画像、リンク、CTAなど、コンテンツのほとんどの編集オプションが使用できます。プロフェッショナル版およびエンタープライズ版のHubSpotアカウントでは、リッチテキストモジュールを使用してスマートコンテンツをページに追加できます。このモジュールを使用して、マーケター用に編集可能なコンテンツ領域を作成します。

HubSpot Help article screenshot

RSSリスト

RSSリストモジュールを使用すると、HubSpotブログや外部のRSSフィードの投稿の要約を表示できます。このモジュールは、Eメールテンプレートでは使用できません(代わりにRSS Eメールを使用します)。RSSリストモジュールでは、投稿から注目の画像を含めるかどうか(内部のRSSフィードのみ)など、RSSリストの表示方法をカスタマイズするという点で多くのオプションを使用できます。このオプションを有効にするには、RSSリストモジュールのギアアイコンをクリックし、[Include featured image(注目の画像を含める)]にチェックを入れます。

HubSpot Help article screenshot

セクションヘッダー

セクションヘッダーモジュールを使用すると、段落のサブタイトルを備えたh1見出しタグを表示できます。このモジュールは、ページの主要セクションにタイトルを付ける際に最適です。

Section header

シンプルメニュー

シンプルメニューモジュールでは、コンテンツエディターでページ固有のメニューを作成できます。Advanced Menus(詳細メニュー)ツールでメニューツリーを管理する詳細メニューとは異なり、シンプルメニューは、追加先の各ページで管理します。

Simple menu

ソーシャルシェアリング

ソーシャルシェアリングモジュールを使用すると、訪問者がソーシャルメディアチャネルやEメールでコンテンツを簡単に共有できます。ページにソーシャルシェアリングを追加しておけば、訪問者にコンテンツの共有を奨励することができるため、ソーシャルメディアサイトからのインバウンドのトラフィックを生成するのに役立ちます。

HubSpot Help article screenshot

購読設定

購読設定モジュールは、購読設定システムテンプレートでのみ使用可能な特別なモジュールです。このモジュールでは、Eメール受信者が購読設定を管理したり、Eメール通信の購読を解除したりするときに表示されるページをカスタマイズできます。

システムテンプレートの作成方法の詳細については、こちらをご覧ください。

Subscription preferences

購読の更新確認

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

システムテンプレートの作成方法の詳細については、こちらをご覧ください。

Subscription updates

ウェブページとして表示

ウェブページとして表示では、Eメール受信者がEメールのウェブページ版を開くためのオプションを使用できます。EメールクライアントによってはHTMLメールの表示が大きく異なることもあるため、Eメールテンプレートにこのオプションを含めておくと、ユーザーがブラウザーでEメールを開いて、常に意図されたとおりの見た目でEメールを表示できます。

HubSpot Help article screenshot

前の記事

次の記事