僕はクライアントワークの傍ら、自社サイトのウェブ担当としても活動しています。
新規にウェブサイトを立ち上げる際には自分が携わることが多いのですが、SEOエンジニアの自分が携わる以上、やはりSEOに強いサイトにしようと考えています。
SEOというと、もしかしたら既に制作済みのサイトに対して後付で対応していくイメージが強いかもしれませんが、僕は制作段階からSEOを意識して設計するべきと常々考えています。

制作が終わってからキーワードに応じた追加コンテンツを用意したり、サイト構成を変更していくよりも、その方が圧倒的に効率的だからです。

Webサイトの設計をする手法は、組織や人によったりWebサイトの規模によったりと、様々な手法がありますが、僕が好んで使用する手法が2つあります。
それは、「サイトマップ」と「コンテンツマトリクス」です。
(ここで述べるサイトマップとは所謂「ハイレベルサイトマップ」「詳細サイトマップ」のことを指します)

今回は、その2つの中からWebサイト設計の最初期に作ることになるであろう「サイトマップ」について解説をし、具体的な作成方法をご紹介します。

サイトマップとは

サイトマップとは、その名の通り、Webサイトの構造を示すマップです。
通常ツリー構造でマッピングが行われ、クライアントや制作チーム間での意思共有のために用いられます。

サイトマップは大きく分けて「ハイレベルサイトマップ」と「詳細サイトマップ」の2つがあります。

ハイレベルサイトマップ

上流工程においてクライアントとの調整の中で行われるのが「ハイレベルサイトマップ」で、主に第一階層までの大雑把な形のサイトマップです。
上流工程でクライアントとの意思共有と調整を図っていくことが主な目的となります。

注意点として、上流工程の段階で詳細まで詰めてしまうと、軌道修正が入った場合に修正が困難となり、制作スケジュールに支障が出てしまうので、この段階では第一階層+α程度のサイトレベルの把握に留めます。

また、無計画な軌道修正を避けるためにも、必ずこの段階でクライアントの承認も取るようにしましょう。

詳細サイトマップ

クライアントにハイレベルサイトマップの内容で意思確認が取れた後、制作チーム用に作成するのが「詳細サイトマップ」です。

詳細サイトマップはハイレベルサイトマップを元に、クライアントとの大まかな意思決定が出来ている前提で作成をしていきます。
詳細サイトマップではページレベルでWebサイトの詳細な階層構造を定義していき、場合によってはIDやディレクトリパス、ファイル名、ナビゲーションなどもここで定義をしていきます。

例えば、第一階層に「スタッフブログ」というページがあったとして、実際にはカテゴリや月間アーカイブ、検索結果、記事ページ、著者プロフィールなど様々なページがあるので、それら第二階層以下のページも含めてサイトマップを作成します。

Point

  • ハイレベルサイトマップはクライアント向け、詳細サイトマップは制作チーム向けと用途が異なる
  • サイトレベルでの設計はハイレベルサイトマップを用いる
  • ページレベルでの設計はハイレベルサイトマップを用いる
  • クライアントの承認を得てから詳細設計に入るようにすると無理な軌道修正を避けられる

サイトマップを作る目的・メリット

サイトマップを作る目的・メリットは、一言で言うなら「意思共有」です。

ハイレベルサイトマップと詳細サイトマップで若干異なりますが、クライアントにしろ制作チームにしろ、複数人が携わるプロジェクトにおいて、何の指針もないと各々の認識に相違が出てしまうことがあります。
特にサイト構造に関しては、Webサイトの根幹部分を担うので、サイト構造に対して個人間の認識正しくすり合わせないと、後々の制作スケジュールや作業工数に多大な影響を及ぼしてしまいます。
それを防ぐ役割を担うのがサイトマップです。

サイトマップの考え方

サイトマップではWebサイトの全体構造を作成していくことになりますが、いくつか意識しておくべきことがあります。

LATCH法を意識した情報の組織化

まず初めに、コンテンツとなる情報の組織化を行っていきます。

情報の組織化をするにあたって、Information Architect(インフォメーションアーキテクト)という考え方があります。
Information Architectの基本的な考え方は、「複雑なコンテンツ・情報・モノをシンプルに整理し、状況や目的に応じてわかりやすくまとめる」というものです。
これはWebサイトの設計において非常に重要な考え方で、サイト規模やその目的に関わらず、意識する必要があります。

