STEP 5：サイトマップ

サイトマップの役割とは？

作るべきページをすべて洗い出すためです。今後ワイヤーフレームを作る際もこれを参考にして作ります。また、デザイン、コーディングのステップの作業量を確認することもでき、作業分担もしやすくなります。

シングルページとマルチページ

サイトマップを作る前に、これから作る Webサイトの構造を以下のどちらにするか決めましょう。

① シングルページ（1枚完結型）

縦に長い1ページのなかに、プロフィール、サービス内容、お問い合わせなど、すべての情報を詰め込むスタイルです。個人企業のLP（ランディングページ）や、シンプルなポートフォリオサイトによく使われます。

サイトマップの形：トップページが1枚あり、その中に「どんな順番で情報を並べるか」の構成（セクション）を書き出す形になります。

② マルチページ（複数ページ構成型）

トップページを起点に、「会社概要」「ブログ」「お問い合わせ」など、複数のページがリンクで繋がっている一般的なスタイルです。

サイトマップの形：ページ同士のつながりをツリー状に描き出します。

サイトマップの読み方

マルチページの場合、サイトマップは一般的に「ツリー構造（階層構造）」で表現されます。左から右、または上から下に向かって、枝分かれしていく図です。

以下はマルチページのそれぞれの階層の内容例です。

• 第1階層：ホーム（トップページ）
• 第2階層：サービス紹介 ／ 会社概要 ／ お問い合わせ
• 第3階層：個人向けサービス、法人向けサービス（※サービス紹介の下にぶら下がる）

サイトマップの描き方（3ステップ）

実際にサイトマップを作るときは、以下の手順で進めるとスムーズです。

ステップ①
情報を付箋に書き出す（洗い出し）

まずはツリーの形を気にせず、サイトに入れたいキーワードやページ名を、ノートやツール（Miro、FigJam）に思いつく限り書き出します。

ステップ②
グループに分ける（グルーピング）

仲間ごとにグループに分けます。

ステップ③
ツリー状に繋ぐ（構造化）

グループ分けした情報を参考に、ページ階層を作り、その中にグループ分けした情報を入れ込んでいきます。

サイトマップ作成のポイント

サイトマップを新しく一から独自で決めるのは避け、既存のWebサイトをいくつか参考にした上で考えるのが良いです。独創的な構造よりも、世の中のユーザーが見慣れている構造で制作したほうがユーザーも使いやすいです。