Webデザイン

最終更新日: 2022.04.28

サイトツリーとは?図や作成方法について徹底解説

サイトツリーとは?図や作成方法について徹底解説

サイトツリーは、わかりやすいWebサイトを作るために必要な要素です。本記事ではサイトツリーについて、作り方や便利なツールを紹介します。この記事を読めば、ユーザーの役に立つ効果的なサイトツリーを作れるようになるはずです。サイトツリーの作成を検討している方は、ぜひお読みください。

サイトツリーとは?

サイトツリーとは?

サイトツリーとは、サイトに存在するコンテンツをツリー状に表したものです。サイトマップと同じ意味を持ちます。トップページを一番上にし、そこからツリー状に各ページがつながり、下や横へと伸びていきます。

Webサイトは多くのページから構成されており、全体像をイメージするのは困難です。しかし構造を正確に把握していなければ、Webサイトの正しい活用・運営ができません。関係者間で認識に相違が生まれてしまうほか、ユーザーがサイト全体を把握できないという事態も起こり得ます。

サイトツリーはサイトの設計図・地図といえる要素です。したがってWebサイトを作成するうえで、サイトツリーの用意は必要不可欠といえるのです。
【Webサイトの構成図】基本の作り方やおすすめのツールまで徹底解説 【Webサイトの構成図】基本の作り方やおすすめのツールまで徹底解説

サイトツリーが必要な理由やメリット

サイトツリーが必要な理由やメリット

サイトツリーが必要な理由や作成するメリットとして、以下の3点があげられます。

  • サイト全体の構造を俯瞰できる
  • チーム全員で共通認識を持って進められる
  • ユーザーや検索エンジンにサイト全体を正しく認識してもらえる

それぞれ詳しく解説します。

サイト全体の構造を俯瞰できる

サイトツリーを作成する大きなメリットのひとつは、サイト全体の構造を俯瞰できるようになる点です。Webサイトは複数のページによって構成されており、全体図を把握する必要があります。Webサイト全体を俯瞰できないと、重複したページを作ってしまう、必要なページの作成を失念してしまうといった事態が起こりがちです。

またコンテンツ制作の詳細な方針を決定するためにも、サイト全体の俯瞰が必要不可欠です。ページ数が増えるほど、サイト全体を頭のなかだけでイメージするのは難しくなります。なおサイト制作・運営がある程度進行してからサイトツリーを作るのは非効率的です。サイト全体の構造を把握できるサイトツリーは、なるべく早いうちから作成する必要があります。

チーム全員で共通認識を持って進められる

サイトツリーの作成は、Webサイトの作成・運営に関する共通認識をチーム全員が持って進めるためにも必要です。

複数人がWebサイトに携わる場合、目指す方向や現状・課題などを明確にし、チーム全体が一体感を持つ必要があります。もしWebサイトに関する明確な全体図がなければ、チームメンバーが個々のイメージ・認識を持つ状態になります。メンバーごとに異なる認識を持った状態では、チームとしてのまとまりがなく、目指す方向性がバラバラになってしまう恐れがあります。

サイトツリーを作成すれば、サイトの構成図を明確に可視化できます。チーム全員で共通認識を持てるため、意見や方向性の相違が防ぎやすくなり、サイト作成・運営を円滑に進められるようになるのです。
Webサイト制作の流れでおさえておきたい2つのフェーズ Webサイト制作の流れでおさえておきたい2つのフェーズ

ユーザーや検索エンジンにサイト全体を正しく認識してもらえる

サイトツリーの作成は、ユーザーや検索エンジンにサイト全体を正しく認識してもらえるというメリットもあります。サイトツリーを作成・公開すれば、サイトを訪れたユーザーに、サイトの構造やページを正しく伝えられます。そのためユーザーにとって利用しやすいサイトとなり、好印象を与えられる可能性が高いです。

検索エンジンのクローラーも、サイトツリーによってサイト構造を把握できます。良質なコンテンツを作成しページを正しく認識してもらえれば、サイト全体の評価が上がりるでしょう。結果、検索で上位表示が期待できるのです。このようにサイトツリーの作成は、SEOの観点でも大きなメリットが存在します。

