【HubSpot】成果が出るLPの作り方とデザインのコツ｜集客はHubSpot、管理はkintoneの「攻守分業」が正解な理由

はじめに：LPを作りたいけれど、デザインもコーディングも自信がないあなたへ

「新商品のキャンペーン用にランディングページ（LP）を急いで作りたい。でも社内にデザイナーやエンジニアがいない…」 「外注すると費用も時間もかかるし、ちょっとした修正もすぐに対応してもらえない…」

Webマーケティング担当者なら、一度はこのような悩みに直面したことがあるのではないでしょうか。

LPは、広告や検索流入から訪れたユーザーを「見込み顧客（リード）」へと転換させるための重要な受け皿です。しかし、効果的なLPを自社でゼロから制作するには、デザインスキルやHTML/CSSなどの専門知識が壁となります。

そこで注目されているのが、ノーコードで直感的にLPが作成できるツールです。中でも、世界的なシェアを持つマーケティングオートメーション（MA）ツールである「HubSpot」は、専門知識がなくてもプロ品質のLPが作れる強力な機能を持っています。

本記事では、HubSpotを使った具体的なLPの作り方やデザインのコツを解説します。さらに、記事の後半では「LPを作って終わり」にしないための、「HubSpotで集客（攻め）」し、「kintoneで顧客管理（守り）」するという、一歩進んだ最強の運用体制についてもご紹介します。

1. なぜLP制作に「HubSpot」が選ばれるのか？デザインの悩みを解決する3つの理由

HubSpotが多くのマーケティング担当者に支持される理由は、「誰でも簡単に作れる」だけでなく、「マーケティング成果を最大化する機能」が備わっている点にあります。

理由1：ドラッグ＆ドロップで直感的にデザイン可能（ノーコード）

HubSpotのLP作成機能（CMS Hub）最大の特徴は、専門的なコードを一切書かずにページを作成できる点です。

パワーポイントで資料を作るような感覚で、テキストボックス、画像、動画、フォームといった要素（モジュール）を画面上にドラッグ＆ドロップで配置していくだけで、レイアウトが完成します。直感的な操作により、デザインの経験がない方でもストレスなく作業を進められます。

▲HubSpotのLPエディタ画面。左側のモジュールを右側のプレビュー画面へドラッグするだけで配置できる。

理由2：成果実証済みの高品質なテンプレートが豊富

「デザインセンスに自信がないから、ゼロからレイアウトを考えるのが難しい」という方も安心してください。HubSpotには、プロのデザイナーが作成した高品質なテンプレートが多数用意されています。

これらのテンプレートは、単に見栄えが良いだけでなく、「コンバージョン（成果）に繋がりやすい構成」があらかじめ考慮されています。業種や目的に合ったテンプレートを選び、自社の画像やテキストに差し替えるだけで、効果的なLPが短時間で完成します。もちろん、スマートフォンやタブレットに自動で最適化されるレスポンシブデザインにも標準対応しています。

理由3：訪問者に合わせて表示を変える「パーソナライズ機能」

ここが一般的なLP作成ツールとの決定的な違いです。HubSpotはMAツールであるため、訪問者の情報（Cookie情報など）に基づき、LPの内容を動的に変化させる「スマートコンテンツ機能」を持っています。

例えば、

• 初めて訪問した人には「無料トライアルの案内」を表示する

• 既に資料請求済みの人には「導入事例セミナーの案内」を表示する

• 特定の国や地域からのアクセスに対して、その地域の言語や通貨で表示する

といった出し分けが可能です。訪問者一人ひとりに最適化された情報を届けることで、コンバージョン率（CVR）の大幅な向上が期待できます。単なる「静的なページ」ではなく、訪問者とコミュニケーションを取る「動的なページ」が作れるのがHubSpotの強みです。

2. 実践！HubSpotでのLPの作り方 4ステップ

