スターターテンプレートを使用したランディングページの作成

スターターテンプレートを使用すれば、ウェブサイト訪問者にコンテンツオファーを提供するランディングページをすばやく簡単に作成できます。この記事では、ランディングページをセットアップし、スターターテンプレートでページデザインをカスタマイズする方法について説明します。

注：スターターテンプレートは、スマートコンテンツ、カスタムモジュール、リッチ テキスト モジュール内のソースコードへのアクセスをサポート していません。これらのテンプレートは、テンプレートスワッピングやヘッダーHTMLへのアクセスなどの高度なオプションもサポートしていません。

動画チュートリアルでスターターテンプレートを使用してランディングページを作成する方法については、HubSpotアカデミーのこのレッスンをご覧ください。

始める前に

• ランディングページでフォームを送信した訪問者に提供するオファーを作成します。これは、ガイド、リソース、またはウェビナーです。ヒントをお探しの場合は、コンテンツオファーの詳細を確認して、いくつかの例を参照してください。
• フォームを作成してコンタクトから情報を収集します。必要に応じて、新しいカスタムプロパティーを作成して、新しいタイプの情報を収集します。
• フォームのフォローアップEメールをセットアップして、ランディングページでフォームを送信するコンタクトにこのコンテンツオファーを配信します。

スターターテンプレートを使用したランディングページの作成

スターターテンプレートを使用して新しいランディングページを作成するには、次の手順を実行します。

• HubSpotアカウントにて、［マーケティング］ > ［ウェブサイト］ > ［ランディングページ］の順に進みます。
• 右上の ［作成］ > ［ランディングページ］をクリックします。
• 左のサイドバーメニューで、［すべてのテンプレート］をクリックします。
• Starterタグを使用してラベル付けされたテンプレートの上にカーソルを置き、右上の［プレビュー］をクリックします。

• このテンプレートを使用してページを作成するには、右上の［テンプレートを使用］をクリックします。

ドラッグ＆ドロップエリアでのコンテンツの編集

スターターテンプレートには、ウェブサイトコンテンツのブロックであるモジュールが含まれています。これらのモジュールは、横の行または縦の列で配置できます。

行と列は要素のセクションにグループ化できます。要素をグループ化すると、背景スタイルをページの全体に適用できます。これらの要素をドラッグ＆ドロップしてランディングページのレイアウトを再配置することもできます。

ドラッグ＆ドロップエリアでページコンテンツを編集する方法の詳細を確認してください。

フォント、色、およびボタンのカスタマイズ

スターターテンプレートの既定のスタイルをカスタマイズするには、左側のパネルで［デザイン］タブをクリックします。ページの特定の行、列、またはセクションの背景色または画像をカスタマイズすることもできます。

タイポグラフィ

• 本文テキスト：ページ本文のフォントや、フォントサイズ、フォントカラーをカスタマイズします：
  • ［本文テキスト］ドロップダウンメニューをクリックし、フォントを選択します。
  • 矢印キーをクリックしてフォントサイズを選択します。
  • カラーバブルをクリックしてフォントの色を設定します。カスタム色を設定するには、［詳細設定］タブをクリックし、16進数の値を入力します。
• 見出し：モジュールに見出しがある場合、そのフォントやフォントの色をカスタマイズします。
  • ［見出し］ドロップダウンメニューをクリックし、フォントを選択します。
  • カラーバブルをクリックしてフォントの色を設定します。
• リンクテキスト：ページ上のリンクに適用するフォントや色をカスタマイズします。
  • ［リンクテキスト］ドロップダウンメニューをクリックし、フォントを選択します。
  • カラーバブルをクリックしてリンクの色を設定します。
  • スタイリングボタンまたはドロップダウンメニューをクリックし、リンクテキストに適用するスタイルを選択します。これにはページ上でリンクにアンダーラインを適用するかどうかも含まれます。
  • 訪問者がページを操作する際のリンクの表示方法をカスタマイズするために、リンクの色と透明度をカスタマイズすることができます。
    • リンクをマウスポインタを合わせた時の色：訪問者がページのリンクにマウスポインタを合わせた際の、リンクテキストの色と透明度をカスタマイズします。

• • • アクティブリンクの色：リンクをクリックする前の、既定のリンクテキストの色と透明度をカスタマイズします。
    • 訪問済みリンクの色：訪問者がリンクをクリックした後の、リンクテキストの色と透明度をカスタマイズします。

ボタン

• ボタンの背景色：ボタンの背景色に適用する色をカスタマイズします。
  • 16進数の値を入植するかカラーバブルをクリックして色を選択します。
  • パーセンテージ値を入力するか、矢印キーをクリックしてボタンの背景色の透明度を設定します。
• ボタンテキストの色：ページ上のボタンのテキストに適用する色。
  • 16進数の値を入力するかカラーバブルをクリックしてテキストの色を選択します。
  • パーセンテージ値を入力するか、矢印キーをクリックして、ボタンのテキストの透明度を設定します。
• ボタンの角の半径：値を入力するか、スライダーをドラッグして、フォームボタンの形状をカスタマイズします。入力値が大きいほど、ページ上のボタンの角が丸みを帯びることになります。入力値が０の場合、ボタンは長方形になります。

注意：［デザイン］タブの設定に基づいて、一貫した色、フォント、およびスタイルを維持することがベストプラクティスです。 何らかの理由で、ページ上の特定の要素の既定のスタイルを上書きする場合は、左側のパネルの［オプション］タブでモジュールの既定のスタイルを上書きできます。

次のステップ

これで、ランディングページを他者と共有する準備ができました。

• このランディングページにリンクするCall-to-Action (CTA)を作成します。
• マーケティングキャンペーンでCTAを共有します。
  • サブスクライバーにCTAを含むマーケティングEメールを送信します。
  • ブログ記事にCTAを掲載します。