サイトツリーの基本的な作り方

サイトツリーの基本的な作り方

サイトツリーの作り方として、基本的な流れは以下のとおりです。

  1. サイトに必要なページをすべて洗い出す
  2. ページをカテゴリごとに分ける
  3. ツリーの図に落とし込む
  4. 全体像を確認してブラッシュアップする

それぞれのステップについて詳しく解説します。

1. サイトに必要なページをすべて洗い出す

サイトツリーを作るために、まずWebサイトに必要なページすべての洗い出しが必要です。サイトを構成するうえで、必要な要素の明確化とも言い換えられます。たとえば店舗のホームページの場合、以下のようなページが必要です。

  • トップページ
  • お知らせ
  • 各お知らせの詳細
  • アクセスや営業時間などの店舗情報
  • 商品情報
  • 商品ごとの詳細
  • 新商品の情報
  • セール中など目玉商品の詳細
  • スタッフ紹介
  • お問い合わせ

上記はあくまで最小限であり、サイト運営の目的によって必要なページは変わります。サイトを通じて新規顧客を集めたい場合、ブログなどコンテンツ発信をするページが必要です。従業員を募集するため、採用に関するページが必要なケースもあるでしょう。

競合サイトや傾向の近い企業のWebサイトなどを分析し、必要なページを洗い出していくと、必要なページが抜けてしまうリスクをおさえられます。

2. ページをカテゴリごとに分ける

サイトに必要なページを洗い出したら、続いてはカテゴリごとの分類です。サイトツリーはページを階層ごとに分けて表示するため、カテゴリ分けを行う必要があります。「サイトに必要なページをすべて洗い出す」の例を使うと、以下のようなカテゴリ分けができます。

  • トップページ
  • お知らせ
    • 各お知らせの詳細
  • アクセスや営業時間などの店舗情報
    • アクセス
    • 営業時間
  • 新商品情報
    • 商品ごとの詳細
    • 新商品の情報
    • セール中など目玉商品の詳細
  • スタッフ紹介
    • 各スタッフの詳細ページ
  • お問い合わせ

ページのカテゴリ分けを行わないと、ツリー状への落とし込みができません。全体図を視覚的に把握できる状態にするため、サイトを構成するページの正しいカテゴリ分けが必要です。
記事のカテゴリ分けはSEOに効果的?正しいカテゴリページの作成方法を紹介 記事のカテゴリ分けはSEOに効果的?正しいカテゴリページの作成方法を紹介 公開している記事は多いのに、なかなか検索順位が上がらない…そんなときは記事のカテゴリ分けでSEO対策をしてみませんか?カテゴリーページを作成する際の9つのポイントを紹介するので、SEOに効果的なカテゴリ分類を試してください。

3. ツリーの図に落とし込む

ページのカテゴリ分けが終わったら、ツリーの図に落とし込みます。トップページを一番上に置き、そこから下の階層に枝分かれするように作成します。

ツリー状の図を作成する際には、Excelやサイトマップ作成ツールを使うと便利です。サイトツリー作成ツールによって搭載された機能や料金、メリットなどが異なるため、自社に合ったツール選びが大切です。サイトツリーの作成におすすめのツールの具体例は後述します。

4. 全体像を確認してブラッシュアップする

ツリーの図への落とし込みが終わったら、全体像を確認し、必要に応じてブラッシュアップを行います。サイト構成を文字として羅列した状態では、どうしてもページの抜け漏れ、もしくはダブりなどが起こりやすいです。そのため図に落とし込んで終わりではなく、可視化したうえでの確認が必要不可欠です。

サイトツリーの過不足が見受けられたら、ページの追加や削除、編集などを行います。適切なサイトツリー作成のためには、最後の見直しが非常に大切です。

サイトツリーの作成におすすめのツール

サイトツリーの作成におすすめのツール

サイトツリーの作成におすすめのツールを7つ紹介します。

  • Microsoft Excel
  • Microsoft PowerPoint
  • Cacoo
  • Adobe XD
  • Lucidchart
  • Canva
  • XMind

