最初にHubSpotのサイトページ（Site pages）を使ってウェブサイトを構築する際、いくつかの疑問があると思います。
- ウェブサイトにはどのようなページが含まれているか？
- プライマリーナビゲーションメニューには、どのページを入れるべきか？
- ナビゲーションメニューは複数表示させるべきか？
- ナビゲーションに必ず含んでおきたいページは？
- 訪問者にとって、最も重要なのはどのページか？
こうした疑問はサイトの情報アーキテクチャ（コンテンツの構造図）を計画すると解決しやすくなります。HubSpotのサイトマップ（Site Maps）機能を利用することで、簡単に情報アーキテクチャとウェブページのマップを作成することができます。情報アーキテクチャについて、良い方法を持っていれば、すぐにでも始めたいと思うかもしれません。このページではコンテンツ構造とウェブページのマップについて解説します。
なぜウェブサイトの情報アーキテクチャを作成する必要があるのでしょうか？
情報アーキテクチャはあなたのサイトで公開する全てのコンテンツの組織を、図式やマップで計画することです。これは新しいページを作成した際に当て推量となることを防ぎ、ウェブサイトのコンテンツで中核と成す部分をブレることなく維持できます。情報アーキテクチャにより組織化したコンテンツは、訪問者が発見・移動しやすく、使いやすいウェブサイトを構築することにも繋がります。
サイトの情報アーキテクチャを計画するときは、以下の要素を考えてください:
- 訪問者が常にアクセスできるようにナビゲートしたい重要なページはどこですか？（例えばトップレベルページ）
- トップレベルページでは、ナビゲーションに子ページを含めますか？
- この子ページには、他レベルのページを含めますか？
サイト構成のアイデアを持っていれば、COSサイトマップツール（COS Site Maps Tool）を使い、実際にナビゲーションメニューを作成に移れます。このツールを使用すれば、別のナビゲーションメニューをいくつでも作成することができます。ランディングページを除いた全てのサイトページにナビゲーションメニューを入れましょう。このメニューはプライマリーナビゲーションメニューと呼びます。
サイト上の重要なページのメニューをセカンダリーメニューとして作成することもできます。
プライマリーとセカンダリーナビゲーションメニューの作り方
情報アーキテクチャをプライマリーナビゲーションメニューにする手順を解説します。
1. 設定を開く
[Content] > [Content Settings] を開きます。
左側のナビゲーションにある[Site Maps]を開きます。
2. サイトマップを選択する
defaultのサイトマップではサイトマップのコンテンツを自動的に読み込んで、横並び、あるいは縦並びのメニューモジュールを自動的に作成します。もちろん、前述の通り他の場所で使用する新しいナビゲーションメニューも作成できます。この項目はプライマリーナビゲーションメニューを作成しますので、defaultのサイトマップを選択してください。
3. サイトマップへ新しいページを追加する
[Add page] をクリックして、ナビゲーションを追加します。
ここでは新しいページを追加する方法が3つあります。
- 新規ページを作成する – 仮の場所（placeholder）にページを作成します。
- 既存のHubSpotで作成したページを使用する – COS Site PagesやLanding Pagesなどで作成した既存ページを、そのまま使用することができます。
- 外部URLのリンクを使用する – 一般的なCMSや他のウェブサイトを使用して構築した場合、そのページを利用することができます。
- メニューラベルのみ（リンク） – クリックできないメニュー項目を作成できます。これはトップレベルページをクリックできないようにして、その下位にある子リンクへナビゲーションするといったことも可能です。
選択したオプションに応じて、異なるオプションフィールドが表示されます。たとえば、追加するページにトップレベルページを選択する必要がありますが、そのページ自体がトップレベルページであった場合、最初の階層に表示するか、ナビゲーションのサブ階層に表示するか決められます。
フィールドに必要な情報を追加したら、Open link in new window（リンクを新しいウィンドウで開く）にチェックを入れてAdd pageをクリックしてください。
新しいページを作成し、タイトルを追加した場合、[Save and go to Page Editor]をクリックすると、ページ作成画面に移動するので注意してください。
作成せずにサイトマップにページを追加できますが、公開されるまで、メニューに表示されることはありません。こうした“スタブ”や仮のページはサイトマップ内に黄色で表示されます。白で表示されたページは公開、赤は削除されたページを意味していますが、サイトマップ内には存在しています。
4. 親ページ（トップレベル）と子ページを構成する
ほとんどのサイトは、階層別にページが順序付けられています。親ページの上に子ページをドラッグ＆ドロップすることで、階層を作成することができます。
[Edit] メニューを使用することで、新しい子ページを追加できます。
ページの階層の挙動は、使用するテンプレートによって制御します。CSSを変更することで好きなように挙動を変えられますが、ドロップダウンで表示されるか、サブメニューが飛び出すのが一般的です。
ナビゲーション内のリンクを編集するには、メニュー左側にある歯車アイコンから、 [Edit] を選択してください。またメニュー項目の削除は、 [Remove from site map] で行えます。
5. サイトマップを公開する
全てのページを追加し終わったら、 [Publish Changes] をクリックすることで公開します。まだテンプレートでサイトマップを使用できない場合は、 [Save Draft] をクリックすると下書きとして保存できます。
6. テンプレートにメニューモジュールを追加する
defaultのサイトマップの編集が完了したら、メニューモジュールに追加しましょう。デザインマネージャー（Design Manager）やページエディター（Page Editor）を用いればテンプレートへメニューを組み込むことができます。ここではページエディターを用いてテンプレートを編集します。
編集したいサイトかランディングページを開、[Action] > [Edit Template Layout]をクリックしてください。
[Add row] をクリックし、メニューを表示させた場所へモジュールをドラッグしてください。
歯車のアイコンから [Swap Module] を開きます。
メニューを横に並べる（Horizontal Top Menu）か、立てに並べる（Vertical Main Menu）かを選択し、[Select]を押してください。
7. メニューオプションのカスタマイズ
サイトマップの構造など、メニューオプションをカスタマイズするには、歯車のアイコンから[Edit options]を選択してください。
8. セカンダリーサイトマップとナビゲーションメニューの作成
サイト内で使用するもうひとつのメニューを作成しましょう。サイトマップツールで [Add another site map] をクリックしてください。
作成するサイトマップの名前を付けて [Create site map] をクリックしてください。
ページを追加し、ステップ7の手順通り、歯車のアイコンから [Edit Option] を選択して、新しいサイトマップを公開しましょう。
9. Sitemap.xml
HubSpotのサイトマップツールは、GoogleやBingなどのクローラーに読ませるSitemap.xmlを生成できます。HubSpotに接続したドメインに /sitemap.xml を追加することで、アクセスすることが可能です。
ランディングページを除いた全てのページは、自動的にsitemap.xmlに追加されます。ランディングページが自動的に追加されることはありません。もし、ランディングページがメニューのひとつに入っているとすれば、XMLに追加されます。
情報アーキテクチャの例
情報アーキテクチャは、どのように構築すればよいのでしょうか？ 以下に、いくつか例をご紹介します。
サービス会社
このサービス会社の事例は造園会社を想像したものです。造園会社は「商業空間の造園」と「住宅空間の造園」の2種類に分けられる可能性があるので、それぞれサービスA, Bに当てはめました。
製品会社
こちらの事例はフリスビーを販売する製品会社を考えたものです。もし、この会社がフリスビーだけを販売していれば、製品ページを“Our Frisbee”として、別途フリスビーのことを議論する掲示板のようなものを設けてもよいでしょう。
NGO
NGOの情報アーキテクチャーを考えるとすれば、一般的なウェブサイトとは少し別のものにした方がよいと思います。最も大きく取り上げるべきことは、あなたの目指すところはどこにあるのか、それを達成するために行ったことなどを強調し、訪問者が活動を知りやすい形を取りましょう。
以上のようにサイトマップは、行っているビジネスやウェブサイトの複雑さによって異なります。サイトの閲覧を容易にするため、プライマリーメニューをサイトの全てのページ上で表示しましょう。そして、いつでもメニューに追加したり、CTAやセカンダリーメニューを追加することができます。情報アーキテクチャーを分かりやすく整理することで、より良いメニューを作ることもできますので、不明な点がありましたら、ぜひお聞きください。