分かりやすくラベル付けとグループ化された情報は検索性と閲覧性が上がり、その情報が何であるか、どこにあるのかがスピーディに理解できるようになり、バラバラだった情報が意味を持つようになってきます。

Information Architectの父、Richard Wurman氏は、情報整理の組織化の方法は「Location(位置による組織化)」「Alphabet(アルファベットによる組織化)」「Time(時間による組織化)」「Category(分野による組織化)」「Hierarhy(階層による組織化)」であると定義しています。
これらの頭文字を取って「LATCH法」と呼んでいます。

LATCH法

Location(位置による組織化) 地理的・物理的な位置に従って整理する方法
例:地図、施設案内
Alphabet(アルファベットによる組織化) アルファベットや五十音など、文字による順序で整理する方法
例:辞書、用語集、電話帳
Time(時間による組織化) 年表やカレンダーなど時間軸によって整理する方法
例:年表、カレンダー、日記、タイムテーブル
Category(分野による組織化) ジャンルやカテゴリーなどによって整理する方法
例:商品陳列、動物園、図書分類
Hierarchy(階層による組織化) 大きさや値段、優先度や頻度などの情報の程度によって整理する方法
例:ランキング、身長順

4つの構造化モデル

情報の組織化が出来たら、次は構造化モデルを考えていきます。
Webサイトの利用用途やユーザーの導線を考えながら、ユーザーが必要とする情報にたどり着きやすくなるよう、設計をしていきましょう。
Webサイトの構造化モデルには「階層型」「直線型」「Webリンク型」「フォークソノミー型」4つがあります。

階層型

構造化モデル 階層型
最もよく利用されるであろう構造化モデルがこの「階層型」で、ツリー型とも呼ばれるディレクトリー型の情報構造です。

「愛知県>名古屋市>居酒屋」といった具合や、「パソコン用品>ディスプレイ>27インチ」といった具合に、大きなカテゴリーから小さなカテゴリーに遷移していく構造なので、目的の情報にたどり着きやすく、現在地もわかりやすいといったメリットがあります。

一方で、情報量が膨大な場合は、階層が増えてしまい目的の情報にたどり着くまでのページ遷移・クリック数が増えてしまい、ユーザーの離脱に繋がるポイントが増えるというデメリットもあります。

直線型

構造化モデル 直線型
「次へ」「戻る」といった導線や、ECサイトの購入プロセスにおける「カート>購入者情報入力>確認>決済完了」といった直線的で前のプロセスを踏まないと次のプロセスに移れないような場合に用います。
目的となる行動の邪魔になるナビゲーションを廃して直線的な画面遷移にすることで、ユーザーを迷わさないというメリットがあります。

直線型のみで構成されるケースは少なく、主にはECサイトの購入プロセスの様なケースで用いられることが一般的です。

Webリンク型

構造化モデル Webリンク型
階層構造や直線構造にとらわれず、関連するコンテンツ同士がリンクしていく構造化モデルです。
ユーザーが自由に回遊出来る一方、無秩序にもなりかねず、場合によっては目的のページに中々たどり着けないというデメリットもあります。

例:楽天市場

フォークソノミー型

構造化モデル フォークソノミー
フォークソノミー(Folksonomy)とは、Folks(民衆)とTaxonomy(分類)をかけ合わせた造語で、その名の通りユーザーに分類を委ねる分類方法です。

フォークソノミー型のメリットは常に最新の情報に併せて構造が更新され、複数のタグ付けがされることで検索性が上がり、サイト構造が進化していく点です。
ただし、これにはユーザーが頻繁にサイトに訪問し、自身で情報を更新していく必要があるので、相当数のユーザー数とユーザーのリテラシーが求められます。

例:はてなブックマークニコニコ動画pixiv

SEOに強い構成

本記事の冒頭でも述べたように、SEOに強いサイトにしていくには設計段階からSEOを意識しておくことが重要です。

「SEOを意識」とは、具体的にはサイトマップ作成の段階では次の点を意識します。

ページ名称にキーワードが含まれているか

ページ名称は通常、タイトルタグ内に含まれることが一般的です。

こちらの記事でも触れているように、タイトルタグは「SEO内部対策」の中でも非常に重要なファクターです。
ページ名称=タイトルタグにキーワードが含まれているかどうかで、検索エンジンがクエリに関連するコンテンツと見なすかどうかも大きく変わってくるので、ページ名称には極力狙ったキーワードが入るようにします。