それぞれのツールについて、料金やポイント、使い方などを解説します。

Microsoft Excel

Microsoft Excel

Microsoft ExcelMicrosoftが提供する表計算ソフトです。料金やポイント、使い方などをまとめました。

料金 Microsoft 365 Business Standard:1,360円(1ユーザー・月額)
ほかプランによって異なる
ポイント
  • 100ページ程度の規模でも手軽に閲覧・確認できる
  • 構成やページに変更があった場合でも、行の挿入・削除などで簡単に修正できる
  • Excel自体さまざまな場面で役立つツールのため、ほかの作業にも活かしやすい
使い方の例 ページを行(縦)、階層を列(横)に並べ全体像を表現する
※階層ごとに色分けをする、付随情報があればコメント機能でメモするなど、工夫次第でさらにわかりやすくなる
おすすめの方 ページ数が50を超えるような中規模以上のサイトを担当する方

行の追加や削除が容易であり、さまざまな情報をメモしやすい点が強い魅力です。

Microsoft PowerPoint

Microsoft PowerPoint

Microsoft PowerPointMicrosoftが提供するプレゼンテーション資料などの作成ツールです。料金やポイント、使い方などをまとめました。

料金 Microsoft 365 Business Standard:1,360円(1ユーザー・月額)
ほかプランによって異なる
ポイント
  • 図や表を簡単に挿入できる
  • プレゼンテーション資料とあわせてサイトツリーを作れるため、関係者間での情報共有に便利
  • 画像や写真の挿入もしやすい
使い方の例 SmartArt→階層構造→組織図
必要に応じてテキストの修正や図形の追加、分岐の変更などを行う
おすすめの方 ページ数が30ページ程度の中小規模サイトを担当する方

図や画像を活用した見やすいサイトツリーを直感的に作成できるツールです。

Cacoo

Cacoo

Cacooはオンラインで利用できる作図ツールです。料金やポイント、使い方などをまとめました。

料金 1,980円(5ユーザー・月額)
ほかユーザー数によって異なる、年額のほうが安い
ポイント
  • リアルタイムで複数人がツールを利用でき、変更がすぐに反映される
  • 編集履歴やコメント機能があるため情報共有や共同作業がしやすい
  • テンプレートが多く直感的に作業できる
使い方の例 サイトツリーの場合、テンプレートの「フローチャート」「ワイヤーフレーム」「開発」などが便利
テンプレートを使わないサイトツリー作成も可
おすすめの方 複数人でのサイトツリー作成を効率的に行いたい方

複数人での共同作業や、会議中などにリアルタイムで活用するのに便利なツールです。

Adobe XD

Adobe XD

Adobe XDWebサイトをはじめとしたデザイン作成ができるツールです。料金やポイント、使い方などをまとめました。

料金 Adobe XDのみ:1,298円(月額)
コンプリートプラン:6,248円(月額)
ポイント
  • シンプルでまとまったサイトツリーを作れる
  • Adobe XDひとつで、Webサイトやアプリなどのデザイン作成ができる
  • チュートリアル動画やレッスン動画があるため使い方を手軽に学べる
使い方の例 四角形ツールや手書きツールを組み合わせツリーを作成する
階層のグループ化および透明化を活用すれば下の階層を透明化できるため、すっきりとしたサイトツリーができる(マウスオーバーすれば透明化した箇所が表示される)
おすすめの方 複雑になりがちなサイトツリーをシンプルに仕上げたい方

ごちゃごちゃした印象になりがちなサイトツリーを、シンプルですっきりとした印象に仕上げられます。

Lucidchart

Lucidchart

Lucidchartサイトマップ(サイトツリー)の作成ツールです。料金やポイント、使い方などをまとめました。

料金 法人向けは要見積もり
Team:1,000円~(1ユーザー・月額)
※無料プランあり
ポイント
  • 料金プランが複数あるため目的や予算に合った適切なプランを選びやすい
  • サイトツリー作成を目的としたツールのため、搭載された機能がシンプルでわかりやすい
  • チームフォルダー機能など、複数人での作業に便利な機能が有り
