design-labo

会社ウェブサイトをHubspotCMS ACT3でリニューアルしてみる

作成者: Kenichi|Oct 15, 2025 6:46:05 AM

HubSpot CMSでコーポレートサイトをリニューアルしてみる!

これまで、自社サイトはMODxというアメリカ製のCMS(コンテンツマネージメントシステム)とNewtというヘッドレスCMSで構築していた。

しかし、一緒にお仕事をし始めた事業者さんがHubspotに明るく、実際にHubspotCMSで構築されたウェブサイトの管理画面を拝見したところ、これまで我々がfigmaやXDで設計してきたコンポーネントの積み上げ構造で豊富なコンポーネントがあることから、デザインも工夫次第でかなりの表現ができることが分かってきた。

WordPressも、セキュリティホールや、個人情報保護法の改定による締め付けが強くなってきたところだったため、外部サービスに保管し自社スタッフの負担軽減を検討していた矢先だった。

Hubspotは、CRM(顧客管理)だけじゃなかった

Hubspotというと、SalesforceやZohoなどの顧客管理システムとして有名だが、まさかウェブサイトの構築までできてしまうとは考えていなかった。というか、CMSと言ってもおまけ程度だろうと高をくくっていた、、、。

が!

かなり有能なCMSかもしれない。
(デザイン制約もあるし、HTML/CSSを自由自在にコーディングできるわけではない)

ノーコードで構築できるサービスとしては、相当よさそうだということです。

デザイン畑で生きてきたアートディレクターやデザイナーには物足りなさもあるかもしれないが、「ウェブサイトは効果を上げるためにある」という本質を見た際、ウェブ制作、顧客管理、マーケティングオートメーションが一体になり、解析レポートも見やすいという点は非常に魅力的だった。

ACT3という有料テーマを購入した

Hubspotには、非常に多くのデザインテーマが用意されている。
今回購入したACT3というテーマは、有料で2025年8月現在 500$で購入できる。

ACT3を選定した理由は、コンポーネントの豊富さと、カスタマイズ性の高さ。

しかし、いきなりウェブサイト実装で躓いた(笑)

まず初めに躓いた点は、「子テーマ」を作るという点。

言い換えれば、親テーマ(購入した元のテーマ)のカスタマイズを安全に行うために複製をしたテーマを改造し、テーマがアップデートされた場合でもカスタムした内容が失われたり、エラーが発生しないようにするリスク回避手段だった。

この「子テーマ」を理解していなかったため、危うくテーマがアップデートされた際に、サイトが壊れてしまう可能性をはらんでいた。

次につまずいた点が、ヘッダーのグローバルナビゲーションの反映、、、。

グローバルエディターというもので設定ができるという触れ込みで、Act3には6つのヘッダーが標準で用意されていたが、選び方が分からない。
さらに、メニューの項目(リンク表示させたいページリスト)をどのように呼び出せば良いかが一目では分からないことだった。

探り探りディレクターの鈴木と調べていたら、ナビゲーションの項目(リンク名とリンク先)を管理するマスタと、ヘッダーのメニュー(デザインテンプレート)を設定する場所が異なる画面で設定する必要があったのだ、、、。

デザインを反映する前に、ナビゲーション項目を入力しておき、そのうえでヘッダーのテンプレートに、設定したナビゲーションを呼び出さなければいけなかった。

あとは、ファイルアップロードした画像ファイルが重複してしまったときに、画像の詳細を確認する画面まで進まなければ削除(ゴミ箱に入れる)ができなかったのだ。

かなり優れたUIではあるが、細かい点でできそうなことができないフラストレーションがたまる(笑)

慣れればなんてことないのだけれど、ノーコード系サービスUIのあるあるトラップにはまった。

結構順調にページ作成が進みそう

とはいえ、HubspotCMSの入力の癖を理解し、コンポーネント(モジュール)や、セクション(自分で組み合わせたモジュールを組み合わせたdev要素(チャンク))がある程度出来上がってくると、ドンドコ入力は進む。

きちんとWFが作られていて、原稿がそろっていればコピペでアルバイトでもできちゃいそうだ。

これなら、設計ができるデザイナーとか、デザイナー上がりのディレクター、コピーライター上がりのIA(情報設計者)が、コーダーに依頼することなく実装を進められる。

さらに、トーン&マナーを著しく破壊する恐れも少ないため、今後はこのようなノーコードが増えてくるのだと確信した。

でも、デザイン自由度が、、、ほしい!

ここまで、HubspotCMSの導入の触りを紹介してきたが、コーディング難易度が高くてもがっつりデザインしたかっこいいウェブサイトやZindexを多用したフローティングデザインをしたい!と思う人もいるでしょう。

かくいう我々もデザイン自由度がより高ければ、、、と思ってしまう。

ここは、ノーコード系の宿命というか、何を重視するかによって実装方法が変わりそうだ。

万能なCMSではないが、マーケティングツールに付帯したCMSとしてはかなり優秀だし、ウェブサイトはスクラッチコーディングするか、WordPressや慣れたCMSで実装し、Hubspotとブリッジするのでもよいと思う。

ただ、ウェブサイトも含め、マーケティングツールと捉え、PDCAを素早く回し続けたいなら、Hubspotは、CMSとしてもMAツールとしても、CRMとしても統合的にウェブマーケを把握できるツールなのだと思う。

もっと使い勝手が向上することを願ってやまない!