物販

初心者にもできるサイトマップのつくり方!参考になるサイトマップデザインを紹介

サイトマップとは、サイト内のコンテンツがリスト形式で一覧表示されているページのことです。書籍で言うところの目次のようなもので、WEBサイトには欠かせないページです。サイトマップのおかげで、ユーザーは目的のページを探しやすくなります。

WEBサイトの中には、ただ情報を羅列するだけのサイトマップも見受けられますが、それではサイトマップ本来の効果を発揮できません。

ここでは、ユーザーに分かりやすく情報を提示するためのサイトマップのつくり方を紹介します。ユーザーフレンドリーなサイトマップは使いやすさと見やすさを兼ね備えています。ぜひ、こちらの記事を読んでサイトマップ作りの参考にしてください。

サイトマップを作るうえで大切なこと

ユーザーの便宜にかなうサイトマップを作るには、押さえておくべきポイントがあります。まずは、サイトマップを作るうえで大切なポイントについて説明します。

コンテンツ数はSEOに影響する

サイトのアクセス数を増やすためには、検索エンジンで上位表示される必要があります(ネットユーザーは検索結果上位に表示されたサイトから閲覧する傾向にあるからです)。そして、WEBサイトは、コンテンツ数が多いほど上位表示されやすくなります。ただし、コンテンツ数さえ多ければよいというわけでもなく、サイトや記事の質も大切です。良質な記事を量産しつつコンテンツ数も増やしていけば上位表示されやすくなり、結果としてアクセス数の増加が見込めるのです。

記事を執筆する上で最もやってはいけないのは、他者が執筆した記事をコピーすることです。コピペ記事は検索エンジンで低評価を受ける可能性が高く、一つの記事が低評価を受けると、その評価はサイト全体に悪影響を及ぼします。

一般に、コンテンツ数の多いサイトではサイトマップを作ることが推奨されています。ただ、コンテンツが少なくても、サイトマップはSEO対策に効果的と言われているので、作っておくことをおすすめします。

WEBサイトの情報量は多いほうがよい

WEB記事においては情報量の制限がないため、情報量が多いほど良いと言われています。

情報量が多くなるとサイトの見た目がごちゃごちゃすると思われがちですが、コンテンツがきちんと整理されていれば特に問題はありません。情報が多すぎてサイトが見にくくなるのは、デザインや導線が整理されていないためです。

多くのユーザーは、たくさんのコンテンツの中から自分に必要な記事だけを選んで読みます。そして、必要とする情報も記事を読む目的もユーザーによって異なることから、情報量が多いほうが多くの人に利用してもらいやすくなるのです。

その多くの情報を整理するためにも、サイトマップは有効です。

必要のない情報は後から消去する

サイトマップを作るときは、少しでも必要な情報はすべて入れましょう。「必要かな」と悩んだときでも、とりあえず入れることです。

WEBサイトの運営においては、あとから情報を追加するよりも既存のものを消去する方が簡単です。そのため、「必要かも」と思うものはすべて取り入れておき、順次必要性を感じないものを消去するようにしましょう。

上記でも説明しましたが、情報量は多いに越したことはないですからね。

サイトマップのつくり方

つづいて、サイトマップのつくり方を説明します。

サイトマップとは

サイトマップとは、サイトの構成をリスト化したものです。ユーザーがサイト上の情報を探すときも、サイトマップを見れば迷わずたどり着けるようになります。

構造がわかりにくいサイトでも、サイトマップがあることでユーザーにとって使いやすいサイトになるわけです。

大規模なサイトにだけ必要なものと思われがちなサイトマップですが、小規模なサイトでも必要ないわけではありません。サイトマップがあれば、クローラー(Web上の情報を探索し回っているロボットのようなもの)にページを気付いてもらいやすくなるからです。おかげでSEO効果にもなります。

サイトマップを作る手順

初めてサイトマップを作る際は、ほかのサイトを参考に作成してみましょう。

【1】サイトに必要なページを書き出す
まずは、サイトに必要なページをすべて書き出します。この時は、必要性に疑問のあるページもとりあえず作成しておきましょう。

<トップページ>
サイトの表紙になるページ

<記事一覧と詳細>
記事の一覧と記事の詳細を見せるページ

