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

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

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

始める前に

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

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

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

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

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

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

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

行と列は要素のセクションにグループ化できます。要素をグループ化すると、背景スタイルをページの全体に適用できます。これらの要素をドラッグ＆ドロップしてページのレイアウトを再調整することもできます。ドラッグ＆ドロップエリアでページコンテンツを編集する方法の詳細をご確認ください。

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

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

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

タイポグラフィー

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

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

ボタン

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

注：HubSpotでは、［デザイン］タブの設定に基づいて、一貫した色、フォント、およびスタイルを維持することをお勧めします。左側のパネルの［オプション］タブでそれぞれのモジュールの既定のスタイルを上書きできます。

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

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

ページ設定を編集する

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

• 内部ページ名：HubSpotユーザーのみが表示するページ名。訪問者には表示されません。
• ページタイトル：ページが読み込まれると訪問者のブラウザーの最上部のタブに表示されるタイトル。
• ページURL：ページのURL。訪問者がこのページに移動すると、ブラウザー内のURLバーにこのURLが表示されます。公開後でも、ページURLを編集できます。
• メタディスクリブション：検索結果で、ページタイトルの下に表示されるコンテンツ。
• サムネイル画像：ソーシャルメディアでのページ共有時に特定のサムネイル画像を使用するには、このスイッチをクリックしてオンに切り替えます。［アップロード］をクリックしてコンピューターから画像を選択するか、［画像を参照］をクリックしてファイルツールから画像を選択します。

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

ページを公開する前に、右上にある［プレビュー］をクリックして、ページがデスクトップまたはモバイルデバイス上でどのように表示されるかをテストします。ページプレビューで問題がないことを確認したら、右上にある［公開］をクリックします。