複数LPを共通化するHubSpotモジュール設計

担当領域
企画・要件整理
期間
2025年9月～2026年3月

案件背景

複数のランディングページで共通利用できるHubSpotカスタムモジュールを設計・開発。要件定義からUI設計、実装、編集者向けマニュアル作成まで一貫して担当し、LP制作・運用の効率化と再利用性の向上を実現した。

課題

  • LPごとに実装内容が異なり、再利用性が低い状態だった
  • 編集者によって入力ミスや運用負荷が発生しやすかった
  • 共通化と個別要件の両立が求められていた
  • 継続的な改修を見据えた保守性の高い設計が必要だった

やったこと

  • LP共通モジュールの要件定義・仕様整理
  • 実装前に仕様・編集画面をビジュアル化し、クライアントとの認識合わせを実施
  • HubSpot CLIを用いたモジュール開発（HubL / HTML / CSS / JavaScript）
  • 編集者が迷わないフィールド設計・入力ルールを構築
  • LP量産を見据えた共通化・拡張性を考慮した構造設計
  • CSVで整理した要件をCursorへ連携し、AIを活用した実装フローを構築

実現したこと

  • 共通モジュール化により、LP制作・保守の効率を向上
  • 編集者が迷いにくい管理画面を実現し、運用負荷を軽減
  • 共通仕様と個別要件を両立できる拡張性の高い構造を構築
  • AIを活用した開発フローにより、仕様理解から実装までの手戻りを削減
  • 継続的な改善・機能追加に対応できる運用基盤を整備

設計のポイント

実装前に「見える仕様」を作る

実装に着手する前に、モジュール構成や編集画面、入力項目、利用ルールを図解した仕様資料を作成。クライアントが完成イメージを把握しやすい状態を整えたうえで開発を進めることで、認識のズレや手戻りを抑えました。

編集体験まで設計したHubSpotモジュール

モジュールを実装するだけでなく、編集者が迷わず更新できるようフィールド構成や入力ルールを設計。管理画面での使いやすさまで含めてUIを最適化した。

ビジュアル

参考画面
参考画面

よくなったこと

LPごとに異なっていた実装を共通モジュール化し、HubSpot上で運用しやすい構造を設計。要件整理から編集体験まで考慮した設計と、AIを活用した開発フローにより、保守性と開発効率を両立した。

補足

  • LP制作の共通基盤を構築
  • 編集者の入力負荷・運用負荷を軽減
  • 継続的な機能追加に対応できるモジュール設計
  • AIを活用した再現性の高い開発フローを確立

Category

実装・CMS構築 企画・要件整理

Mimu Fujiwara

フリーランスのテクニカルPM／Webディレクター。 Webサイトのリニューアルや改善の相談を受ける中で、「本当に解決したいこと」と「依頼内容」が少しずれている場面によく出会います。 依頼されたものをそのまま作る前に、目的や課題、運用状況を整理し、「何を作るべきか」から一緒に考える立場で関わっています。 WordPressやHubSpotなどのCMS案件を中心に、要件整理・情報設計・技術調整・運用改善までを横断して支援。公開して終わりではなく、その後も無理なく運用・改善できる状態をつくることを大切にしています。