サイトマップの作り方 完全版（誰でも漏れのないサイトマップが作れる！）

こんにちは、ANDSPACEの谷川です。
夏大っ嫌いです。自称フェミニストですが、もし目の前に夏の女神が現れたらモンゴリアンチョップからのライガーボムをノータイムで決めます。もっと頑張れよ冬将軍！

今回はwebサイトを制作する上で最重要事項のひとつ、サイトマップの作り方についてです。
このやりかたはwebサイトの設計のみならず、チラシやパンフレット、動画、はたまた飲食店のメニューなど、コンテンツを扱うものであれば何にでも応用できますので、ぜひ！

そもそもサイトマップの目的とは

サイトマップとは、大雑把に言えば「こんなページを揃えたwebサイトを作ろう！」っていうページの内容をまとめたものです。
webサイトにおいてどのようなページを作るかは、ほぼイコールでどんなコンテンツを掲載するかになるので、非常に重要な工程です。
どれだけカッコイイデザインでも、必要な情報が無ければそれはもはや「お金のかかったキレイなゴミ」になってしまいます。

サイトマップを作る上で認識しておいて欲しいこと

コンテンツ（ページ）が多いほどSEOは有利になる

基本的にwebサイトは検索でなるべく上位に表示されることが必須です。
そして検索で上位に表示される為にはコンテンツが多ければ多いほど良いです。
ただし量産するために他のサイトの丸パクリや同じ内容を複数ページに掲載するのは絶対ダメ！

webサイトにおいて情報が多すぎることのデメリットはほぼない

紙媒体ではスペースに限界があるため、情報の取捨選択がかなりシビアになりますが、webサイトにおいてはその制限はありません。（労力はかかるけれども！）
しかし、情報が多い場合に「見にくいのでは？」とか「そんなに誰も読んでくれないのでは？」と聞かれることが多々あります。
そんなことないよ！
膨大な情報量をもつamazonやほぼ日は使いやすいですよね？
なので、もしそのサイトが「見にくい」のであれば、その原因は情報量の多さではなく「動線やデザインが悪い」だけです。
また、1つのwebサイトを隅から隅まで見る人はかなりレアです。
ほとんどの人はそのサイト内でも自分の目的のページだけを見ますし、その目的もユーザーによって違います。
「ユーザーは辞書の様にサイトを使用する」とイメージしてもらえば分かりやすいと思います。
分かりやすい動線を確保したインターフェイスであれば、情報量の多さは問題ありません。

サイトマップは消去法で作る！

webサイトを作る上で、後から「よくあるご質問入れるの忘れてた！」みたいなことってありませんか。
またはクライアントから時間が経ってから「忘れてたんだけどスタッフ紹介も入れて欲しい！」みないなことってよくありますよね。
人間は忘れる生き物なので、ついつい入れなければいけないことでも忘れてしまいます。
なので、掲載する可能性がある情報を網羅して、必要のないものを消すという作り方をすることで、誰でも漏れがないサイトマップを作ることが出来ます。

実際にやってみよう！

今回はリゾートホテルのオフィシャルサイトリニューアルという題材で実際のサイトマップ構築の流れをお見せします。

step1.同業他社のwebサイトを可能な限り集める

今回の場合ですと「リゾートホテル」と検索して出て来るサイトや、良いwebサイトのポータルサイト（紹介サイト）を徘徊し、ある程度人気や知名度がありそうなサイトをひたすら集めます。
弊社の場合ですと、1案件ごとに平均50〜100サイトを集めます。

【良いwebサイトのポータルサイト（リンク集）】

• ズロック
• イケサイ
• I/O 3000
• Good Design Web
• S5-Style

【それらを徘徊し今回集めたサイト】　※今回は参考なので少なめ

