MENU

2-2.ホームページのサイトマップ作成。コツはこの3つだけ!【ホームページ制作】

アカイです。

ホームページを作成しているときに

・ホームページのページ構成を、どのようにすればいいかわからない。。。
・ホームページ作成中に、ページ追加・差し替えがよく起こり、
 手戻りの頻度に困っている。。。

ということはありませんか?

 

この記事では、

・ページ構成を決める「サイトマップ」とは?
・ホームページの必要ページを漏れなく洗い出すにはどうすればよいか
・サイトマップを上手に作成するコツは何か?

がわかります!

 

過去に8年以上、システム開発プロジェクトを行った私が、サイトマップのコツ・紹介していきます!

サイトマップ作成前の要件とりまとめについては以下の記事で紹介していますので、お先にご覧ください。

https://www.kuroyukiblog.com/webdesign-101requirement-roadmap/

 

目次

1.サイトマップとは?

まずはサイトマップとは何か知りましょう。

 

・サイトマップとは「ウェブページの一覧・階層をあらわしたもの」

サイトマップとは、ホームページなど必要なウェブページとページの階層を視覚化した構成図です。

 

アオイ接骨院の例に出しますと、こちらがホームページのサイトマップとなります。

例えば施術内容のページ下に、腕肩、背中腰などのページがあることがわかります。

 

2.サイトマップに載せるページを、漏れなく洗い出すには?

必要なページを洗い出す方法を解説します。

 

・ページの洗い出しは「ブレインストーミング方式」で

ブレインストーミングとは、アイデアを出し合うための会議手法です。

特定のテーマについて、複数の参加者が自由に意見を交わすことで、

一人では思いつかなかいアイデアを生み出すことを目的としています。

 

・ブレインストーミングでページを洗い出すコツ:質より量で自由に発言する

ブレインストーミングで重要なことは、「質より量」です。

 

アオイ接骨院の例ですと、アオイ接骨院の方(ユーザー)とシステム担当者が集まり、

ユーザーAさん
ユーザーAさん
「当院紹介」のページは絶対いるね。
「手足の施術紹介」もほしいね
ユーザーBさん
ユーザーBさん
システム担当Cさん
システム担当Cさん
「問い合わせページ」とかあってもいいかも
「接骨院以外の活動」も載せてみては?
システム担当Dさん
システム担当Dさん

などなど、どんどん言い出します。

 

アオイ接骨院のページ洗い出しを行なった結果は以下になります。

 

 

出した意見・発言をまとめるおすすめ方法としまして

  • 思いついたページを付箋に書き、壁やボード、広めの机に貼っていく

とよいです。付箋を活用すると、後述のサイトマップ構成が行いやすくなります。

 

3.サイトマップを上手く構成させるには?

必要なページを洗い出したら、ページ同士のつながりや重要度などの構成をまとめます。

サイトマップを上手に構成させるコツは2点あります。

 

・サイトマップを上手に構成させるコツ1:関連のあるページをグループ分けする

関連のあるページを1つのグループとして分けていきます。このときにできたグループを「階層」と呼びます。

 

階層を作ることで、ページの抜け漏れや、階層ごとのバランスがわかりやすくなります。

アオイ接骨院の場合、施術の内容のバランスが悪く、結果的に漏れがあることがわかりました。

 

・サイトマップを上手に構成させるコツ2:階層を2階層以内に収める

階層が深くなると、サイトを利用する人は何度もクリックして目的のページに進まないといけません。

サイトの中で迷子にならないよう、ページ数を絞りなるべく2階層以内に収めるようにしましょう。

 

アオイ接骨院の場合、1階層目に当院紹介、施術内容、トピックス、2階層目にその他ページを置く構成にしました。

 

4.まとめ

・ホームページの必要ページを漏れなく洗い出すには「ブレインストーミング」。
・サイトマップをまとめるコツは「グループ分け」と「2階層ルール」。
 
アカイ
アカイ
次回は、サイトの色を決めるカラースキームについて説明するよ! 
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

三重県四日市に住んでいるブロガー。

お金のムダ遣いに気づき、日々固定費の見直しを行っている今日この頃。

最終的に「FIRE(ファイア:Financial Independence, Retire Early)」を目指し、自由気ままに色々やってます。

プロフィール詳細はこちら。
https://www.kuroyukiblog.com/about-akai/

コメント

コメント一覧 (1件)

【ホームページ制作】コンテンツ設計のロードマップ【要件まとめ】 | 退会させてください。 へ返信する コメントをキャンセル

目次