サイトのナビゲーションメニューの設定方法

更新日時 July 1, 2016

必要条件

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

HubSpotを使ったサイトページを初めて構築するときには、検討しておくことが重要な点がいくつか存在します。

  • ウェブサイトの一部としてどのようなページを含めるか?
  • ウェブサイトのどのページをプライマリナビゲーションメニューに表示するか?
  • ナビゲーションメニューを複数用意するか?
  • ナビゲーションでページをどのように並べるか?
  • 訪問者にとって最も重要なページは何か?

ここに挙げた質問は、サイトの情報アーキテクチャ(コンテンツの構造編成)の計画および構築の第一歩として役立ちます。サイトの構成に関するアイデアが固まったら、メニューの構築を開始します。HubSpotの詳細メニュー機能を使えば、簡単に、情報アーキテクチャ全体に関する綿密な計画を立て、ナビゲーションメニューの形でウェブサイトのページを使用できます。このセクションでは、以下について学びます。

ウェブサイトの情報アーキテクチャを計画する理由

情報アーキテクチャは、サイト上に表示する予定のすべてのコンテンツを整理して優先順位付けするための図またはマップです。情報アーキテクチャがあれば、新しいページを作成するときに当て推量に基づく作業の多くを排除できるほか、ウェブサイトのコンテンツの焦点がぶれにくくなります。また、情報アーキテクチャが整理されていれば、訪問者がウェブサイトを移動し、目当てのコンテンツを見つける作業が楽になります。

サイトの情報アーキテクチャを計画するときには、以下の事項を検討する必要があります。

  • 訪問者がサイト内を移動するときに常にアクセスできるようにしたい最も重要なページ(「最上位レベル」ページ)は何か?
  • その「最上位レベル」ページには、ナビゲーションに含めたい子ページがあるか?
  • その子ページには、別のレベルのページが含まれるか?
HubSpot Help article screenshot

サイトの構造に関するアイデアが固まったら、COSのAdvanced Menu Maps(詳細メニューマップ)ツールを使用して、その計画をナビゲーションメニューに変換します。このツールを使用すると、異なるナビゲーションメニューを好きな数だけ構築できます。サイトページ(非ランディングページ)とサンキューページには常に、プライマリナビゲーションメニューを含める必要があります。

HubSpot Help article screenshot

サイト内のあまり目立たないページへのリンクがより多く含まれるセカンダリメニューを作成することもできます。

HubSpot Help article screenshot

プライマリおよびセカンダリのナビゲーションメニューの作成方法

以下では、情報アーキテクチャをプライマリナビゲーションメニューに変換する手順を説明します。

1.[Content Settings(コンテンツ設定)]に移動

HubSpotダッシュボードから、[Content(コンテンツ)] > [Content Settings(コンテンツ設定)]の順に進みます。

HubSpot Help article screenshot

左側のナビゲーションで[Advanced Menus(詳細メニュー)]を選択します。

HubSpot Help article screenshot

2.メニューを選択

デフォルトのメニューには、詳細メニューモジュールのデフォルトのコンテンツが自動的に表示されるページが含まれています。前述したように、追加のセカンダリメニューオプションに使用する新しいメニューを作成することもできます。この例では、プライマリナビゲーションメニューを作成しているので、デフォルトのメニューを選択します。

HubSpot Help article screenshot

3.メニューに新しいページを追加

[Add a page(ページを追加)]を選択し、ナビゲーションへの追加を開始します。

HubSpot Help article screenshot

この時点では、[Menu Label(メニューラベル)](ナビゲーションメニューに表示されるテキスト)と[Linking to page(ページへのリンク)]のURL(訪問者がテキストをクリックしたときに訪問者の移動先となる場所)を追加します。

HubSpot Help article screenshot

メニューでリンクに必要な情報を追加したら、リンクの横にあるギアをクリックし、このリンクを新しいウィンドウで開くかどうかを指定することもできます。

HubSpot Help article screenshot

ページを追加する場合、リンクを入力する代わりに、青い[CHOOSE(選択)]ボタンをクリックしてHubSpotページを選択することもできます(リンクを手入力するのは通常、外部のページやウェブサイトへのリンクを必要とする場合です)。

HubSpot Help article screenshot

