お客さまへの大切なお知らせ:膨大なサポート情報を少しでも早くお客さまにお届けするため、本コンテンツの日本語版は人間の翻訳者を介さない自動翻訳で提供されております。正確な最新情報については本コンテンツの英語版をご覧ください。
Landing Pages

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

更新日時 2020年 4月 29日

対象製品

Marketing Hub  Starter, Professional, Enterprise
CMS Hub  Professional, Enterprise
Marketing Hub Basic(旧製品)

スターターテンプレートを使用すれば、ウェブサイト訪問者にコンテンツオファーを提供するランディングページをすばやく簡単に作成できます。訪問者のコンタクトの詳細を収集し、コンテンツオファーを配信するフォローアップEメールを送信します。ランディングページをセットアップし、スターターテンプレートでページデザインをカスタマイズする方法を確認してください。

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

始める前に

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

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

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

starter-template-create-page

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

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

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

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

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

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

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

edit-starter-theme-on-page

タイポグラフィー

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

ボタン

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

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

次のステップ

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

/jp/landing-pages/edit-a-page-using-a-starter-template