webディレクターの必須作業!サイトマップの構造と作成方法

どうもこんにちわ和田です。
今回はwebディレクターの業務にて必須作業と言われる「サイトマップ」の作成について書かせて頂きます。

サイトマップはwebサイトを構築する際に、必ず必須のアイテムです。
簡単に説明すると「本で言う目次」的な役割をします。

このサイトマップがないとwebサイトの構造がまとまらず、デザインやコーディングがむちゃくちゃになります。
そこで私が実際に作成したサイトマップを元に構造や作成の手順をご紹介します。

webサイト構築に必要なサイトマップとは?

ではサイトマップについて詳しく説明いたします。
サイトマップは冒頭申し上げましたが、本で言う目次の役割をします。

皆さんがいつも見る企業サイトやネットサービスのwebサイトには必ず存在します。
最近ではサイトマップページが少なくなり、フッター(ページ下部)に設ける事が多くなりました。

サイトマップを作成する意味

サイトマップを作成する意味は大きく2つございます。
まず一つ目が・・・

webサイト作成を円滑に行うアイテム

webサイトを作成する為には、webディレクターだけではなお客様・デザイナー・コーダーなど様々な人が携わります。
みんながチームとなって完成を目指すには、同じ方向性を向く必要があります。

そこでサイトマップが重要となります。

・各ページタイトル、ディスクリプション
・ページ構造
・ページの内容
・クライアント情報
・ドメインの状態
・カスタムフィールドテンプレートの有無

などなど様々なwebサイト作成に関する詳細デートを記載する事で、お互い共通の意識・方向性を確認できます。
ここが疎かになってしまうと、納期が遅れるのはもちろんの事、見た目が良くても集客できないwebサイトとなります。

集客できない理由は、ページ内リンクが行われていない、必要なページがない、TOPデザインに入口がない、タイトルが全ページ同じなど不具合が生じるためです。

 

サイトマップの作り方

それでは具体的にサイトマップを作る方法をご紹介します。
サイトマップを作るには「ヒアリング」「考察」「調査」「想定」など様々な手順が必要となります。

「ヒアリング」「考察」「調査」「想定」が重要

まずはお客様からwebサイト作成に必要な情報をヒアリングします。
ヒアリングした内容を元に作成を行っていくのですが、新人の場合はヒアリングした内容だけで作成しようとします。

しかしお客様の目線だけでサイトマップを構造してしまうと、ユーザー目線の知りたい情報が欠落する可能性があります。
そこで必要な作業が「考察」「調査」「想定」です。

「考察」はwebサイトに訪れたユーザーが欲する情報はどんな情報なのか?その情報を発信するページはどんなタイトルがいいのか?しっかり考察して考えます。
この時に必要なのが、webディレクター自身がユーザー目線で考える事です。

次に「調査」です。これは基本的に集客を狙っているキーワードの1~10位のwebサイトを見て行います。
既に完成及び成功しているライバルサイトをみて必要なページを調査します。

最後が「想定」です。お客様がwebサイトに訪れた場合、どのページをまず最初に見るのか?そして次に欲する情報はどんな情報なのか?ここを想定して構造を決めていきます。
まあwebディレクターあるあるですが、ここでしっかり決めてもお客様からの要望で一気に方向性が変わる事が多々有ります><

webディレクターあるある!現役webディレクターがまとめる

2018.05.15

 

実際に書き起こす

※汚い字ですいません。

こんな感じで必要なページをしっかり把握した上で、まずは手書きでメモ程度に書き出します。
いきなるエクセル等に作成すると修正作業が大変です。ベストはまず書き出してしっかり自分の中で納得して作成しましょう。

主にどんなwebサイトにも必須になるページは以下の通りです。

・HOME(TOPページ)本で言う表表紙にあたります。
・運営者情報(会社概要など)
・サービスページ(商材)
・問合せフォーム(メールにて問合せをもらうため)
・更新ページ(ブログ・お客様の声など)
・強み(コンセプト・特長)

こんな感じかな。
このページに関してはどんな業種業態でもほぼ必須なので、サイトマップには予め入れてしまってもいいかも。

ここで気をつける点!
ページを増やすのは簡単ですが、お客様の予算によって臨機応変に対応する!同じカテゴリ内容の場合、1つのページにまとめてアンカーリンクで誘導も行う。

 

ページ構造をツリー状に考える

※続・汚い字ですいません。

凄い簡単ですが、HOMEを根底にしてどの様に枝葉が分かれていくのかをツリー(木)状にして作成します。
私はこの段階でも手書きが多いですが、ちょくせつエクセルなどで作成するwebディレクターもいます。

ここで気をつける点!
基本的に閲覧ユーザの行動として2クリックまでに目的ページへ辿り着かせましょう。3クリックしないと目的ページに辿り着けない構造は離脱率が増えます。

 

最後にエクセルなどでしっかりサイトマップを清書

これは本当に簡易的なサイトを構築する際のサイトマップです。
ページ数が10~15Pのミニマムwebサイトの場合は1枚で作成可能です。

しかし、ページ数が20P以上になってくるとパワポではなくエクセルで作成する事をオススメします。
理由はパワポはやっぱり使いづらい!エクセルはビジュアル面を制限されますが、やっぱり使いやすい!

ここで気をつける点!
サイトマップの清書は社内だけでなく、お客様にも見て頂きます。その為、バスワード(専門用語)は出来るだけ控えてお客様の「?」を減らす事でスムーズに進みます。

さいごに

webディレクターにとって本当に重要なタスクになりますで、しっかりマスターして下さいね^^

次回はワイヤーフレームの作成を記事にしたいと思います。
ワイヤーフレームはTOPページのデザイン作成時に必須の図面的な役割をします。

またメンレバではwebディレクターに関する様々な記事を公開していますので、あわせて読んでくださいね^^

未経験者のwebディレクターに必要なスキル「あったら喜ばれるスキル」とは

2018.05.14

ABOUTこの記事をかいた人

メンレバ編集長 山下

10代の頃からナンパに明け暮れ、気付けば女遊びだけの人生を今まで送ってきました。記事では様々な女性遍歴から女性を口説く為のトークや流れなどを細かくご紹介して参ります。 口先ではなく、全てはノンフィクション(実話)です。 是非、実戦して下さい。