HubSpotでカスタムモジュールの編集画面を分かりやすくするテクニック

HubSpotのCMS開発では、カスタムモジュールの作成が必須とも言える要素であり、自由に項目を作成できることが魅力の一つです。

このカスタムモジュールには便利な機能がいくつもあり、その中でもフィールドグループという機能が意外と重要な機能だと個人的に思っています。

フィールドグループは複数のフィールドを１つにまとめることができる特別なフィールドで、この機能を使うことで、より使いやすく効率的なカスタムモジュールを作成することが可能になります。

今回は簡単なカスタムモジュールを作成しながら、フィールドグループの魅力をお伝えします。

カスタムモジュールとは？

まずはカスタムモジュールの前に、基本である「モジュール」から説明します。

HubSpotではモジュールと呼ばれるパーツを組み合わせてページを作成していきます。モジュールには「テキスト」「ボタン」「画像」など様々な種類が用意されていて、モジュールをドラッグアンドドロップで任意の場所に置いて組み立てていきます。

例えば、下図のように画像を並べるなら、画像モジュールを6回使用すると実現できます。

さらに、この画像の下にテキストを入れたい場合、テキストモジュールを6回使用するだけですが、項目（モジュール）が増えたり入れ替えが頻繁に発生して管理が複雑になることがあります。

こうした場合には、カスタムモジュールが役立ちます。カスタムモジュールを使用すれば、必要な項目を1つにまとめることができます。そのため、カスタムモジュールに項目の追加や入れ替えを行うだけで複数個所の変更を一度で済ませることができ、デザインやレイアウトの統一も図ることができます。

このようにカスタムモジュールをうまく活用することで、ページ制作を効率化し、より使いやすいサイトを構築することができるようになります。

カスタムモジュールの作成

例にするカスタムモジュールは前述で使用した「画像ギャラリー」です。

この画像ギャラリーの作成に必要な機能をいくつかピックアップしてみます。

最低限の機能だとこれぐらいでしょうか。

この内容でカスタムモジュールを作成して編集画面をプレビューしてみます。

想定通りのカスタムモジュールができあがりました。

では、例えば「1行に表示する枚数をモバイルでは別にしたい」という要望があった場合にどのように拡張するのが最適でしょうか？

一番シンプルに拡張すると「1行に表示する枚数」の下に「1行に表示する枚数（モバイル）」を増やすことだと思います。

この方法でも問題ありませんが、フィールドグループを使えばもっと分かりやすくできます。

フィールドグループでまとめる

それでは「1行に表示する枚数」をフィールドグループでまとめてみます。

再度プレビューを確認します。

以前より分かりやすくなったと思いますがどうでしょうか？

ついでにUIが開閉可能になるので操作性を向上させることができます。

開閉状態はデフォルトで「閉じた状態」になりますが、フィールドグループの設定から「開いた状態」に変更可能なので、頻繁に触るフィールドグループは「開いた状態」にするとさらに使いやすい管理画面にすることが可能です。

同様に「画像」や「マウスオーバー時のアニメーション」もフィールドグループ化すると下図のようになり、機能追加時に対応しやすくなると思います。

おわりに

フィールドグループを使うことで、カスタムモジュールの編集画面が使いやすくなる点が理解できたでしょうか？ですが、全ての項目をフィールドグループにまとめることは適切ではなく、使いにくくなる場合もあるので使い分けは必要です。

カスタムモジュールはフィールドグループに限らず、リピートや入力制限など便利な機能が多く実装されているので、より詳しい情報が必要な場合は公式サイトをご覧ください。

• ナレッジベース
• 開発者向け

また、テンプレートにモジュールを配置する方法などの解説が必要な場合は別記事「【きほんのき】HubSpotのページ作成・セクションについて解説！」をご覧ください。

最後に、アクセサイトではテンプレートやカスタムモジュールを作成する場合、基本的には下図のような設計書を作成してから開発するようにしています。

この設計書を作成することで、編集者が使いやすいテンプレートやカスタムモジュールの構築ができ、さらに拡張性や汎用性も高くなるので長く使っていただくことができると思います。

HubSpotのCMS開発で何かお困りごとがあればアクセサイトへ是非ご相談ください。

※ 本文中のスクリーンショットは2023年7月時点のものです。