では、実際にHubSpotを使ってLPを作成する具体的な手順を見ていきましょう。大きく分けて4つのステップで完了します。

Step 1：テンプレート選択

HubSpotの管理画面から「マーケティング」→「ウェブサイト」→「ランディングページ」と進み、「作成」ボタンをクリックします。

まずは、ベースとなるテンプレートを選びます。HubSpotのマーケットプレイスには無料・有料を含め多数のテンプレートがあります。

• 目的は何か？（資料請求、セミナー申込、トライアル登録など）

• 自社のブランドイメージに合うか？

などを考慮して最適なものを選択しましょう。迷ったら、シンプルな構成のものを選ぶとカスタマイズしやすくおすすめです。

Step 2：モジュール配置とコンテンツ作成

テンプレートを選んだら、編集画面に移ります。ここがデザインの本番です。

1. ファーストビュー（FV）の作成: 最も重要なエリアです。魅力的なキャッチコピーと、商品・サービスの世界観を伝える高品質なメイン画像を配置します。

2. ベネフィットの提示: ユーザーが得られるメリットを分かりやすく伝えます。テキストだけでなく、アイコンや箇条書きを使って視認性を高めましょう。

3. CTA（Call To Action）の配置: 「資料をダウンロードする」「申し込む」といったボタンを、ページの上部・中部・下部など適切な場所に配置します。HubSpotではボタンの色やテキストも簡単に変更できます。

各モジュールをクリックすると詳細設定が表示されるので、テキストの編集、画像の差し替え、色の変更などを直感的に行っていきます。

Step 3：フォームの設定

LPの目的である「リード情報の獲得」に不可欠なのが入力フォームです。HubSpotのフォーム機能は非常に強力です。

• ドラッグ＆ドロップで項目を追加: 氏名、メールアドレス、会社名など、必要な項目を簡単に追加・削除できます。

• プログレッシブプロファイリング: 以前の訪問で既に取得済みの情報（例：会社名）は、次回のフォーム入力時には非表示にし、代わりに別の質問（例：役職）を表示する、といった高度な設定が可能です。これにより、ユーザーの入力負荷を下げつつ、段階的に詳細な顧客情報を収集できます。

作成したフォームを、Step 2で配置した「フォームモジュール」に紐付ければ完了です。

Step 4：公開設定とA/Bテスト

コンテンツができたら、最後に公開設定を行います。

• ページ設定: ページのタイトル（titleタグ）、メタディスクリプション、URLなどを設定します。SEO対策として重要な項目です。

• 公開: 「公開」ボタンを押せば、すぐにWeb上にページが公開されます。

また、HubSpotの上位プランでは「A/Bテスト機能」が利用できます。「キャッチコピーAとB、どちらが反応が良いか？」といったテストを簡単に実施でき、データに基づいて継続的にLPの改善が行えます。

3. 【運用の壁】LPを作って終わりにしていないか？

ここまで見てきたように、HubSpotを使えば専門知識がなくても、高機能でデザイン性の高いLPを作成・公開することができます。

しかし、ここで一つ重要な問いかけをさせてください。 「LPを作って公開した後、そこから得られた顧客データをどう管理していますか？」

多くの企業で見られるのが、以下のようなケースです。

• 「フォームからの問い合わせは、担当者にメール通知されるだけ」

• 「届いたメールを見て、手作業でExcelの顧客リストに転記している」

• 「営業担当への引き継ぎが、口頭やチャットツールで行われており、情報が共有されていない」

これでは、せっかく苦労してLPを作り、集客に成功したとしても、その後の対応が遅れたり、情報が漏れたりして、本来得られたはずの売上を逃してしまうことになります。

LP制作はあくまで「入り口」です。重要なのは、獲得したリード（見込み顧客）情報をいかに効率よく管理し、スピーディーに営業活動へ繋げるかという「運用プロセス」にあります。

ここで登場するのが、「HubSpot（攻め）」と「kintone（守り）」を組み合わせるという考え方です。