また、ページ名称にキーワードが入ったページが複数あるとより最適です。

もしも狙ったキーワードが含まれたページがない場合は、設計に問題があります。
どうすればキーワードを含められるかを良く検討する必要があるでしょう。

ページ内にキーワードを含んだ文言を含められるか

サイトマップ作成の段階では細かなコンテンツまでは通常考えず、「コンテンツマトリクス」を作成する段階で決めていくのですが、サイトマップ作成段階の時点で、狙ったキーワードを文中に含められるかどうかの予測は立てておきましょう。

ページ名称にキーワードが入っていたとしても、文中にキーワードを入れられなければ検索エンジンからの評価は見込めません。
必ず、文中にキーワードが含められるか否か、検討だけでもしておきましょう。
例えば、薬機法などの影響で文中に使えない表現なども出てくるので、そういった場合はキーワード自体の見直しも必要です。

簡易ナビゲーション設計も併記

サイトマップを作成していくと、第一階層、第二回層とコンテンツの階層が出来上がります。
しかしそれはあくまで階層の話であって、コンテンツの重要度の話とはまた別です。

Webサイトを作成する際にはコンテンツの重要度に応じてナビゲーションを配置していきます。
通常、重要度の高いコンテンツはヘッダーなどのグローバルナビゲーションに、重要度の低いコンテンツはフッターナビゲーションに配置されます。

詳細サイトマップの作成段階では、ある程度コンテンツの重要度については決まっているはずなので、詳細サイトマップには「これはグローバルナビゲーション」「これはフッターナビゲーション」と分かるようにナビゲーションについても併記していくと良いでしょう。

サイトマップ作成に使えるツール

実際にサイトマップを作成し、クライアントや制作チームに共有していくには何かしらのツールを使っていきます。
大きく分けて、「表計算ソフト」「手書き」「オンラインツール」の3種がありますが、制作するサイト規模やプロジェクトに関わる人数、その他好みなどでプロジェクトに応じて適宜ツールを選んでいくと良いでしょう。

Cacoo

cacoo サイトマップ
nulab社が提供している無料のオンラインドロワーツールです。
サイトマップの他にフローチャートやワイヤーフレーム、マインドマップ作成などにも活用ができ、非常に手軽に作成ができます。
サイトマップについても予めテンプレートが用意されているので、テンプレートを活用することでスピーディーなサイトマップ制作が可能です。
オンラインツールなので、複数人で共有・作成することも可能で利便性の高いツールになっています。

表計算ソフト

表計算ソフトを使ったサイトマップ
EXCELやGoogleスプレッドシートなどの表計算ソフトもサイトマップ作成に活用することができます。
表計算ソフトを使ったサイトマップ作成は、100Pを超えるような大規模サイトに向いています。
100Pを超えてくると先述のCacooなどのドロワーツールでは対応が難しくなってしまいまうので、大規模サイトの場合は表計算ソフトが便利です。また、コンテンツマトリクスと併用しやすいというメリットもあります。

手書き

sitemap_handdraw
アナログな方法ですが、紙とペンを使ってもサイトマップは作成できます。
チームへの共有は少し難しいですが、主に自分一人で携わるプロジェクトでスピーディーに仕上げたい時には向いています。

使用するのはどんな紙でも良いのですが、オススメは方眼タイプのノートやレポート用紙です。
方眼になっているので作図がしやすい、というメリットがあります。

更に付箋紙も活用すると、ちょっとした構成変更も直ぐにできるので、オンラインツールよりも直感的でスピーディーに仕上げることができます。
先に手書きでラフ案を作って、オンラインツールで整形するという方法でも良いかもしれません。

Point

  • サイトマップの作成ツールはプロジェクトの規模や人数に応じて使い分ける
  • Cacooは万能で大規模サイト以外では万能で共有性にも優れる
  • 100Pを超えるような大規模サイトの場合は表計算ソフトが最適
  • 一人で携わる場合やスピーディーにラフイメージを作る場合は手書きが最適

まとめ

サイトマップはWebサイトの設計図のようなものです。
クライアントや制作チームが、設計者の認識を正しく理解できるように、サイトマップ制作では心がけていきましょう。
たまにサイトマップ自体のデザイン性を重視される方もいますが、必ずしも体裁の良さにこだわる必要はありません。
スケジュールと「伝わるサイトマップ」を最優先に取り組んでいきましょう。

SEOに強いWebサイト構造の設計と作り方

関連記事