HubSpotでのLP制作を、紙媒体のデザイナーが1年間やってみて分かったこと

こんにちは、みなさん！
私は以前は紙媒体のデザイナーとして活動していましたが、1年前からは新たなチャレンジとしてHubSpot（ハブスポット）を使ったLP（ランディングページ）制作に取り組んでいます。
今回は、私がこの1年間で学んだことを通じて、HubSpotのLP制作におけるリアルな感想をお伝えしたいと思います。

1 HubSpotって何？それでLPを制作、運用するメリットとは？
2 HubSpotのランディングページ(LP)作成機能でできること
3 LP（ランディングページ）作成時に気をつけるべき要素
- 3.1 ユーザビリティとモバイルフレンドリーなデザインの考慮
- 3.2 A/Bテストとデータ分析による改善の継続
4 まとめ

HubSpotって何？それでLPを制作、運用するメリットとは？

デジタルマーケティングの世界でよく耳にする「HubSpot」。
しかし、具体的に何ができるのか、どのようなメリットがあるのかを知らない方も多いのではないでしょうか。
この記事では、HubSpotの基本的な機能から、ランディングページ（LP）の制作・運用に至るまでの流れと、実際に触ってみて思った感想を書き記したいと思います。

HubSpotとは？

まず、HubSpotとは何でしょうか？
HubSpotは、マーケティング、セールス、カスタマーサービスなどの機能を統合したオールインワンのMAツール。

Web上で操作するシンプルなインターフェースと多彩なツールを通じて、顧客との関係を強化し、ビジネスの成長を支援することができます。
要は色々なツールをいったりきたりせずに、1つのツールで一貫して作業に集中できるシステムということですね。自分は最初、色々できすぎて覚えるのが大変でした。

HTMLの知識がなくてもLPの作成、修正、更新作業がカンタン

HubSpotを使用する最大の利点は、効率的で直感的なLP制作。
テンプレートを選び、要素をドラッグ＆ドロップしてカスタマイズするだけで、魅力的なLPが短時間で作成できます。
これにより、デザイナーとしてのクリエイティブな側面に集中できるというのが謳い文句。

ソースコードを打ち込むスタイルのWebサイトづくりと比べて、かなり直感的です。
一応、HTMLやCSSを使って細部までデザインを調整することも可能ですが、
私はhtmlはあまり詳しくないので、Web担当に相談してコードをコピペして解決していました。

リード管理（CRM）や追客用のメール配信などと連携

HubSpotの魅力の一つは、さまざまな機能をスムーズに連携させることができる点です。
広告配信からLP（ランディングページ）でのリード獲得までをHubSpotでまとめて管理できるのが大きな特徴です。
さらに追客用のメール配信など、ビジネスの重要な要素も管理が可能。
顧客の履歴や対応状況を簡単に確認できるため、より個別化されたアプローチが可能となります。結構細かい情報やアクセス経路が見られるのでちょっと怖いです笑

メールの解析結果 — 誰が、いつ、どこで、何をクリックしたかなど事細かに追えてしまう・・・

LPを置くWebサーバー保守もHubSpot側が提供。

面倒と言えるWebサーバーの保守をHubSpot側が提供してくれることも嬉しいところ。
これにより、ユーザーはサーバーの管理やセキュリティ対策に時間を割かれることなく、LPの制作や運用に集中することができます。HubSpotは世界120か国以上、12万社以上の企業で導入されているクラウドサービス。
大規模システムに対応したデータ保護やセキュリティ対策も万全です。
さらに弊社では有料プランを導入しているので、チャットによるカスタマーサービスを受けられるのですが、ちょっとした疑問点も丁寧に調べてもらい、解決してくれます。これが非常に迅速な対応をしてくれるので非常に助かっています。神対応です。

HubSpotのランディングページ(LP)作成機能でできること

1. テンプレートをベースに作成

『元々あるテンプレートをベースにだれでもハイクォリティなLPを作成可能』
とあるんですが、テンプレートの大半が海外でつくられたものであり、それは英文だとカッコイイデザインなんですが、日本語に置き換えると、とたんに微妙なデザインになってしまう印象でした。
そしてテンプレートの色を変えるにはワードプレス同様『子テーマ』というものがあり、子テーマをエディットして色を変える必要がある。
子テーマは5個までしか作成できないという縛りがありますが（このあたりはプランによって変化いたします）、私自身はこの5つでなんとか運用できています。LPを沢山つくるなら管理をちゃんとしないといけないかもしれません。

2. フォームが自由自在につくれる

HubSpotの機能のうち、弊社でもっとも活用されているのが「フォーム」機能。
名前、住所、メールは元より、プルダウンやチェックボックスによるアンケート的なのまで自由に作れてしまいます。ユーザーによりフォームを送信された時のメール返信や、こちらへの通知、セールスフォースへの連動等が自動でできてしまいます。
フォームサイトをつくっても良いですが、コードを吐き出させてワードプレスなど外部のWeb制作ツールへ組み込むことも可能です。
個人的にはこのフォーム機能が「HubSpot」の真骨頂じゃないかと思っています。
質問事項の設置も自由自在だし、メールの自動返信設定や解析データの蓄積などまさに「これだ‼︎」と思える機能だと思います。