4. 「攻め」のHubSpot × 「守り」のkintone という最適解

HubSpotは、「マーケティング（攻め）」において最強のツールです。LP作成、メール配信、Webサイト上の行動履歴追跡など、見込み顧客の関心を高め、ホットな状態にする機能が充実しています。

一方、日本のビジネスシーンにおいて絶大な支持を得ているのがサイボウズ社の「kintone」です。kintoneは、「業務管理（守り）」に非常に強いツールです。顧客データベース、案件管理、見積書作成、日報、契約管理など、日々の業務プロセスを柔軟にアプリ化し、一元管理できます。特に、日本企業特有の複雑な商習慣や帳票出力に対応しやすい点が強みです。

この両者を連携させることで、それぞれの強みを活かした「攻守最強の布陣」が完成します。

「なぜHubSpotだけで全て管理しないのか？」という疑問を持つ方もいるかもしれません。もちろん、HubSpotにも営業管理（Sales Hub）の機能はあります。しかし、全社員にHubSpotの有料ライセンスを付与するとコストが高額になる場合や、既存の基幹システムとしてkintoneが既に社内に深く浸透している場合などは、無理に一本化するよりも、「適材適所」でツールを使い分ける方が現実的かつ効果的なケースが多いのです。

5. 連携による具体的なメリット（Before / After）

HubSpotとkintoneを連携させると、具体的に業務はどう変わるのでしょうか。

Before：連携していない場合

1. 顧客がHubSpotで作ったLPのフォームから資料請求をする。

2. 担当者にメール通知が届く。

3. 担当者がメールを開き、顧客情報をコピーして、kintoneの「顧客管理アプリ」に手動で貼り付ける。（手間がかかり、入力ミスのリスクもある）

4. kintoneに入力されたのを見て、営業担当が電話をかける。（タイムラグが発生し、顧客の熱が冷めてしまう）

5. 
   

After：HubSpot × kintone 連携を導入した場合

1. 顧客がHubSpotで作ったLPのフォームから資料請求をする。

2. 【自動化】 HubSpotが受け取った顧客データが、即座にkintoneの「顧客管理アプリ」に自動同期される。

3. 【自動化】 kintone側で、営業担当に「新規リード獲得」の通知がリアルタイムで飛ぶ。

4. 営業担当はkintoneの画面を見て、すぐに顧客にアプローチを開始する。（機会損失ゼロ）

このように、連携によってデータ入力の手間がなくなるだけでなく、リードへの対応スピードが劇的に向上します。さらに、マーケティング部門はHubSpot側で「どのLPから来たリードが、最終的にkintoneでいくらの売上になったか」を追跡できるようになり、ROI（投資対効果）に基づいた精度の高いマーケティング施策が打てるようになります。

まとめ：HubSpotで「作る」から「繋げる」へ。成果を最大化する仕組みづくりを

本記事では、デザインスキルがなくても直感的に作れるHubSpotでのLP制作手順と、その後の運用におけるkintone連携の重要性について解説しました。

• HubSpotを使えば、ノーコードで誰でも簡単に「売れるLP」がデザインできる。

• しかし、LPは作って終わりではない。その後のデータ管理が重要。

• 「集客（攻め）はHubSpot」「管理（守り）はkintone」と役割を分担し、自動連携させることで、業務効率と成約率を最大化できる。

  
  

LP制作を内製化したいとお考えの方、そして、集客したリード情報をより効率的に管理・活用したいとお考えの企業様は、ぜひHubSpotの導入、そしてkintoneとの連携を検討してみてはいかがでしょうか。

私たちは、HubSpotの導入支援から、kintoneとの連携システムの構築、実際の運用コンサルティングまで一貫してサポートしています。「自社に最適な構成は？」「具体的な連携方法は？」など、まずはお気軽にご相談ください。

Hubspot紹介資料ダウンロード