HubSpot実装者に向けたブログ機能の基本説明と活用可能なHublモジュール例

クライアント企業のデジタルトランスフォーメーションを幅広く支援するスパイスファクトリー株式会社で主にコーディングを担当している瀬川です。

今回は、世界シェアNo.1のインバウンド・マーケティング・セールスのソフトウェアであるHubSpot（ハブスポット）のブログ機能について、基本的な概念や活用可能なモジュール例をご紹介します。

HubSpot全体の基本概念についてはHubSpot(ハブスポット)とは？インバウンドマーケティングと主な機能を徹底紹介！をご覧ください。
また弊社の詳しいサービス内容はをご覧ください。

HubSpotのブログ機能とは

HubSpotには、マーケティング・セールス・カスタマーサポートのツールが存在しますが、その中のマーケティングのツールの1つとしてブログ機能があります。
ブログ機能は、その名の通りブログの作成・運用を行うことができる機能を指します。

HubSpotブログ機能を利用するメリット

HubSpotブログ機能で特に優れている点は主に以下の5つだと考えます。

閲覧者に個別にアプローチできる

既にサイトにコンタクト情報があるユーザーであれば、特定のブログを閲覧した場合に自動でステップメールを送る等、個別のアプローチが可能です。

SEOの最適化が可能

ブログ作成時に、SEO最適化のためのToDoリストが自動作成されます。

SNSとの自動連携

あらかじめHubSpotにSNSアカウントを設定しておけば、ブログ完成時に各アカウントで自動投稿してくれます。
予約投稿も可能です。

レスポンシブデザインに対応している

HubSpotブログ機能は、無料・有料問わずデザインテンプレートが充実しています。
これらのテンプレートを使用した場合は、自動でレスポンシブデザインに対応し、デスクトップ・モバイル・タブレットで最適な表示がされます。

ブログの分析ができる

HubSpot内のアナリティクス機能によって、PV数・コメント・インバウンドリンク数などを確認・分析することが可能です。

HubSpotブログ機能で重要な役割を持つ“モジュール”

続いてHubSpotのブログ機能を用いたページの構築や編集に欠かせない“モジュール”についてご説明します。

HubSpot“モジュール”とは

HubSpotのブログ機能は、モジュールという基本単位で作られています。
モジュールは、html/Hubl(HubSpot特有の言語)・css・jsで作成されています。

モジュールは、ブログの中で1つの意味を成すまとまりです。
例えば、ヘッダー・お問い合わせフォーム・フッターの3つのまとまりが存在するお問い合わせページをHubSpotのブログの機能で作る場合、ヘッダーモジュール・フォームモジュール・フッターモジュールで構成することになります。

このように、HubSpotでは複数のモジュールが組み合わさって1つの集合体を作ります。この集合体をテンプレートと呼びます。

テンプレートはフロントエンド実装担当者にとっても利便性が高いものではありますが、テンプレートが一度作成されると、ブログ編集画面でのモジュール追加・削除が不可能になるというデメリットがあります。

上記の不便さを解決するのが、フレキシブルカラムという概念です。

フレキシブルカラム

フレキシブルカラムとは、モジュールを自由に追加・削除・編集ができるエリアのことです。

通常、テンプレート作成後（記事の編集時）は、モジュールの追加・削除・編集ができません。
しかし、テンプレート作成時にフレキシブルカラムを入れておくことで、記事の修正時にもモジュールの入れ替えが可能になります。

フレキシブルカラムはモジュール専用の余白のようなものです。
この余白をあらかじめ作っておくことで、後で余白を埋めたり変更したりすることができるのです。

実装担当者は、今後モジュールを変更する可能性がある記事にはあらかじめフレキシブルカラムを入れておくと良いでしょう。

HubSpot“カスタムモジュール”とは

HubSpotのモジュールは、html/Hubl・css・jsで作成されるため、これらの言語知識がある場合はモジュールを1から作成することが可能です。
その場合は、カスタムモジュールという機能を利用すると良いでしょう。

カスタムモジュールは、HubSpot内蔵のテンプレートモジュールを自由に組み合わせることで、独自のモジュールを作ることができる機能です。カスタムモジュールで1からモジュールを作成することも可能です。

カスタムモジュールを使用することで、htmlの知識の有無に関わらずモジュールを作成することができます。

HubSpotブログモジュールで使えるHubl集

ブログに関するモジュールを作成する際に使えるHublのコードをいくつかご紹介します。

最新記事情報取得

以下の例では4件取得

    {% set rec_posts = blog_recent_posts('default', 4) %}
       {% for rec_post in rec_posts %}
         処理を書く
       {% endfor %}

人気記事

以下の例では5件取得

    
    {% set pop_posts = blog_popular_posts('default', 5) %}
        {% for pop_post in pop_posts %}
        処理を書く
        {% endfor %}

ブログで使用されたタグすべてを取得

  
      {% set my_topics = blog_topics('default') %}
        {% for item in my_topics %}
        <a class="topics-links" href="{{ blog_tag_url(group.id, item.slug) }}">{{ item }}</a>
        {% endfor %}

記事タイトル取得

トランケ―トなし

{{ rec_post.name }}

トランケ―ト付き

{{ rec_post.name|truncate(31, True, '…' ) }}

記事に紐づくタグ取得

{% set my_topics = blog_topics('default') %}
    {% for item in my_topics %}
    <a href="{{ blog_tag_url(group.id, item.slug) }}" class="topics-links">{{ item }}</a>
    {% endfor %}

執筆者

名前

{{ content.blog_post_author.display_name }}

画像パス

{{ content.blog_author.avatar }}

執筆者アーカイブページ

{{ content.blog_post_author.slug }}

記事タイトル取得

{{ content.name }}

記事へのリンク取得

{{content.absolute_url}}

フィーチャー画像取得

{{ content.featured_image }}

記事公開日（年月日）

{{ content.publish_date_local_time.strftime('%Y.%m.%d') }}

HubSpotブログ機能の特徴を押さえて効率的なブログ運用を

今回お伝えした、フロントエンド実装者が押さえておくべきHubSpotブログ機能でのポイントをは以下です。

• HubSpotのブログはモジュールを基本単位として構成されている
• モジュールが集まることによって1つのテンプレートになっている
• モジュールはhtml/Hubl・css・jsで作成することができる
• 本ブログで紹介したHubl集を使うことで効率的にモジュール作成ができる

HubSpotのブログ機能を用いて、チームで効率的にブログを運用していきましょう。

スパイスファクトリーは高い開発力を強みに、国内では数少ない “開発会社” として HubSpot認定プロバイダー に認可されています。API 連携や、連携システムの独自開発など、お客様のニーズに合わせた無限のご提案をすることが可能です。詳しいサービス内容については、当社HPのをご覧ください。