サイトマップの作り方 & おすすめツール

更新情報をお届けします!

無料会員登録していただくと、
会員限定の特別コンテンツ記事を最後まで
読むことができます!
その他、更新情報・イベント情報を
お届けいたします。

シェア

ツイート

LINEで送る

Pocket

ブックマーク

eyecatch

Webサイトをつくりたい!というとき、まずあなたなら何をしますか?

サイトの目的の設定、見た目の制作など色々とありますが、Webサイトの構成を明確にすることが非常に重要です。

今回はWebサイトの構成図、すなわちサイトマップの作成方法とポイント、作成する上で便利なおすすめのWebツールについてご紹介します。

サイトマップについて

まず始めに、「サイトマップ」というと狭義では、SEO対策としてサーチエンジン向けに作成するXMLサイトマップ、サイトの目次のようなものでユーザー向けに作成するHTMLサイトマップ、この2つを指します。これらはWebサイトを公開する時に作成します。

今回は制作段階で必要なサイトの構成図であるサイトマップについてお話していきます。

最新情報をいち早くお届け!

無料会員登録していただくと、
会員限定の特別コンテンツ記事を最後まで
読むことができます!
その他、更新情報・イベント情報を
お届けいたします。

サイトマップで全体の構成を把握

サイトマップは、主要ページや階層はもちろん、どのページがどのページにリンクするべきかなど、掘り下げていくとそのサイト全体の概要や構成、フローが一目でわかるようになり、なくてはならない存在です。

コンテンツが多くボリュームのあるページ数の場合、必要なページが抜け落ちたり、もしくはページが重複したりすることがあるかもしれません。

なので、サイトマップを作成してサイトの全体構造をしっかり把握しましょう。

サイトマップ作成に入る前に

誰が見てもわかりやすい構成図をつくるため、まずは自分の中での作りたいサイトの規模感を把握しましょう。

手順1 必要ページを書き出してみる

サイトマップ作成に慣れていない人は、まずそのWebサイトに、何が必要なページとなるのか、紙とペンを持ち出して書き出してみましょう。あまり細かなことは気にせず、ざっと書き出してみましょう。

下記のように、必要だと思うページをリスト形式で書き出すだけで十分です。

  • TOP
  • 会社概要
  • 組織図
  • 沿革
  • サービス紹介
  • セミナー参加申込書ダウンロード
  • ユーザーログイン
  • ユーザー情報編集ページ
  • お問い合わせフォーム
  • 申し込みフォーム
  • 個人情報保護方針(個人情報窓口)

どんなページが必要か分からないときは、他社のホームページをチェック してみましょう。

手順2 書き出したページをカテゴリ別に分類する

ページを書き出せたら、今度はそのページをカテゴリー別(意味合いや似た内容のもの)に分類してみましょう。ここでまとまりが見えてくると必要でないページも出てくるかもしれません。重要度を考えて、ページを簡単な手書きフローに起こしてみましょう。

ざっくりとでも自分の中に構成ができると、そのあとのサイトマップ起こしがスムーズに進みます。

手順3 ページの階層を考えてみる

分類したページのまとまりを階層にして、親ページと子ページの関係を作り上げてみましょう。

ここで重要なのは2〜3階層目までくらいにとどめて、階層を深くしすぎないことです。到達したいページまでに何回もリンクをクリックしなくてはいけないようでは、ユーザーの離脱率を高めてしまいます。できるだけ階層は簡略化し、ユーザーが迷子になりにくいページを心がけましょう。

 

さて、ここからは実際にツールを使ってサイトマップや導線を起こしてみましょう。

もちろん、MicrosoftエクセルやGoogleスプレッドシートを使って一から起こしていただいても構いませんが、サイトマップを作ったことがなかったり、雛形をお持ちでないなら、簡単に仕上がるWebツールが巷にはたくさん転がっているので、ぜひ使ってみてくださいね。

もしご自身でサービスを探される場合は、サイトマップで検索すると、XML形式のサーチエンジン向けのものやHTMLのユーザ向けのものが引っかかってしまうので、「サイト構成図」などのキーワードで検索されることをおすすめします。

無料で使えるサイト構成図作成ツール

ページ数が多くても、構成図が簡単に一覧できる無料の作成ツールはたくさんあります!

しかし、各ツールの使い方は覚えるのも大変です。そのため、使い慣れたツールを使うと素早く作業にとりかかることができておすすめです。

Googleスプレッドシート or Microsoftエクセル

GoogleスプレッドシートやMicrosoftエクセルを使えば、無料で、柔軟なサイトマップや導線設計書、サイト構成図ができます。

