メニューとナビゲーション
ほぼ全てのウェブサイトには、ユーザーが情報を素早く簡単に見つけられるように、何らかのナビゲーションメニューが用意されています。ナビゲーションメニューが配置される場所としては、ウェブサイトのヘッダー、サイドバー、フッターなどがあります。HubSpotには、このような一般的なメニューを簡単に作成して管理するためのツールが組み込まれています。また、コード面でもメニュー表示の方法が多数用意されているので、実際のウェブサイトに最も適したソリューションを選ぶことができます。
サイトのヘッダーやフッターのメニューなど、サイト全体で使用されるメニュー向けに、ナビゲーション設定ページがあります。この画面では、ご使用のアカウント内のテンプレートやモジュールで使用できるメニューの作成、更新、および削除ができます。HubSpotのメニューモジュールとタグを使用すると、簡単にサイトにメニューを表示できます。
ピラーページの目次など、単一のページに使用するメニューには、シンプルメニューを使用します。シンプルメニューは全体で使用されるものではなく、表示されるページ専用です（グローバルコンテンツに含まれない限り）。シンプルメニューはコンテンツ編集者はページレベルで編集でき、一貫したUIで作成および管理ができます。HubSpotのシンプルメニューのモジュールとタグを使用すると、シンプルなメニューを簡単にサイトに表示できます。
カスタムモジュールには、シンプルメニューおよびメニューフィールドの両方を含めることができます。開発者にとっては出力コードをより詳細に制御できることから、カスタムモジュールは多くの開発者が使用しています。実際のワークフローやビジネスニーズ、またはデザインに合わせて、サイドバーモジュール、フッター ナビゲーション モジュール、ヘッダー ナビゲーション モジュールなどを作成できます。メニューフィールドを使用すると、コンテンツ編集者がグローバル アカウント ナビゲーション メニューの中からメニューを選べるようになります。シンプル メニュー フィールドでは、他の場所で再利用しないメニューを作成できます。
特に入り組んだメニューの場合は、メニューの構造と表示の管理に、リピーターグループを含むモジュールまたはHubDBを使用する方が適切なこともあります。とはいえ、この方法には、コンテンツ編集者が簡単なUIを使えなくなるデメリットがあります。こうした状況では、メニュー関数をメニューフィールドまたはシンプル メニュー フィールドと組み合わせることで、高度な構造や機能を実現すると同時に、メニューの利便性も高めることができます。
多くのウェブサイトメニューで似た形式が採用されているため、CMS Hubは親子形式のメニューを作成できる便利なエディターUIを備えています。このユーザーインターフェイス（UI）では、ページのリンクをネストさせて階層状のメニューを作成できます。ここで作成したメニューは、どのようなテンプレートまたはモジュール上でも表示できます。アカウント全体のメニューを設定するには、［設定］>［ページ］>［ナビゲーション］の順に進みます。
1つのHubSpotアカウント上に複数のメニューを設定して、メインナビゲーション、サイドバー、メガメニュー、フッターナビゲーションなどに使用することができます。ナビゲーション設定で定義したメニューは、1つのウェブサイト全体で再利用可能です。
メニューにはさまざまな表示方法があります。実際の状況に応じて、以下のどれが最も適しているかを判断してください。
それぞれに利点と欠点がありますので、十分に理解した上で決定してください。
ヒント：サイトのヘッダーには長いメインナビゲーションが含まれることがよくありますが、「コンテンツへスキップ」するリンクを設置すると効果的です。これは長いメニューをキーボード操作でスキップする際に役立ちます。
HubLによってメニューを扱う場合は、メニューのIDを使って参照する必要があります。これはシンプルメニューには当てはまりません。
カスタムモジュールを作成する場合にメニューIDを取得する最適な方法は、実際にメニューフィールドを作成することです。モジュール内のメニューフィールドからメニューのIDが返されるため、コンテンツ編集者はこのIDを使ってメニューを指定できます。何らかの理由でメニューIDをハードコードする必要がある場合、ナビゲーション設定ページを表示した際のURLからメニューIDを取得できます。
https://app.hubspot.com/menus/<portal id>/edit/<menu id>
既定のメニューでは常にIDが明示されるとは限らないので、メニューを変更してから既定に変更すると、IDがURLに表示されます。
menu()関数を使用すると、完全にカスタマイズされたメニュー構造を作成できます。そこから返される1つのオブジェクトを反復処理するとメニューを生成できます。メニュー項目用のプロパティーが多数提供されています。メニュー関数を使用する場合は、メニューの構造、スタイル設定、メニューのアクセスに関する責任があります。
HubSpot CMSテーマボイラープレートには、menu()関数を使って構築したサンプル メニュー モジュールが含まれています。実際のニーズに合わせて変更することで、メガメニューのような複雑なメニューを作成できます。
HubLメニュータグでは標準的なメニューHTMLが生成され、深さ、アクティブ状態、子項目の有無に関するクラス名も定義されています。メニュータグはカスタムモジュール内で使用することが可能で、メインナビゲーションやサイドバーナビゲーションのナビゲーションメニューを簡単に作成できます。このタグには、メニューIDを指定する必要があります。（モジュールではなく）HubLタグなので、カスタムモジュール内での使用が可能です。
HubLシンプル メニュー タグもHubLメニュータグと同様に機能し、深さ、アクティブ状態、子項目の有無に関するクラス名を備えた標準的なメニューHTMLが生成されます。相違点として、このタグにはメニューIDではなくメニュー構造のディクショナリー（辞書型）が渡されることを想定しています。これが適しているのは、ナビゲーション設定を使う代わりに、モジュールのフィールドによってメニュー構造を決める場合です。シンプル メニュー フィールドでは、制作担当者がメニューを作成でき、そのフィールドから変数をこのタグに提供できます。これが適していると思われる状況は、長いページのための目次タイプのメニューです。そのメニューは他のページで繰り返される可能性が低いので、ナビゲーション設定に含まれなくても差し支えありません。これはモジュールではなくHubLタグなので、カスタムモジュール内部でこれを使用できます。
HTML+HubLとドラッグ＆ドロップテンプレートの両方で使用できる既定のモジュールがあります。既定のメニューモジュールの内部では、HubLメニュータグが使用されます。既定のシンプル メニュー モジュールの内部では、HubL simple_menuタグが使用されます。HubLメニュータグを使用しているので、標準的なメニューHTMLが生成されます。これらは実際のモジュールなので、dnd_areaタグ、フレキシブルカラム、ドラッグ＆ドロップテンプレートの中でこれらを使用できます。モジュールをネストさせることはできないので、他のモジュール内にこれらのモジュールを入れることはできません。代わりにメニュータグまたはシンプル メニュー タグを使用してください。
貴重なご意見をありがとうございました。