HubSpotでLPを作るべき理由と本記事の目的
リード獲得のためにランディングページ（LP）を作成したいけれど、「外注すると30〜60万円かかる」「デザインやコーディングのスキルがない」といった悩みを抱えているB2Bマーケターは少なくありません。
HubSpotのLP作成機能を使えば、専門知識がなくてもドラッグ＆ドロップで本格的なLPを作成できます。無料プランでも基本機能が利用可能で、外注費を大幅に削減しながら自社で迅速にLPを展開できます。
この記事では、HubSpotでのLP作成方法を、初心者でも実践できるよう手順ごとに解説します。テンプレート選定からA/Bテストまで、成果を出すための実践的なポイントをご紹介します。
この記事のポイント:
- HubSpotのLP作成機能は無料プランでも利用可能（コンタクト100万件まで）
- ドラッグ＆ドロップエディタで専門知識不要、レスポンシブデザインに自動対応
- テンプレートは3種類（スターター/テーマ/カスタム）から選択可能
- A/Bテストで最大5バリエーションを比較し、効果的なLPを特定できる
- 外注相場（30〜60万円）と比較して、コストを大幅に削減可能
HubSpot LPの基礎知識（機能・プラン・できること）
(1) HubSpot LPとは？一般的なLPとの違い
HubSpotのランディングページは、コンバージョン獲得に特化した1ページ型のWebページです。一般的なLPと異なり、HubSpotのCRM機能と連携しているため、訪問者情報の自動記録やリードスコアリングなどが可能です。
HubSpot LPの主な特徴:
- ドラッグ＆ドロップエディタ: コーディング不要でLP作成が可能
- レスポンシブデザイン: PC・スマートフォン・タブレットに自動対応
- CRM連携: フォーム送信者の情報を自動的にコンタクトとして記録
- A/Bテスト機能: 最大5つのバリエーションを比較可能（有料プランで利用可能）
- AI機能: キャンペーン目標やターゲット情報を入力すると、AIがプロフェッショナルなコピーを自動生成（2024年追加機能）
(2) 無料プランと有料プランの機能差
HubSpotのLP作成機能は無料プランでも利用できますが、プランによって機能制限があります。
無料プラン（Marketing Hub Free）:
- LP作成機能あり（コンタクト100万件まで）
- HubSpotロゴが表示される
- 基本的なテンプレート利用可能
- フォーム作成・設置可能
有料プラン（Marketing Hub Starter以上）:
- HubSpotロゴを非表示にできる
- A/Bテスト機能（Professional以上）
- 高度な分析・レポート機能
- カスタムドメイン利用
- Smart CRMによる動的パーソナライズ（訪問者の現在地、デバイス、ライフサイクルステージに基づくコンテンツ表示）
※2024年11月時点の情報です。最新のプラン内容はHubSpot公式サイトでご確認ください。
(3) ドラッグ&ドロップエディタでできること
HubSpotのドラッグ&ドロップエディタは、専門知識がなくても直感的にLPを作成できるツールです。
主な機能:
- モジュールの追加・配置: テキスト、画像、CTA、フォーム、動画などのモジュールをドラッグ＆ドロップで配置
- テキスト編集: フォント、サイズ、色、配置などを簡単に変更
- 画像・動画の挿入: ファイルをアップロードまたはURLから挿入
- レイアウト調整: 列の追加、余白・パディングの調整
- プレビュー機能: PC・タブレット・スマートフォンでの表示を確認
(4) テンプレートの種類（スターター/テーマ/カスタム）
HubSpotでは3種類のテンプレートから選択できます。
スターターテンプレート:
- HubSpotが提供する標準テンプレート
- すぐに使える基本的なデザイン
- 初心者や迅速な立ち上げに最適
テーマテンプレート:
- 色やフォントなどのテーマ設定でカスタマイズ可能
- ブランドガイドラインに合わせた調整が可能
- 中級者向け
カスタムテンプレート:
- HTML + HubL（HubSpot独自のテンプレート言語）で完全カスタマイズ
- デザインの自由度が最も高い
- 開発者やデザイナー向け
注意点: 海外製テンプレートが多く、英文ではカッコ良くても日本語に置き換えると微妙なデザインになる場合があります。日本語での表示を確認しながら選定することが重要です。
LP作成の具体的な手順（テンプレート選択からプレビューまで）
(1) 【ステップ1】マーケティング > ランディングページを選択
HubSpotにログイン後、左側のメニューから「マーケティング」→「ランディングページ」を選択します。右上の「LPを作成」ボタンをクリックして作成を開始します。
(2) 【ステップ2】テンプレートを選択する
テンプレート選択画面が表示されます。用途に応じて以下を選択します:
- 資料ダウンロード用: フォームを中心としたシンプルなレイアウト
- セミナー・イベント申込用: 日時・場所を目立たせるレイアウト
- 製品紹介用: 画像・動画を多用したリッチなレイアウト
テンプレートをプレビューして、自社の目的に合ったものを選びましょう。
(3) 【ステップ3】エディタで編集する（テキスト・画像・CTA）
テンプレートを選択すると、ドラッグ＆ドロップエディタが開きます。
編集のポイント:
- 見出し: キーワードを含む魅力的な見出しに変更
- 本文: ターゲットの課題と解決策を簡潔に記載
- 画像: 自社のサービス・製品画像に差し替え
- CTAボタン: 「資料をダウンロード」「無料相談を申し込む」など、明確なアクションを促す文言に
左側のツールバーから「モジュールを追加」を選択すると、新しいセクションを追加できます。
(4) 【ステップ4】フォームを設置する
LPのコンバージョンポイントとなるフォームを設置します。
フォーム設置の手順:
- 左側ツールバーから「フォーム」モジュールをドラッグ＆ドロップ
- 既存のフォームを選択、または新規作成
- 入力項目を設定（名前、メールアドレス、会社名など）
- サンクスメッセージまたはリダイレクト先を設定
ポイント: 入力項目は最小限にすることでCVRが向上すると言われています。B2B向けでも「名前・メールアドレス・会社名」の3項目程度に絞るのが一般的です。
(5) 【ステップ5】設定・SEO・プレビュー
編集が完了したら、以下を設定します。
基本設定:
- ページ名（内部管理用）
- ページURL（スラッグ）
- ページタイトル（ブラウザタブに表示）
SEO設定:
- メタディスクリプション（検索結果に表示される説明文）
- OGP画像（SNSでシェアされた際の表示画像）
プレビュー: PC・タブレット・スマートフォンでの表示を確認し、レイアウト崩れがないかチェックします。
(6) 【ステップ6】公開する
右上の「公開」ボタンをクリックしてLPを公開します。公開後も編集・更新は随時可能です。
効果的なLPのデザイン・コンテンツ設計
(1) ファーストビューの設計（CVRを1.64倍にする設計）
ファーストビューは、LPを開いた際にスクロールせずに表示される領域で、訪問者の第一印象を決定します。
調査によると、ファーストビューからスクロールするユーザーは約半数のため、ファーストビューを完結型にすることでCVRが1.64倍になるという結果が報告されています。
ファーストビューに含めるべき要素:
- 魅力的な見出し: 訪問者の課題を端的に表現
- サブヘッド: 解決策や提供価値を補足
- CTAボタン: スクロールせずにアクション可能
- アイキャッチ画像: サービス・製品のイメージ
- 権威付け: 導入実績、受賞歴、メディア掲載実績など
(2) CTAボタンの配置と文言
CTAボタンはLPの最も重要な要素です。
効果的なCTAの特徴:
- 具体的なアクション: 「資料をダウンロード」「無料相談を申し込む」など明確な表現
- 色とサイズ: 背景色と対比する色で、十分な大きさ
- 複数配置: ファーストビュー・本文中・ページ最下部に配置
- マイクロコピー: CTAボタン周辺に「無料」「30秒で完了」などの補足情報
(3) 日本語環境での注意点（海外製テンプレートの調整）
HubSpotのテンプレートは海外製が多いため、日本語環境での調整が必要な場合があります。
よくある課題:
- 欧文フォントが日本語に合わない
- 行間・文字間が狭く読みにくい
- 英文では短いが日本語では長くなり、レイアウトが崩れる
対応策:
- テーマ設定でフォントを「游ゴシック」「メイリオ」などの日本語フォントに変更
- CSS追加で行間・文字間を調整（やや専門知識が必要）
- 日本語での表示を必ずプレビューで確認
(4) モバイル・レスポンシブ対応
HubSpotはレスポンシブデザインに自動対応しますが、モバイルでの表示も必ず確認しましょう。
モバイル最適化のポイント:
- フォントサイズが十分か（最低14px以上推奨）
- CTAボタンがタップしやすい大きさか（最低44×44px推奨）
- 画像が重くないか（読み込み速度に影響）
- フォーム入力が煩雑でないか
公開後の効果測定とCVR改善施策
(1) HubSpotで確認できる指標（訪問者数・CVR等）
HubSpotでは、LPの効果を詳細に測定できます。
主要指標:
- 訪問者数: LPへのアクセス数
- コンバージョン数: フォーム送信数
- CVR（コンバージョン率）: 訪問者数に対するコンバージョン数の割合
- 直帰率: 1ページだけ見て離脱した訪問者の割合
- 滞在時間: 平均的なページ滞在時間
CVRの目安: LP平均CVRは2〜3%と言われています。これを目安に、自社のLPがどの程度のパフォーマンスかを評価しましょう。
(2) A/Bテストの実施方法（最大5バリエーション）
HubSpotでは、1ページにつき最大5つのバリエーションでA/Bテストが可能です（Professional以上のプランで利用可能）。
A/Bテストの手順:
- LPの編集画面で「A/Bテストを作成」を選択
- バリエーションを作成（見出し、画像、CTAボタンの文言などを変更）
- トラフィックの配分を設定（各バリエーションに均等に配分するのが一般的）
- テスト期間を設定（最低2週間以上推奨）
- HubSpotが最も効果の高いバリエーションを自動抽出
A/Bテストの対象: 見出し、画像、CTAボタンの文言・色・配置、フォーム項目数など
(3) CVR改善の具体的施策
CVRを改善するための具体的な施策をご紹介します。
施策1: ファーストビューの完結型設計
- 前述の通り、CVRが1.64倍になる効果が報告されています
施策2: フォーム項目の最小化
- 入力項目を減らすことで、フォーム送信の心理的ハードルを下げる
- 必須項目は3〜5個程度に絞る
施策3: 社会的証明の追加
- 導入実績、顧客の声、受賞歴などを掲載
- 「導入企業3,000社以上」などの数値を明示
施策4: CTAボタンの改善
- 「送信」ではなく「資料をダウンロード」など具体的な文言に
- 「無料」「30秒で完了」などのマイクロコピーを追加
施策5: ページ表示速度の改善
- 画像サイズを最適化（圧縮ツールを利用）
- 不要なモジュールを削除
(4) 外注との費用比較（30-60万円 vs 自社作成）
LP制作を外注する場合、30〜60万円が相場と言われています。
外注のメリット:
- プロのデザイン・ライティング
- 戦略的な構成設計
- 複雑なカスタマイズが可能
HubSpot自社作成のメリット:
- 初期費用0円（無料プランの場合）
- 迅速な立ち上げ（数時間〜1日で完成）
- 修正・更新が自由にできる
- A/Bテストによる継続的な改善が容易
結論: 予算が限られている中小企業や、迅速にLPを展開したい場合は、HubSpotでの自社作成が適しています。一方、ブランディングを重視する大規模プロジェクトでは外注も選択肢となります。
まとめ：HubSpot LPで成果を出すために
HubSpotのLP作成機能を使えば、専門知識がなくても本格的なランディングページを作成できます。無料プランでも基本機能が利用可能で、外注費を大幅に削減しながら迅速にLPを展開できるのが大きなメリットです。
この記事のまとめ:
- HubSpotなら無料でLP作成可能（ドラッグ＆ドロップで簡単）
- テンプレートは3種類から選択、日本語環境での表示確認が重要
- ファーストビュー完結型設計でCVRが1.64倍に
- A/Bテストで継続的に改善し、CVR2〜3%を目標に
- 外注相場（30〜60万円）と比較して大幅なコスト削減が可能
次のアクション:
- HubSpotの無料アカウントを作成する
- テンプレートを選んで実際にLPを作成してみる
- ファーストビューに必要な要素（見出し・CTA・画像）を準備する
- 公開後は訪問者数・CVRを定期的に確認し、A/Bテストで改善を重ねる
HubSpotのLP作成機能を活用して、リード獲得を加速させましょう。