使い方の例 サイトマップ専用テンプレートを選択し、デザインやカスタマイズを行う
おすすめの方 サイトツリーの作成に特化したツールを使いたい方

自社に合った料金プランが選びやすいうえ、シンプルな機能性で使いやすいツールです。

Canva

Canva

Canvaサイトツリーをはじめ、Web関連のさまざまなデザイン作成ができるツールです。料金やポイント、使い方などをまとめました。

料金 企業向けプラン:3,000円(1ユーザー・月額)
個人向け有料プラン、無料プランあり
ポイント
  • さまざまな機能があるなか、サイトツリーの作成に特化したサイトマップメーカー機能がある
  • 豊富なテンプレートから自由に選べる
  • ドラッグやクリックなど直感的な操作だけで高品質のサイトツリーが作成できる
使い方の例 好きなテンプレートを選び、必要に応じて図やテキストの追加などデザインの編集を行う
おすすめの方 直感的な操作でデザイン性の高いサイトツリーを作成したい方

デザイン作成のツールのため、手軽にデザイン性の高いサイトツリーを作成できます。

XMind

XMind

XMindマインドマッピング・ブレインストーミングに便利なツールです。機能を応用することで、サイトツリーの作成にも使えます。料金やポイント、使い方などをまとめました。

料金 4,400円(5台まで・半年)
ポイント
  • ツリーテーブルやカラーテーマが豊富に用意されており、好きなデザインを見つけやすい
  • 自由に編集・調整できる部分が多く、理想的なサイトツリーを作成できる
  • ブレインストーミング向けのツールなため、複数人の意見をまとめるうえでも便利
使い方の例 好きなテンプレートを選び、テキストや図の編集を行う
おすすめの方 サイトツリーの作成とあわせて、意見をまとめるツールとしても活用したい方

サイトツリー作成を目的としたツールではありませんが、必要な機能を十分に兼ね備えています。

サイトツリーを作って効率的にWebサイトを作成・運営しましょう

サイトツリーを作って効率的にWebサイトを作成・運営しましょう

サイトツリーは、Webサイトの作成を進めるうえで欠かせない要素です。サイトツリー作成の基本的な流れをしっかりおさえれば、それほどWebサイトの作成は難しくはありません。ポイントをおさえつつ、ツールも上手く活用することで、良いサイトツリーが作成できるはずです。

もしサイトツリーの作成について疑問や不安などがあれば、ぜひニュートラルワークスへご相談ください。ニュートラルワークスはWeb制作に関する幅広いサービスを提供しており、サイトツリー作成のサポートやアドバイスも可能です。無料相談も受け付けていますので、ぜひお気軽にお問い合わせください。

著者紹介

石田 哲也

石田 哲也

取締役CMO

Twitter:@te2319
株式会社ニュートラルワークス 取締役CMO。1984年生まれ。高校卒業後にISD株式会社にて起業。株式会社オプトにてWebマーケティングを学び、株式会社メタップスなど複数のベンチャー企業にて事業立ち上げを経験。前職はワンダープラネット株式会社にてゲームプロデューサーとしてスマホアプリゲームの制作に従事。2018年に地元の神奈川へ戻り、ニュートラルワークスにジョイン。SEO/Web広告運用/サイト分析・改善など、Webサイトの運用改善~ゲームアプリ制作や数十万フォロワーのSNSアカウントの運用経験などWebビジネス全般を守備範囲とする。

■経歴
2003年 ISD株式会社/起業
2009年 株式会社オプト/SEMコンサルタント
2011年 株式会社メタップス/シニアディレクター
2013年 ライブエイド株式会社/執行役
2016年 ワンダープラネット株式会社/プロデューサー・BizDev
2018年 株式会社ニュートラルワークス/取締役CMO

■得意領域
Webサイト改善
SEO対策
コンテンツマーケティング
リスティング広告

■保有資格
Google アナリティクス認定資格(GAIQ)
Google 広告検索認定資格
Google 広告ディスプレイ認定資格
Google 広告モバイル認定資格