<プロフィール>
記事の作者のプロフィール

<ブログの紹介>
ブログの内容や意気込みなど

【2】ページをグループ分けする
書き出したページを、グループ分けしていきます。

この場合、プロフィールとブログの紹介は、内容が似通っていることも多いのでひとまとめにしてしまいましょう。

【3】階層ごとに分ける
ページが複数あるサイトでは、通常トップページを第1階層として、そこから下層ページへと繋がっていきます。また、下層にいけばいくほど情報は詳細になっていきます。

サイトが階層構造になっていることによって、ユーザーは必要な情報を見つけやすくなります。

階層構造になっていないサイトだと必要な情報を探し出すのが難しくなるので、ユーザーが離れてしまう可能性があります。それを避けるためにも、階層構造は非常に重要です。また、階層構造を構築する際は、以下のポイントを意識する必要もあります。

・トップページを第1階層に、ほかのページを第2階層、第3階層に分ける
・下層が下に一列にならないように、枝分かれさせる
・同じ階層のページ同士のつながりも意識する

上記の例の場合、トップページの下層に、記事の一覧と詳細、プロフィール、ブログの紹介が並ぶ形になります。これでサイトマップの完成です。

優先度の高い順に下に並べていくと、サイトマップは作りやすくなります。

ワイヤーフレームのつくり方

つづいて、ワイヤーフレームを作りましょう。

ワイヤーフレームとは

アイヤーフレームとは、簡単に言うと、サイトの設計図のことです。上で説明したサイトマップをもとに、ワイヤーフレームを作っていきます。

ワイヤーフレームを作る手順

ワイヤーフレームのつくり方を説明します。

【1】情報の整理
まずは、サイトに載せる情報をすべて書き出します。トップページやプロフィールはもちろん、広告やバナー画像など、サイトに必要な情報はすべてです。思いつく情報はすべて挙げておきましょう。情報は多いほうがよいので、思いつかない場合はほかのサイトを参考に書き出してみてください。

つづいて、書き出した情報をグループ分けします。上記のサイトマップのつくり方と同じです。例えば、「企業理念」と「営業所一覧」はどちらも会社に関する情報なので同じグループという風に分けていきます。グループ分けは情報の散乱を避けるためにも必要な作業です。

グループ分けが終わったら、情報に優先順位をつけましょう。例えば、コラムサイトならコラム記事の優先順位は高くなります。

サイト名を覚えてもらうためのロゴも重要です。逆に会社概要などの優先順位は低くなります。

このように、サイトのどの部分に注目してもらいたいのかを考えながらランキング付けしてください。

【2】配置を決める
つづいて、レイアウトを考えていきます。

WEBサイトでよく使われているレイアウトは「マルチカラム型」です。ここではマルチカラム型でのレイアウトについて説明します。

<ヘッダー>
WEBページの上部に位置し、サイトのロゴやメニュー、検索フォームなどを配置します。

<コンテンツ>
ユーザーに伝えたい情報を載せます。文章や画像、動画など、サイトのメインとなる部分です。

<フッター>
サイトの下部です。ここにサイトマップを表示します。

<サイドバー>
広告やナビゲーションを掲載します。

【3】ワイヤーフレームを清書する
情報整理とレイアウトが完成したら清書していきます。

この時点では骨組みを決めるだけなので、カラーや画像といった細かいデザインについては考える必要はありません。シンプルに作ることが大切なので、ここでは手書きで作ることをおすすめします。共有するためにパソコンで作るのであれば、ワイヤーフレーム作成ツールもありますが、EXCELでも簡単に作ることができます。

清書するときは、実際にサイトを利用するユーザーの視線を意識しましょう。ユーザーの視線は「Z」または「E」の形に動くといわれています。その視線の動きを意識して配置を決めましょう。そのうえで、ユーザーがどのような流れでページを見て、どのように理解するかを考えると、ワイヤーフレームの組み立てがしやすくなります。

参考になるポートフォリオサイト

クリエイターに欠かせないのがポートフォリオサイトです。ポートフォリオサイトを工夫すれば、自分の作品だけでなく、自分のスキルや経歴、センスを効果的にアピールできます。特にクリエイティブな職種の人は、ポートフォリオサイトは必ず作っておきましょう。