以下の画像は、Googleスプレッドシートを使って、サイトマップや導線設計書などを作成したファイルです。一部参考にご紹介します。(秘密保持のためぼかしています)

 

ある程度雛形を作っておけば、何度でも作りやすく、ずっと無料なのでとても使いやすいです。デザインにもこだわろうと思えばこだわれますが、ある程度形式的な面があります。

Microsoftパワーポイント

パワーポイントなどでも、Microsoftだと素材やオブジェクトの連携がとりやすいので、おすすめです。自分にあった、より使い勝手が良いツールを選びましょう。

オンラインで使えるWebサイト構成図作成ツール

無料ならもちろん嬉しいけど、多少有料になってでもより手早く、見栄え良くすてきなデザインで作りたいという方には、とっておきのWebツールがあります。

丸や複雑な図形もお手の物。今回は広く使用されている2つのツールをご紹介します。

SlickPlan

SlickPlanの魅力はシンプルな作りで初めての方でも使いやすいところでしょう。無料のお試し期間はありますが、全て有料プランとなります。今すぐサクッと作りたいという方におすすめです。

編集画面はこのような感じです。全て英語表記なのが残念ですが、直感的に使えて見やすい印象です。

Cacoo

Cacoo(カクー)は、オンライン上の作図ツールとして一番メジャーと言っても過言ではないでしょう。オンライン上でサイトマップやワイヤーフレーム、UML、ネットワーク図などの図表を簡単に作成できるオンラインサービスです。共有機能やチャット機能が充実しているのが特徴です。

サイトマップなどのテンプレートも用意されており、パワーポイントに使い慣れた初心者でも簡単に作成できます。

まずは無料でトライできるので、ぜひ試してみることをおすすめします。

なんと10種類以上のカテゴリー別にテンプレートが用意されています。サイトマップの他に様々な図面が作成できます。

サイトマップの中から一つ選択してみると、このようなテンプレートが開かれます。ツールが盛りだくさんで、テンプレート選択を間違わなければ、非常に素早くサイトマップやその他のチャートなども作成できそうです。

 

自分の使いやすいツールでサイトマップを作る際、他の人の作ったサイトマップをみるとビジョンが描きやすくなります。

そんなときは、世界中のデザイナーやクリエイターが集まる「」を覗き見してみるといいでしょう。

Dribbbleでsitemapと検索してみた場合

こんなにもたくさんの他の人の作ったサイト企画書を見られる機会、なかなかないですよね。ぜひ参考にしてみてください。

導線設計書の作り方

次に、導線設計書についてお伝えします。サイトマップだけではどうしてもわからないもの、それが「導線」です。

サイトには「動線」と「導線」の考え方があり、

 

「動線」・・・ユーザーが実際に動く線を表します。

「導線」・・・サイトの運営者がユーザーを導くための線を表します。

 

「導線」を考える上で重要なのが、アクセス解析などによる仮説と検証です。完璧な導線はなかなか難しいですが、これを繰り返すことで、よりよいフローを作り上げることができるでしょう。

導線設計書を作る際は、「ここにお買い得品ボタンがあったら推したくなりそうだ」「各商品詳細ページから類似商品の一覧につなげられれば、商品も探しやすい」など、自分がユーザーの立場になって、思考することです。

ユーザーがなぜ迷子になったのか、どうしてそこで問い合わせフォームまで到達しないのか、など考えなくてはいけないことは山ほどあります。

しかし最初に作る導線設計書はどうしてもリリース前のものですので、完璧ではありません。前述したとおり、仮説と検証を繰り返し、ユーザーに使いやすいサイト作りを心がけましょう。

こちらの記事には、より分析、戦略に特化した内容が記載されています。ぜひご一読ください。

Webデザイナーをする前に必要な情報設計とは

サイトマップ作成にはツールの有効活用がポイント

Webサイトを作成する上で、必要となってくるものはたくさんあります。中でも今回は制作において重要となるサイトマップについてお話しましたが、ツールを有効活用してサイトの構成を共有すると良いでしょう。

サイトマップやフローチャート、サイト設計書作成の際により簡単に、的確に作成できるようご紹介しました。ぜひお役立てください。

更新情報をお届けします!

無料会員登録していただくと、
会員限定の特別コンテンツ記事を最後まで
読むことができます!
その他、更新情報・イベント情報を
お届けいたします。

シェア

ツイート

LINEで送る

Pocket

ブックマーク

CATEGORY :
サイト制作
tree