静的LPのHubSpot CMS移管およびモジュール設計・テンプレート構築

要点

  • 静的LPをHubSpot CMS向けにモジュール化
  • 複数ページ展開できるテンプレート構成を設計
  • 4ページ合計約30時間で移管・構築まで対応
担当領域
実装・CMS構築
期間
2026年3月～4月

案件背景

静的HTMLで構築されたLP群をHubSpot CMSへ移管。既存デザインを維持しつつ、モジュール分割・テンプレート化・リファクタリングを行い、運用チームが編集しやすい構成へ再設計した。

課題

  • 静的HTML/CSSで構築されており、CMS運用・再利用を前提とした構造ではなかった
  • ページごとにコードやCSSの書き方がばらつき、保守・横展開しづらい状態だった
  • HubSpot上で非エンジニアが更新できるよう、構造整理とフィールド設計が必要だった

やったこと

  • 既存LPのHTML/CSSを整理し、HubSpot CMS向けにリファクタリング
  • LP構造をセクション単位で分解し、再利用可能なモジュールとして設計・実装
  • LP用・フォーム用など用途別にテンプレートを作成し、複数ページへ展開可能な構成を構築

実現したこと

  • 静的LPをHubSpot CMS上で編集・運用できる構造へ移管
  • テンプレート化により、複数ページの展開・管理が容易な状態を実現
  • 設計〜構築まで約30時間（4ページ合計）で対応

設計のポイント

CMS運用を前提にしたモジュール分割

見た目をそのまま移すだけでなく、更新頻度や再利用性を考慮して、CTA・ヒーロー・フォーム・動画UIなどをモジュール単位に整理。

既存コードの整理とHubSpot向け再構築

ページごとにばらつきのあったHTML/CSSを整理し、HubSpotのテンプレート・モジュール構造に合わせてリファクタリング。

よくなったこと

静的LPをHubSpot CMS向けに再設計し、モジュール化・テンプレート化・リファクタリングまで一貫対応。更新・横展開しやすいCMS構造へ改善し、短期間での移管を実現した。

補足

  • テンプレート化により、複数ページの展開・管理が容易な構造を実現。
  • 既存LPの構造整理・リファクタリングからHubSpot CMS構築までを、4ページ合計約30時間で対応。

Category

実装・CMS構築 構成・情報設計

Mimu Fujiwara

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