Become a HubSpot power user — join us for HubSpot Training Day 2017.

ウェブサイトページを作成および編集する方法

更新日時 July 1, 2016

必要条件

ソフトウェア: HubSpot マーケティング
サブスクリプション: Basic, Pro, & Enterprise
アドオン: ウェブサイトページ

ウェブサイトコンテンツエディターを使って、実際のウェブサイトページのコンテンツを作成したり編集したりできます。

HubSpotがホストするウェブサイトページを作成するには、以下の手順に従ってください。

自社のウェブサイトページに移動する

HubSpotダッシュボードで[Content(コンテンツ)] > [Website(ウェブサイト)]の順に移動します。

HubSpot Help article screenshot

[Create a new website page(新規ウェブサイトページを作成)]をクリックする

[Create a new website page(新規ウェブサイトページを作成)]ボタンをクリックします。

HubSpot Help article screenshot

ページのテンプレートを選択する

次に、ページの構成の土台となるテンプレートを選択します。自分のアカウント内の既存のテンプレートを探したり、HubSpotマーケットプレースからテンプレートを購入したりすることができます。また、モックアップをテンプレートレイアウトに変換して新しいテンプレートレイアウトを作成することもできます。モックアップをテンプレートレイアウトに変換する方法については、ここをクリックしてください。

使用するテンプレートが決まったら、そのテンプレートをクリックし、新しいウェブサイトページに名前を付けて、[Create(作成)]をクリックします。

HubSpot Help article screenshot

コンテンツをサイトページに追加する

ページを作成したら、[Edit(編集)]画面が表示されます。ここで、コンテンツの追加または編集を開始できます。 

ページのモジュール内のコンテンツを編集するには、そのモジュール上にポインターを合わせ、薄い灰色のシェードと鉛筆アイコンが表示されたところで、モジュール内をクリックします。そのモジュールが編集可能な状態になります。下の例は、ウェブサイトページ上のロゴモジュール、ヘッダーモジュール、リッチテキストモジュールを編集しようとしているところです。

HubSpot Help article screenshot

ページ上のモジュールを編集するには、ページ左側の鉛筆アイコンをクリックする方法もあります。このアイコンをクリックすると、ページ上の編集可能なすべてのモジュールが表示されます。個々のモジュールをクリックすると、そのモジュールを編集するためのポップアップウィンドウがエディター上に表示されます。

HubSpot Help article screenshot

レイアウトにモジュールを追加する(フレキシブルカラム)

フレキシブルカラムを使用しているテンプレートを選択した場合、左側に+記号のアイコンが表示されます。ここから、モジュールタイプをドラッグアンドドロップでページレイアウトに追加できるセクションが表示されます。

注:テンプレートにフレキシブルカラムが含まれていない場合、左側に+記号アイコンは表示されません。

HubSpot Help article screenshot

ページ設定を編集する

ページ設定を編集するには、ウェブサイトページエディター上部の[Settings(設定)]タブをクリックします。
HubSpot Help article screenshot

[Settings(設定)]画面の上部は、[Basic Info(基本情報)]セクションです。これは、検索エンジンとブラウザ用の基本ページ情報を追加できるセクションです。このセクションでは、次の情報を追加できます。

1.Page name(ページ名) - ウェブサイトページの内部名です。ページを初めて作成するときにページ名を付けていますが、ここで編集することができます。このページ名は社内で使用するためのものなので、好きな名前を設定できます。ウェブサイトの訪問者には表示されません。
2.Page title(ページタイトル) - ブラウザーがページを読み込む際にブラウザーの一番上のバーに表示されるフレーズです。
3.Page URL(ページURL) - ウェブサイトのURLです。必要に応じて、ドロップダウンメニューからドメインを変更できます。
4.Meta description(メタディスクリブション) - 検索結果上で、ページタイトルの下に表示されるコンテンツです。
5.Campaign(キャンペーン) - このドロップダウンメニューからキャンペーンを選択することにより、ウェブサイトページをHubSpotキャンペーンに関連付けることができます。[Add new(新規追加)]ボタンをクリックすると、新しいキャンペーンを作成できます。
HubSpot Help article screenshot

[Basic Info(基本情報)]セクションの下の[Advanced Options(詳細オプション)]セクションには、ページ設定、スタイル設定、テンプレート設定が含まれています。

[Edit Head HTML(ヘッドHTMLを編集)]または[Edit Footer HTML(フッターHTMLを編集)]のいずれかのリンクをクリックして、生のHTMLスニペット、埋め込みコード、またはトラッキングJavaScriptを、ページのタグまたは