• 熱海大観荘
• 白玉の湯 華鳳
• RITC
• SANDAL WOOD
• 白雪荘
• ANA INTER CONTINENTAL MANZA BEACH RESORT
• ネストイン箱根
• 汐美荘
• オリビアン小豆島
• モアナコースト
• ベイリゾートホテル小豆島
• 池の平ホテル
• ルネッサンス リゾート ナルト
• リゾートホテル蓼科
• 朝陽リゾートホテル
• The Shigira
• オリエンタルヒルズ沖縄
• 貴船荘

step2.集めたサイトからコンテンツ名（ページ名）をひたすら拾い出す

step1で集めたサイトに掲載されているコンテンツ名及びページ名を抽出します。
サイトのコンテンツを網羅するには、ヘッダー、フッター、サイトマップを閲覧するとだいたい全部載ってます。
最初は適当に抽出するため、コンテンツ名の重複がおきます。
重複したコンテンツを簡単に整理・消去できるようにエクセルやスプレッドシートを使用すると便利です。

今回集めたコンテンツ名（ページ名）

• トップページ
• 当ホテルについて
• 当ホテルのポリシー
• 当ホテルの歴史
• 支配人あいさつ
• 館内マップ
• 館内施設一覧
• アクセス
• お客様の声
• 客室コンセプト
• 客室一覧
• 客室詳細
• お問い合わせ
• よくあるご質問
• パンフレットダウンロード
• 採用情報
• 当ホテルの過ごし方
• カップルでの過ごし方
• ご家族での過ごし方
• ご友人との過ごし方
• 団体プラン
• 宿泊プラン一覧
• カップル・ご夫婦
• ご家族・グループ
• 団体での宿泊・宴会・会議・研修
• 会員登録
• 会員解約
• 会員特典
• 温泉・お風呂について
• 泉質
• 浴場一覧
• 入浴の手順
• 効果・効能
• 天気予報
• 周辺の観光
• 周辺の施設
• 周辺マップダウンロード
• サイトご利用規約
• 会員規約
• 個人情報保護方針
• 宿泊約款
• 運営会社
• 食事について
• 食事へのこだわり
• 朝食
• 夕食
• ルームサービス
• 予約について
• 空室確認
• fax予約シートダウンロード
• イベント情報
• ニュース
• サイトマップ
• 外国語版（多言語？）
• レンタル品
• アメニティー
• キャンペーン
• スタッフ紹介
• フォトギャラリー
• 料金
• ホテル概要

step3.絶対に不必要なコンテンツを削除する

クライアントに見せるまでもなく不必要だと判断できるコンテンツを削除します。
もっと親切にするのであれば

• [A] 絶対必要
• [B] 必要と思われる
• [C] 要検討
• [D] 多分いらない

などのランク分けをした状態でクライアントにお見せするのもアリです。

step3.コンテンツのカテゴリー分けを行う

重複を消して集めたコンテンツのグルーピングを行います。
人が一瞬で認識できる情報量は5〜7と言われていますので、各グループの中身はなるべく最大でも7つ以内にするとなお良いかと。

step4.サイトマップを制作する

グルーピングが終わったら、それらをクライアントに見せやすい状態に編集します。
弊社ではIllustratorを使用していますが、エクセルやパワーポイントを使用している方も多いかと思います。
最近ではAdobe Experience Designなども使いやすそうです。

実際のサイトマップ

参考までにIllustrator形式のデータも置いておきますので、必要であればダウンロードして自由に使用してください。
A3サイズでの印刷に適した状態です。
また、全てmm単位で整数値で制作しているので、キー入力の単位を1mmにするととても使いやすいです。

> イラストレーター形式でダウンロードする（著作権完全フリー！）

ざっとですが、こんなかんじです。
この方法、めちゃくちゃオススメですが正直めちゃくちゃ面倒くさいです。
初めてなら丸1日ぐらいかかると思います。
ただ、サイト制作において最も重要な箇所であるため、丸1日使うぐらい当然と言えば当然です。
前記で色々応用可能と記載しましたが、実際にこの方法で会社パンフレットのページ割を考えたり、なんなら経営計画書の作成なんかにも使えるかと思います。
以上、冬の手先の谷川でした！