テンプレートを選択する画面 — 様々な項目を自由自在に追加したり、削除できる。素晴らしいです。

3.無制限につくれる

基本的にはストレージは無制限で作成可能です。
現在、弊社では増えてきたLPやフォームをいかに管理していくかが課題となっています。

4.テスト機能で改善点の洗い出し

LPは一度制作すれば終わりではなく、コンバージョン率を高めるページにするために改良していくことが重要ですよね。
HubSpotでは2つのLPを作成し、それをABテストしてグラフなどでわかりやすく提示してくれます。これやってみるとついつい気になって、数時間毎にチェックしていました笑
結局はいいとこ取りでAとBの折衷案でC案を新たに作成といった感じになることが多いです。紙媒体では広告を出してしまえば後戻りはできませんが、リアルタイムで無限に修正ができてしまうWeb媒体の強みですね。

LP（ランディングページ）作成時に気をつけるべき要素

ランディングページ（LP）は、ウェブサイト訪問者をリードに変換するための重要なツールです。
そのため、ただページを作成するだけではなく、その効果を最大限に引き出すために、いくつかの要素に注意を払う必要があります。

目的に合わせたコンテンツとコール・トゥ・アクションの設計
LP作成時には、まず目的とターゲットを明確にすることが重要です。その上で、見た目の美しさだけでなく、ユーザビリティやコンテンツの質にも注力しています。また、訪問者にクリックさせ、お問い合わせとうに誘導するCTA（コール・トゥ・アクション）を設置することも忘れずに。さらに、SEO対策も重要な要素の一つですので、キーワードを適切に使用し、検索エンジンでのランキング向上を目指しましょう。
最後に、作成したLPは定期的に分析・改善を行い、より効果的なページに仕上げていくことが大事だと思います。
作成時、あるいは作成後も解析ツールで見直しながら修正もできるのがHubSpotの最大の強みかと思います。

※CTA（Call To Action）
ウェブサイトやメール、広告などに設置される「行動を促す」ボタンやリンクのことを指します。例えば、「購入する」「詳細を見る」「ダウンロードする」など、ユーザーに何らかの行動を取らせるための指示がCTAです。これは、ユーザーがサイトを訪れた際に何をすべきかを明確に示し、行動をガイドする役割を果たします。また、CTAはコンバージョン率を上げるための重要な要素でもあります。

ユーザビリティとモバイルフレンドリーなデザインの考慮

ユーザビリティとは、製品やサービスがユーザーにとってどれだけ使いやすいかを示す指標です。
ランディングページ作成時には、訪問者が目的の情報を簡単に見つけられるような構成や、直感的に操作できるデザインが求められます。
また、モバイルフレンドリーなデザインも重要な要素の一つです。現在、インターネットの閲覧はスマートフォンから行われることが多く、ランディングページもモバイルで閲覧されることが前提となっています。
そのため、スマートフォンの小さな画面でも情報が見やすく、操作しやすいデザインが求められます。
これらの要素を考慮しながらランディングページを作成することが、訪問者の満足度を高め、コンバージョン率の向上につながります。
HubSpotでは『PC』、『スマートフォン』と別々に編集できるようになっています。
最近は慣れてきたので、つくる段階で「スマホならこう見えるはず」というのを頭におけるようになりました。
PCでチェック→スマホでチェック→タブレットでチェック
といった確認も繰り替えし作業しています。

A/Bテストとデータ分析による改善の継続

HubSpotはA/Bテストを通じて異なるバリエーションを比較し、どの要素が最も効果的かを明らかにすることで、コンバージョン率やクリック率の向上が図れます。
作った本人からするとこまめにチェックしてしまうA/Bテストの行方笑

まとめ

HubSpotを使ってLPやメルマガ、フォームサイトを作って一年。
デザインの部分ではかなりクセがあり大変苦労しました。
フォントが自由に選べないのと、図形や画像の配置等融通がききずらく、どうしようもないときはIllustratorやPhotoshopで図版や画像化して配置しています。
マージンやスペース、細かいところの調整が難しいので『デザインを突き詰める』という話では、完璧とは言えない部分が存在する感じです。
それでもHTMLを理解している人であれば、ソースをちょっと弄って対処できると思います。
デザインだけでいうとワードプレス、Wix、Canvaといったサービスには及びませんが、ビジネスツールとしてトータルで考えると非常に有効なMAツールではないかと思います。
なによりフォームがすばらしいです‼︎

タクトメルマガ — 今月のタクトのメルマガです。ハブスポットでデザインし、自動配信しています。

結論、ある程度配色やデザインセンス、イラストレーターやフォトショップのデザインツールに力を借りなければ、よいデザインは難しいかなと思ったHubSpotのLP作成。

もしお困り、もしくはHubSpotでの運用を考えているのであれば、弊社のデザインチームへ相談してみてください。