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

ドラッグアンドドロップエディタ(BETA)を使用してページを作成・編集する

更新日時 2019年 11月 5日

In Beta

対象製品

Marketing Hub  Starter

ドラッグアンドドロップエディアを使用すれば、スタイルシートやテンプレートへアクセスせずに、Hubspotページのレイアウトやスタイルを設定したりカスタマイズしたりすることができます。特定のドメインでページをホストするには、ドメインをHubspotに接続します

  • HubSpotのアカウントから、[マーケティング]> [ランディングページ]に移動します。
  • 右上の[作成]をクリックします。
  • テンプレートにカーソルを合わせ[プレビュー]をクリックします。
  • ページのテンプレートを選択するには、[このテンプレートを使用する]をクリックするか、[戻る]をクリックしてオプションをさらに表示します。
  • ページ名を入力し、続けて[ページを作成]をクリックします。

コンテンツ

ドラッグアンドドロップテンプレートは水平方向の行または垂直方向の列にグループ化できるモジュールから構成されています。これらのモジュール、行、または列は、要素のセクションにグループ化することができます。[コンテンツ]タブで、ページを構成する要素のコンテンツや、間隔、レイアウトをカスタマイズできます。

  • ページにモジュールを追加するには、[追加]タブからクリックして左側のパネルにドラッグします。モジュールが配置される場所は、青いラインで示されます。

add%20module%20to%20dnd%20template

  • モジュールや、行、列、セクションを移動するには、動かしたい[要素] を配置したい場所までドラッグして離します。
  • セクション内の行の中の要素の幅を調整するには、モジュールの間の垂直方向の[区切り]をクリックしてドラッグします。
  • 左上の[矢印アイコン]をクリックすれば、元に戻したり、やり直すことができます。

edit%20layout%20of%20dnd%20template2

  • モジュールをカスタマイズ、複製、または削除するには、右側のプレビューにカーソルを合わせます。
    • モジュールのコンテンツを編集するには、 edit 鉛筆アイコンをクリックします。左側のパネルでコンテンツや画像などに変更を加えます。リッチテキストモジュールもページ右側のプレビューで編集できます。
    • モジュールのスタイルや位置を変更するには、styles筆アイコンをクリックします。
    • 左側のパネルでは、モジュールの背景色や形、ボーダースタイルなどをカスタマイズできます。利用できるスタイルオプションはモジュールタイプによって異なります
    • 同じ行内にモジュールのコピーを作成するには、duplicate 複製アイコンをクリックします。
    • ページからモジュールを削除するには、 delete ゴミ箱アイコンをクリックします。
  • 複数の要素を編集するには、行、列、またはセクションにカーソルを合わせ、[ドロップダウンメニュー]をクリックし、そして[スタイル(要素)]を選択します。
    • 「背景」タブで、[背景タイプ] を選択し、その設定をカスタマイズします。プレビューは変更を加えるたびに更新されます。
      • なし:これを選択すると、背景の色や画像が削除されます。
      • 色:これを選択すると、背景は単色になります。背景色の値と透明度を入力します。
      • 画像:これを選択すると、背景は画像になります。既定でテンプレートに画像がある場合は、[置換]を選択して画像を変更します。[アップロード]をクリックして、パソコンからイメージを取り込むか、[画像を閲覧する]をクリックして、ファイルから画像を選択します。
      • グラデーション:これを選択すると、背景は2色のグラデーションになります。グラデーションの方向を設定します。16進数の値を入力し、各色の透明度を設定します。
    • [間隔]タブをクリックし、行、列、またはセクションのサイズと間隔を変更します。
      • ページのこの要素のコンテンツの最大幅を入力します。
      • [パディング][余白]タブをクリックして、コンテンツ周辺の間隔を変更します。パディングはページの要素を取り囲む間隔を制御します。余白はコンテンツと要素との境界線の間隔を制御します。
  • 既存の要素のコピーを作成するには、要素にカーソルを合わせドロップダウンメニュークリックし[要素を複製する]を選択します。
  • ページから要素を削除するには、要素にカーソルを合わせドロップダウンメニューをクリックし[要素を削除する」を選択します。

ページの編集中、変更は自動的に保存されます。前回のリビジョンを復元したい場合:

  • 画面左上の[自動保存]にカーソルを合わせます。
  • 表示された警告の[リビジョン]をクリックして、ページで以前に保存されたバージョンを表示します。
  • 左のパネルで、データとタイムスタンプに基づき復元したいリビジョンを選択します。リビジョンのプレビューが右側に表示されます。
  • 選択したリビジョンを復元するには、[このバージョンを復元する]をクリックします。代わりに現在のバージョンに戻るには、[戻る]をクリックします。

デザイン

既定のテキストの書式設定、ページ全体のフォームやボタンのスタイルを変更できます:

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

設定

ページ設定をカスタマイズして、内部的および訪問者のウェブブラウザに表示されるページ詳細を編集します。

  • [設定]タブをクリックしてページ詳細をカスタマイズします。
    • 内部ページ名:内部参照用のページ名。ページダッシュボード上にこの名前が表示されます。
    • ページタイトル:ブラウザのタイトルバーおよび検索結果に表示されるページタイトルです。
    • ページURL:ページのURLをカスタマイズします。ウェブサイトのドメインをHubSpotに接続する方法を学びます。
    • メタディスクリプション:検索結果ページから検索者にページの内容がわかるように、メタディスクリプションを追加します。
    • アイキャッチ画像:ソーシャルメディア経由でページが共有されたときにプレビューでレンダリングされるアイキャッチ画像を追加します。

最適化

[最適化]タブをクリックして、SEO(検索エンジン最適化)のために改善できるページのコンテンツの提案を表示します。SEOのベストプラクティス、およびこれらのヒントを実践することがサイトへのオーガニックトラフィックに与える影響についての詳細を確認してください。

プレビュー

訪問者に表示されるページをプレビューを確認する方法。

  • 右上の[プレビュー]をクリックすると、プレビューモードが開きます。更新済みのコンテンツのプレビューが右側に表示されます。
    • デバイスタイプ:デスクトップでの表示方法や、モバイルやタブレットデバイス上での異なる方向での表示方法を確認するためのデバイスタイプを選択します
    • 特定のコンタクトとしてプレビュー:パーソナライゼーションをテストするには、[特定のコンタクトとしてプレビュー]ドロップダウンメニューをクリックして、CRMから[コンタクト]を選択します。
    • 共有プレビュー:[新しいウィンドウで開く]をクリックし、ブラウザウィンドウで、Eメールの共有バージョンを表示するか、[コピー]をクリックして、プレビューリンクを共有用にクリップボードにコピーします。
  • コンテンツエディタに戻るには、右上の[プレビューモードを終了] をクリックします。

公開

ページを公開するには、右上の[公開]をクリックします。

/jp/cms-general/create-and-edit-pages-with-the-drag-and-drop-editor