サイトのフローチャート・サイトマップの作り方 & おすすめツール

サイトを新規作成したい、リニューアルしたい!というとき。まずあなたなら何をしますか?

サイトの目的の設定、ペルソナの設定、キャッチの作成、見た目の作成・・。色々とありますが、Webサイトの構成を明確にすることが非常に重要です。

なくてはならない、サイトマップ

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

今回は、そんなサイトマップや導線を考える上で、制作の際のポイントと、便利なおすすめのWebツールについてご紹介しましょう。

もちろん、サイトの目的の設定、ペルソナの設定はこの前に行っておきたいので、下記の記事など参考にしてみてくださいね。

良質なペルソナの作り方と分析手法

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

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

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

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

下記のように、リスト形式でばっと書き出してみるようで十分です。

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

手順2 書き出したページを重要度別に分類する

ページを書き出せたら、重要度を考えて、ページを簡単な手書きフローに起こしてみましょう。ざっくりとでも自分の中に構成の大元ができると、そのあとのサイトマップ起こしがスムーズに進みます。

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

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

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

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

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

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

Bigmacでは、多様なニーズにフィットするために、柔軟に使えるGoogleスプレッドシートを用いています。結局のところ、自分が使いなれたツールで、素早くできるに越したことはないのかな、と思います。

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

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

BigmacでもGoogleスプレッドシートを使って、サイトマップや導線設計書などを作っています。一部参考にご紹介しましょう。(秘密保持のためぼかして使わせていただいております)

 

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

Microsoftパワーポイント

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

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

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

丸や複雑な図形もお手の物。今回は二つ、ご紹介しましょう。

Cacoo

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

無料版ではシートが6枚までの作成となりますが、書き出しもpng形式となり、小規模な案件・サイト向きでしょう。チームでの運用をご検討の場合は、無料期間はありますが、1アカウントのみなら月額454円〜、複数アカウントなら1500円〜の有料プランとなります。

まずは無料でクレジット情報いらずでトライできるので、一番メジャーと言っても過言ではないツールを使ってみましょう。

いくつものテンプレートから選択できます。ここまで網羅されていると、何も困らなさそうですね。

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

SlickPlan

無料でお試し期間はありますが、全て有料プランとなります。まず無料プランで試されたい場合は、最初はクレジットの登録などは必要ありませんので、トライしてみることをおすすめします。

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

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

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

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

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

導線設計書の作り方

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

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

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

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

導線設計書を作る際は、「このときこういうボタンがあったら押したくなりそうだ」「このページからこのページをつなげられれば、迷子になりづらい」など、自分がユーザーの立場にたち、思考することです。

どうしてもサイト作成者側に立つと、「ここにはこうあって当たり前」となりがちです。
ですが、ユーザーは素人さんばかりです。何で迷子になったのか、どうしてそこで問い合わせフォームまで到達しないのか、など考えなくてはいけないことは山ほどあります。

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

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

Webデザイナーがこだわるべき情報設計とは

まとめ

こうして見てみると、サイトを作る前には必要なものがたくさんあり、より多く考えてからサイト制作に踏み込んだ方が、うまくいくことがおわかりいただけたでしょうか。Web情報アーキテクチャは奥が深いですね。

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

このエントリーをはてなブックマークに追加

筆者

Y.Nakatani

二児の母で、Bigmacに入って2年、Web業界は丸7年。デザイン以外は繊細さのかけらもない杜撰さ。 好きな色は浅葱色とか、新橋色とか、シアン系の色味。好きなタグはsectionとolタグ。ほっとくと擬似要素多用。好きなフォントはヒラギノのW0。今一番してみたいことは、語尾にハートマークをつけてみる。

筆者が最近執筆した記事