タグ内に追加できます。ポップアップウィンドウにコードを挿入したら、[Save(保存)]をクリックします。 
タグ内に追加できます。ポップアップウィンドウにコードを挿入したら[Save(保存)]をクリックします。

 

HubSpot Help article screenshot

ここで、ページのパスワード保護も設定できます。このオプションは、次のような場合に便利です。

  • 社内スタッフ専用のページを作成できます。営業チームしかアクセスできない営業販促資料やマーケティング資料をここに保管します。
  • ウェブサイト上に「クライアント専用」ページを作成して、テンプレートやクライアント専用の資料をここに置くことができます。
  • リセラーやパートナーが新製品の販売前に詳細資料を手に入れることができる専用ページを作成できます。

このページのパスワードを有効にするには、[Password protect this page(このページをパスワード保護)]チェックボックスをオンにして、表示されるテキストフィールドにパスワードを入力します

HubSpot Help article screenshot

ページの有効期限を設定するかどうかも選択できます。この機能は、オファーや製品を有効期限付きで提供するサイトを作成する場合に役立ちます。[Set page expiration and date(ページの有効期限日時を設定)]チェックボックスをオンにして、有効期限の日時を選択し、有効期限が切れたときのリダイレクト先を指定します。

HubSpot Help article screenshot

[Style Settings(スタイル設定)]セクションでは、以下の内容を編集できます。

  • Primary CSS File(プライマリCSSファイル) - 設定されているプライマリCSSファイルが表示されます。ドロップダウンメニューから、有効または無効を選択するか、デフォルトを使用できます。
  • Domain Stylesheets(ドメインスタイルシート) - ドメイン全体で使用しているCSSファイルが表示されます。ドロップダウンメニューから、有効または無効を選択するか、デフォルトを使用できます。
  • Template Stylesheets(テンプレートスタイルシート) - このページのテンプレートに適用されているCSSファイルが表示されます。ドロップダウンメニューから、有効または無効を選択するか、デフォルトを使用できます。
  • Page-specific Stylesheets(ページ固有のスタイルシート) - このページにのみ適用されるCSSファイルが表示されます。このページに適用したいCSSファイルがある場合は、[+ Add stylesheet(+スタイルシートを追加)]をクリックします。
HubSpot Help article screenshot

[Template Settings(テンプレート設定)]セクションでは、[Swap template(テンプレートを交換)]を選択して現在のテンプレートを変更したり、[Edit template(テンプレートを編集)]を選択して、テンプレートのレイアウト内を表示してテンプレートを編集したりすることができます。このセクションの右側では、ページが使用している現在のテンプレートの名前やプレビューを確認できます。

HubSpot Help article screenshot

SEO最適化

左側の棒グラフアイコンをクリックすると、SEO最適化セクションに移動します。ここから、このページのキーワードをテキストフィールドに入力して、[Select keywords(キーワードを選択)]をクリックします。この下には、To DO項目があります。ページを改善するために変更できる内容が示しています。以下のスクリーンショットに、To Do項目の例が示されています。

HubSpot Help article screenshot

ページをプレビューする

左側のメニューで目のアイコンをクリックすると、プレビューセクションが表示されます。ここから以下のことを実行できます。

  • Device preview(デバイスのプレビュー) - タブレット、携帯など、該当するアイコンをクリックして、ページがそのデバイスで表示される状態をプレビューできます。
  • Smart Preview(スマートプレビュー) - [Preview page as speicific contact(指定のコンタクトとしてページをプレビュー)]チェックボックスをオンにして、ドロップダウンメニューからコンタクトを選択します。このオプションにより、特定の訪問者が表示しているようにページを表示できます。このオプションは、テストするページでスマートコンテンツが使用されている場合に有効です。
  • Shareable preview(共有プレビュー) - このボタンをクリックすると、(ページがまだ公開されていない場合でも)同僚と共有できるライブプレビューリンクが提供されます。 
HubSpot Help article screenshot

ページを公開またはスケジュールを設定する

コンテンツの編集が終了し、検索エンジン向けに最適化でき、プレビュー画面に満足したら、[Publish or Schedule(公開またはスケジュール)]タブに移動します。

ここから、[Publish now(今すぐ公開)]または[Schedule for later(後の予定としてスケジュール)]を選択できます。各オプションのラジオボタンをクリックしたら([Schedule for later(後の予定としてスケジュール)]を選択した場合、スケジュール日時を選択する必要があります)、右上の青いボタン[Schedule(スケジュール)]または[Publish(公開)]をクリックします。 

HubSpot Help article screenshot

前の記事

Measuring Your Performance Project

次の記事