ここでは有名クリエイターのポートフォリオサイトを3つ紹介しますので、自身のポートフォリオサイトを作る際の参考にしてください。

UNDERLINE

フリーランスとしてWEB制作をしている徳田優一さんのサイトです。WEB制作をしているだけあって、シンプルでおしゃれなデザインが目を引きます。このサイトのデザイン自体が「WEB制作」という職業をアピールする広告になっています。

トップページに自身の写真を載せれば、自己PRになるとともに、信頼性を伝えることもできます。ポートフォリオには顔写真を載せたほうが安心感や信頼につながります。必須ではありませんが、可能であれば載せたほうがよいでしょう。

トップページを見ただけでサービス内容や過去の経歴がわかるようになっているのも、ユーザー目線を意識されていることが窺えます。

参考:UNDERLINE

PRESENT

アートディレクター兼デザイナーの宇都宮勝晃さんのサイトです。見せ方にこだわりがあり、エフェクトなど、動きをつけるためのさまざまな手法が使われています。トップページに過去の作品が一覧で表示されており、実績が伝わりやすい作りになっている点もいいですね。

このサイトひとつでデザイナーとしての能力がアピールできています。

参考:PRESENT

S5-Style

アートディレクションやUIデザイン、フロントエンドエンジニアリングなど、様々な分野で活躍されている田渕将吾さんのサイトです。

トップページからしてユーザーの胸をときめかせてくれるつくりになっています。音楽やアニメーションを駆使したつくりで、マウスオーバーで色を変化させたり、徐々に画像を表示させたり、クリックで音が変化したりといった工夫が凝らされています。

参考:S5-Style

参考になるサイトマップデザイン

サイトマップはどうしても偏ったデザインになりがちです。そうならないためには、たくさんのデザインに触れておくことが重要です。

ということで、ここからはサイトマップのデザインをいくつかご紹介しようと思います。サイトマップ作りで行きづまった時は参考にしてみてください。

NTT docomo

NTT docomoは、シンプルなデザインなので、コンテンツを増やしやすくなっています。最も多いパターンのサイトマップと言えるでしょう。

SoftBank・ヤマト運輸

目的や悩み別に項目が振り分けられたサイトマップになっています。情報量の多いサイトでは、目的の情報を見つけやすくなるので、このようなデザインがおすすめです。

参考:SoftBank

参考:ヤマト運輸

郵便局

メニュータイトルに加えて詳細も記載してあるため、利用者が目的の情報にアクセスしやすくなっています。

参考:郵便局

Apple

Appleは製品ごとに見出しが分けられているのが特徴ですね。

参考:Apple

goo

上部に目的別、下部では五十音順に検索ができるように作られています。

参考:goo

KDDI

個人利用者向けと法人利用者向けとで分けられており、それぞれの中で内容が細分化されています。

参考:KDDI

ユーザーに分かりやすいサイトマップを作ろう!

ユーザーの利便性を考えるとサイトマップはあったほうがよいといえます。サイトの全体像をつかむ際にも、目的のコンテンツを探す際にも重宝するからです。

この記事を参考に、ユーザビリティの向上とSEO対策を兼ねたサイトマップを作ってみてください。

無料講座|アクシグ式 最新情報
資金ゼロでネット物販を成功させる全手法


物販ビジネスで稼ぎたいけど、どうやって始めたらいいかわからない、売上が思うように伸びないなど悩んでいませんか?

本講座では世界最新の成功事例を実績をあげた成功者の経験をもとに、

  • 無在庫ネットショップ たった3ヶ月、1商品で 7214万9493円稼いだ方法
  • Amazonとネットショップで毎日39万円稼ぐ方法
  • 毎週19万3588円をInstagramから無料で集客して販売する方法
  • 無料でInstagramのインフルエンサーに商品を宣伝してもらう方法
  • 無在庫ストアで月商1億を超えた方法
  • 店舗せどりで1日1万円稼ぐ方法
  • アマゾンの在庫1パレットを僅か1000円で入手する方法
  • 無在庫ネットショップで儲かる商品を見つける海外の最新リサーチ法
など専門家が独自に入手した、日本ではまだ知られていない秘密の情報をお届けします。

あなたのビジネスを成功させるために、今すぐ限定情報を入手してください。