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

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

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

ランディングページを作成して公開する方法を動画チュートリアルで学ぶには、HubSpotアカデミーの次の無料レッスンをご覧ください。

• Marketing Hub Starterでランディングページを導入する
• HubSpotで無料のランディングページを作成する

始める前に

• ページ公開にドメインが接続されていることを確認してください。無料のランディング ページ ビルダーを使用している場合、すぐに公開できる無料のHubSpotドメインを利用できます。
• ランディングページでフォームを送信した訪問者に提供するオファーを決定します。ガイド、ニュースレターのサブスクリプション、ウェビナーなども提供でます。コンテンツオファーの詳細といくつかの例をご確認ください。
• フォームを作成してコンタクトから情報を収集します。必要に応じて、カスタムプロパティーを作成して新しい情報を収集します。
• フォームを送信したコンタクトにコンテンツオファーを配信するために、フォームのフォローアップEメールをセットアップします。

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

スターターテンプレートを使用して新しいランディングページを作成するには：

• HubSpotアカウントにて、［マーケティング］ > ［ウェブサイト］ > ［ランディングページ］の順に進みます。
• 右上の［作成］>［ランディングページ］をクリックします。
• 左のサイドバーメニューで、［すべてのテンプレート］をクリックします。
• 上部にある［ソースで絞り込む］ドロップダウンメニューをクリックし、［スターター］を選択します。
• テンプレートの上にカーソルを重ねて、右上の［プレビュー］をクリックします。

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

ページコンテンツを編集する

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

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

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

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

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

タイポグラフィー

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

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

ボタン

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

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

検索エンジン向けにページを最適化する

上部のナビゲーションで、［最適化］タブをクリックしてSEOオプティマイザーツールを開きます。ここで、検索エンジンでのコンテンツのパフォーマンスを改善するための推奨事項を確認できます。

ページ設定を編集する

［設定］タブをクリックして、ページの詳細をカスタマイズします。

• 内部ページ名：内部ページ名は、最初にページを作成した時点、またダッシュボードで参照された時点で追加された名前です。訪問者には表示されません。
• ページタイトル：ページが読み込まれる時点でウェブブラウザーの一番上のタブに表示されるタイトル。
• ページURL：訪問者がこのページに移動すると、ブラウザー内のURLバーにこのページURLが表示されます。ページURLのコンテンツスラッグをカスタマイズできます。
• メタディスクリブション：ページタイトルの下で検索結果に表示されるコンテンツ。
• サムネイル画像：ソーシャルメディアでページが共有される際に特定の画像をサムネイル表示するには、このスイッチをクリックしてオンに切り替えます。［アップロード］をクリックし、コンピューターから画像を選択します。

ページをプレビューして公開する

ページを公開する前に、右上にある［プレビュー］をクリックして、ページがモバイルデバイス上でどのように表示されるかをテストします。ページプレビューで、パーソナライズやスマートコンテンツが訪問者にどのように表示されるかもテストできます。

モバイルデバイス上でのページコンテンツの表示をカスタマイズするには、左上にあるmobile edi［モバイル用に編集］アイコンをクリックします。

ページプレビューで問題がないことを確認したら、右上にある［公開］をクリックします。