ここから、ページ上部にある検索バーを使用してページを検索したり、ページを閲覧して見つけたりできます。使用したいページがわかったら、ページの横にあるラジオボタンをチェックし、[Choose page(ページを選択)]をクリックします。

HubSpot Help article screenshot

4.メニューに新しい子ページを追加

メニューに新しい子ページを追加するには、この子ページを配置する親ページ上の正方形のアイコンをクリックします。

HubSpot Help article screenshot

ページの階層は、これらのメニューツリーがナビゲーション用のテンプレートでどのように使われるかをコントロールするものです。通常、子ページはドロップダウンまたはフライアウトサブメニューに表示されますが、必要に応じてメニューのHTMLマークアップのスタイルを設定するためのCSSを作成することもできます。

HubSpot Help article screenshot

5.保存してメニューを公開

メニューを編集しているときには、[Save draft(下書きを保存)]ボタンをクリックするといつでも変更を保存できます。加えた変更を確定し、メニューを使用している(または使用する)すべてのページにこれらの変更を実際にプッシュするには、[Publish changes(変更を公開)]をクリックします。

HubSpot Help article screenshot

6.テンプレートにメニューモジュールを追加

デフォルトのメニューを編集したので、既存のメニューモジュールには作成した情報アーキテクチャが反映されます。このほか、デザインマネージャーまたはページエディターを使用してテンプレートにメニューを追加することもできます。このチュートリアルでは、ページエディターでテンプレートを編集します。

特定のサイトまたはランディングページを編集中に、[Settings(設定)] > [Edit template layout(テンプレートのレイアウトを編集)]をクリックします。

HubSpot Help article screenshot

[Add row(行を追加)]をクリックします。メニューを希望する場所までモジュールをドラッグします。そのモジュールで、ギアアイコン[Swap module(モジュールを交換)]の順にクリックします。[Advanced Menu(詳細メニュー)]モジュールを探してクリックし、[Select(選択)]をクリックします。

HubSpot Help article screenshot

7.メニューオプションをカスタマイズ

どのサイトマップがメニューの構造を担当するかなど、メニューオプションをカスタマイズするには、ギアアイコン > [Edit options(オプションを編集)]の順にクリックします。 メニューオプションについて詳しくは、こちらの記事をご覧ください。

HubSpot Help article screenshot

8.セカンダリサイトマップとナビゲーションメニューを作成

前述のように、異なるメニューに対して複数のサイトマップを作成できます。Advanced Menus(詳細メニュー)ツール内で、[Add another menu(別のメニューを追加)]ボタンをクリックします。 メニューに名前を付け、[Create menu(メニューを作成)]をクリックします。

HubSpot Help article screenshot

サイトマップの設定方法

以下では、情報アーキテクチャをサイトマップに変換する手順を説明します。

1.[Content Settings(コンテンツ設定)]に移動

HubSpotダッシュボードから、[Content(コンテンツ)] > [Content Settings(コンテンツ設定)]の順に進みます。

HubSpot Help article screenshot

左側のナビゲーションで[Sitemaps(サイトマップ)]を選択します。

HubSpot Help article screenshot

2.ドメインを選択

まずは、サイトマップを編集したいドメインを選択します。

HubSpot Help article screenshot

3.サイトマップに追加するページを選択

サイトマップの構築を開始するには、サイトマップに追加するページの横にあるボックスにチェックを入れます。設定した詳細メニューと同じように、親ページと子ページを必ず追加することが重要です。ただし、ドメイン上に実際に存在するランディングページについては、チェックを外してもかまいません。

HubSpot Help article screenshot

4.サイトマップを表示

[View Sitemap for this domain(このドメインのサイトマップを表示)]のリンクをクリックすると、サイトマップをいつでも表示できます。これにより、サイトマップへの直接リンクが提供されます。これは、Google Analyticsなどのサービスにサイトマップを送信するときに必要になります。

HubSpot Help article screenshot

5.保存してサイトマップを公開

サイトマップを変更しているときには、[Save draft(下書きを保存)]ボタンを時々クリックすることを忘れないでください。これにより、変更内容を実際にサイトマップにプッシュせずに変更内容を保存できます。もちろん、サイトマップの構築が完了したら、[Publish changes(変更を公開)]をクリックします。

HubSpot Help article screenshot

前の記事

Measuring Your Performance Project

次の記事