サイトツリーは、わかりやすいWebサイトを作るために必要な要素です。本記事ではサイトツリーについて、作り方や便利なツールを紹介します。この記事を読めば、ユーザーの役に立つ効果的なサイトツリーを作れるようになるはずです。サイトツリーの作成を検討している方は、ぜひお読みください。
＜無料＞資料ダウンロード
【発注時に役立つ】Webサイト制作の手順ガイド
～Webサイト制作の流れを理解して、失敗しないようにしましょう！～
目次
サイトツリーとは？
サイトツリーとは、サイトに存在するコンテンツをツリー状に表したものです。サイトマップと同じ意味を持ちます。トップページを一番上にし、そこからツリー状に各ページがつながり、下や横へと伸びていきます。
Webサイトは多くのページから構成されており、全体像をイメージするのは困難です。しかし構造を正確に把握していなければ、Webサイトの正しい活用・運営ができません。関係者間で認識に相違が生まれてしまうほか、ユーザーがサイト全体を把握できないという事態も起こり得ます。
サイトツリーはサイトの設計図・地図といえる要素です。したがってWebサイトを作成するうえで、サイトツリーの用意は必要不可欠といえるのです。
【Webサイトの構成図】基本の作り方やおすすめのツールまで解説
サイトツリーが必要な理由やメリット
サイトツリーが必要な理由や作成するメリットとして、以下の3点があげられます。
- サイト全体の構造を俯瞰できる
- チーム全員で共通認識を持って進められる
- ユーザーや検索エンジンにサイト全体を正しく認識してもらえる
それぞれ詳しく解説します。
サイト全体の構造を俯瞰できる
サイトツリーを作成する大きなメリットのひとつは、サイト全体の構造を俯瞰できるようになる点です。Webサイトは複数のページによって構成されており、全体図を把握する必要があります。Webサイト全体を俯瞰できないと、重複したページを作ってしまう、必要なページの作成を失念してしまうといった事態が起こりがちです。
またコンテンツ制作の詳細な方針を決定するためにも、サイト全体の俯瞰が必要不可欠です。ページ数が増えるほど、サイト全体を頭のなかだけでイメージするのは難しくなります。なおサイト制作・運営がある程度進行してからサイトツリーを作るのは非効率的です。サイト全体の構造を把握できるサイトツリーは、なるべく早いうちから作成する必要があります。
チーム全員で共通認識を持って進められる
サイトツリーの作成は、Webサイトの作成・運営に関する共通認識をチーム全員が持って進めるためにも必要です。
複数人がWebサイトに携わる場合、目指す方向や現状・課題などを明確にし、チーム全体が一体感を持つ必要があります。もしWebサイトに関する明確な全体図がなければ、チームメンバーが個々のイメージ・認識を持つ状態になります。メンバーごとに異なる認識を持った状態では、チームとしてのまとまりがなく、目指す方向性がバラバラになってしまう恐れがあります。
サイトツリーを作成すれば、サイトの構成図を明確に可視化できます。チーム全員で共通認識を持てるため、意見や方向性の相違が防ぎやすくなり、サイト作成・運営を円滑に進められるようになるのです。
Webサイト（ホームページ）制作の流れと知っておきたい2つのフェーズ
ユーザーや検索エンジンにサイト全体を正しく認識してもらえる
サイトツリーの作成は、ユーザーや検索エンジンにサイト全体を正しく認識してもらえるというメリットもあります。サイトツリーを作成・公開すれば、サイトを訪れたユーザーに、サイトの構造やページを正しく伝えられます。そのためユーザーにとって利用しやすいサイトとなり、好印象を与えられる可能性が高いです。
検索エンジンのクローラーも、サイトツリーによってサイト構造を把握できます。良質なコンテンツを作成しページを正しく認識してもらえれば、サイト全体の評価が上がりるでしょう。結果、検索で上位表示が期待できるのです。このようにサイトツリーの作成は、SEOの観点でも大きなメリットが存在します。
サイトツリーの基本的な作り方
サイトツリーの作り方として、基本的な流れは以下のとおりです。
- サイトに必要なページをすべて洗い出す
- ページをカテゴリごとに分ける
- ツリーの図に落とし込む
- 全体像を確認してブラッシュアップする
それぞれのステップについて詳しく解説します。
1. サイトに必要なページをすべて洗い出す
サイトツリーを作るために、まずWebサイトに必要なページすべての洗い出しが必要です。サイトを構成するうえで、必要な要素の明確化とも言い換えられます。たとえば店舗のホームページの場合、以下のようなページが必要です。
- トップページ
- お知らせ
- 各お知らせの詳細
- アクセスや営業時間などの店舗情報
- 商品情報
- 商品ごとの詳細
- 新商品の情報
- セール中など目玉商品の詳細
- スタッフ紹介
- お問い合わせ
上記はあくまで最小限であり、サイト運営の目的によって必要なページは変わります。サイトを通じて新規顧客を集めたい場合、ブログなどコンテンツ発信をするページが必要です。従業員を募集するため、採用に関するページが必要なケースもあるでしょう。
競合サイトや傾向の近い企業のWebサイトなどを分析し、必要なページを洗い出していくと、必要なページが抜けてしまうリスクをおさえられます。
2. ページをカテゴリごとに分ける
サイトに必要なページを洗い出したら、続いてはカテゴリごとの分類です。サイトツリーはページを階層ごとに分けて表示するため、カテゴリ分けを行う必要があります。「サイトに必要なページをすべて洗い出す」の例を使うと、以下のようなカテゴリ分けができます。
- トップページ
- お知らせ
- 各お知らせの詳細
- アクセスや営業時間などの店舗情報
- アクセス
- 営業時間
- 新商品情報
- 商品ごとの詳細
- 新商品の情報
- セール中など目玉商品の詳細
- スタッフ紹介
- 各スタッフの詳細ページ
- お問い合わせ
ページのカテゴリ分けを行わないと、ツリー状への落とし込みができません。全体図を視覚的に把握できる状態にするため、サイトを構成するページの正しいカテゴリ分けが必要です。
記事のカテゴリ分けはSEOに効果的？正しいカテゴリページの作成方法を紹介
公開している記事は多いのに、なかなか検索順位が上がらない…そんなときは記事のカテゴリ分けでSEO対策をしてみませんか？カテゴリーページを作成する際の9つのポイントを紹介するので、SEOに効果的なカテゴリ分類を試してください。
3. ツリーの図に落とし込む
ページのカテゴリ分けが終わったら、ツリーの図に落とし込みます。トップページを一番上に置き、そこから下の階層に枝分かれするように作成します。
ツリー状の図を作成する際には、Excelやサイトマップ作成ツールを使うと便利です。サイトツリー作成ツールによって搭載された機能や料金、メリットなどが異なるため、自社に合ったツール選びが大切です。サイトツリーの作成におすすめのツールの具体例は後述します。
4. 全体像を確認してブラッシュアップする
ツリーの図への落とし込みが終わったら、全体像を確認し、必要に応じてブラッシュアップを行います。サイト構成を文字として羅列した状態では、どうしてもページの抜け漏れ、もしくはダブりなどが起こりやすいです。そのため図に落とし込んで終わりではなく、可視化したうえでの確認が必要不可欠です。
サイトツリーの過不足が見受けられたら、ページの追加や削除、編集などを行います。適切なサイトツリー作成のためには、最後の見直しが非常に大切です。
サイトツリーの作成におすすめのツール
サイトツリーの作成におすすめのツールを7つ紹介します。
- Microsoft Excel
- Microsoft PowerPoint
- Cacoo
- Adobe XD
- Lucidchart
- Canva
- XMind
それぞれのツールについて、料金やポイント、使い方などを解説します。
Microsoft Excel
Microsoft ExcelはMicrosoftが提供する表計算ソフトです。料金やポイント、使い方などをまとめました。
| 料金 | Microsoft 365 Business Standard：1,360円（1ユーザー・月額） ほかプランによって異なる |
| ポイント |
|
| 使い方の例 | ページを行（縦）、階層を列（横）に並べ全体像を表現する ※階層ごとに色分けをする、付随情報があればコメント機能でメモするなど、工夫次第でさらにわかりやすくなる |
| おすすめの方 | ページ数が50を超えるような中規模以上のサイトを担当する方 |
行の追加や削除が容易であり、さまざまな情報をメモしやすい点が強い魅力です。
Microsoft PowerPoint
Microsoft PowerPointはMicrosoftが提供するプレゼンテーション資料などの作成ツールです。料金やポイント、使い方などをまとめました。
| 料金 | Microsoft 365 Business Standard：1,360円（1ユーザー・月額） ほかプランによって異なる |
| ポイント |
|
| 使い方の例 | SmartArt→階層構造→組織図 必要に応じてテキストの修正や図形の追加、分岐の変更などを行う |
| おすすめの方 | ページ数が30ページ程度の中小規模サイトを担当する方 |
図や画像を活用した見やすいサイトツリーを直感的に作成できるツールです。
Cacoo
Cacooはオンラインで利用できる作図ツールです。料金やポイント、使い方などをまとめました。
| 料金 | 1,980円（5ユーザー・月額） ほかユーザー数によって異なる、年額のほうが安い |
| ポイント |
|
| 使い方の例 | サイトツリーの場合、テンプレートの「フローチャート」「ワイヤーフレーム」「開発」などが便利 テンプレートを使わないサイトツリー作成も可 |
| おすすめの方 | 複数人でのサイトツリー作成を効率的に行いたい方 |
複数人での共同作業や、会議中などにリアルタイムで活用するのに便利なツールです。
Adobe XD
Adobe XDはWebサイトをはじめとしたデザイン作成ができるツールです。料金やポイント、使い方などをまとめました。
| 料金 | Adobe XDのみ：1,298円（月額） コンプリートプラン：6,248円（月額） |
| ポイント |
|
| 使い方の例 | 四角形ツールや手書きツールを組み合わせツリーを作成する 階層のグループ化および透明化を活用すれば下の階層を透明化できるため、すっきりとしたサイトツリーができる（マウスオーバーすれば透明化した箇所が表示される） |
| おすすめの方 | 複雑になりがちなサイトツリーをシンプルに仕上げたい方 |
ごちゃごちゃした印象になりがちなサイトツリーを、シンプルですっきりとした印象に仕上げられます。
Lucidchart
Lucidchartはサイトマップ（サイトツリー）の作成ツールです。料金やポイント、使い方などをまとめました。
| 料金 | 法人向けは要見積もり Team：1,000円～（1ユーザー・月額） ※無料プランあり |
| ポイント |
|
| 使い方の例 | サイトマップ専用テンプレートを選択し、デザインやカスタマイズを行う |
| おすすめの方 | サイトツリーの作成に特化したツールを使いたい方 |
自社に合った料金プランが選びやすいうえ、シンプルな機能性で使いやすいツールです。
Canva
Canvaはサイトツリーをはじめ、Web関連のさまざまなデザイン作成ができるツールです。料金やポイント、使い方などをまとめました。
| 料金 | 企業向けプラン：3,000円（1ユーザー・月額） 個人向け有料プラン、無料プランあり |
| ポイント |
|
| 使い方の例 | 好きなテンプレートを選び、必要に応じて図やテキストの追加などデザインの編集を行う |
| おすすめの方 | 直感的な操作でデザイン性の高いサイトツリーを作成したい方 |
デザイン作成のツールのため、手軽にデザイン性の高いサイトツリーを作成できます。
XMind
XMindはマインドマッピング・ブレインストーミングに便利なツールです。機能を応用することで、サイトツリーの作成にも使えます。料金やポイント、使い方などをまとめました。
| 料金 | 4,400円（5台まで・半年） |
| ポイント |
|
| 使い方の例 | 好きなテンプレートを選び、テキストや図の編集を行う |
| おすすめの方 | サイトツリーの作成とあわせて、意見をまとめるツールとしても活用したい方 |
サイトツリー作成を目的としたツールではありませんが、必要な機能を十分に兼ね備えています。
サイトツリーを作って効率的にWebサイトを作成・運営しましょう
サイトツリーは、Webサイトの作成を進めるうえで欠かせない要素です。サイトツリー作成の基本的な流れをしっかりおさえれば、それほどWebサイトの作成は難しくはありません。ポイントをおさえつつ、ツールも上手く活用することで、良いサイトツリーが作成できるはずです。
もしサイトツリーの作成について疑問や不安などがあれば、ぜひニュートラルワークスへご相談ください。ニュートラルワークスはWeb制作に関する幅広いサービスを提供しており、サイトツリー作成のサポートやアドバイスも可能です。無料相談も受け付けていますので、ぜひお気軽にお問い合わせください。
＜無料＞資料ダウンロード
【発注時に役立つ】Webサイト制作の手順ガイド
～Webサイト制作の流れを理解して、失敗しないようにしましょう！～
